/* Markdown and HTML editor page only */
html,
body {
	height: 100%;
}

body {
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-top: 60px;
}

/* TOOLBAR */
#toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 2.5rem;
	background: rgba(13, 26, 46, 0.88);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	align-items: center;
}

.toolbar-label {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--green);
}

.seg {
	display: inline-flex;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 3px;
	gap: 2px;
}

.seg button {
	font-family: var(--font);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 7px;
	border: none;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition:
		color 0.2s,
		background 0.2s;
}

.seg button:hover {
	color: var(--text);
}

.seg button.active {
	background: var(--green);
	color: var(--bg);
}

#toolbar .btn-secondary,
#toolbar .btn-primary,
#toolbar select {
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 10px;
	cursor: pointer;
}

#toolbar .btn-primary {
	font-weight: 600;
}

#toolbar select {
	font-family: var(--font);
	font-weight: 500;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--border);
	outline: none;
}

#toolbar select:focus {
	border-color: var(--border-bright);
}

#html-tools {
	display: none;
	align-items: center;
	gap: 12px;
}

body.html-mode #html-tools {
	display: inline-flex;
}

#status {
	font-size: 12px;
	color: var(--green);
	opacity: 0;
	transition: opacity 0.2s;
}

#status.show {
	opacity: 1;
}

#status.bad {
	color: var(--bad);
}

#char-count {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
}

/* PANES */
#main {
	display: flex;
	flex: 1;
	min-height: 0;
	gap: 1rem;
	padding: 1rem 2.5rem 1.5rem;
}

#editor-pane {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#editor,
#preview {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: 14px;
}

#editor {
	display: block;
	resize: none;
	padding: 24px;
	background: rgba(13, 26, 46, 0.82);
	color: var(--text);
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.6;
	outline: none;
	tab-size: 4;
	transition: border-color 0.2s;
}

#editor:focus {
	border-color: var(--border-bright);
}

#editor::placeholder {
	color: var(--muted);
}

#preview {
	padding: 24px;
}

#editor-pane.hidden,
#preview.hidden {
	display: none;
}

/* FORMAT BAR */
#fmtbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 6px;
	background: rgba(13, 26, 46, 0.82);
	border: 1px solid var(--border);
	border-radius: 10px;
}

#fmtbar button {
	min-width: 30px;
	height: 28px;
	padding: 0 8px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
}

#fmtbar button:hover {
	background: var(--green-dim);
	border-color: var(--border-bright);
}

#fmtbar button.mono {
	font-family: var(--mono);
}

#fmtbar .fb {
	font-weight: 700;
}

#fmtbar .fi {
	font-style: italic;
}

#fmtbar .fs {
	text-decoration: line-through;
}

#fmtbar .fu {
	text-decoration: underline;
}

#fmtbar .sep {
	width: 1px;
	height: 18px;
	margin: 0 4px;
	background: var(--border);
}

/* HTML PREVIEW */
#preview.html {
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

#preview.html iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #ffffff;
}

/* GITHUB THEME */
#preview.github {
	background: #0d1117;
	color: #e6edf3;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.github h1,
.github h2 {
	padding-bottom: 0.3em;
	border-bottom: 1px solid #30363d;
	margin: 24px 0 16px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: normal;
}

.github h1 {
	font-size: 2em;
}

.github h2 {
	font-size: 1.5em;
}

.github h3 {
	font-size: 1.25em;
	margin: 20px 0 12px;
	font-weight: 600;
}

.github h4,
.github h5,
.github h6 {
	margin: 16px 0 8px;
	font-weight: 600;
}

.github h1:first-child,
.github h2:first-child {
	margin-top: 0;
}

.github p {
	margin: 0 0 16px;
	line-height: 1.6;
}

.github a {
	color: #58a6ff;
	text-decoration: none;
}

.github a:hover {
	text-decoration: underline;
}

.github code {
	background: #161b22;
	padding: 0.2em 0.4em;
	border-radius: 6px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 85%;
	color: #e6edf3;
}

