/* The postal / newspaper design shared by the Portal, Docs and NuGet sites: the --ss-* palette of the winter
   (light) and sunset (dark) themes, the page chrome (notice tape, header, logo, language and theme switches,
   burger, footer, drawer, cookie tape), the page primitives, prose with the code viewer and highlight.js
   colours, and the common form, table, alert and modal components.

   Each site serves this file as its own ~/css/postal.css (a linked static web asset, see the site's csproj),
   after its site.css and before its own stylesheet, which adds the site-only rules. Plain CSS outside any
   cascade layer, so it wins over the layered Tailwind and DaisyUI rules of site.css. Only --ss-* variables:
   the NuGet site has neither Tailwind nor the shared tokens.css. */

/* ---- Design-system variables: light (winter / default) ---- */
:root,
[data-theme="winter"] {
	--ss-paper: #ece2c9;
	--ss-paper-2: #e3d6b6;
	--ss-paper-3: #d7c69e;
	--ss-stamp: #f7eed4;
	--ss-stamp-2: #fcf6e3;
	/* The "stamp" identity comes from the perforated edge + printed frame + lift
	   shadow, NOT from a fixed colour, so the paper follows the theme: a light warm
	   paper that sits above the beige page here, and a raised dark surface (lighter
	   than the dark page) in the sunset theme. The frame token draws the inner
	   printed border line. */
	--ss-stamp-paper: #fdfaf2;
	--ss-stamp-shadow: 0 6px 14px rgba(74, 54, 28, 0.28);
	--ss-stamp-frame: rgba(58, 46, 34, 0.32);
	--ss-ink: #1a1410;
	--ss-ink-2: #3a2e22;
	--ss-ink-3: #6a5a44;
	--ss-ink-4: #9a8868;
	--ss-line: #c8b88e;
	--ss-line-2: #d4c498;
	--ss-red: #b9322c;
	--ss-red-2: #8a2520;
	--ss-blue: #1c365b;
	--ss-teal: #3a6f5e;
	--ss-postmark: #5a3a28;
	--ss-postmark-red: #a8392e;
	--ss-highlight: #f4d96a;

	/* StockSharp Designer diagram canvas, read live by the @diagram renderer so a theme toggle
	   repaints it. The light theme keeps a light (cream) canvas matching the page; the renderer caps
	   the link-colour lightness on a light canvas (portal-diagram.ts) so the dark-canvas-tuned links
	   stay visible, instead of darkening the whole canvas. The dark theme (sunset) uses near-black. */
	--diagram-bg: #eae3d2;
	--diagram-grid: #d4cbb0;

	--ss-serif: 'Cormorant Garamond', Georgia, serif;
	--ss-display: 'Antonio', 'Arial Narrow', sans-serif;
	--ss-mono: 'JetBrains Mono', monospace;
	--ss-text: 'Spectral', Georgia, serif;
	--ss-max: 1280px;

	/* Texture dot color (per theme). */
	--ss-tex: rgba(106, 90, 68, 0.06);
	--ss-tex-2: rgba(106, 90, 68, 0.04);
}

/* ---- Design-system variables: dark (sunset) ---- */
[data-theme="sunset"] {
	--ss-paper: #14181f;
	--ss-paper-2: #1c2129;
	--ss-paper-3: #232a35;
	--ss-stamp: #1f242d;
	--ss-stamp-2: #262d38;
	--ss-stamp-paper: #262e3a;
	--ss-stamp-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
	--ss-stamp-frame: rgba(236, 226, 201, 0.20);
	--ss-ink: #ece2c9;
	--ss-ink-2: #cdc09e;
	--ss-ink-3: #8e8262;
	--ss-ink-4: #5c5440;
	--ss-line: #3a3e48;
	--ss-line-2: #2e3340;
	--ss-red: #e07a5f;
	--ss-red-2: #c95d42;
	--ss-blue: #6f9bd1;
	--ss-teal: #7bb59a;
	--ss-postmark: #d8b87a;
	--ss-postmark-red: #e07a5f;
	--ss-highlight: #f4d96a;

	/* A near-black diagram canvas in the dark theme. */
	--diagram-bg: #2b2b2e;
	--diagram-grid: #3a3a42;

	--ss-tex: rgba(236, 226, 201, 0.04);
	--ss-tex-2: rgba(236, 226, 201, 0.025);
}

/* ---- Keyframes ---- */
@keyframes notice-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---- Paper texture background + selection ---- */
body {
	background-color: var(--ss-paper);
	transition: background-color .3s ease, color .3s ease;
	/* The page root paints a background of its own, so body's paper would cover the texture layer below it unless
	   body is a stacking context. */
	isolation: isolate;
}

/* The texture holds still as its own fixed layer rather than as a fixed body background: a fixed background
   repaints the whole viewport on every scroll frame, and with it every stamp in view, mask and shadow included. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(var(--ss-tex) 1px, transparent 1.5px),
		radial-gradient(var(--ss-tex-2) 1px, transparent 1.5px);
	background-size: 3px 3px, 7px 7px;
	background-position: 0 0, 1px 2px;
}

::selection {
	background: var(--ss-highlight);
	/* The highlight is always the light yellow stamp colour, so the selected text must
	   stay dark in both themes (do not use --ss-ink, which flips to light in dark mode). */
	color: #1a1410;
}

