/**
 * mortalink.de — brand stylesheet for the "mortalink" template
 *
 * Ports the a-immortale.de token system (brutalist: zero radius, ink borders,
 * hard offset shadows) onto the CSS framework the application ships with.
 *
 * Loaded last, after the framework's own stylesheets. Wherever possible this
 * file drives the framework's custom properties (--bs-*) instead of
 * out-specifying its selectors, so framework updates keep working.
 *
 * The application gates its entire UI state machine on
 * .hidden { display: none !important }. Never use !important to make something
 * visible — that would override the gate and show elements the app is hiding.
 * Using it to force display:none on one specific element is safe: it can only
 * conceal, never reveal.
 */

/* ==================================================================
   1. Fonts — self-hosted, no CDN (CSP font-src 'self')
   ================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('fonts/archivo-latin-variable.woff2') format('woff2-variations'),
	     url('fonts/archivo-latin-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/spacemono-latin-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/spacemono-latin-700.woff2') format('woff2');
}

/* ==================================================================
   2. Tokens — carried over from a-immortale.de
   ================================================================== */

:root {
	--ml-bg: #e9e6dc;
	--ml-paper: #e9e6dc;
	--ml-card: #f4f2e9;
	--ml-surface-hot: #f4f2e9;
	--ml-ink: #16140f;
	--ml-muted: #5c574a;

	--ml-accent: #0e443c;
	--ml-accent-hover: #0a332d;
	--ml-accent-rgb: 14, 68, 60;
	--ml-accent-hover-rgb: 10, 51, 45;
	--ml-on-accent: #f4f2e9;
	--ml-hot: #d8f23a;
	--ml-danger: #c0392b;
	--ml-on-danger: #f4f2e9;

	--ml-line: #16140f;
	--ml-shadow: #16140f;
	--ml-grid-line: rgba(22, 20, 15, .04);
	--ml-focus: #16140f;

	--ml-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
	--ml-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Offset shadow depths — the structural signature of the system. */
	--ml-lift: 4px 4px 0 var(--ml-shadow);
	--ml-lift-press: 2px 2px 0 var(--ml-shadow);
	--ml-lift-panel: 6px 6px 0 var(--ml-shadow);
}

[data-bs-theme="dark"] {
	--ml-bg: #0b0b0b;
	--ml-paper: #0b0b0b;
	--ml-card: #141414;
	--ml-surface-hot: #331066;
	--ml-ink: #f2f0e6;
	--ml-muted: #bdbab0;

	--ml-accent: #bb98ff;
	--ml-accent-hover: #e3d6ff;
	--ml-accent-rgb: 187, 152, 255;
	--ml-accent-hover-rgb: 227, 214, 255;
	--ml-on-accent: #0b0b0b;
	--ml-hot: #bb98ff;
	--ml-danger: #ff5a52;
	--ml-on-danger: #0b0b0b;

	--ml-line: #f2f0e6;
	--ml-shadow: #bb98ff;
	--ml-grid-line: rgba(242, 240, 230, .07);
	--ml-focus: #bb98ff;
}

/* ==================================================================
   3. Bridge into the framework's variable layer
   ================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
	--bs-body-bg: var(--ml-bg);
	--bs-body-color: var(--ml-ink);
	--bs-emphasis-color: var(--ml-ink);
	--bs-secondary-color: var(--ml-muted);
	--bs-tertiary-bg: var(--ml-card);
	--bs-body-font-family: var(--ml-font-display);
	--bs-body-font-size: 15px;
	--bs-body-line-height: 1.6;

	--bs-border-color: var(--ml-line);
	--bs-border-width: 2px;
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-2xl: 0;
	--bs-border-radius-pill: 0;

	/* The framework colours links through rgba(var(--bs-link-color-rgb), …),
	   so the RGB triplets are what actually take effect here. */
	--bs-link-color: var(--ml-accent);
	--bs-link-hover-color: var(--ml-accent-hover);
	--bs-link-color-rgb: var(--ml-accent-rgb);
	--bs-link-hover-color-rgb: var(--ml-accent-hover-rgb);
	--bs-code-color: var(--ml-accent);

	--bs-heading-color: var(--ml-ink);
	--bs-focus-ring-width: 0;
	--bs-focus-ring-opacity: 0;
}

