/**
 * Signal Vault design system.
 *
 * Tokens, reset, typography, components and the shared chrome.
 */

:root {
	/* Ground and surfaces */
	--sv-bg: #0d1117;
	--sv-bg-deep: #09090b;
	--sv-surface: rgba(26, 35, 50, 0.5);
	--sv-surface-solid: #1a2332;
	--sv-card: rgba(26, 35, 50, 0.4);
	--sv-border: #1e3a5f;
	--sv-border-soft: rgba(30, 58, 95, 0.5);
	--sv-input-bg: #1a2332;
	--sv-input-border: #243447;

	/* Accent */
	--sv-accent: #3498db;
	--sv-accent-hover: #5bb8f5;
	--sv-accent-glow: rgba(52, 152, 219, 0.2);
	--sv-accent-wash: rgba(52, 152, 219, 0.08);

	/* Status */
	--sv-success: #10b981;
	--sv-success-bright: #34d399;
	--sv-danger: #f43f5e;
	--sv-danger-deep: #e11d48;
	--sv-warning: #f59e0b;
	--sv-violet: #8b5cf6;
	--sv-violet-deep: #7c3aed;
	--sv-sky: #0ea5e9;
	--sv-sky-deep: #0284c7;

	/* Text */
	--sv-text: #fafafa;
	--sv-text-bright: #f4f4f5;
	--sv-text-secondary: #a1a1aa;
	--sv-text-muted: #71717a;
	--sv-text-faint: #52525b;

	/* Brand */
	--sv-gold: #f5c542;
	--sv-gold-glow: rgba(245, 197, 66, 0.6);

	/* Type */
	--sv-font-display: "Orbitron", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sv-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sv-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace;

	/* Shape and space */
	--sv-radius-sm: 8px;
	--sv-radius: 12px;
	--sv-radius-lg: 16px;
	--sv-radius-pill: 999px;
	--sv-space-xs: 4px;
	--sv-space-sm: 8px;
	--sv-space-md: 16px;
	--sv-space-lg: 24px;
	--sv-space-xl: 48px;
	--sv-space-2xl: 96px;
	--sv-container: 1200px;
	--sv-sidebar: 260px;
	--sv-header: 68px;
}

/* Reset. :where() keeps specificity at zero so component rules always win. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The hidden attribute must always win.
 *
 * A component class that sets its own display (a panel laid out with flex, say)
 * outranks the browser's [hidden] rule, so toggling el.hidden in script would
 * change nothing on screen. Every element this theme shows and hides is driven
 * by that attribute, so it is enforced once here rather than per component.
 */
[hidden] {
	display: none !important;
}

:where(html) {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset) {
	margin: 0;
	padding: 0;
}

:where(ul[class], ol[class]) {
	list-style: none;
}

:where(img, svg, video, canvas) {
	display: block;
	max-width: 100%;
	/* Without this, the width and height attributes on an image act as a fixed
	   pixel height, so a full width image keeps its authored height and the
	   picture is stretched or cropped to it. */
	height: auto;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where(fieldset) {
	border: 0;
}

:where(a) {
	color: inherit;
	text-decoration: none;
}

html {
	background: var(--sv-bg);
}

body {
	margin: 0;
	background: var(--sv-bg);
	color: var(--sv-text);
	font-family: var(--sv-font-body);
	font-size: 1rem;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;

	/* Vault names, recipient addresses and file names are supplied by the
	   person using the site, so a single long unbroken string would otherwise
	   push a phone layout sideways. This only breaks a word that would not
	   fit on its own line, so ordinary text is untouched. */
	overflow-wrap: break-word;
}

::selection {
	background: var(--sv-accent);
	color: #fff;
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--sv-border);
	border-radius: var(--sv-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--sv-accent);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--sv-border) transparent;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.sv-display,