/* Emoji used as inline icons (buttons, list items, headings): a larger, consistent size that
   still scales with the surrounding text. A layered utility cannot override it; use the important
   form (text-xl!). */
.icon-emoji {
	font-size: 1.3em;
	line-height: 1;
	display: inline-block;
	vertical-align: -0.1em;
	font-style: normal;
}

/* Shared line icons rendered by the <ss-icon> tag helper. Size scales with the surrounding text;
   the stroke follows currentColor so hover/theme colors just work. */
.ss-icon {
	width: 1.15em;
	height: 1.15em;
	display: inline-block;
	vertical-align: -0.18em;
	flex-shrink: 0;
}

.ss-icon.is-spin {
	animation: ss-spin 0.9s linear infinite;
}

@keyframes ss-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   NOTICE TAPE (scrolling marquee bar)
   ========================================================================= */
.ss-notice {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 9px 0;
	overflow: hidden;
	white-space: nowrap;
}

.ss-notice-track {
	display: inline-flex;
	gap: 28px;
	animation: notice-scroll 60s linear infinite;
	padding-left: 28px;
	will-change: transform;
}

.ss-notice-item {
	display: inline-flex;
	gap: 28px;
	align-items: center;
}

.ss-notice-item .ss-notice-sep {
	color: var(--ss-red);
}

@media (prefers-reduced-motion: reduce) {
	.ss-notice-track { animation: none; }
}

/* =========================================================================
   HEADER / NAV (sticky, blurred, paper)
   ========================================================================= */
.ss-nav {
	position: sticky;
	top: 0;
	z-index: 80;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ss-paper) 97%, transparent) 0%,
		color-mix(in srgb, var(--ss-paper) 84%, transparent) 100%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ss-line);
}

.ss-nav-inner {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 70px;
}

/* Round S# logo */
.ss-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--ss-ink);
}

.ss-logo-mark {
	width: 38px;
	height: 38px;
	border-radius: 99px;
	border: 1.5px solid var(--ss-ink);
	display: grid;
	place-items: center;
	font-family: var(--ss-display);
	font-size: 13px;
	font-weight: 700;
	position: relative;
	letter-spacing: 0.02em;
	color: var(--ss-ink);
	flex: 0 0 auto;
}

.ss-logo-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border: 0.5px solid var(--ss-ink);
	border-radius: 99px;
}

/* Toolbar brand: the StockSharp mark as a 38px SVG. */
.ss-logo-img {
	width: 38px;
	height: 38px;
	display: block;
	flex: 0 0 auto;
}

.ss-logo-text {
	font-family: var(--ss-display);
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-ink);
	white-space: nowrap;
}

.ss-logo-text small {
	font-family: var(--ss-serif);
	font-style: italic;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	/* ink-3 is too faint on the dark navbar; ink-2 keeps it legible in both themes. */
	color: var(--ss-ink-2);
	font-weight: 400;
	margin-left: 8px;
}

/* Let the nav take the space between the logo and the right cluster so the menu sits centered. */
.ss-nav-inner > nav {
	flex: 1;
	justify-content: center;
}

/* Main nav list (wraps the vc:menu Horizontal output) */
.ss-nav-menu {
	display: flex;
	gap: 28px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
}

.ss-nav-menu > li {
	position: relative;
}

/* Nav link (also styles vc:menu emitted links / dropdown triggers) */
.ss-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ss-ink-2);
	padding: 6px 0;
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color .2s ease;
}

.ss-nav-link:hover {
	color: var(--ss-red);
}

.ss-nav-link.active {
	color: var(--ss-ink);
}

.ss-nav-link.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ss-red);
}

/* Dropdown panel for nav groups (the vc:menu Horizontal children) */
.ss-nav-menu .dropdown-content {
	font-family: var(--ss-text);
	text-transform: none;
	letter-spacing: 0;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	border-radius: 0;
}

.ss-nav-menu .dropdown-content a {
	color: var(--ss-ink-2);
}

.ss-nav-menu .dropdown-content a:hover {
	color: var(--ss-red);
	background: transparent;
}

/* Divider row inside a nav dropdown / mobile submenu (a DynamicMenu separator row). */
.ss-menu-sep {
	display: block;
	height: 0;
	margin: 6px 12px;
	padding: 0;
	border: 0;
	border-top: 1.5px solid var(--ss-ink);
	opacity: .35;
	list-style: none;
	pointer-events: none;
}

/* Right-hand cluster (lang / theme / auth) */
.ss-nav-right {
	margin-left: auto;
	display: flex;
	gap: 12px;
	align-items: center;
}