/* ==================================================================
   4. Base
   ================================================================== */

/* One content column for the whole page. The framework's container-fluid runs
   to the viewport edge, which on a wide screen stretches every panel to 1800px
   while the copy inside stops at its reading measure — the gap between the two
   is what makes the line endings look hand-placed. Bar, box and paragraph now
   end at the same place. The navbar and footer rules stay full width; only
   their contents are pulled into the column. */
.navbar > .container-fluid,
main > .container-fluid,
.ml-footer {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

body {
	background-color: var(--ml-bg);
	background-image:
		repeating-linear-gradient(45deg, var(--ml-grid-line) 0 1px, transparent 1px 16px),
		repeating-linear-gradient(-45deg, var(--ml-grid-line) 0 1px, transparent 1px 16px);
	background-attachment: fixed;
	color: var(--ml-ink);
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--ml-hot);
	color: #000;
}

:focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 3px;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ml-font-display);
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

/* The brand name has deliberate casing. Headings are uppercased across this
   system, so the name has to opt out wherever it appears inside one. */
.ml-name {
	text-transform: none;
}

kbd {
	border-radius: 0;
	background: var(--ml-ink);
	color: var(--ml-bg);
	font-family: var(--ml-font-mono);
}

/* ==================================================================
   5. Navbar and wordmark
   ================================================================== */

.navbar {
	--bs-navbar-padding-y: .45rem;
	--bs-navbar-color: var(--ml-ink);
	--bs-navbar-hover-color: var(--ml-accent);
	--bs-navbar-active-color: var(--ml-accent);
	--bs-navbar-brand-color: var(--ml-ink);
	--bs-navbar-brand-hover-color: var(--ml-ink);
	background-color: var(--ml-paper) !important;
	border-bottom: 2px solid var(--ml-line);
}

/* The bar carries the wordmark and nothing else. Document actions moved into
   the content, appearance into the footer: neither is site chrome, and having
   them here made the header read as a pile of unrelated controls. */

/* Wordmark: replaces the stock logo image. */
.ml-brand {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1;
	text-decoration: none;
}

.ml-brand:hover .ml-brand__mark {
	background: var(--ml-hot);
	color: #000;
}

.ml-brand__mark {
	font-family: var(--ml-font-display);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -.04em;
	/* No uppercase transform: the wordmark carries the brand's own casing. */
	color: var(--ml-ink);
	padding: 1px 4px;
	margin-left: -4px;
	transition: background .12s steps(2, end), color .12s steps(2, end);
}

.ml-brand__meta {
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

/* ==================================================================
   6. Buttons — ink border, hard offset shadow, mechanical press
   ================================================================== */

.btn {
	--bs-btn-padding-x: 13px;
	--bs-btn-padding-y: 7px;
	--bs-btn-font-family: var(--ml-font-mono);
	--bs-btn-font-size: 12px;
	--bs-btn-font-weight: 700;
	--bs-btn-line-height: 1.4;
	--bs-btn-border-width: 2px;
	--bs-btn-border-radius: 0;
	--bs-btn-border-color: var(--ml-line);
	--bs-btn-hover-border-color: var(--ml-line);
	--bs-btn-active-border-color: var(--ml-line);
	--bs-btn-disabled-border-color: var(--ml-line);
	--bs-btn-focus-shadow-rgb: 0 0 0;

	--bs-btn-bg: var(--ml-card);
	--bs-btn-color: var(--ml-ink);
	--bs-btn-hover-bg: var(--ml-hot);
	--bs-btn-hover-color: #000;
	--bs-btn-active-bg: var(--ml-hot);
	--bs-btn-active-color: #000;
	--bs-btn-disabled-bg: var(--ml-card);
	--bs-btn-disabled-color: var(--ml-muted);

	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: var(--ml-lift);
	transition: transform .12s steps(2, end), box-shadow .12s steps(2, end), background-color .12s steps(2, end);
}

.btn:hover {
	transform: translate(2px, 2px);
	box-shadow: var(--ml-lift-press);
}

.btn:active,
.btn.active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--ml-shadow);
}

