/* ==========================================================================
   Outcrop default theme
   ==========================================================================
   Served as /t/site.css on every public note page. The look mirrors a
   Minimal-theme Obsidian setup: Google Sans at weight 450, Crimson Pro
   italic titles, compact headings, quiet links, iconless callouts.
   Fonts load from Google Fonts via the head snippet.

   ┌─ DESIGN TOKENS — edit these first ─────────────────────────────────────┐
   │ Most personalization is done right here: fonts, colors, width, radius. │
   │ Font <link> tags live in the head snippet next to this editor.         │
   └────────────────────────────────────────────────────────────────────────┘ */

:root {
	--font-text: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--font-title: "Crimson Pro", Georgia, "Times New Roman", serif;
	--font-weight: 450;
	--bold-weight: 600; /* body weight + 150, the Minimal bold-modifier */
	--max-width: 40rem;

	--bg: #ffffff;
	--fg: #1c1c1c;
	--muted: #6e6e6e;
	--accent: #5ca6f5;
	--accent-hover: #3f8fe6;
	--accent-rgb: 92, 166, 245;
	--code-bg: #f6f6f6;
	--border: #e6e6e6;
	--mark-bg: #fdf0b0;
	--radius: 8px;

	/* Callout colors as r, g, b triplets (used at several opacities). */
	--callout-blue: 8, 109, 221;
	--callout-teal: 0, 150, 137;
	--callout-cyan: 0, 160, 200;
	--callout-green: 8, 185, 78;
	--callout-yellow: 224, 172, 0;
	--callout-orange: 236, 117, 0;
	--callout-red: 233, 49, 71;
	--callout-purple: 120, 82, 238;
	--callout-gray: 120, 122, 132;

	/* Lucide arrow-up-right, stroke matched to --muted per palette. */
	--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 14 14' fill='none' stroke='%236e6e6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");

	color-scheme: light;
}

/* Dark tokens apply when the system prefers dark (unless the visitor picked
   light), and always when the visitor picked dark — the footer theme switcher
   sets data-theme on <html>, persisted per browser by site.js. Keep both
   blocks in sync. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #1e1e1e;
		--fg: #dcdcdc;
		--muted: #9a9a9a;
		--accent: #5ca6f5;
		--accent-hover: #82bcf8;
		--accent-rgb: 92, 166, 245;
		--code-bg: #272727;
		--border: #333333;
		--mark-bg: #4a4413;
		--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 14 14' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #1e1e1e;
	--fg: #dcdcdc;
	--muted: #9a9a9a;
	--accent: #5ca6f5;
	--accent-hover: #82bcf8;
	--accent-rgb: 92, 166, 245;
	--code-bg: #272727;
	--border: #333333;
	--mark-bg: #4a4413;
	--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 14 14' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
	color-scheme: dark;
}

/* ==========================================================================
   Page shell (matches the server template: .note, .note-header, .note-body…)
   ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: var(--font-weight);
	line-height: 1.5;
	/* Google Sans variable-font settings, per the official embed. */
	font-optical-sizing: auto;
	font-variation-settings: "GRAD" 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.note {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 3.5rem 1.25rem 6rem;
}

.note-header {
	margin-bottom: 2rem;
}

/* The note title, set like an h1 of the vault theme. */
.note-title {
	margin: 0 0 0.3rem;
	font-weight: 700;
	font-size: 1.618rem;
	line-height: 1.2;
}

/* The date under the title is hidden — "published" in the footer carries it.
   Delete this rule to bring it back. */
.note-date {
	display: none;
}

/* Footer: the metadata block (powered-by, theme switcher, permalink, created
   date). Everything muted, borderless, quiet — the whole block sits at 65%
   opacity and wakes up on hover. */
.note-footer {
	margin-top: 6rem;
	color: var(--muted);
	font-size: 0.85rem;
	opacity: 0.65;
	transition: opacity 200ms ease;
}

.note-footer:hover {
	opacity: 1;
}

/* Footer links: no underlines — every link carries a Lucide arrow-up-right,
   sized to match the text (viewBox cropped to the glyph). */