/* RU/EN style segmented control (language dropdown trigger pill) */
.ss-lang {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 11px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.ss-lang:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-lang .ss-lang-flag {
	width: 16px;
	height: 12px;
	object-fit: cover;
}

/* Language dropdown menu items */
.ss-lang-menu {
	font-family: var(--ss-text);
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp-2);
	border-radius: 0;
}

.ss-lang-menu a {
	color: var(--ss-ink-2);
}

.ss-lang-menu a:hover,
.ss-lang-menu a.active {
	color: var(--ss-red);
	background: transparent;
}

/* Theme toggle pill (site.js drives it by id="theme-toggle") */
.ss-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 34px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink-3);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: border-color .2s ease, color .2s ease;
}

.ss-theme-toggle:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

/* CTA buttons */
.ss-btn,
.ss-btn-dark {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 38px;
	padding: 0 18px;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
	border: 1.5px solid var(--ss-ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Outline button */
.ss-btn {
	background: transparent;
	color: var(--ss-ink);
}

.ss-btn:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

/* Solid (ink) button: red on hover; the primary CTA. */
.ss-btn-dark {
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: var(--ss-stamp);
}

.ss-btn-dark:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

/* Mobile hamburger trigger */
.ss-burger {
	display: inline-grid;
	place-items: center;
	/* A touch wider than the other header controls -- easier to hit on mobile (it is lg:hidden, so
	   this only affects the mobile/tablet view where the burger is shown). */
	width: 46px;
	height: 38px;
	border: 1.5px solid var(--ss-ink);
	background: transparent;
	color: var(--ss-ink);
	cursor: pointer;
}

.ss-burger:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

/* =========================================================================
   FOOTER (postal footer with a diagonal stripe along the top)
   ========================================================================= */
.ss-footer {
	/* Follow the active theme: a light footer in the light theme and a dark footer in the dark
	   theme. Uses the page palette (paper background + ink text) so it never ends up
	   light-on-light or dark-on-dark; the diagonal stripe + top border keep it visually distinct
	   from the page body above. */
	background: var(--ss-paper-2);
	color: var(--ss-ink-2);
	padding: 52px 0 32px;
	position: relative;
}

.ss-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14px;
	background: repeating-linear-gradient(-45deg,
		var(--ss-red) 0 10px,
		var(--ss-ink) 10px 18px,
		var(--ss-blue) 18px 28px,
		var(--ss-ink) 28px 36px);
}

.ss-footer-inner {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
}

.ss-footer-grid {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr);
	gap: 36px;
	padding-top: 28px;
}

.ss-footer-brand .ss-logo-mark {
	width: 56px;
	height: 56px;
	border-color: var(--ss-ink);
	color: var(--ss-ink);
	font-size: 14px;
	margin-bottom: 18px;
}

.ss-footer-brand .ss-logo-mark::after {
	inset: 4px;
	border-color: var(--ss-ink);
}

.ss-footer-brand-name {
	font-family: var(--ss-display);
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 12px;
}

.ss-footer-blurb {
	color: var(--ss-ink-3);
	font-family: var(--ss-serif);
	font-size: 16px;
	max-width: 34ch;
	margin: 0;
	line-height: 1.55;
}

/* Copyright sits under the blurb in the brand column; a hairline rule separates the two
   (without it the two serif paragraphs run together). */
.ss-footer-copy {
	max-width: 34ch;
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ss-line);
}

.ss-footer-col h4,
.ss-footer-col h5 {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ss-ink);
	font-weight: 700;
	margin: 0 0 16px;
}

.ss-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15.5px;
	font-family: var(--ss-serif);
}

.ss-footer-col a {
	color: var(--ss-ink-3);
	transition: color .2s ease;
}

.ss-footer-col a:hover {
	color: var(--ss-red);
}

/* Social icons row inside a footer column */
.ss-footer-social {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.ss-footer-social a {
	color: var(--ss-ink-3);
}

.ss-footer-social a:hover {
	color: var(--ss-red);
}

.ss-footer-bottom {
	border-top: 1px solid var(--ss-line);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--ss-display);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8a7858;
	font-weight: 600;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1023px) {
	.ss-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

@media (max-width: 640px) {
	.ss-nav-inner {
		padding: 0 18px;
		gap: 14px;
	}

	.ss-logo-text {
		display: none;
	}

	.ss-footer-grid {
		/* Two columns (not one) so the link lists pair up instead of forming one very long strip. */
		grid-template-columns: 1fr 1fr;
		gap: 20px 24px;
		text-align: left;
	}

	.ss-footer-brand {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   PAGE BODIES
   Section wrappers, eyebrow labels, display headings, paper-card frames,
   stamps and CTA buttons, built on the same variables as the chrome above.
   ========================================================================= */

/* ---- Page-level typographic primitives ---- */
.ss-page {
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
}

/* A page laid out in landing blocks: whatever stands between the full-width sections keeps the page
   gutter instead of running edge to edge. */
.ss-landing > :not(section) {
	max-width: var(--ss-max);
	margin-inline: auto;
	padding-inline: 32px;
}

/* A content manager's link into the page text. */
.ss-page-edit {
	text-align: right;
	margin-bottom: 8px;
}

.ss-wrap {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
}

/* A section read down a single column, such as a form with its heading. */
.ss-wrap--narrow {
	max-width: 1000px;
}

.ss-section {
	/* Compact, so sections do not leave large empty gaps. */
	padding: 56px 0;
}

.ss-section--dashed {
	border-top: 1px dashed var(--ss-line);
}

/* A closing call to action: head and buttons centred on the page. */
.ss-section--center .ss-wrap { text-align: center; }
.ss-section--center .ss-section-head {
	margin: 0 auto 24px;
	align-items: center;
}
.ss-section--center .ss-lede { max-width: 600px; }

.ss-section-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.ss-section--center .ss-section-actions { justify-content: center; }

/* Small uppercase eyebrow label with a red dash and dot. */
.ss-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ss-red);
	font-weight: 600;
}

.ss-eyebrow::before {
	content: "";
	width: 28px;
	height: 1.5px;
	background: var(--ss-red);
}

.ss-eyebrow::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var(--ss-red);
}