.btn:disabled,
.btn.disabled {
	transform: none;
	box-shadow: var(--ml-lift);
	opacity: .55;
}

.btn-primary,
.btn-success {
	--bs-btn-bg: var(--ml-accent);
	--bs-btn-color: var(--ml-on-accent);
	--bs-btn-hover-bg: var(--ml-accent-hover);
	--bs-btn-hover-color: var(--ml-on-accent);
	--bs-btn-active-bg: var(--ml-accent-hover);
	--bs-btn-active-color: var(--ml-on-accent);
}

.btn-danger {
	--bs-btn-bg: var(--ml-danger);
	--bs-btn-color: var(--ml-on-danger);
	--bs-btn-hover-bg: var(--ml-danger);
	--bs-btn-hover-color: var(--ml-on-danger);
	--bs-btn-active-bg: var(--ml-danger);
	--bs-btn-active-color: var(--ml-on-danger);
}

.btn-sm {
	--bs-btn-padding-x: 11px;
	--bs-btn-padding-y: 5px;
	--bs-btn-font-size: 11px;
	box-shadow: var(--ml-lift-press);
}

/* The one energy moment: creating a document. */
#sendbutton:hover {
	--bs-btn-hover-bg: var(--ml-hot);
	--bs-btn-hover-color: #000;
}

/* Password reveal sits flush inside the input group, so it carries no lift. */
.input-group .btn,
.btn-close {
	box-shadow: none;
}

.input-group .btn:hover,
.input-group .btn:active {
	transform: none;
	box-shadow: none;
}

.btn-close {
	border-radius: 0;
}

/* ==================================================================
   7. Forms
   ================================================================== */

.form-control,
.form-select {
	--bs-border-radius: 0;
	background-color: var(--ml-card);
	border: 2px solid var(--ml-line);
	color: var(--ml-ink);
	font-family: var(--ml-font-mono);
	font-size: 13px;
}

.form-control::placeholder {
	color: var(--ml-muted);
	opacity: 1;
}

.form-control:focus,
.form-select:focus {
	background-color: var(--ml-card);
	border-color: var(--ml-line);
	color: var(--ml-ink);
	box-shadow: none;
	outline: 3px solid var(--ml-focus);
	outline-offset: 2px;
}

.form-label,
.form-check-label {
	font-family: var(--ml-font-mono);
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--ml-ink);
}

.form-check-input {
	border: 2px solid var(--ml-line);
	border-radius: 0;
	background-color: var(--ml-card);
}

.form-check-input:checked {
	background-color: var(--ml-accent);
	border-color: var(--ml-line);
}

.form-check-input:focus {
	border-color: var(--ml-line);
	box-shadow: none;
	outline: 3px solid var(--ml-focus);
	outline-offset: 2px;
}

/* The switch keeps its pill knob track but loses the rounded corners. */
.form-switch .form-check-input {
	border-radius: 0;
}

/* The editor is the centre of gravity: give it the panel treatment.
   Upstream sets rows="25", which renders about 500px and swallows the viewport
   on a laptop. Override the height so the note, the controls and the start of
   the explanation share the first screen; the native resize handle still lets
   anyone pull it open for long notes. */
#message,
#replymessage {
	background-color: var(--ml-card);
	border: 2px solid var(--ml-line);
	box-shadow: var(--ml-lift-panel);
	font-family: var(--ml-font-mono);
	font-size: 14px;
	line-height: 1.55;
	padding: 12px;
	height: 230px;
	min-height: 120px;
	max-height: 65vh;
}

#message:focus,
#replymessage:focus {
	box-shadow: var(--ml-lift-panel);
}

#dragAndDropFileName {
	font-family: var(--ml-font-mono);
	font-size: 11px;
	color: var(--ml-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 8px;
}

/* ==================================================================
   8. Cards and rendered document
   ================================================================== */

