:root {
	--bs-border-radius: 8px;
	--bs-border-color: #e3e5e9;
}
[data-bs-theme="dark"] {
	--bs-border-color: #3a3f45;
}
body {
	margin: 10px;
	font-size: 15px;
	background-color: #f5f6f8;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 20px);
	min-height: calc(100dvh - 20px);
}
[data-bs-theme="dark"] body {
	background-color: #16181b;
}

#title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 2px 12px;
}
#title h1 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
#title-links {
	display: flex;
	align-items: baseline;
	gap: 16px;
}
#title a,
#title .btn-link {
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
	text-decoration: none;
}
#title a:hover,
#title .btn-link:hover {
	color: var(--bs-body-color);
}
#title .btn-link {
	padding: 0;
	border: 0;
}

#layout {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 10px;
}
#panels {
	flex: 0 0 500px;
	min-width: 0;
}
#tree-panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 300px;
	align-self: stretch;
	display: flex;
}
@media (max-width: 1060px) {
	#layout {
		flex-direction: column;
		align-items: stretch;
	}
	#panels {
		flex-basis: auto;
	}
	/* Stacked under the editor there's no leftover height to fill, so size to the tree instead
	   and let the page scroll, rather than scrolling the tree inside a 300px box. */
	#tree-panel {
		flex: 0 0 auto;
	}
}

.card,
.accordion {
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
#editor {
	margin-bottom: 10px;
}
#editor .card-body {
	padding: 12px;
}
#i {
	resize: vertical;
	min-height: 10em;
	font-family: var(--bs-font-monospace);
	font-size: 0.875rem;
	line-height: 1.5;
}
#i-wrap {
	position: relative;
	background-color: var(--bs-body-bg);
	border-radius: var(--bs-border-radius);
}
#i-highlight {
	display: none;
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	font-family: var(--bs-font-monospace);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bs-body-color);
	pointer-events: none;
}
#i-wrap.highlighting #i-highlight {
	display: block;
}
#i-wrap.highlighting #i {
	position: relative;
	background-color: transparent;
	color: transparent;
	caret-color: var(--bs-body-color);
}
#i-wrap.highlighting #i::selection {
	background-color: rgba(13, 110, 253, 0.25);
}
.bracket-match {
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px #6e7781;
	background-color: rgba(110, 119, 129, 0.15);
}
/* Three colors cycling with nesting depth, as in VS Code's bracket pair colors, so every
   depth differs from the ones on either side. */
.bracket-0 {
	color: #a07800;
}
.bracket-1 {
	color: #b5179e;
}
.bracket-2 {
	color: #0b6bcb;
}
[data-bs-theme="dark"] .bracket-0 {
	color: #ffd700;
}
[data-bs-theme="dark"] .bracket-1 {
	color: #da70d6;
}
[data-bs-theme="dark"] .bracket-2 {
	color: #179fff;
}
#i-gutter {
	display: none;
	position: absolute;
	width: var(--gutter-width);
	overflow: hidden;
	font-family: var(--bs-font-monospace);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bs-secondary-color);
	background-color: var(--bs-tertiary-bg);
	border-right: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
	pointer-events: none;
	user-select: none;
}
#i-gutter div {
	position: absolute;
	left: 0;
	right: 0;
	padding-right: 0.75ch;
	text-align: right;
}
#i-wrap.numbered #i-gutter {
	display: block;
}
#i-wrap.numbered #i {
	padding-left: calc(var(--gutter-width) + 0.5rem);
}
/* An inline block as tall as a line, so its offsetTop is the top of the line it starts. */
.line-start {
	display: inline-block;
	width: 0;
	height: 1.5em;
	vertical-align: top;
}
[data-bs-theme="dark"] .bracket-match {
	box-shadow: inset 0 0 0 1px #8b949e;
	background-color: rgba(139, 148, 158, 0.2);
}
/* A shadow rather than a border, so the guide doesn't take up width and shift the text. */
.indent-guide {
	box-shadow: inset 1px 0 0 #d0d7de;
}
[data-bs-theme="dark"] .indent-guide {
	box-shadow: inset 1px 0 0 #3a3f45;
}
.editor-tools {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}
/* On wide screens the right column fills the window with Options and Help pinned to the bottom,
   so they open upward into the space below the editor, then shrink the editor if they need more.
   If they still don't fit, the page scrolls. */