/* Italic serif display heading. */
.ss-display {
	font-family: var(--ss-serif);
	font-style: italic;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.02;
	color: var(--ss-ink);
	margin: 0;
}

.ss-display--xl {
	font-size: clamp(46px, 6.4vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.025em;
}

.ss-display--lg {
	font-size: clamp(34px, 4.4vw, 56px);
}

.ss-display--md {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.05;
}

.ss-display--sm {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.1;
}

.ss-lede {
	font-family: var(--ss-text);
	font-size: 20px;
	color: var(--ss-ink-2);
	line-height: 1.5;
	margin: 0;
}

.ss-section-head {
	max-width: 880px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 56px;
}

/* Eyebrow and heading on one line instead of stacked. The label is 11px against a heading that
   grows to 84px, so they are centred on each other rather than sharing a baseline -- a baseline
   would hang the label off the bottom of the heading. max-width goes because the pair is now as
   wide as the two of them together, not a measure to wrap prose at. */
.ss-section-head--inline {
	max-width: none;
	position: relative;
	flex-direction: row;
	align-items: center;
	gap: 22px;
	min-height: 1em;
}

/* The heading is centred on the page, not on what is left of the row after the label -- so the
   label comes out of the flow and is pinned to the left edge instead of pushing the heading off
   centre by its own width. */
.ss-section-head--inline > .ss-eyebrow {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.ss-section-head--inline > .ss-display {
	flex: 1;
	text-align: center;
}

@media (max-width: 720px) {
	/* Side by side there would leave the heading a couple of words per line. */
	.ss-section-head--inline {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	/* Stacked again, so the label is back in the flow and the heading reads from the left. */
	.ss-section-head--inline > .ss-eyebrow {
		position: static;
		transform: none;
	}

	.ss-section-head--inline > .ss-display {
		text-align: left;
	}
}

/* ---- Postal CTA buttons (page bodies; bigger than the nav .ss-btn) ---- */
.ss-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px;
	padding: 0 28px;
	border: 1.5px solid var(--ss-ink);
	background: transparent;
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ss-cta:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-cta--solid {
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: var(--ss-stamp);
}

.ss-cta--solid:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

.ss-cta--red {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

.ss-cta--red:hover {
	background: var(--ss-red-2);
	border-color: var(--ss-red-2);
	color: #fff;
}

.ss-cta--sm {
	height: 44px;
	padding: 0 18px;
	font-size: 11px;
}

/* Paper card frame used for grouped content blocks. */
.ss-paper {
	background: var(--ss-stamp);
	border: 1.5px solid var(--ss-ink);
	padding: 40px;
	position: relative;
}

.ss-input {
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	width: 100%;
}

.ss-input:focus {
	outline: none;
	border-color: var(--ss-red);
}

/* Category filter chips / sidebar links. */
.ss-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ss-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--ss-ink-2);
	border: 1.5px solid var(--ss-line);
	padding: 8px 14px;
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.ss-chip:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-chip.active {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-color: var(--ss-ink);
}

/* Pagination (postal style). */
.ss-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 36px;
	flex-wrap: wrap;
}

.ss-pager a,
.ss-pager span {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1.5px solid var(--ss-line);
	background: var(--ss-stamp);
	color: var(--ss-ink-2);
	font-family: var(--ss-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-transform: uppercase;
}

.ss-pager a:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

.ss-pager .active {
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-color: var(--ss-ink);
}

.ss-tag {
	font-family: var(--ss-display);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-red);
	border: 1.5px solid var(--ss-red);
	padding: 4px 8px 3px;
	display: inline-block;
}

/* Prose body for the product description (rendered HTML). */
.ss-prose {
	color: var(--ss-ink-2);
	font-family: var(--ss-text);
	font-size: 17px;
	line-height: 1.6;
	/* One shared reading width for all long-form content (article body, product
	   description, dynamic/company pages). */
	max-width: var(--ss-read, 820px);
	margin-left: auto;
	margin-right: auto;
	/* Long unbreakable tokens (the ::iframe{url=...} / @diagram(URL) syntax examples, raw
	   code) must wrap instead of forcing horizontal overflow that shifts the whole layout.
	   `anywhere` (inherited by descendants) also lets a table cell shrink, so a long value
	   can't stretch the table past its column. */
	overflow-wrap: anywhere;
}

.ss-prose h1,
.ss-prose h2,
.ss-prose h3,
.ss-prose h4 {
	font-family: var(--ss-serif);
	font-style: italic;
	color: var(--ss-ink);
}

/* The reset gives every heading the body size, so a text's own sections read as italic body lines.
   Only the text's top level: a heading inside a card or a feature keeps the size its block gives it. */
.ss-prose > h1 {
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.ss-prose > h2 {
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	line-height: 1.2;
	margin: 2.8rem 0 1rem;
}

/* Images meant to be seen as one set -- certificates, a row of screenshots -- authored as ":::gallery". */
.ss-prose .gallery p {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	margin: 1.5rem 0;
}

.ss-prose .gallery img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--ss-stamp);
	padding: 6px;
}

.ss-prose a {
	color: var(--ss-red);
}

.ss-prose img {
	max-width: 100%;
	border: 1px solid var(--ss-line);
}

/* Section divider: authored as `---` between content sections. The browser default
   hr is a near-invisible hairline with no spacing, so give it the table-border colour
   and generous vertical margins to read as a real separator. */
.ss-prose hr {
	border: 0;
	border-top: 1px solid var(--ss-line);
	margin: 2.5rem 0;
}

/* Fenced code blocks default to `white-space: pre`, which never wraps — a long line (e.g. an
   ::iframe{url=...} / @diagram(URL) example) then overflows the reading column and pushes the
   whole page sideways. Keep the authored line breaks/indentation but allow wrapping, and break
   long unbreakable tokens, so a code block can never widen past its column. */
.ss-prose pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	/* A fenced block has to read as code before a single token is highlighted: sitting flush with the
	   prose, a snippet between two paragraphs looks like the page lost its formatting. */
	background: var(--ss-paper-2, rgba(127, 127, 127, .07));
	border: 1px solid var(--ss-line);
	border-left: 3px solid var(--ss-red);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 1.2rem 0;
	font-size: 14px;
	line-height: 1.5;
}