.card,
[data-bs-theme="light"] .card,
[data-bs-theme="dark"] .card {
	background-color: var(--ml-card);
	border: 2px solid var(--ml-line);
	border-radius: 0;
	box-shadow: var(--ml-lift-panel);
}

pre,
[data-bs-theme="light"] pre,
[data-bs-theme="dark"] pre {
	background-color: var(--ml-card);
	color: var(--ml-ink);
	font-family: var(--ml-font-mono);
	font-size: 13px;
	line-height: 1.55;
}

#prettymessage {
	margin-bottom: 16px;
}

#plaintext {
	font-family: var(--ml-font-mono);
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

#placeholder {
	font-family: var(--ml-font-mono);
	font-size: 13px;
	color: var(--ml-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

#pastelink {
	font-family: var(--ml-font-mono);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* ==================================================================
   9. Alerts — flat blocks with a heavy leading rule
   ================================================================== */

.alert {
	--bs-alert-border-radius: 0;
	--bs-alert-border: 2px solid var(--ml-line);
	--bs-alert-bg: var(--ml-card);
	--bs-alert-color: var(--ml-ink);
	--bs-alert-link-color: var(--ml-accent);
	border-left-width: 8px;
	font-size: 14px;
}

.alert-info {
	--bs-alert-border-color: var(--ml-line);
	border-left-color: var(--ml-accent);
}

.alert-success {
	border-left-color: var(--ml-accent);
}

.alert-warning {
	border-left-color: var(--ml-hot);
}

.alert-danger {
	--bs-alert-color: var(--ml-ink);
	border-left-color: var(--ml-danger);
}

.alert svg {
	color: var(--ml-muted);
}

#remainingtime {
	font-family: var(--ml-font-mono);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 12px;
}

/* ==================================================================
   10. Editor tabs
   ================================================================== */

.nav-tabs {
	--bs-nav-tabs-border-width: 2px;
	--bs-nav-tabs-border-color: var(--ml-line);
	--bs-nav-tabs-border-radius: 0;
	--bs-nav-tabs-link-active-bg: var(--ml-surface-hot);
	--bs-nav-tabs-link-active-color: var(--ml-ink);
	--bs-nav-tabs-link-active-border-color: var(--ml-line) var(--ml-line) var(--ml-surface-hot);
	--bs-nav-tabs-link-hover-border-color: var(--ml-line);
	--bs-nav-link-color: var(--ml-muted);
	--bs-nav-link-hover-color: var(--ml-ink);
	--bs-nav-link-font-size: 12px;
	align-items: flex-end;
	margin-bottom: 10px;
}

.nav-tabs .nav-link {
	font-family: var(--ml-font-mono);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 0;
}

/* ==================================================================
   11. Dropdowns and modals
   ================================================================== */

.dropdown-menu {
	--bs-dropdown-bg: var(--ml-card);
	--bs-dropdown-color: var(--ml-ink);
	--bs-dropdown-border-color: var(--ml-line);
	--bs-dropdown-border-width: 2px;
	--bs-dropdown-border-radius: 0;
	--bs-dropdown-link-color: var(--ml-ink);
	--bs-dropdown-link-hover-bg: var(--ml-hot);
	--bs-dropdown-link-hover-color: #000;
	--bs-dropdown-link-active-bg: var(--ml-accent);
	--bs-dropdown-link-active-color: var(--ml-on-accent);
	--bs-dropdown-font-size: 13px;
	box-shadow: var(--ml-lift-panel);
}

.dropdown-item {
	font-family: var(--ml-font-mono);
}

/* Secondary settings panel. Password, format and appearance live here so the
   bar itself carries only what a note actually needs: how long it lasts and
   whether it burns on first open. */
.ml-settings {
	padding: 14px;
	display: none;
}