@media not all and (max-width: 1060px) {
	body {
		height: calc(100vh - 20px);
		height: calc(100dvh - 20px);
	}
	#layout {
		min-height: 0;
	}
	#panels {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}
	#editor {
		flex: 0 1 auto;
		min-height: 220px;
	}
	#editor .card-body,
	#i-wrap {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	#i {
		flex: 0 1 auto;
		min-height: 0;
		resize: none;
	}
	#accordion {
		flex: 0 0 auto;
		margin-top: auto;
	}
	#image-goes-here {
		min-height: 0;
	}
}

/* Bootstrap's outline buttons use the same text color in both themes, which is too dim on dark. */
[data-bs-theme="dark"] .btn-outline-secondary {
	--bs-btn-color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .btn-outline-primary {
	--bs-btn-color: #6ea8fe;
	--bs-btn-border-color: #6ea8fe;
}

.accordion-button {
	font-weight: 600;
	padding: 12px 16px;
}
.accordion-button:not(.collapsed) {
	background-color: transparent;
	box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.accordion-body {
	padding: 16px;
}

.option-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.option-row + .option-row {
	margin-top: 12px;
}
.option-label {
	flex: 0 0 130px;
	margin: 0;
	color: var(--bs-secondary-color);
	font-size: 0.875rem;
}
.option-row .form-range {
	flex: 1 1 auto;
}
.option-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.help p {
	font-size: 0.9375rem;
}
.help h3 {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-secondary-color);
	margin: 16px 0 8px;
}
.examples {
	list-style: none;
	padding: 0;
	margin: 0;
}
.key-combos {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.9375rem;
}
.key-combos kbd {
	padding: 1px 5px;
	font-size: 0.75rem;
	color: var(--bs-body-color);
	background-color: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 4px;
}
.key-combos li + li,
.examples li + li {
	margin-top: 4px;
}
.example {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bs-link-color);
	text-align: left;
	font-family: var(--bs-font-monospace);
	font-size: 0.8125rem;
}
.example:hover {
	color: var(--bs-link-hover-color);
}

#image-goes-here {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 24px 56px;
	overflow: auto;
	background: #fff radial-gradient(#dfe2e7 1px, transparent 1px) 0 0 / 16px 16px;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
[data-bs-theme="dark"] #image-goes-here {
	background: #1c1f23 radial-gradient(#363b42 1px, transparent 1px) 0 0 / 16px 16px;
}
@media (max-width: 600px) {
	#image-goes-here {
		padding: 8px 8px 52px;
	}
}
#image-goes-here img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--bs-border-color);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.option-value {
	flex: 0 0 44px;
	text-align: right;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--bs-secondary-color);
}

#tree-footer {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
}
#tree-status {
	min-width: 0;
	min-height: 31px;
	display: flex;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--bs-secondary-color);
}
#tree-status:empty {
	display: none;
}
#tree-status.status-warning,
#tree-status.status-error {
	pointer-events: auto;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid;
}
#tree-status.status-warning {
	color: #8a5a00;
	background: #fff8e6;
	border-color: #f3dca6;
}
#tree-status.status-error {
	color: #b42318;
	background: #fef3f2;
	border-color: #fbd0cc;
}
[data-bs-theme="dark"] #tree-status.status-warning {
	color: #f5c66b;
	background: #2b2311;
	border-color: #5c4a1a;
}
[data-bs-theme="dark"] #tree-status.status-error {
	color: #f97066;
	background: #2d1614;
	border-color: #6b2a24;
}
#tree-actions {
	margin-left: auto;
	flex-shrink: 0;
	display: flex;
	gap: 6px;
	pointer-events: auto;
}
#tree-actions .btn {
	border: 1px solid var(--bs-border-color);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
[data-bs-theme="dark"] #tree-actions .btn {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-bg: var(--bs-secondary-bg);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-bg: var(--bs-secondary-bg);
	--bs-btn-disabled-color: var(--bs-secondary-color);
	--bs-btn-disabled-bg: var(--bs-tertiary-bg);
}
.tree-hint {
	margin: auto;
	max-width: 32em;
	text-align: center;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}