/* notes.css — the Notes articles (blog app publishing engine).
   Kept out of default.css: article typography, figures, code blocks,
   breadcrumbs, group TOCs. */

.container.notes-page {
	max-width: 900px;
}

/* ---- breadcrumbs ---- */
nav.notes-bc {
	font-size: 0.85rem;
	color: #8fa3cc;
	margin-top: 1.2em;
}
nav.notes-bc a {
	color: #aaccff;
	text-decoration: none;
}
nav.notes-bc a:hover {
	text-decoration: underline;
}
nav.notes-bc span {
	margin: 0 0.35em;
	opacity: 0.6;
}

/* ---- index / group lists ---- */
.notes-intro {
	color: #b8c4e0;
	max-width: 42em;
}
section.notes-group {
	margin-bottom: 1.6em;
	border-top: 1px solid #2b1580;
	padding-top: 0.6em;
}
section.notes-group h2 {
	font-size: 1.15rem;
	margin-bottom: 0.4em;
}
section.notes-group h2 a {
	color: #aaccff;
	text-decoration: none;
}
section.notes-group h2 a:hover {
	color: #fff;
	text-decoration: none;
}
.notes-count {
	font-size: 0.8rem;
	color: #7f8db3;
	font-weight: normal;
}
ol.notes-toc {
	list-style-position: outside;
	padding-left: 1.6em;
	max-width: 46em;
}
ol.notes-toc li {
	margin: 0.3em 0;
}
ol.notes-toc a {
	color: #dfe6f5;
	text-decoration: none;
}
ol.notes-toc a:hover {
	color: #fff;
	text-decoration: underline;
}
ol.notes-toc-big li {
	margin: 0.45em 0;
}

.draft-badge {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #7a5c12;
	color: #ffe9a8;
	border-radius: 4px;
	padding: 0.1em 0.5em;
	vertical-align: middle;
}
.review-badge {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #5b3fa8;
	color: #e9dcff;
	border-radius: 4px;
	padding: 0.1em 0.5em;
	vertical-align: middle;
}
.scheduled-badge {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: #1d4e89;
	color: #cfe6ff;
	border-radius: 4px;
	padding: 0.1em 0.5em;
	vertical-align: middle;
}
/* group management (staff): create + inline rename */
.notes-group-create {
	display: inline-flex;
	gap: 0.4em;
	margin-left: 1rem;
	align-items: center;
}
.notes-group-create input {
	width: 11rem;
}
.notes-rename {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.6em;
	font-size: 0.85rem;
}
.notes-rename summary {
	cursor: pointer;
	color: #8f9fc4;
	list-style: none;
}
.notes-rename summary::-webkit-details-marker { display: none; }
.notes-rename-form {
	display: inline-flex;
	gap: 0.4em;
	margin-top: 0.3em;
}
.notes-rename-form input {
	width: 16rem;
}
.note-picture {
	width: 220px;
	max-width: 55%;
	margin: 1em auto 1.3em;   /* match the paragraph rhythm: a blank line
	                             in the source must show as spacing below */
	display: block;
}
.note-picture rect {
	fill: #cfc4ff;
	stroke: #8f7ad9;
	stroke-width: 0.35;
}
.note-picture line {
	stroke: #b0a4ff;
	stroke-width: 0.45;
}
.note-picture text {
	fill: #1a0d55;
	font-size: 4.5px;
	text-anchor: middle;
}

/* ---- article ---- */
article.article-body h1 {
	font-size: 1.6rem;
	margin-top: 1.1em;
	margin-bottom: 0.3em;
}
p.article-meta {
	font-size: 0.85rem;
	color: #8fa3cc;
	margin-bottom: 1.6em;
}
article.article-body {
	line-height: 1.62;
	max-width: 46em;              /* ~74ch measure */
}
article.article-body h2 {
	font-size: 1.25rem;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	color: #cfe0ff;
}
article.article-body h3 {
	font-size: 1.08rem;
	margin-top: 1.3em;
	color: #cfe0ff;
}
article.article-body h4 {
	font-size: 1rem;
	margin-top: 1.1em;
	color: #cfe0ff;
}
article.article-body p {
	margin-bottom: 0.85em;
}
article.article-body a {
	color: #aaccff;
}
article.article-body ul,
article.article-body ol {
	margin-bottom: 0.9em;
}
article.article-body blockquote {
	border-left: 3px solid #2b1580;
	color: #c9d2e8;
}