.ml-settings.show {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ml-settings .form-label {
	display: block;
	margin-bottom: 4px;
}

.ml-settings .form-select,
.ml-settings .form-control,
.ml-settings .input-group {
	width: 100%;
}

.nav-link {
	font-family: var(--ml-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.modal-content {
	--bs-modal-bg: var(--ml-card);
	--bs-modal-color: var(--ml-ink);
	--bs-modal-border-color: var(--ml-line);
	--bs-modal-border-width: 2px;
	--bs-modal-border-radius: 0;
	--bs-modal-header-border-color: var(--ml-line);
	--bs-modal-footer-border-color: var(--ml-line);
	box-shadow: var(--ml-lift-panel);
}

.modal-title {
	font-size: 16px;
}

/* ==================================================================
   12. Discussion
   ================================================================== */

#discussion h4 {
	font-size: 15px;
	border-bottom: 2px solid var(--ml-line);
	padding-bottom: 8px;
	margin-bottom: 14px;
}

.comment {
	background: var(--ml-card);
	border: 2px solid var(--ml-line);
	margin-bottom: 12px;
	padding-top: 10px;
}

.commentmeta {
	font-family: var(--ml-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ml-muted);
	display: flex;
	gap: 10px;
	margin-bottom: 6px;
}

.commentmeta .nickname {
	color: var(--ml-ink);
	font-weight: 700;
}

.commentdata {
	font-size: 14px;
	overflow-wrap: anywhere;
}

/* ==================================================================
   12b. Composer strip — the controls that belong to an unsent note
   ================================================================== */

.ml-composer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px 28px;
	margin: 4px 0 18px;
	padding-top: 15px;
	border-top: 2px solid var(--ml-line);
}

.ml-composer__options {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}

.ml-composer__expiry {
	display: flex;
	align-items: center;
	gap: 9px;
}

.ml-composer__expiry .form-label {
	margin: 0;
	white-space: nowrap;
}

.ml-composer__expiry .form-select {
	width: auto;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Burning on first read is the product, not a preference. The input has to
   stay in the DOM and stay checked; only its presentation is dropped. An id
   selector outranks the framework's .form-check without !important, so this
   cannot fight the application's own .hidden gate. */
#burnafterreadingoption {
	display: none;
}

/* The one sentence that states what the link will do. It replaces the switch
   above, so it carries ink rather than muted grey. */
.ml-composer__status {
	grid-column: 1;
	margin: 0;
	padding-left: 11px;
	border-left: 3px solid var(--ml-accent);
	font-family: var(--ml-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ml-ink);
	min-height: 1.5em;
}

.ml-composer__action {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: end;
}

#sendbutton {
	--bs-btn-padding-x: 26px;
	--bs-btn-padding-y: 14px;
	--bs-btn-font-size: 14px;
	letter-spacing: .1em;
	white-space: nowrap;
}

/* With "Nur Text" as the only reachable format the tab row holds a single tab
   and the create button has moved below the editor, so nothing is left to
   show. Concealing only — the application still toggles the element itself. */
#editorTabs {
	display: none;
}

/* Note options: password and format, the two properties of an unsent note that
   most notes never need. Quiet enough not to compete with the create button. */
.ml-composer__more .nav-link {
	padding: 0;
	color: var(--ml-muted);
}

.ml-composer__more .nav-link:hover,
.ml-composer__more .nav-link:focus-visible {
	color: var(--ml-ink);
}

/* ==================================================================
   12c. Action bar — what can be done with the note on screen
   ================================================================== */

.ml-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

/* Set by js/mortalink.js when no child is visible. Without it the row leaves
   its margin behind on every screen that has nothing to offer. */
.ml-actions--empty {
	display: none;
}

.ml-actions .btn {
	--bs-btn-font-size: 11px;
	--bs-btn-padding-y: 7px;
	--bs-btn-padding-x: 13px;
	box-shadow: var(--ml-lift-press);
}

.ml-actions .btn:hover {
	box-shadow: 0 0 0 var(--ml-shadow);
}

.ml-actions__status {
	font-family: var(--ml-font-mono);
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--ml-muted);
}

/* The heading only exists to carry an id the application binds to. Its button
   belongs in the row with the others, so the wrapper itself draws no box. */
#copyShortcutHint {
	display: contents;
}

/* The button says what it does; the sentence beside it said it again.
   !important is required only because the framework's display utility on this
   element is itself !important. Concealing can never reveal, so it cannot
   fight the application's .hidden gate. */