.sv-h1,
.sv-h2,
.sv-h3,
.sv-h4 {
	font-family: var(--sv-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.22;
	color: var(--sv-text);
	text-wrap: balance;
}

.sv-display {
	font-size: clamp(1.875rem, 4.6vw, 3rem);
	font-weight: 700;
	line-height: 1.12;
}

h1,
.sv-h1 {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

h2,
.sv-h2 {
	font-size: clamp(1.625rem, 3vw, 2.125rem);
}

h3,
.sv-h3 {
	font-size: 1.3rem;
}

h4,
.sv-h4 {
	font-size: 1.0625rem;
}

p {
	text-wrap: pretty;
}

code,
kbd,
samp,
pre,
.sv-mono {
	font-family: var(--sv-font-mono);
	font-size: 0.875em;
	font-variant-ligatures: none;
}

.sv-eyebrow {
	font-family: var(--sv-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-accent);
	margin-bottom: var(--sv-space-md);
}

.sv-lede {
	font-size: 1.0625rem;
	color: var(--sv-text-secondary);
	max-width: 62ch;
}

.sv-muted {
	color: var(--sv-text-muted);
}

.sv-secondary {
	color: var(--sv-text-secondary);
}

.sv-small {
	font-size: 0.875rem;
}

.sv-tiny {
	font-size: 0.8125rem;
}

/* Layout */
.sv-container {
	width: 100%;
	max-width: var(--sv-container);
	margin-inline: auto;
	padding-inline: var(--sv-space-lg);
}

.sv-section {
	padding-block: clamp(56px, 9vw, var(--sv-space-2xl));
}

.sv-section-head {
	max-width: 62ch;
	margin-bottom: var(--sv-space-xl);
}

.sv-stack > * + * {
	margin-top: var(--sv-space-md);
}

.sv-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-space-sm);
}

.sv-row-between {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-space-md);
}

.sv-hide {
	display: none !important;
}

.sv-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--sv-accent);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 var(--sv-radius) 0;
}

.sv-skip:focus {
	left: 0;
}

/* Brand mark */
.sv-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sv-font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	color: var(--sv-text);
}

.sv-brand svg {
	color: var(--sv-gold);
	filter: drop-shadow(0 0 12px var(--sv-gold-glow));
	flex: none;
}

/* Glass header */
.sv-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(13, 17, 23, 0.7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(30, 58, 95, 0.3);
}

.sv-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-space-md);
	height: var(--sv-header);
}

.sv-nav {
	display: flex;
	align-items: center;
	gap: var(--sv-space-lg);
}

.sv-nav a {
	font-size: 0.9375rem;
	color: var(--sv-text-secondary);
	transition: color 160ms ease;
}

.sv-nav a:hover,
.sv-nav a:focus-visible {
	color: var(--sv-text);
}

/* Signing out does something rather than going somewhere, so it is a button.
   In the menu it still has to read as one of the links beside it. */
.sv-nav-signout {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: inherit;
	color: var(--sv-text-secondary);
	cursor: pointer;
	transition: color 160ms ease;
}

.sv-nav-signout:hover,
.sv-nav-signout:focus-visible {
	color: var(--sv-text);
}

.sv-nav-signout svg {
	flex: none;
	opacity: 0.75;
}

.sv-nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	color: var(--sv-text-secondary);
	cursor: pointer;
}

/* Buttons */
.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--sv-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	padding: 14px 24px;
	border-radius: var(--sv-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	text-align: center;
	white-space: nowrap;
}

.sv-btn:disabled,
.sv-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

.sv-btn-primary {
	background: var(--sv-accent);
	color: #fff;
}