.ss-prose :not(pre) > code {
	background: var(--ss-paper-2, rgba(127, 127, 127, .07));
	border: 1px solid var(--ss-line);
	border-radius: 5px;
	padding: 1px 5px;
	font-size: .92em;
}

/* ===== Code viewer: the header, copy and expand chrome the documentation site puts around a code
   block. The class contract is shared on purpose (Portal code-viewer.js, Docs docs.js), so a
   snippet looks the same wherever a reader meets it. ===== */
.ss-code-tabs {
	margin: 1.75em 0;
	border: 1px solid var(--ss-line);
	border-radius: 8px;
	overflow: hidden;
}

.ss-code-tablist {
	display: flex;
	background: var(--ss-paper-2);
	border-bottom: 1px solid var(--ss-line);
}

.ss-code-tab {
	padding: 9px 18px;
	font-family: var(--ss-display, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--ss-red);
	background: none;
	border: none;
}

/* Scoped to the viewer so it overrides the plain .ss-prose pre box -- otherwise a double border. */
.ss-code-tabs .ss-code-panel {
	margin: 0;
	padding: 16px;
	max-height: 620px;
	overflow: auto;
	background: var(--ss-stamp);
	border: 0;
	border-radius: 0;
}

.ss-code-tabs .ss-code-panel code {
	font-family: var(--ss-mono, monospace);
	font-size: 0.82rem;
	line-height: 1.5;
	background: none;
	border: 0;
	padding: 0;
	color: var(--ss-ink-2);
}

.ss-code-tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
	padding-right: 8px;
}

.ss-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 26px;
	line-height: 1;
	color: var(--ss-ink-2);
	background: none;
	border: 1px solid var(--ss-line);
	border-radius: 5px;
	cursor: pointer;
}

.ss-icon-btn:hover { color: var(--ss-red); border-color: var(--ss-red); }

.ss-code-copy svg, .ss-code-download svg, .ss-expand-btn svg { width: 15px; height: 15px; display: block; }
.ss-code-copy .ss-ico-copied { display: none; }
.ss-code-copy.copied .ss-ico-copy { display: none; }
.ss-code-copy.copied .ss-ico-copied { display: block; color: var(--ss-teal); }
.ss-code-copy.copied { border-color: var(--ss-teal); }

.ss-expand-btn .ss-ico-collapse { display: none; }
.ss-expandable.is-expanded .ss-expand-btn .ss-ico-expand { display: none; }
.ss-expandable.is-expanded .ss-expand-btn .ss-ico-collapse { display: block; }

/* Opening a snippet full screen is a desktop affordance: on a phone the block already fills the width. */
@media (max-width: 1023px) {
	.ss-code-tabs .ss-expand-btn { display: none; }
}

