/* AO3 work-skin previewer — its OWN stylesheet. This page links neither
   base.css nor chrome.js on purpose: the preview should look like an AO3
   work (white page, serif prose), not like the app, and the author's skin
   must not fight the site's tokens. The drawer rules below are a copy of the
   `.doc-side*` family from base.css so public/js/components/side-drawer.js
   (pure class-toggling JS) works here unchanged. */

* {
	box-sizing: border-box;
}
:root {
	--ap-bar-h: 46px;
	--r-lg: 8px;
	--r-md: 6px;
	--doc-sticky: var(--ap-bar-h);
	--footbar-h: 0px;
	color-scheme: dark;
	/* ---- dark is the default theme; html[data-theme="light"] below swaps the
	   tokens. Only the previewer's own chrome (bar, drawer, editor) is themed —
	   the AO3 page in the frame keeps AO3's own look. No red text anywhere in
	   this chrome: red survives only as the thin error border and count pill. */
	--ap-bg: #14161a;
	--ap-panel: #1b1e24;
	--ap-line: #2c313a;
	--ap-ink: #e8e8ea;
	--ap-muted: #9aa3ad;
	--ap-accent: #f2f2f2;
	--ap-accent-2: #b9c0c9;
	--ap-hover: #262a32;
	--ap-warn: #e0b33a;
	--ap-err: #d24646;
	--ap-err-bg: #3a1e1e;
	--ap-warn-bg: #3a331a;
	--ap-pill: #2a2e36;
	--ap-code-bg: #0f1115;
	--ap-code-ink: #e6e6e6;
	--ap-caret: #ffffff;
	--ap-sel: #2b3a55;
}
html[data-theme="light"] {
	color-scheme: light;
	--ap-bg: #ffffff;
	--ap-panel: #f7f7f7;
	--ap-line: #d9d9d9;
	--ap-ink: #222;
	--ap-muted: #666;
	--ap-accent: #222;
	--ap-accent-2: #555;
	--ap-hover: #e9e9e9;
	--ap-warn: #8a6d00;
	--ap-err: #a11;
	--ap-err-bg: #f6dcdc;
	--ap-warn-bg: #f4ebc7;
	--ap-pill: #e9e9e9;
	--ap-code-bg: #ffffff;
	--ap-code-ink: #222;
	--ap-caret: #111;
	--ap-sel: #cfe3ff;
}
html,
body {
	margin: 0;
	background: var(--ap-bg);
	color: var(--ap-ink);
	font-family: Georgia, "Times New Roman", serif;
}
.hidden {
	display: none;
}
button {
	font: inherit;
	cursor: pointer;
}

/* ---- the top strip ---- */
.ap-bar {
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--ap-bar-h);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 16px;
	background: var(--ap-panel);
	border-bottom: 1px solid var(--ap-line);
	/* font-family: "Space Grotesk", Verdana, sans-serif; */
	font-size: 0.85rem;
}
.ap-bar .ap-title {
	font-weight: 700;
	color: var(--ap-accent);
	text-decoration: none;
}
.ap-bar a {
	color: var(--ap-muted);
	text-decoration: none;
}
.ap-bar a:hover {
	color: var(--ap-accent);
}
.ap-bar .ap-acts {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
}
.ap-bar label {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--ap-muted);
	user-select: none;
}
.ap-btn {
	border: 1px solid var(--ap-line);
	background: var(--ap-bg);
	color: var(--ap-ink);
	border-radius: var(--r-md);
	padding: 5px 10px;
	font-size: 0.8rem;
}
.ap-btn:disabled {
	opacity: 0.55;
	cursor: default;
}
.ap-btn.ap-save:not(:disabled) {
	border-color: var(--ap-accent);
	color: var(--ap-accent);
	font-weight: 700;
}
.ap-btn.on {
	border-color: var(--ap-accent);
	color: var(--ap-accent);
	background: var(--ap-hover);
	font-weight: 700;
}
.ap-btn:hover {
	border-color: var(--ap-accent-2);
	color: var(--ap-accent);
	background: var(--ap-hover);
}
.ap-bar .ap-kind-label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-right: -2px;
}
/* An instant tooltip for a bar control: no native-title delay. Shows on hover
   and on keyboard focus; the <b> is its title line. */
.ap-tipwrap {
	position: relative;
	display: inline-flex;
}
.ap-tip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	width: max-content;
	max-width: 260px;
	padding: 8px 10px;
	border: 1px solid var(--ap-line);
	border-radius: var(--r-md);
	background: var(--ap-panel);
	color: var(--ap-ink);
	font-size: 0.78rem;
	line-height: 1.35;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-3px);
	transition: opacity 0.08s, transform 0.08s, visibility 0s 0.08s;
}
.ap-tip b {
	display: block;
	font-weight: 700;
	margin-bottom: 3px;
}
.ap-tipwrap:hover .ap-tip,
.ap-tipwrap:focus-within .ap-tip {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.08s, transform 0.08s;
}
select.ap-kind {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 22px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23999'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	cursor: pointer;
}
.ap-btn.ap-icon-btn {
	min-width: 34px;
	padding: 5px 8px;
	font-size: 0.9rem;
	line-height: 1;
}