.sv-btn-primary:hover:not(:disabled),
.sv-btn-primary:focus-visible {
	background: var(--sv-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
}

.sv-btn-secondary {
	background: transparent;
	border-color: var(--sv-border);
	color: #d4d4d8;
}

.sv-btn-secondary:hover:not(:disabled),
.sv-btn-secondary:focus-visible {
	background: var(--sv-accent-wash);
	border-color: var(--sv-accent);
	color: #fff;
	transform: translateY(-1px);
}

.sv-btn-danger {
	background: var(--sv-danger-deep);
	color: #fff;
}

.sv-btn-danger:hover:not(:disabled),
.sv-btn-danger:focus-visible {
	background: var(--sv-danger);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(244, 63, 94, 0.3);
}

.sv-btn-ghost {
	background: transparent;
	color: var(--sv-text-secondary);
	padding: 8px 12px;
}

.sv-btn-ghost:hover:not(:disabled) {
	color: var(--sv-text);
	background: var(--sv-accent-wash);
}

.sv-btn-sm {
	padding: 9px 16px;
	font-size: 0.875rem;
	border-radius: var(--sv-radius-sm);
}

.sv-btn-block {
	width: 100%;
}

.sv-btn svg {
	flex: none;
}

.sv-link {
	color: var(--sv-accent);
	transition: color 160ms ease;
}

.sv-link:hover,
.sv-link:focus-visible {
	color: var(--sv-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cards and panels */
.sv-card {
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	padding: var(--sv-space-lg);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.sv-card-hover {
	transition: border-color 300ms ease, background-color 300ms ease;
}

.sv-card-hover:hover {
	border-color: rgba(52, 152, 219, 0.3);
	background: rgba(26, 35, 50, 0.62);
}

.sv-card-quiet {
	background: var(--sv-card);
}

.sv-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sv-space-sm) var(--sv-space-md);
	margin-bottom: var(--sv-space-md);
}

/* The heading side may shrink and wrap; a long email address or title must
   never push the badge or action beside it off the card. */
.sv-card-head > :first-child {
	flex: 1 1 12rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.sv-card-head > .sv-badge {
	flex-shrink: 0;
}

.sv-divider {
	height: 1px;
	background: var(--sv-border);
	border: 0;
	margin-block: var(--sv-space-lg);
}

/* Forms */
.sv-field {
	display: block;
	margin-bottom: var(--sv-space-md);
}

.sv-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #d4d4d8;
	margin-bottom: 6px;
}

.sv-input,
.sv-select,
.sv-textarea {
	width: 100%;
	border-radius: var(--sv-radius);
	padding: 14px 16px;
	background: var(--sv-input-bg);
	border: 1px solid var(--sv-input-border);
	color: #e4e4e7;
	font-family: var(--sv-font-body);
	font-size: 0.938rem;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	appearance: none;
}

.sv-textarea {
	min-height: 130px;
	resize: vertical;
	line-height: 1.6;
}

.sv-input::placeholder,
.sv-textarea::placeholder {
	color: var(--sv-text-faint);
}

.sv-input:focus,
.sv-select:focus,
.sv-textarea:focus {
	outline: none;
	border-color: var(--sv-accent);
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.sv-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
}

.sv-select option {
	background: var(--sv-input-bg);
	color: #e4e4e7;
}

.sv-help {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--sv-text-muted);
}

.sv-error-text {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--sv-danger);
}

.sv-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	padding: 10px 0;
}

.sv-check input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 6px;
	border: 1px solid var(--sv-input-border);
	background: var(--sv-input-bg);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.sv-check input[type="checkbox"]:checked {
	background: var(--sv-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
	border-color: var(--sv-accent);
}

.sv-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--sv-accent);
	outline-offset: 2px;
}

.sv-check-body strong {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
}

.sv-check-body span {
	font-size: 0.8125rem;
	color: var(--sv-text-muted);
}

:focus-visible {
	outline: 2px solid var(--sv-accent);
	outline-offset: 2px;
}