.github pre {
	background: #161b22;
	border-radius: 6px;
	padding: 16px;
	overflow-x: auto;
	margin: 0 0 16px;
	border: 1px solid #30363d;
}

.github pre code {
	background: none;
	padding: 0;
	font-size: 85%;
}

.github blockquote {
	border-left: 4px solid #30363d;
	padding: 0 16px;
	color: #8b949e;
	margin: 0 0 16px;
}

.github table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 16px;
}

.github th,
.github td {
	border: 1px solid #30363d;
	padding: 6px 13px;
}

.github th {
	background: #161b22;
	font-weight: 600;
}

.github tr:nth-child(even) {
	background: #161b22;
}

.github ul,
.github ol {
	padding-left: 2em;
	margin: 0 0 16px;
}

.github li {
	margin: 4px 0;
}

.github hr {
	border: none;
	border-top: 1px solid #30363d;
	margin: 24px 0;
}

.github img {
	max-width: 100%;
}

.github input[type="checkbox"] {
	margin-right: 4px;
}

/* REDDIT THEME */
#preview.reddit {
	background: #1a1a1b;
	border-color: #343536;
	color: #d7dadc;
	font-family: "Noto Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 21px;
}

.reddit h1,
.reddit h2,
.reddit h3,
.reddit h4,
.reddit h5,
.reddit h6 {
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.25;
	margin: 0 0 8px;
	color: #d7dadc;
}

.reddit h1 {
	font-size: 24px;
}

.reddit h2 {
	font-size: 20px;
}

.reddit h3 {
	font-size: 18px;
}

.reddit h4 {
	font-size: 16px;
}

.reddit h5 {
	font-size: 14px;
}

.reddit h6 {
	font-size: 12px;
}

.reddit p {
	margin: 0 0 10px;
}

.reddit strong {
	font-weight: 700;
}

.reddit a {
	color: #4fbcff;
	text-decoration: none;
}

.reddit a:hover {
	text-decoration: underline;
}

.reddit code {
	background: #272729;
	border: 1px solid #343536;
	padding: 1px 4px;
	border-radius: 3px;
	font-family: "IBM Plex Mono", Consolas, Menlo, monospace;
	font-size: 13px;
	color: #d7dadc;
}

.reddit pre {
	background: #272729;
	border: 1px solid #343536;
	border-radius: 4px;
	padding: 8px 12px;
	overflow-x: auto;
	margin: 0 0 10px;
}

.reddit pre code {
	background: none;
	border: none;
	padding: 0;
}

.reddit blockquote {
	border-left: 4px solid #343536;
	padding: 0 8px 0 12px;
	margin: 0 0 10px 4px;
	color: #d7dadc;
}

.reddit table {
	border-collapse: collapse;
	margin: 0 0 10px;
}

.reddit th,
.reddit td {
	border: 1px solid #343536;
	padding: 4px 10px;
}

.reddit th {
	background: #272729;
	font-weight: 600;
}

.reddit ul,
.reddit ol {
	padding-left: 28px;
	margin: 0 0 10px;
}

.reddit li {
	margin: 2px 0;
}

.reddit hr {
	border: none;
	border-top: 1px solid #343536;
	margin: 14px 0;
}

.reddit img {
	max-width: 100%;
}

.reddit del {
	text-decoration: line-through;
}

.reddit sup {
	font-size: 0.75em;
}

.reddit .spoiler {
	background: #d7dadc;
	color: transparent;
	border-radius: 2px;
	padding: 0 2px;
	cursor: pointer;
	transition:
		color 0.15s,
		background 0.15s;
}

.reddit .spoiler.revealed {
	background: #343536;
	color: #d7dadc;
}

@media (max-width: 640px) {
	#toolbar {
		padding: 10px 1.25rem;
		gap: 8px;
	}
	#main {
		padding: 0.75rem 1.25rem 1rem;
		flex-direction: column;
		gap: 0.75rem;
	}
	#editor,
	#preview {
		padding: 16px;
	}
	#preview.html {
		padding: 0;
	}
	#char-count {
		margin-left: 0;
	}
}