/* ---- the grid: the work, then the drawer column ---- */
.ap-root {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--doc-side-w, 480px);
	gap: 0;
	align-items: start;
	min-height: calc(100vh - var(--ap-bar-h));
}
.ap-root.side-expanded {
	grid-template-columns: minmax(0, 1fr) min(70vw, 900px);
}
.ap-root.side-closed {
	grid-template-columns: minmax(0, 1fr);
}
.ap-root.side-closed .doc-side {
	display: none;
}

/* ---- the work: the AO3 page in its own frame, full width ---- */
.ap-work {
	position: relative;
	min-width: 0;
	height: calc(100vh - var(--ap-bar-h));
}
/* The element hierarchy while inspecting — a strip pinned to the top of the
   preview column, in the parent page so no skin can restyle it. */
.ap-crumbs {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 5px 10px;
	overflow-x: auto;
	white-space: nowrap;
	background: var(--ap-panel);
	color: var(--ap-ink);
	border-bottom: 1px solid var(--ap-line);
	font: 12px/1.3 Menlo, Consolas, monospace;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.ap-crumbs[hidden] {
	display: none;
}
.ap-crumb {
	all: unset;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--ap-ink);
	opacity: 0.8;
}
.ap-crumb:hover,
.ap-crumb:focus-visible {
	opacity: 1;
	background: var(--ap-hover);
	color: var(--ap-accent);
	outline: none;
}
.ap-crumb.leaf {
	opacity: 1;
	font-weight: 700;
	color: var(--ap-accent);
}
.ap-crumb-sep {
	opacity: 0.45;
	padding: 0 1px;
}
.ap-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}

/* ---- the drawer (copied from base.css so side-drawer.js works) ---- */
.doc-side {
	align-self: stretch;
	position: relative;
	border-left: 1px solid var(--ap-line);
	background: var(--ap-panel);
}
.doc-side-card {
	position: sticky;
	top: var(--doc-sticky);
	height: calc(100vh - var(--doc-sticky));
	max-height: calc(100vh - var(--doc-sticky));
	display: flex;
	flex-direction: column;
	min-height: 0;
	text-align: left;
	padding: 10px 12px 12px 20px; /* room for the grip, which sits on the inner edge */
}
.doc-side-grip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 14px;
	cursor: col-resize;
	touch-action: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.doc-side-grip::before {
	content: "";
	width: 3px;
	height: 42px;
	border-radius: 3px;
	background: var(--ap-line);
	transition:
		background 0.15s ease,
		height 0.15s ease;
}
.doc-side-grip:hover::before,
.doc-side-grip:focus-visible::before,
body.resizing-side .doc-side-grip::before {
	background: var(--ap-accent-2);
	height: 72px;
}
.doc-side-grip:focus-visible {
	outline: 2px solid var(--ap-accent-2);
	outline-offset: -2px;
}
.side-expanded .doc-side-grip {
	display: none; /* the width is fixed while expanded */
}
body.resizing-side {
	user-select: none;
	cursor: col-resize;
}
.doc-side-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: "Space Grotesk", Verdana, sans-serif;
}
.doc-side-head h3 {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.9rem;
	font-weight: 700;
}
/* The drawer's tab bar — after the "Editor Tabs" design: a 40px strip in a
   darker ink than the panel, each tab a mono label with a small glyph, the
   active one lifted to the panel's colour with a 2px accent on top and its
   bottom edge open onto the panel; a count pill when a tab has warnings.
   CSS wears a yellow accent, Work Content an orange one. */