/* Badges */
.sv-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--sv-radius-pill);
	font-family: var(--sv-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sv-badge-active {
	background: rgba(16, 185, 129, 0.15);
	color: var(--sv-success-bright);
}

.sv-badge-paused {
	background: rgba(113, 113, 122, 0.18);
	color: #a1a1aa;
}

.sv-badge-warning {
	background: rgba(245, 158, 11, 0.15);
	color: var(--sv-warning);
}

.sv-badge-danger {
	background: rgba(244, 63, 94, 0.15);
	color: var(--sv-danger);
}

.sv-badge-accent {
	background: var(--sv-accent-glow);
	color: var(--sv-accent-hover);
}

.sv-badge-violet {
	background: rgba(139, 92, 246, 0.18);
	color: #a78bfa;
}

/* Notices */
.sv-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--sv-radius);
	border: 1px solid var(--sv-border);
	background: var(--sv-card);
	font-size: 0.9375rem;
	margin-bottom: var(--sv-space-md);
}

.sv-notice svg {
	flex: none;
	margin-top: 2px;
}

.sv-notice-error {
	border-color: rgba(244, 63, 94, 0.4);
	background: rgba(244, 63, 94, 0.08);
	color: #fda4af;
}

.sv-notice-success {
	border-color: rgba(16, 185, 129, 0.4);
	background: rgba(16, 185, 129, 0.08);
	color: #6ee7b7;
}

.sv-notice-warning {
	border-color: rgba(245, 158, 11, 0.4);
	background: rgba(245, 158, 11, 0.08);
	color: #fcd34d;
}

.sv-notice-info {
	border-color: rgba(52, 152, 219, 0.4);
	background: rgba(52, 152, 219, 0.08);
	color: #93c5fd;
}

/* Toasts */
.sv-toasts {
	position: fixed;
	right: var(--sv-space-md);
	bottom: var(--sv-space-md);
	z-index: 120;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

.sv-toast {
	pointer-events: auto;
	background: #131b26;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	padding: 13px 16px;
	font-size: 0.9375rem;
	color: var(--sv-text);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	animation: sv-toast-in 200ms ease both;
}

.sv-toast-error {
	border-color: rgba(244, 63, 94, 0.5);
	color: #fda4af;
}

.sv-toast-success {
	border-color: rgba(16, 185, 129, 0.5);
	color: #6ee7b7;
}

@keyframes sv-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Modal */
.sv-modal {
	position: fixed;
	inset: 0;
	z-index: 130;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sv-space-md);
	background: rgba(9, 9, 11, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.sv-modal[hidden] {
	display: none;
}

.sv-modal-box {
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: #131b26;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	padding: var(--sv-space-lg);
}

.sv-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sv-space-md);
	margin-bottom: var(--sv-space-md);
}

.sv-modal-close {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	color: var(--sv-text-secondary);
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease;
}

.sv-modal-close:hover {
	color: var(--sv-text);
	border-color: var(--sv-accent);
}

.sv-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--sv-space-lg);
}

/* Empty and loading states */
.sv-empty {
	text-align: center;
	padding: clamp(32px, 6vw, 64px) var(--sv-space-lg);
	border: 1px dashed var(--sv-border);
	border-radius: var(--sv-radius-lg);
	background: rgba(26, 35, 50, 0.25);
}

.sv-empty svg {
	margin: 0 auto var(--sv-space-md);
	color: var(--sv-text-faint);
}

.sv-empty h3 {
	margin-bottom: 8px;
}

.sv-empty p {
	color: var(--sv-text-muted);
	max-width: 46ch;
	margin: 0 auto var(--sv-space-lg);
}

.sv-skeleton {
	border-radius: var(--sv-radius);
	background: linear-gradient(90deg, rgba(30, 58, 95, 0.25) 25%, rgba(30, 58, 95, 0.45) 50%, rgba(30, 58, 95, 0.25) 75%);
	background-size: 200% 100%;
	animation: sv-shimmer 1.4s linear infinite;
	height: 84px;
	margin-bottom: 12px;
}

@keyframes sv-shimmer {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

/* Footer */
.sv-footer {
	border-top: 1px solid var(--sv-border-soft);
	padding-block: var(--sv-space-xl);
	margin-top: auto;
}

.sv-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-space-lg);
}

.sv-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-lg);
	font-size: 0.9375rem;
}