.note-footer a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: opacity 120ms ease;
}

.note-footer a:hover {
	opacity: 0.7;
}

.note-footer a::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.25em;
	background: var(--icon-external) no-repeat center / contain;
}

.note-details {
	border-collapse: collapse;
}

.note-details th, .note-details td {
	border: none;
	padding: 0.5em 0;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
	font-weight: var(--font-weight);
	color: var(--muted);
}

.note-details th {
	text-transform: lowercase;
	min-width: 8.5rem;
	padding-right: 2.5em;
	white-space: nowrap;
}

/* Theme switcher: bare text options. The active one gets a small dot that
   slides in from the right and settles left of the label. Dots live in a
   gutter so labels stay put — no layout shift, no backgrounds. */
.theme-switch {
	display: inline-flex;
	gap: 1.4em;
	margin-left: calc(-5px - 0.45em); /* dot gutter — labels align with the value column */
}

.theme-pill {
	font: inherit;
	color: var(--muted);
	background: none;
	border: none;
	padding: 0.15em 0;
	cursor: pointer;
	transition: color 150ms ease;
}

.theme-pill::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 0.45em;
	vertical-align: middle;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.theme-pill:hover {
	color: var(--fg);
}

.theme-pill[aria-pressed="true"] {
	color: var(--fg);
}

.theme-pill[aria-pressed="true"]::before {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.note-footer, .theme-pill, .theme-pill::before {
		transition: none;
	}
}

/* ==========================================================================
   Typography — compact scale: headings sit close to body size, bold at 700
   ========================================================================== */

/* Headings follow the vault theme "Baseline" (Style Settings values). */
.note-body h1, .note-body h2, .note-body h3,
.note-body h4, .note-body h5, .note-body h6 {
	margin: 1.75rem 0 0.4em;
	line-height: 1.3;
	color: #333333;
	scroll-margin-top: 1.5rem;
}

.note-body h1 { font-size: 1.618em; font-weight: 700; }
.note-body h2 { font-size: 1.462em; font-weight: 650; }
.note-body h3 { font-size: 1.318em; font-weight: 600; }
.note-body h4 { font-size: 1.188em; font-weight: 600; }
.note-body h5 { font-size: 1.076em; font-weight: 600; }
.note-body h6 { font-size: 1em; font-weight: 600; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .note-body :is(h1, h2, h3, h4, h5, h6) { color: #dddddd; }
}
:root[data-theme="dark"] .note-body :is(h1, h2, h3, h4, h5, h6) { color: #dddddd; }

.note-body p {
	margin: 0 0 0.9em;
}

strong, b {
	font-weight: var(--bold-weight);
}

/* Links read as normal text with a thin muted underline (drawn as a
   border-bottom, which also gives the slight offset from the baseline). */
.note-body a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--muted);
	transition: opacity 120ms ease;
}

.note-body a:hover {
	opacity: 0.7; /* links never change color on hover — only opacity */
}

/* Per-note style variants: set share_class in a note's frontmatter and the
   classes land on a wrapper inside .note-body. `justify` ships by default —
   define your own variants alongside it. */
.note-body .justify {
	text-align: justify;
	hyphens: auto;
}

/* Wikilinks whose targets aren't shared (when "styled non-link" is chosen). */
.unshared-link {
	border-bottom: 1px dotted var(--muted);
	cursor: default;
}

mark {
	background: var(--mark-bg);
	color: inherit;
	padding: 0 0.15em;
	border-radius: 3px;
}

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

/* Heading anchor links added by site.js */
/* Extra specificity so this beats .note-body a's underline without !important. */
.note-body a.heading-anchor {
	margin-left: 0.35em;
	opacity: 0;
	font-weight: 400;
	text-decoration: none;
	border-bottom: none;
}

h1:hover .heading-anchor, h2:hover .heading-anchor, h3:hover .heading-anchor,
h4:hover .heading-anchor, h5:hover .heading-anchor, h6:hover .heading-anchor {
	opacity: 0.7;
}