/* ---- math: give MathJax room ---- */
article.article-body mjx-container {
	outline: none !important;
}
article.article-body .MathJax {
	outline: none;
}

/* ---- figures ---- */
figure.note-fig {
	margin: 1.3em auto;
	text-align: center;
	max-width: 100%;
}
figure.note-fig img {
	max-width: 100%;
	height: auto;
	border: 1px solid #2b1580;
	border-radius: 6px;
	background: #0a0a44;
}
figure.note-fig figcaption {
	font-size: 0.85rem;
	color: #9fb0d4;
	margin-top: 0.5em;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}
figure.note-fig.missing {
	border: 1px dashed #7a5c12;
	border-radius: 6px;
	padding: 0.8em;
	color: #ffe9a8;
	font-size: 0.85rem;
}

/* ---- code blocks (noweb chunks) ---- */
.article-body div.code {
	background: #0d0840;
	border: 1px solid #2b1580;
	border-radius: 6px;
	padding: 0.7em 0.9em;
	margin: 1em 0;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	line-height: 1.45;
	white-space: pre;
	color: #e6ecff;
}
.article-body div.code .code-name {
	display: block;
	font-size: 0.75rem;
	color: #7f8db3;
	border-bottom: 1px solid #2b1580;
	margin: -0.3em -0.4em 0.55em;
	padding: 0.15em 0.4em 0.35em;
	white-space: normal;
}
/* chunk references inside code blocks are links to their definitions */
.article-body div.code a {
	color: #9fd0ff;
	text-decoration: none;
	border-bottom: 1px dotted #5a7fc0;
}
.article-body div.code a:hover {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

.article-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: #1a1460;
	border: 1px solid #2b1580;
	border-radius: 4px;
	padding: 0 0.3em;
}
.chunk-missing {
	color: #ffb0b0;
	font-family: ui-monospace, monospace;
	font-size: 0.85em;
}

/* ---- footnotes (inline marker style) ---- */
span.footnote {
	font-size: 0.85em;
	color: #aebbd8;
	display: inline;
}
span.footnote sup {
	color: #aaccff;
}

/* ---- prev/next ---- */
nav.article-nav {
	margin-top: 2.4em;
	padding-top: 1em;
	border-top: 1px solid #2b1580;
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
	flex-wrap: wrap;
}
nav.article-nav .btn.disabled {
	opacity: 0.35;
}

@media (max-width: 576px) {
	article.article-body {
		max-width: 100%;
	}
	nav.article-nav {
		justify-content: center;
	}
}

/* ---- staff toolbar, edit form, image gallery ---- */
.notes-toolbar {
	display: flex;
	gap: 0.6em;
	align-items: center;
	flex-wrap: wrap;
	margin: -0.6em 0 1.2em;
	padding-bottom: 0.8em;
	border-bottom: 1px dashed #2b1580;
}
.notes-toolbar form {
	margin: 0;
	display: flex;
	gap: 0.4em;
}
.notes-toolbar form.notes-delete {
	margin-left: 1.2em;   /* separate the destructive action */
}
.notes-error {
	color: #ffb0b0;
	background: #40102a;
	border: 1px solid #a04060;
	border-radius: 6px;
	padding: 0.5em 0.8em;
}
.notes-edit-form label {
	display: block;
	margin-top: 0.8em;
	font-size: 0.85rem;
	color: #8fa3cc;
}
.notes-edit-area {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	background: #0d0840;
	color: #e6ecff;
}
.notes-upload-form {
	display: flex;
	gap: 0.8em;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
.images-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 1em;
	margin-top: 1em;
}
figure.image-card {
	margin: 0;
	background: #0d0840;
	border: 1px solid #2b1580;
	border-radius: 6px;
	padding: 0.6em;
	text-align: center;
}
figure.image-card img {
	max-width: 100%;
	max-height: 130px;
}
figure.image-card figcaption {
	font-size: 0.7rem;
	color: #8fa3cc;
	word-break: break-all;
	margin-top: 0.4em;
}