#copyShortcutHintText {
	display: none !important;
}

/* While a note is being written, "Neue Notiz" only resets a form the visitor
   is already looking at, and it competes with the create button below. It
   returns as soon as there is something to move on from. Tying this to the
   landing page instead was wrong: the success view is served by that same
   document, so the button sat muted where it was the way onward. */
.ml-composing #newbutton {
	/* !important only because the button carries the framework's d-flex
	   utility, which is itself !important. Concealing can never reveal. */
	display: none !important;
}

/* After the link exists, the note text was written moments ago; copying it is
   already offered by the success message above. On a received note it stays. */
.ml-created #copyShortcutHint {
	display: none;
}

/* ==================================================================
   12c. Landing page — hero, sections, steps, FAQ
   ================================================================== */

.ml-hero {
	margin-top: 30px;
	margin-bottom: 26px;
}

.ml-hero__kicker {
	display: inline-block;
	margin: 0 0 14px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--ml-accent);
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

/* No narrow measure here. A hard max-width on a headline this size dictates
   where every line ends and reads as if the breaks were typed by hand; the
   line count is left to the viewport, and balance only evens out what is
   already there. */
/* No measure of its own. The content column decides how many lines this takes;
   balance only evens out the lines that result. A ch-based cap here is what
   produced the hand-typed look — ch is the width of a zero, which in a
   proportional display face is far narrower than an average character. */
.ml-hero__title {
	margin: 0 0 16px;
	font-size: clamp(29px, 5vw, 48px);
	line-height: 1.03;
	text-wrap: balance;
}

.ml-hero__lead {
	margin: 0;
	max-width: 760px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ml-muted);
	text-wrap: pretty;
}

/* Section label in the datasheet manner: a rule with a name on it. */
.ml-section__title {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ml-line);
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--ml-muted);
}

.ml-steps {
	margin-top: 36px;
}

.ml-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ml-step;
	border: 2px solid var(--ml-line);
	box-shadow: var(--ml-lift-panel);
}

.ml-steps__item {
	counter-increment: ml-step;
	background: var(--ml-card);
	outline: 1px solid var(--ml-line);
	padding: 16px 18px 19px;
}

.ml-steps__item::before {
	content: counter(ml-step, decimal-leading-zero);
	display: block;
	margin-bottom: 11px;
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	color: var(--ml-accent);
}

.ml-steps__title {
	margin: 0 0 8px;
	font-size: 13px;
}

.ml-steps__item p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ml-muted);
}

/* The footer's mt-auto collapses to nothing once the page is taller than the
   viewport, so the last panel needs its own clearance or its offset shadow
   lands on the footer rule. */
.ml-faq {
	margin-top: 36px;
	margin-bottom: 34px;
}

/* Two columns from the point where one would leave a 100-character line. They
   are separate stacks, not grid rows: an open answer must not stretch the
   closed question beside it. */
.ml-faq__list {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--ml-card);
	border: 2px solid var(--ml-line);
	box-shadow: var(--ml-lift-panel);
}

@media (min-width: 992px) {
	.ml-faq__list {
		grid-template-columns: 1fr 1fr;
	}

	.ml-faq__col + .ml-faq__col {
		border-left: 2px solid var(--ml-line);
	}
}

.ml-faq__item + .ml-faq__item,
.ml-faq__col + .ml-faq__col .ml-faq__item:first-child {
	border-top: 2px solid var(--ml-line);
}

@media (min-width: 992px) {
	.ml-faq__col + .ml-faq__col .ml-faq__item:first-child {
		border-top: 0;
	}
}

.ml-faq__question {
	position: relative;
	padding: 13px 46px 13px 16px;
	list-style: none;
	cursor: pointer;
	font-family: var(--ml-font-display);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: -.01em;
	color: var(--ml-ink);
}

.ml-faq__question::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a cross when the answer is open. Rotating one glyph
   avoids a second character that German copy rules would have to argue about. */
.ml-faq__question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 15px;
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	color: var(--ml-accent);
	transform: translateY(-50%);
	transition: transform .12s steps(2, end);
}