/* ==========================================================================
   Lists & tasks
   ========================================================================== */

.note-body ul, .note-body ol {
	padding-left: 1.5em;
	margin: 0 0 0.5em;
}

.note-body li {
	margin: 0.35em 0 0;
}

.note-body li::marker {
	color: var(--muted);
}

ul.contains-task-list {
	list-style: none;
	padding-left: 0.4em;
}

.task-list-item {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
}

.task-list-item-checkbox {
	appearance: none;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	transform: translateY(0.15em);
	border: 1.5px solid var(--muted);
	border-radius: 4px;
	margin: 0;
	position: relative;
}

.task-list-item-checkbox:checked {
	background: var(--accent);
	border-color: var(--accent);
}

.task-list-item-checkbox:checked::after {
	content: "";
	position: absolute;
	inset: 1px 3px 3px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0.85);
}

.task-list-item.is-checked > *:not(.task-list-item-checkbox),
li[data-task="x"] {
	color: var(--muted);
}

/* ==========================================================================
   Code
   ========================================================================== */

code {
	font-family: var(--font-mono);
	font-size: 0.85em;
	background: var(--code-bg);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}

pre {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1em 1.1em;
	overflow-x: auto;
	line-height: 1.55;
	margin: 0 0 1em;
}

pre code {
	background: none;
	padding: 0;
	font-size: 0.85rem;
}