body.ss-modal-open { overflow: hidden; }

.ss-expandable.is-expanded {
	position: fixed;
	inset: 12px;
	z-index: 200;
	margin: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	background: var(--ss-paper);
	border: 1px solid var(--ss-line);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
}

.ss-code-tabs.is-expanded .ss-code-panel {
	max-height: none;
	flex: 1 1 auto;
}

/* Block-level examples (headings, blockquotes, task lists, hr) shown inside a table
   "Result" cell must sit flush so they don't blow up the row height. */
.ss-prose td > :first-child { margin-top: 0; }
.ss-prose td > :last-child { margin-bottom: 0; }
.ss-prose td hr { margin: 0.4rem 0; }

/* Embedded videos/iframes (::iframe, video embeds) carry fixed width/height attributes
   from the content; they fill the reading column at 16:9 whatever the authored size. */
.ss-prose iframe,
.ss-prose video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--ss-line);
}

.ss-prose ul {
	list-style: disc;
	padding-left: 1.4em;
}

.ss-prose ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.ss-prose table {
	width: 100%;
	border-collapse: collapse;
}

.ss-prose th,
.ss-prose td {
	border: 1px solid var(--ss-line);
	padding: 8px 10px;
	text-align: left;
}

.ss-prose th {
	background: var(--ss-stamp);
}

.ss-badge {
	font-family: var(--ss-display);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 2px 7px;
	background: var(--ss-teal);
	color: #fff;
}

/* A state that is simply not reached yet -- not a success, not a failure. */
.ss-badge--muted {
	background: transparent;
	border: 1px solid var(--ss-line);
	color: var(--ss-ink-3);
}

.ss-note {
	background: var(--ss-stamp-2);
	border: 1.5px solid var(--ss-ink);
	padding: 22px 26px;
}

@media (max-width: 640px) {
	.ss-wrap {
		padding: 0 18px;
	}

	.ss-section {
		/* Tighter than on desktop, so a phone shows no big gap under the header. */
		padding: 28px 0;
	}
}

/* =========================================================================
   FORMS, TABLES, ALERTS
   Labels, fields, checkboxes, alerts and tables in the same ss- scheme
   on the same variables, so both themes keep working.
   ========================================================================= */

/* ---- Form scaffolding ---- */
.ss-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ss-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Uppercase letter-spaced postal label. */
.ss-label {
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ss-ink-2);
}

/* Textarea and select in the .ss-input frame, and the placeholder colour of the input and the textarea. */
.ss-input::placeholder,
.ss-textarea::placeholder {
	color: var(--ss-ink-4);
}

.ss-textarea {
	padding: 12px 14px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	width: 100%;
	resize: vertical;
	min-height: 120px;
	line-height: 1.5;
}

.ss-textarea:focus,
.ss-select:focus {
	outline: none;
	border-color: var(--ss-red);
}

.ss-select {
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink);
	font-family: var(--ss-text);
	font-size: 15px;
	width: 100%;
}

/* Input with a trailing toggle button (password show/hide). */
.ss-input-wrap {
	position: relative;
}

.ss-input-wrap .ss-input {
	padding-right: 46px;
}

.ss-input-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--ss-ink-3);
	cursor: pointer;
	padding: 6px;
	line-height: 1;
}

.ss-input-toggle:hover {
	color: var(--ss-red);
}

/* Input-group: prefix box + input glued together (telegram/facebook/vk). */
.ss-input-group {
	display: flex;
	align-items: stretch;
}

.ss-input-group .ss-input-prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border: 1.5px solid var(--ss-ink);
	border-right: 0;
	background: var(--ss-paper-2);
	color: var(--ss-ink-3);
	font-family: var(--ss-mono);
	font-size: 12.5px;
	white-space: nowrap;
}

.ss-input-group .ss-input {
	border-left: 0;
}

/* Read-only "copy" group (token / nuget url / referral link). */
.ss-copy-group {
	display: flex;
	align-items: stretch;
}

.ss-copy-group .ss-input {
	font-family: var(--ss-mono);
	font-size: 13px;
	background: var(--ss-paper-2);
	border-right: 0;
}

.ss-copy-group .ss-copy-btn {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	padding: 0 12px;
	border: 1.5px solid var(--ss-ink);
	background: var(--ss-stamp);
	color: var(--ss-ink-3);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.ss-copy-group .ss-copy-btn:hover {
	color: var(--ss-red);
	border-color: var(--ss-red);
}

.ss-field-error {
	font-family: var(--ss-text);
	font-size: 13px;
	color: var(--ss-red);
	line-height: 1.4;
}

.ss-hint {
	font-family: var(--ss-mono);
	font-size: 11.5px;
	color: var(--ss-ink-3);
	line-height: 1.4;
}

/* Postal checkbox / consent row. */
.ss-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--ss-text);
	font-size: 14.5px;
	color: var(--ss-ink-2);
	line-height: 1.4;
}