.ml-faq__item[open] .ml-faq__question::after {
	transform: translateY(-50%) rotate(45deg);
}

.ml-faq__question:hover {
	background: var(--ml-hot);
	color: #000;
}

.ml-faq__question:hover::after {
	color: #000;
}

.ml-faq__answer {
	margin: 0;
	padding: 0 46px 17px 16px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ml-muted);
	text-wrap: pretty;
}

/* ==================================================================
   12c. Controls removed from the public flow
   ==================================================================
   The elements stay in the DOM so the application's own bindings keep
   working — only their presentation is dropped. Cloning a note and the
   tabulator-key preference add nothing to the intended flow.
   ================================================================== */

/* !important is required: these carry the framework's own `d-flex` utility,
   which is itself !important. Hiding a specific element this way is safe — it
   can only conceal, never reveal, so it cannot fight the app's `.hidden` gate.
   Separate rules on purpose: an unsupported :has() would otherwise invalidate
   the whole selector list and un-hide both. */
#clonebutton {
	display: none !important;
}

/* With "Nur Text" as the default format the preview tab only ever shows the
   same text again. Markdown users lose the preview; the format sits behind the
   settings panel and is a niche case for this service. */
.nav-item:has(#messagepreview) {
	display: none !important;
}

.form-switch:has(#messagetab) {
	display: none !important;
}

/* ==================================================================
   13. Footer
   ================================================================== */

footer {
	border-top: 2px solid var(--ml-line);
	margin-top: 24px;
	padding-top: 12px;
	padding-bottom: 14px;
	font-size: 13px;
}

/* One row: brand, one-line claim, legal links. Wraps on narrow viewports
   instead of forcing a horizontal scroll. */
.ml-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 24px;
}

.ml-footer__brand {
	margin: 0;
	font-size: 15px;
	white-space: nowrap;
}

.ml-footer__brand small {
	margin-left: 10px;
	font-family: var(--ml-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--ml-muted);
}

.ml-footer__note {
	margin: 0;
	flex: 1 1 20ch;
	min-width: 0;
	color: var(--ml-muted);
	font-size: 13px;
	line-height: 1.5;
}

.ml-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-left: auto;
}

.ml-footer__legal a {
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ml-ink);
	text-decoration: none;
	padding: 2px 4px;
}

.ml-footer__legal a:hover,
.ml-footer__legal a:focus-visible {
	background: var(--ml-hot);
	color: #000;
}

/* Visitor preferences, next to the legal links: site furniture, not a step in
   any flow. */
.ml-footer__prefs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}

.ml-footer__prefs .form-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-left: 0;
	min-height: 0;
}

.ml-footer__prefs .form-check-input {
	margin: 0;
	float: none;
}

.ml-footer__prefs .form-check-label,
.ml-footer__prefs .nav-link {
	font-family: var(--ml-font-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ml-ink);
	padding: 0;
}

/* ==================================================================
   14. Responsive and motion
   ================================================================== */

@media (max-width: 991.98px) {
	.btn {
		box-shadow: var(--ml-lift-press);
	}

	#message,
	.card,
	.modal-content,
	.dropdown-menu {
		box-shadow: var(--ml-lift);
	}
}

/* The create button leaves the right-hand column and takes the full width, so
   the strip reads top to bottom: how long, what that means, and the one action. */
@media (max-width: 767.98px) {
	.ml-composer {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.ml-composer__action {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
	}

	#sendbutton {
		width: 100%;
	}
}

@media (max-width: 575.98px) {
	.ml-brand__mark {
		font-size: 18px;
	}

	.ml-hero {
		margin-top: 22px;
	}

	.ml-hero__title {
		max-width: none;
	}

	/* Shorter editor on phones so the expiry, the status line and the create
	   button all fit above the fold, browser chrome included. The resize handle
	   still opens it up for a long note. */
	#message {
		height: 180px;
	}

	.ml-brand__meta {
		font-size: 8px;
		letter-spacing: .1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.ml-brand__mark,
	.ml-faq__question::after {
		transition: none;
	}

	.btn:hover,
	.btn:active,
	.btn.active {
		transform: none;
	}
}