.sv-footer-links a {
	color: var(--sv-text-muted);
	transition: color 160ms ease;
}

.sv-footer-links a:hover {
	color: var(--sv-text);
}

.sv-footer-note {
	width: 100%;
	font-size: 0.8125rem;
	color: var(--sv-text-faint);
	padding-top: var(--sv-space-md);
	border-top: 1px solid rgba(30, 58, 95, 0.3);
}

/* Page shell */
.sv-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sv-main {
	flex: 1 0 auto;
}

/* Prose for legal, docs and article bodies */
.sv-prose {
	color: var(--sv-text-secondary);
	font-size: 1.0625rem;
	line-height: 1.75;
	max-width: 68ch;
}

.sv-prose > * + * {
	margin-top: 1.1em;
}

.sv-prose h2 {
	margin-top: 2em;
	font-size: 1.5rem;
	color: var(--sv-text);
}

.sv-prose h3 {
	margin-top: 1.8em;
	font-size: 1.15rem;
	color: var(--sv-text);
}

.sv-prose a {
	color: var(--sv-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sv-prose strong {
	color: var(--sv-text-bright);
	font-weight: 600;
}

.sv-prose ul,
.sv-prose ol {
	padding-left: 1.4em;
}

.sv-prose li + li {
	margin-top: 0.5em;
}

.sv-prose ul {
	list-style: disc;
}

.sv-prose ol {
	list-style: decimal;
}

.sv-prose blockquote {
	border: 0;
	border-left: 2px solid var(--sv-accent);
	padding: 4px 0 4px 20px;
	margin: 1.6em 0;
	color: var(--sv-text);
	font-style: normal;
}

.sv-prose code {
	background: rgba(30, 58, 95, 0.35);
	border-radius: 5px;
	padding: 2px 6px;
	color: #cbd5e1;
}

.sv-prose pre {
	background: var(--sv-bg-deep);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	padding: 16px;
	overflow-x: auto;
}

.sv-prose pre code {
	background: none;
	padding: 0;
}

.sv-prose img {
	border-radius: var(--sv-radius-lg);
	border: 1px solid var(--sv-border);
}

.sv-prose hr {
	border: 0;
	border-top: 1px solid var(--sv-border);
	margin: 2.4em 0;
}

/* Entrance animation, staggered */
.sv-fade {
	animation: sv-fade-in 520ms ease both;
}

.sv-fade-1 {
	animation-delay: 0.1s;
}

.sv-fade-2 {
	animation-delay: 0.15s;
}

.sv-fade-3 {
	animation-delay: 0.2s;
}

.sv-fade-4 {
	animation-delay: 0.25s;
}

@keyframes sv-fade-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sv-fade {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 860px) {
	.sv-nav-toggle {
		display: inline-flex;
	}

	.sv-nav {
		position: absolute;
		top: var(--sv-header);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--sv-space-sm) var(--sv-space-lg) var(--sv-space-lg);
		background: rgba(13, 17, 23, 0.97);
		backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--sv-border-soft);
	}

	.sv-nav[hidden] {
		display: none;
	}

	.sv-nav a,
	.sv-nav-signout {
		padding: 12px 0;
		border-bottom: 1px solid rgba(30, 58, 95, 0.3);
	}

	/* Full width row in the stacked menu so the whole line is tappable. */
	.sv-nav-signout {
		width: 100%;
		justify-content: flex-start;
	}

	.sv-nav .sv-btn {
		margin-top: var(--sv-space-md);
		border-bottom: 0;
	}
}

/* Installed on a phone's home screen, the page runs edge to edge under the
   status bar, the notch and the home indicator. These insets are zero in an
   ordinary browser tab, so nothing moves there. */
.sv-header {
	padding-top: env(safe-area-inset-top, 0px);
}

.sv-toasts {
	right: calc(var(--sv-space-md) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--sv-space-md) + env(safe-area-inset-bottom, 0px));
}

.sv-page {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}