.ss-check input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--ss-red);
	flex-shrink: 0;
	margin: 0;
}

.ss-check a {
	color: var(--ss-red);
}

/* A group of fields mounted on a paper panel: the panel is a flex item of the form, so it has to stack
   its own fields the way the form does. Padding is a touch tighter than the default .ss-paper 40px, which
   suits prose rather than a column of inputs. */
.ss-form-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 34px 32px;
}

/* A second group heading inside the panel sits a little apart from the fields above it. */
.ss-form-panel__subhead {
	margin-top: 8px;
}

@media (max-width: 640px) {
	.ss-form-panel { padding: 24px 18px; }
}

.ss-link {
	color: var(--ss-red);
	font-weight: 600;
	transition: color .2s ease;
}

.ss-link:hover {
	color: var(--ss-red-2);
	text-decoration: underline;
}

/* ---- Alerts (postal note look) ---- */
.ss-alert {
	border: 1.5px solid var(--ss-ink);
	padding: 14px 18px;
	margin-bottom: 22px;
	font-family: var(--ss-text);
	font-size: 14.5px;
	background: var(--ss-stamp-2);
	color: var(--ss-ink-2);
}

.ss-alert--error {
	border-color: var(--ss-red);
	color: var(--ss-red);
	background: color-mix(in srgb, var(--ss-red) 8%, var(--ss-stamp));
}

.ss-alert--success {
	border-color: var(--ss-teal);
	color: var(--ss-teal);
	background: color-mix(in srgb, var(--ss-teal) 8%, var(--ss-stamp));
}

/* The reference a visitor quotes to support, under the note it belongs to. */
.ss-alert__ref {
	margin-top: 6px;
}

/* Label + value pairs of a record (the tenant card): the label is small print above its value, and the
   pairs sit side by side once there is room for them. */
.ss-def-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px 26px;
	margin: 0;
}

.ss-def-list dt {
	font-family: var(--ss-display);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ss-ink-3);
	margin-bottom: 5px;
}

.ss-def-list dd {
	margin: 0;
	font-family: var(--ss-text);
	font-size: 15px;
	color: var(--ss-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Records meant to be copied verbatim (DNS entries): monospaced, framed, and scrolled rather than
   wrapped -- a wrapped hostname is a hostname the reader has to reassemble by hand. */
.ss-code-plain {
	font-family: var(--ss-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
	font-size: 13px;
	line-height: 1.7;
	background: var(--ss-paper-2, rgba(127, 127, 127, .07));
	border: 1px solid var(--ss-line);
	border-left: 3px solid var(--ss-red);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 14px 0;
	overflow-x: auto;
	color: var(--ss-ink);
}

/* Postal data table (subscriptions, licenses, tokens, payments...). */
.ss-table-wrap {
	overflow-x: auto;
	border: 1.5px solid var(--ss-ink);
}

.ss-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ss-text);
	font-size: 14px;
	color: var(--ss-ink-2);
	background: var(--ss-stamp);
}

.ss-table th {
	background: var(--ss-paper);
	color: var(--ss-ink);
	font-family: var(--ss-display);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1.5px solid var(--ss-ink);
}

.ss-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ss-line);
	color: var(--ss-ink-2);
}

.ss-table tr:last-child td {
	border-bottom: 0;
}

.ss-table-link {
	color: var(--ss-red);
	font-weight: 600;
}

.ss-table-link:hover {
	text-decoration: underline;
}

.ss-muted {
	color: var(--ss-ink-3);
}

.ss-ok {
	color: var(--ss-teal);
	font-weight: 600;
}

.ss-err {
	color: var(--ss-red);
	font-weight: 600;
}

/* ---- Breadcrumbs ---- */
.ss-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--ss-mono);
	font-size: 12px;
	color: var(--ss-ink-3);
	margin-bottom: 22px;
}

.ss-crumb-sep {
	color: var(--ss-ink-4);
}

/* Empty-state paper block. */
.ss-empty {
	text-align: center;
	color: var(--ss-ink-3);
	font-size: 16px;
}

.ss-pager-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ss-pager-ellipsis {
	border: 0 !important;
	background: transparent !important;
}

/* =========================================================================
   SHARED VIEW-COMPONENTS
   ========================================================================= */

/* ---- Footer / drawer menu groups (vc:menu Default with children) ---- */
.ss-menu-group .ss-menu-summary {
	cursor: pointer;
	list-style: none;
}

.ss-menu-group .ss-menu-summary::-webkit-details-marker {
	display: none;
}