/* Prism token colors (Obsidian highlights code with Prism classes). */
.token.comment, .token.prolog, .token.cdata { color: #8b949e; }
.token.keyword, .token.tag, .token.important { color: #cf5680; }
.token.string, .token.char, .token.attr-value { color: #2f8f5b; }
.token.function, .token.class-name { color: #8250df; }
.token.number, .token.boolean, .token.constant { color: #0969da; }
.token.operator, .token.punctuation { color: var(--muted); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .token.keyword, :root:not([data-theme="light"]) .token.tag, :root:not([data-theme="light"]) .token.important { color: #ff7b9d; }
	:root:not([data-theme="light"]) .token.string, :root:not([data-theme="light"]) .token.char, :root:not([data-theme="light"]) .token.attr-value { color: #7ee2a8; }
	:root:not([data-theme="light"]) .token.function, :root:not([data-theme="light"]) .token.class-name { color: #c9a6ff; }
	:root:not([data-theme="light"]) .token.number, :root:not([data-theme="light"]) .token.boolean, :root:not([data-theme="light"]) .token.constant { color: #79b8ff; }
}

:root[data-theme="dark"] .token.keyword, :root[data-theme="dark"] .token.tag, :root[data-theme="dark"] .token.important { color: #ff7b9d; }
:root[data-theme="dark"] .token.string, :root[data-theme="dark"] .token.char, :root[data-theme="dark"] .token.attr-value { color: #7ee2a8; }
:root[data-theme="dark"] .token.function, :root[data-theme="dark"] .token.class-name { color: #c9a6ff; }
:root[data-theme="dark"] .token.number, :root[data-theme="dark"] .token.boolean, :root[data-theme="dark"] .token.constant { color: #79b8ff; }

/* ==========================================================================
   Quotes, callouts & embeds
   ========================================================================== */

blockquote {
	margin: 0 0 1em;
	padding: 0.1em 0 0.1em 1em;
	border-left: 0.15em solid var(--accent);
	font-style: italic;
	font-weight: 500;
	color: var(--fg);
}

/* Callouts: soft tint, thin border in the callout color, no icon —
   the title alone carries the color. */
.callout {
	--callout-rgb: var(--callout-blue);
	border: 1px solid rgba(var(--callout-rgb), 0.2);
	background: rgba(var(--callout-rgb), 0.06);
	border-radius: var(--radius);
	padding: 1em;
	margin: 0 0 1em;
}

.callout[data-callout="abstract"], .callout[data-callout="summary"],
.callout[data-callout="tldr"] { --callout-rgb: var(--callout-teal); }
.callout[data-callout="tip"], .callout[data-callout="hint"],
.callout[data-callout="important"] { --callout-rgb: var(--callout-cyan); }
.callout[data-callout="success"], .callout[data-callout="check"],
.callout[data-callout="done"] { --callout-rgb: var(--callout-green); }
.callout[data-callout="question"], .callout[data-callout="help"],
.callout[data-callout="faq"] { --callout-rgb: var(--callout-yellow); }
.callout[data-callout="warning"], .callout[data-callout="caution"],
.callout[data-callout="attention"] { --callout-rgb: var(--callout-orange); }
.callout[data-callout="failure"], .callout[data-callout="fail"],
.callout[data-callout="missing"], .callout[data-callout="danger"],
.callout[data-callout="error"], .callout[data-callout="bug"] { --callout-rgb: var(--callout-red); }
.callout[data-callout="example"] { --callout-rgb: var(--callout-purple); }
.callout[data-callout="quote"], .callout[data-callout="cite"] { --callout-rgb: var(--callout-gray); }

.callout-icon {
	display: none;
}

.callout-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0;
	font-weight: 600;
	font-size: 1em;
	line-height: 1;
	color: rgb(var(--callout-rgb));
}

.callout-content {
	padding-top: 0.35em;
}

.callout-content > :first-child { margin-top: 0; }
.callout-content > :last-child { margin-bottom: 0; }

/* Note embeds (![[Other note]]) */
.markdown-embed {
	border-left: 2px solid var(--border);
	padding: 0.25rem 0 0.25rem 1rem;
	margin: 0 0 1em;
}

/* ==========================================================================
   Tables — no vertical grid: strong header rule, light row separators
   ========================================================================== */

/* Tables span the full line width, like --table-width: 100% in the vault. */
.note-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1em;
}

/* The plugin wraps each table in a .table-wrap — wide tables scroll inside
   it instead of shrinking the table to fit or breaking the page. */
.note-body .table-wrap {
	overflow-x: auto;
}

.note-body th, .note-body td {
	padding: 0.5em 0.85em;
	text-align: left;
}

.note-body thead th {
	font-weight: 600;
}

.note-body input.ptb-cbx { cursor: pointer; }

/* Column alignment from the Markdown table (:---: / ---:) */
.note-body :is(th, td)[align="center"] { text-align: center; }
.note-body :is(th, td)[align="right"] { text-align: right; }
.note-body :is(th, td)[align="center"] img { margin-inline: auto; }
.note-body :is(th, td)[align="right"] img { margin-inline-start: auto; }

/* ==========================================================================
   Images & media
   ========================================================================== */

.note-body img, .note-body video {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.note-body audio {
	width: 100%;
}

/* Image alignment (Publify), keywords of Power Edit:
   ![[img.webp|155]]<!--al:wrap-right-->   text flows beside the image
   <!--al:center-->, <!--al:right-->        image on its own line, aligned */
.note-body img.po-al-wrap-right {
	float: right;
	clear: right;
	margin: 0.3em 0 0.75em 1.5em;
	max-width: 50%;
}

.note-body img.po-al-wrap-left {
	float: left;
	clear: left;
	margin: 0.3em 1.5em 0.75em 0;
	max-width: 50%;
}

.note-body img.po-al-center {
	display: block;
	margin: 1em auto;
}

.note-body img.po-al-right {
	display: block;
	margin: 1em 0 1em auto;
}

.note-body img.po-al-wrap-block {
	display: block;
	float: none;
	margin: 1em auto;
}

.note-body img.po-al-align-left {
	display: block;
	margin: 1em auto 1em 0;
}

.note-body img.po-al-align-right {
	display: block;
	margin: 1em 0 1em auto;
}

/* Text alignment and indent (Power Edit: <!--al:center-->, <!--in:2-->) */
.note-body .po-ta-center { text-align: center; }
.note-body .po-ta-right { text-align: right; }
.note-body .po-line { display: block; }
.note-body li > :is(ul, ol) { text-align: start; }
.note-body :is(h1, h2, h3, h4, h5, h6, hr, table, pre, .table-wrap) { clear: both; }

.note-body .po-in-1 { padding-inline-start: 2.25em; }
.note-body .po-in-2 { padding-inline-start: 4.5em; }
.note-body .po-in-3 { padding-inline-start: 6.75em; }
.note-body .po-in-4 { padding-inline-start: 9em; }
.note-body .po-in-5 { padding-inline-start: 11.25em; }
.note-body .po-in-6 { padding-inline-start: 13.5em; }
.note-body .po-in-7 { padding-inline-start: 15.75em; }
.note-body .po-in-8 { padding-inline-start: 18em; }
.note-body .po-in-9 { padding-inline-start: 20.25em; }
.note-body .po-in-10 { padding-inline-start: 22.5em; }
.note-body .po-in-11 { padding-inline-start: 24.75em; }
.note-body .po-in-12 { padding-inline-start: 27em; }

.note-body::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 480px) {
	.note-body img.po-al-wrap-right,
	.note-body img.po-al-wrap-left {
		float: none;
		display: block;
		margin: 1em auto;
	}
}

.mermaid svg, .note-body svg {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Tags, footnotes, misc
   ========================================================================== */

.tag {
	display: inline-block;
	background: rgba(var(--accent-rgb), 0.1);
	color: var(--accent);
	border-radius: 999px;
	padding: 0.05em 0.7em;
	font-size: 0.85em;
}

.footnotes {
	font-size: 0.9em;
	color: var(--muted);
}

sup.footnote-ref a, .footnote-backref {
	text-decoration: none;
}

/* ==========================================================================
   Unlock page (passcode-protected notes) & 404
   ========================================================================== */

.unlock-form {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	max-width: 22rem;
}

.unlock-hint {
	color: var(--muted);
	margin: 0;
}

.unlock-error {
	color: rgb(var(--callout-red));
	margin: 0;
}

.unlock-input,
.unlock-button {
	font: inherit;
	padding: 0.55rem 0.8rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.unlock-input {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-mono);
}

.unlock-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: transparent;
}

.unlock-button {
	background: var(--accent);
	color: #fff;
	border-color: transparent;
	cursor: pointer;
	font-weight: 600;
}

.unlock-button:hover {
	background: var(--accent-hover);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 600px) {
	.note { padding: 2.25rem 1.1rem 4rem; }
}

/* ==========================================================================
   Power Table (tables formatted with the author's table plugin)
   Rules ported from Power Table 1.1.3 styles.css, scoped to .note-body.
   ========================================================================== */

.note-body table {
	--text-normal: var(--fg);
	--text-faint: var(--muted);
	--background-secondary: var(--code-bg);
	--color-red: #e93147;
	--color-orange: #ec7500;
	--color-yellow: #e0ac00;
	--color-green: #08b94e;
	--color-blue: #086ddd;
	--color-purple: #7852ee;
}

/* Coloured cells keep readable text in dark mode too. */
.note-body :is(td, th)[style*="background"] { color: #1c1c1c; }

.note-body table.ptb-t-striped tbody tr:nth-child(even) > td {
	background-color: var(--background-secondary);
}
.note-body table.ptb-t-headerfill th {
	background-color: var(--ptb-header-fill, #E3F0FC);
}
.note-body table.ptb-t-compact td,
.note-body table.ptb-t-compact th {
	padding-top: 1px;
	padding-bottom: 1px;
}
.note-body :where(table.ptb-drawn) > tbody > tr:where(:not(:last-child)) > :is(td, th),
.note-body :where(table.ptb-drawn) > thead:where(:not(:only-child)) > tr > th {
	border-bottom-style: none;
}
.note-body :where(table.ptb-drawn) > :is(thead, tbody) > tr > :is(td, th):where(:not(:last-child)) {
	border-right-style: none;
}
:where(.note-body) table.ptb-t-gridless :is(td, th) {
	border-style: none;
}
.note-body :is(td, th)[data-ptb-b*="x"] {
	border-style: hidden;
}
.note-body :is(td, th)[data-ptb-b*="1"] {
	border-top-style: hidden;
}
.note-body :is(td, th)[data-ptb-b*="2"] {
	border-bottom-style: hidden;
}
.note-body :is(td, th)[data-ptb-b*="3"] {
	border-left-style: hidden;
}
.note-body :is(td, th)[data-ptb-b*="4"] {
	border-right-style: hidden;
}
.note-body :is(td, th)[data-ptb-b*="t"] {
	border-top: 1px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="b"] {
	border-bottom: 1px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="l"] {
	border-left: 1px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="r"] {
	border-right: 1px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="T"] {
	border-top: 2.5px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="B"] {
	border-bottom: 2.5px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="L"] {
	border-left: 2.5px solid var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="R"] {
	border-right: 2.5px solid var(--text-normal);
}
span.ptb-hl {
	border-radius: 3px;
	padding: 0 3px;
	
}
input.ptb-cbx {
	width: 14px;
	height: 14px;
	margin: 0 5px 0 0;
	vertical-align: middle;
	accent-color: var(--interactive-accent);
	cursor: pointer;
}
.note-body :is(td, th)[data-ptb-b*="=t"] {
	border-top: 3px double var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="=b"] {
	border-bottom: 3px double var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="=l"] {
	border-left: 3px double var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="=r"] {
	border-right: 3px double var(--text-normal);
}
.note-body :is(td, th)[data-ptb-b*="~t"] { border-top-style: dashed; }
.note-body :is(td, th)[data-ptb-b*="~b"] { border-bottom-style: dashed; }
.note-body :is(td, th)[data-ptb-b*="~l"] { border-left-style: dashed; }
.note-body :is(td, th)[data-ptb-b*="~r"] { border-right-style: dashed; }
.note-body :is(td, th)[data-ptb-b*=".t"] { border-top-style: dotted; }
.note-body :is(td, th)[data-ptb-b*=".b"] { border-bottom-style: dotted; }
.note-body :is(td, th)[data-ptb-b*=".l"] { border-left-style: dotted; }
.note-body :is(td, th)[data-ptb-b*=".r"] { border-right-style: dotted; }
.note-body :is(td, th)[data-ptb-bc~="t:red"] { border-top-color: var(--color-red, #e93147); }
.note-body :is(td, th)[data-ptb-bc~="b:red"] { border-bottom-color: var(--color-red, #e93147); }
.note-body :is(td, th)[data-ptb-bc~="l:red"] { border-left-color: var(--color-red, #e93147); }
.note-body :is(td, th)[data-ptb-bc~="r:red"] { border-right-color: var(--color-red, #e93147); }
.note-body :is(td, th)[data-ptb-bc~="t:orange"] { border-top-color: var(--color-orange, #ec7500); }
.note-body :is(td, th)[data-ptb-bc~="b:orange"] { border-bottom-color: var(--color-orange, #ec7500); }
.note-body :is(td, th)[data-ptb-bc~="l:orange"] { border-left-color: var(--color-orange, #ec7500); }
.note-body :is(td, th)[data-ptb-bc~="r:orange"] { border-right-color: var(--color-orange, #ec7500); }
.note-body :is(td, th)[data-ptb-bc~="t:yellow"] { border-top-color: var(--color-yellow, #e0ac00); }
.note-body :is(td, th)[data-ptb-bc~="b:yellow"] { border-bottom-color: var(--color-yellow, #e0ac00); }
.note-body :is(td, th)[data-ptb-bc~="l:yellow"] { border-left-color: var(--color-yellow, #e0ac00); }
.note-body :is(td, th)[data-ptb-bc~="r:yellow"] { border-right-color: var(--color-yellow, #e0ac00); }
.note-body :is(td, th)[data-ptb-bc~="t:green"] { border-top-color: var(--color-green, #08b94e); }
.note-body :is(td, th)[data-ptb-bc~="b:green"] { border-bottom-color: var(--color-green, #08b94e); }
.note-body :is(td, th)[data-ptb-bc~="l:green"] { border-left-color: var(--color-green, #08b94e); }
.note-body :is(td, th)[data-ptb-bc~="r:green"] { border-right-color: var(--color-green, #08b94e); }
.note-body :is(td, th)[data-ptb-bc~="t:blue"] { border-top-color: var(--color-blue, #086ddd); }
.note-body :is(td, th)[data-ptb-bc~="b:blue"] { border-bottom-color: var(--color-blue, #086ddd); }
.note-body :is(td, th)[data-ptb-bc~="l:blue"] { border-left-color: var(--color-blue, #086ddd); }
.note-body :is(td, th)[data-ptb-bc~="r:blue"] { border-right-color: var(--color-blue, #086ddd); }
.note-body :is(td, th)[data-ptb-bc~="t:purple"] { border-top-color: var(--color-purple, #7852ee); }
.note-body :is(td, th)[data-ptb-bc~="b:purple"] { border-bottom-color: var(--color-purple, #7852ee); }
.note-body :is(td, th)[data-ptb-bc~="l:purple"] { border-left-color: var(--color-purple, #7852ee); }
.note-body :is(td, th)[data-ptb-bc~="r:purple"] { border-right-color: var(--color-purple, #7852ee); }
.note-body :is(td, th)[data-ptb-bc~="t:grey"] { border-top-color: var(--text-faint); }
.note-body :is(td, th)[data-ptb-bc~="b:grey"] { border-bottom-color: var(--text-faint); }
.note-body :is(td, th)[data-ptb-bc~="l:grey"] { border-left-color: var(--text-faint); }
.note-body :is(td, th)[data-ptb-bc~="r:grey"] { border-right-color: var(--text-faint); }

/* Tables with drawn borders start from a full light grid (Power Table
   then removes/overrides single edges). */
:where(.note-body table.ptb-drawn) :is(td, th) {
	border: 1px solid var(--border);
}
:where(.note-body table.ptb-drawn) {
	border-collapse: collapse;
}
.note-body table td img { display: block; }

/* Click-to-enlarge images: a modal card above the page, not a new "page" */
.note-body img { cursor: zoom-in; }
.note-body a img { cursor: pointer; }
.po-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(20, 20, 24, 0.55);
	backdrop-filter: blur(2px);
}
.po-lightbox-card {
	position: relative;
	max-width: min(92vw, 1100px);
	max-height: 88vh;
	padding: 0.75rem;
	border-radius: 14px;
	background: var(--bg, #fff);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
	display: flex;
}
.po-lightbox-card img {
	display: block;
	max-width: 100%;
	max-height: calc(88vh - 1.5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	cursor: default;
}
.po-lightbox-close {
	position: absolute;
	top: -0.9rem;
	right: -0.9rem;
	width: 2.1rem;
	height: 2.1rem;
	border: 0;
	border-radius: 50%;
	background: var(--fg, #222);
	color: var(--bg, #fff);
	font: inherit;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Rounded outer corners for tables with drawn borders */
.note-body table.ptb-drawn { border-collapse: separate; border-spacing: 0; }
.note-body table.ptb-drawn > :first-child > tr:first-child > :is(th, td):first-child { border-top-left-radius: 8px; }
.note-body table.ptb-drawn > :first-child > tr:first-child > :is(th, td):last-child { border-top-right-radius: 8px; }
.note-body table.ptb-drawn > :last-child > tr:last-child > :is(th, td):first-child { border-bottom-left-radius: 8px; }
.note-body table.ptb-drawn > :last-child > tr:last-child > :is(th, td):last-child { border-bottom-right-radius: 8px; }

/* Downloadable attachments (zip, docx, txt …) */
.note-body a.po-file {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	max-width: 100%;
	margin: 0.2em 0;
	padding: 0.45em 0.8em;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--code-bg);
	color: var(--fg);
	text-decoration: none;
}
.note-body a.po-file:hover { border-color: var(--muted); }
.note-body a.po-file .po-file-name { overflow-wrap: anywhere; }
.note-body a.po-file .po-file-size { color: var(--muted); font-size: 0.85em; white-space: nowrap; }

/* No "Powered by" credit line in the page footer */
.note-details tr:has(.powered-by) { display: none; }
.note-details .powered-by { display: none; }