:root {
	--ap-tab-css: #ffd766;
	--ap-tab-work: #f6a13a;
	--ap-tabbar: #141416;
	--ap-tabpanel: #1b1b1e;
	--ap-tab-ink: rgba(255, 255, 255, 0.45);
	--ap-tab-ink-on: #fff;
	--ap-tab-line: rgba(255, 255, 255, 0.09);
	--ap-tab-sep: rgba(255, 255, 255, 0.07);
	--ap-tab-pill: #8a6d1a;
	--ap-tab-pill-ink: #ffd766;
}
html[data-theme="light"] {
	--ap-tabbar: #ececee;
	--ap-tabpanel: #ffffff;
	--ap-tab-ink: rgba(0, 0, 0, 0.5);
	--ap-tab-ink-on: #111;
	--ap-tab-line: rgba(0, 0, 0, 0.12);
	--ap-tab-sep: rgba(0, 0, 0, 0.08);
	--ap-tab-pill: #f3dd8c;
	--ap-tab-pill-ink: #6b4f00;
}
.doc-side-head {
	/* the bar bleeds to the card's edges, above the grip's gutter */
	margin: -10px -12px 0 -20px;
	padding-left: 8px;
	height: 40px;
	background: var(--ap-tabbar);
	border-bottom: 1px solid var(--ap-tab-line);
	align-items: stretch;
	gap: 0;
}
.doc-side-head .ap-issues {
	align-self: center;
	margin-left: 10px;
}
.doc-side-head .ap-icon,
.doc-side-head .doc-side-close {
	align-self: center;
	color: var(--ap-tab-ink);
}
.doc-side-head .doc-side-close {
	margin-right: 6px;
}
.ap-tabs {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	gap: 0;
}
.ap-tab {
	all: unset;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 0 16px;
	margin-bottom: -1px;
	font: 500 12.5px/1 "Inconsolata", "JetBrains Mono", Menlo, Consolas, monospace;
	color: var(--ap-tab-ink);
	background: transparent;
	border-top: 2px solid transparent;
	border-right: 1px solid var(--ap-tab-sep);
	border-bottom: 1px solid var(--ap-tab-line);
	transition: color 0.12s;
}
.ap-tab:hover,
.ap-tab:focus-visible {
	color: var(--ap-tab-ink-on);
}
.ap-tab.on {
	color: var(--ap-tab-ink-on);
	background: var(--ap-tabpanel);
	border-bottom-color: var(--ap-tabpanel);
}
.ap-tab-css.on {
	border-top-color: var(--ap-tab-css);
}
.ap-tab-work.on {
	border-top-color: var(--ap-tab-work);
}
.ap-tab-ico {
	font-size: 11px;
	opacity: 0.7;
}
.ap-tab-n {
	background: var(--ap-tab-pill);
	color: var(--ap-tab-pill-ink);
	font: 600 10px/1.4 "Inconsolata", "JetBrains Mono", Menlo, monospace;
	padding: 1px 6px;
	border-radius: 9px;
}
.ap-tab-n[hidden] {
	display: none;
}
.ap-panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.doc-side-card {
	background: var(--ap-tabpanel);
}
.ap-panel.hidden {
	display: none;
}
.ap-work-panel {
	overflow: auto;
	margin-top: 8px;
	font-family: "Space Grotesk", Verdana, sans-serif;
	font-size: 0.82rem;
}
.ap-work-acts {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.ap-work-note {
	opacity: 0.6;
	font-size: 0.75rem;
}
.ap-work-sec {
	margin: 14px 0 6px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.ap-work-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}
.ap-work-row > label {
	font-weight: 700;
}
.ap-work-row input[type="text"],
.ap-work-row select {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid var(--ap-line);
	border-radius: var(--r-md);
	background: var(--ap-code-bg);
	color: var(--ap-ink);
	font: inherit;
}
.ap-work-row input[type="text"]:focus,
.ap-work-row select:focus {
	outline: 2px solid var(--ap-accent-2);
	outline-offset: -1px;
}
.ap-work-issues {
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--ap-hover);
	color: var(--ap-ink);
}
.ap-work-issues.error {
	background: rgba(255, 82, 82, 0.18);
	color: #ff6b6b;
}
.ap-work-issues.warning {
	background: rgba(255, 196, 0, 0.18);
	color: #e0a800;
}
.ap-work-warn {
	font-size: 0.75rem;
	line-height: 1.35;
	opacity: 0.85;
}
.ap-work-warn .error {
	color: #ff6b6b;
}
.ap-work-warn .warning {
	color: #e0a800;
}
.ap-work-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.ap-work-checks label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 400;
}
.ap-work-code {
	border: 1px solid var(--ap-line);
	border-radius: var(--r-md);
	background: var(--ap-code-bg);
	overflow: hidden;
}
.ap-work-code:focus-within {
	outline: 2px solid var(--ap-accent-2);
	outline-offset: -1px;
}
.doc-side-close,
.ap-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1;
	color: var(--ap-muted);
	border-radius: var(--r-md);
}
.doc-side-close:hover,
.ap-icon:hover {
	background: var(--ap-hover);
	color: var(--ap-ink);
}
.doc-side-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	border: 1px solid var(--ap-line);
	border-right: 0;
	background: var(--ap-panel);
	color: var(--ap-ink);
	border-radius: var(--r-md) 0 0 12px;
	padding: 12px 10px;
	cursor: pointer;
	font-size: 0.85rem;
	font-family: "Space Grotesk", Verdana, sans-serif;
}
.doc-side-tab:hover {
	background: var(--ap-hover);
}
.doc-side-tab.hidden {
	display: none;
}