.ss-menu-sub {
	list-style: none;
	padding: 8px 0 0 14px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---- Social icons (vc:social) - framed postal stamp in the footer ---- */
.ss-social-icon {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid color-mix(in srgb, var(--ss-stamp) 40%, transparent);
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.ss-social-icon:hover {
	border-color: var(--ss-highlight);
	transform: translateY(-2px);
}

.ss-social-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

/* =========================================================================
   COOKIE NOTICE (postal tape pinned to the bottom)
   ========================================================================= */
.ss-cookie {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--ss-ink);
	color: var(--ss-stamp);
	border-top: 3px solid var(--ss-red);
	padding: 18px 0;
	box-shadow: 0 -8px 24px rgba(50, 30, 10, 0.18);
}

.ss-cookie-inner {
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ss-cookie-text {
	margin: 0;
	font-family: var(--ss-text);
	font-size: 14.5px;
	color: color-mix(in srgb, var(--ss-stamp) 88%, transparent);
	line-height: 1.5;
}

/* The solid CTA sits on the dark tape; keep it readable. */
.ss-cookie .ss-cta--solid {
	background: var(--ss-stamp);
	border-color: var(--ss-stamp);
	color: var(--ss-ink);
}

.ss-cookie .ss-cta--solid:hover {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #fff;
}

@media (max-width: 768px) {
	.ss-cookie-inner {
		flex-direction: column;
		text-align: center;
		gap: 14px;
	}
}

/* =========================================================================
   MOBILE DRAWER (postal paper sidebar on the DaisyUI .drawer mechanics)
   ========================================================================= */
.ss-drawer {
	list-style: none;
	min-height: 100%;
	width: 16rem;
	margin: 0;
	padding: 96px 18px 24px;
	background: var(--ss-paper-2);
	border-right: 1.5px solid var(--ss-ink);
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	position: relative;
}

/* Close (X) button pinned to the top-left of the mobile drawer, below the notice tape line. */
.ss-drawer-close {
	position: absolute;
	top: 50px;
	left: 22px;
	padding: 0;
}

/* ── Shared modal dialog (ssAlert / ssConfirm / ssPrompt) ───────────────── */
.ss-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 16, 10, 0.5);
}

.ss-modal {
	width: 100%;
	max-width: 420px;
	background: var(--ss-paper-2);
	border: 1.5px solid var(--ss-ink);
	box-shadow: 8px 8px 0 rgba(20, 16, 10, 0.18);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ss-modal-title {
	font-family: var(--ss-display);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-modal-msg {
	font-family: var(--ss-text);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ss-ink-2);
	white-space: pre-wrap;
}

.ss-modal-input {
	width: 100%;
}

.ss-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 4px;
}

.ss-drawer-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--ss-ink);
	color: var(--ss-ink);
	background: transparent;
	cursor: pointer;
}

.ss-drawer-close-btn:hover {
	color: var(--ss-red);
	border-color: var(--ss-red);
}

.ss-drawer a {
	display: block;
	padding: 11px 14px;
	color: var(--ss-ink-2);
	transition: background-color .2s ease, color .2s ease;
}

.ss-drawer a:hover {
	background: var(--ss-stamp);
	color: var(--ss-red);
}

/* vc:menu Default groups inside the drawer. */
.ss-drawer .ss-menu-summary {
	display: block;
	padding: 11px 14px;
	color: var(--ss-ink);
}

.ss-drawer .ss-menu-summary:hover {
	color: var(--ss-red);
}

.ss-drawer .ss-menu-sub {
	padding-left: 24px;
	gap: 2px;
}

.ss-drawer .ss-menu-sub a {
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--ss-text);
}

.ss-drawer-divider {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1.5px solid var(--ss-line);
	list-style: none;
}

/* ===== Syntax highlighting (highlight.js, themed with postal tokens) =====
   highlight.js only adds .hljs-* classes; colors live here and reference --ss-* so they
   adapt to the active theme automatically. No hljs theme stylesheet is loaded. */
.ss-prose pre code.hljs {
	display: block;
	background: none;
	padding: 0;
	color: var(--ss-ink-2);
}

.hljs { color: var(--ss-ink-2); background: transparent; }
.hljs-comment, .hljs-quote { color: var(--ss-ink-4); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag { color: var(--ss-blue); }
.hljs-tag, .hljs-name, .hljs-meta-keyword { color: var(--ss-blue); }
.hljs-built_in, .hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-class .hljs-title { color: var(--ss-red); }
.hljs-string, .hljs-meta .hljs-string, .hljs-regexp, .hljs-addition { color: var(--ss-teal); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--ss-postmark); }
.hljs-type, .hljs-params, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--ss-ink-2); }
.hljs-meta, .hljs-comment.hljs-doctag { color: var(--ss-ink-3); }
.hljs-deletion { color: var(--ss-red); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Honour the <ol type> attribute in rendered content: the CSS reset drops list markers, so a
   list-style-type has to be set explicitly or type="a"/"i" fall back to plain numbers. */
.ss-prose ol[type="1"], .prose ol[type="1"] { list-style-type: decimal; }
.ss-prose ol[type="a"], .prose ol[type="a"] { list-style-type: lower-alpha; }
.ss-prose ol[type="A"], .prose ol[type="A"] { list-style-type: upper-alpha; }
.ss-prose ol[type="i"], .prose ol[type="i"] { list-style-type: lower-roman; }
.ss-prose ol[type="I"], .prose ol[type="I"] { list-style-type: upper-roman; }