/* ---- the CSS editor and the lint list ---- */
.ap-issues {
	font-size: 0.72rem;
	color: var(--ap-muted);
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--ap-pill);
}
.ap-issues.has-err {
	background: var(--ap-err-bg);
	color: var(--ap-ink);
}
.ap-issues.has-warn {
	background: var(--ap-warn-bg);
	color: var(--ap-warn);
}
/* ---- the code editor: CodeMirror 6 in a bordered host ----
   editor.js owns everything inside .cm-editor (theme, gutters, tokens); the
   host just gives it a frame and the drawer's remaining height. */
.ap-code {
	position: relative;
	flex: 1 1 auto;
	min-height: 120px;
	margin-top: 8px;
	border: 1px solid var(--ap-line);
	border-radius: var(--r-md);
	background: var(--ap-code-bg);
	overflow: hidden;
}
.ap-code:focus-within {
	outline: 2px solid var(--ap-accent-2);
	outline-offset: -1px;
}
.ap-code .cm-editor {
	height: 100%;
}
/* The grip between the editor and the warnings: drag it (or arrow keys) to
   give the warnings more or less of the drawer; --ap-lint-h on the drawer is
   the number, remembered in localStorage (preview.js). Hidden with the list. */
.ap-split {
	flex: 0 0 12px;
	position: relative;
	cursor: row-resize;
	touch-action: none;
	margin-top: 4px;
}
.ap-split::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 3px;
	transform: translate(-50%, -50%);
	border-radius: 3px;
	background: var(--ap-line);
	transition: width 0.15s, background 0.15s;
}
.ap-split:hover::before,
.ap-split:focus-visible::before,
body.resizing-lint .ap-split::before {
	width: 72px;
	background: var(--ap-accent-2);
}
.ap-split:focus-visible {
	outline: none;
}
.ap-split.hidden {
	display: none;
}
body.resizing-lint {
	cursor: row-resize;
	user-select: none;
}
.ap-lint {
	flex: 0 0 auto;
	height: var(--ap-lint-h, 200px);
	max-height: 70%;
	overflow: auto;
	margin-top: 0;
	font-family: "Space Grotesk", Verdana, sans-serif;
	font-size: 0.78rem;
}
.ap-lint:empty {
	display: none;
}
.ap-lint-row {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	border-left: 3px solid var(--ap-err);
	background: var(--ap-bg);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: 6px 8px;
	margin: 0 0 4px;
	color: var(--ap-ink);
	line-height: 1.35;
}
.ap-lint-row.warning {
	border-left-color: var(--ap-warn);
}
.ap-lint-row:hover {
	background: var(--ap-hover);
}
.ap-lint-row .ln {
	color: var(--ap-muted);
	font-family: "Inconsolata", Menlo, monospace;
	margin-right: 6px;
}
.ap-lint-row code {
	font-family: "Inconsolata", Menlo, monospace;
	color: var(--ap-ink);
	font-weight: 700;
}
.ap-lint-row .why {
	display: block;
	color: var(--ap-muted);
}
.ap-lint-ok {
	color: var(--ap-muted);
	font-family: "Space Grotesk", Verdana, sans-serif;
	font-size: 0.78rem;
	margin-top: 8px;
}

/* ---- phones: the drawer becomes a sheet from the bottom ---- */
@media (max-width: 860px) {
	.ap-root,
	.ap-root.side-expanded {
		grid-template-columns: 1fr;
	}
	.doc-side {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--footbar-h);
		z-index: 60;
		align-self: auto;
		border-left: 0;
		border-top: 1px solid var(--ap-line);
	}
	.doc-side-card {
		position: static;
		height: var(--doc-side-w, 480px);
		max-height: 85vh;
		margin: 0;
		padding: 12px 14px 14px;
	}
	.side-expanded .doc-side-card {
		height: 85vh;
	}
	.doc-side-grip {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 18px;
		cursor: row-resize;
	}
	.doc-side-grip::before {
		width: 44px;
		height: 3px;
	}
	.doc-side-grip:hover::before,
	.doc-side-grip:focus-visible::before,
	body.resizing-side .doc-side-grip::before {
		width: 72px;
		height: 3px;
	}
	body.resizing-side {
		cursor: row-resize;
	}
	.doc-side-head {
		margin-top: 6px;
	}
	.ap-root:not(.side-closed) .ap-work {
		height: calc(100vh - var(--ap-bar-h) - var(--doc-side-w, 480px));
	}
	.doc-side-tab {
		top: auto;
		bottom: 16px;
	}
	.ap-bar {
		gap: 8px;
		font-size: 0.78rem;
	}
}