/*
 * Seeking Alpha — shared mockup styles
 *
 * Anchored on infra/sites/seeking-alpha/index.html (the placeholder).
 * Paper-feel serif. Restrained. System-adaptive dark mode.
 * Negative space is the design.
 */

:root {
	/* Column width — single source of truth, easy to tune */
	--column: 42rem;

	/* Light — warm paper, near-black ink */
	--bg:        #fafaf7;
	--ink:           #1a1a1a;
	--ink-soft:      #4a4a48;   /* secondary text */
	--ink-muted:     #8a8a86;   /* tertiary / meta */
	--rule:          #e6e4dc;   /* hairlines */
	--accent:        #1a1a1a;   /* link colour — same as ink, underline-only */

	/* Warm accent — terracotta. Used sparingly (caret, primary action
	 * hover, selection, focused inputs, active signals). The whole point
	 * is one quiet hue that adds life without breaking restraint. */
	--accent-warm:      #c2603e;
	--accent-warm-soft: rgba(194, 96, 62, 0.16);

	--select:        #efd9cb;   /* tinted with --accent-warm */
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg:               #111111;
		--ink:              #e8e8e6;
		--ink-soft:         #b4b4b0;
		--ink-muted:        #707070;
		--rule:             #2a2a28;
		--accent:           #e8e8e6;

		--accent-warm:      #e08868;
		--accent-warm-soft: rgba(224, 136, 104, 0.18);

		--select:           #3a261d;
	}
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--ink);
	font-family: ui-serif, Georgia, "Iowan Old Style", "Charter", "New York", serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.65;
	font-feature-settings: "kern", "liga", "onum";
	font-variant-numeric: oldstyle-nums proportional-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--select); }

/* ────────────────────────────────────────────────────────────────
 * Masthead — tiny non-link wordmark, top of page
 * No nav, because there is nowhere to navigate to. The reader has
 * a URL; that is the entire site, from their perspective.
 * ──────────────────────────────────────────────────────────────── */

.masthead {
	max-width: var(--column);
	margin: 0 auto;
	padding: 2.25rem 1.5rem 0;
}
/* Wordmark — small warm-accent label, sits as either span or anchor.
 * Anchor variant lets the authed owner click back to /console; share-link
 * readers get a plain span (dead-end, no information leak about /console
 * existing). Same visual either way. */
.masthead .wordmark {
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--accent-warm);
	text-transform: lowercase;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
a.wordmark { display: inline-block; }
a.wordmark:hover { opacity: 0.75; }
/* Masthead state crumb (e.g. "· private" for owner-only previews).
 * Matches the wordmark's quiet typography — same size, same lowercase,
 * same letter-spacing — so it reads as part of the wordmark, not an
 * after-thought. The dot is muted; the state word is italic ink-soft.
 * Hover gives the longer explanation via title attr (set in template). */
.masthead .masthead-crumb {
	color: var(--ink-muted);
	font-size: 0.78rem;
	opacity: 0.6;
	margin: 0 0.35rem 0 0.5rem;
}
.masthead .masthead-state {
	font-size: 0.78rem;
	font-style: italic;
	letter-spacing: 0.04em;
	color: var(--ink-muted);     /* match wordmark muteness — italic alone distinguishes the state */
	text-transform: lowercase;
	cursor: help;
	opacity: 0.85;               /* one nudge softer than the wordmark — state is subordinate */
}

/* ────────────────────────────────────────────────────────────────
 * Article container
 * ──────────────────────────────────────────────────────────────── */

article {
	max-width: var(--column);
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

/* Post header */
.post-header { margin-bottom: 2.5rem; }

h1 {
	font-weight: 300;
	font-size: 2.4rem;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
}

.dek {
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.4;
	color: var(--ink-soft);
	margin: 0 0 1.2rem;
}

.meta {
	font-size: 0.8rem;
	font-style: italic;
	color: var(--ink-muted);
	margin: 0;
}

/* Body prose */
.post-body p {
	margin: 0 0 1.1em;
}

.post-body h2 {
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 2.6rem 0 0.9rem;
}

.post-body h3 {
	font-weight: 600;
	font-size: 1.05rem;
	margin: 2rem 0 0.7rem;
}

/* Inline elements */
.post-body em { font-style: italic; }
.post-body strong { font-weight: 600; }

.post-body a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ink-muted);
	text-underline-offset: 0.18em;
	transition: text-decoration-color 0.15s ease;
}
.post-body a:hover { text-decoration-color: var(--accent-warm); color: var(--accent-warm); }

/* Blockquote — thin hairline left rule + small left-double-quote glyph
 * top-left. Restrained: the bar is 1px ink-muted, the glyph is muted
 * and small enough to read as a typographic mark, not an ornament.
 */
/* Blockquote — large opening-quote glyph as a graphic marker at top-left,
 * sized to function as an icon rather than a typographic accent. The glyph
 * is the indicator; no bar, no chrome. Quoted text sits below, slightly
 * indented so the glyph anchors the corner. Restrained via ink-soft
 * (not full ink), regular weight (not display), but big enough to register. */
.post-body blockquote {
	position: relative;
	margin: 2.2rem 0 2.2rem 0.4rem;
	padding: 1.65rem 0 0 1.6rem;    /* top padding = body line-height; glyph-to-text gap reads as one line of rhythm */
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.55;
	color: var(--ink-soft);
}
.post-body blockquote::before {
	content: "\201C";                /* left double quotation mark */
	position: absolute;
	top: 0;
	left: 0;
	font-family: ui-serif, Georgia, "Iowan Old Style", "Charter", "New York", serif;
	font-style: normal;
	font-weight: 300;
	font-size: 3.4rem;
	line-height: 0.85;
	color: var(--ink-muted);
}
.post-body blockquote p { margin: 0; }

/* Lists — thin middle dot, quieter than an em-dash */
.post-body ul {
	list-style: none;
	padding-left: 0;
	margin: 1.1rem 0 1.4rem;
}
.post-body ul li {
	position: relative;
	padding-left: 1.4rem;
	margin: 0.45rem 0;
	line-height: 1.55;
}
.post-body ul li::before {
	content: "\00B7";              /* middle dot — small but a touch more present than ink-muted alone */
	position: absolute;
	left: 0.4rem;
	top: -0.08em;
	color: var(--ink-soft);
	font-size: 1.55em;
	line-height: 1;
}

.post-body ol {
	padding-left: 1.4rem;
	margin: 1.1rem 0 1.4rem;
}
.post-body ol li { margin: 0.4rem 0; }

/* Sign-off — em-dash + initial, right-aligned, restrained */
.post-body .signoff {
	margin-top: 2.2rem;
	color: var(--ink-muted);
	font-style: italic;
	text-align: right;
}

/* Inline code — for the rare technical aside. Generic across all surfaces. */
code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--rule);
	padding: 0.1em 0.35em;
	border-radius: 3px;
}

/* ────────────────────────────────────────────────────────────────
 * Post footer — minimal meta line at bottom
 * ──────────────────────────────────────────────────────────────── */

.post-footer {
	max-width: var(--column);
	margin: 0 auto;
	padding: 1.5rem 1.5rem 3rem;
	border-top: 1px solid var(--rule);
}
.post-footer .footer-meta {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--ink-muted);
	margin: 1.5rem 0 0;
}

/* ────────────────────────────────────────────────────────────────
 * Style guide page — the "kitchen sink"
 * Demos every prose element in one place. Industry term:
 * style guide / pattern library / kitchen sink page.
 * ──────────────────────────────────────────────────────────────── */

.style-guide section {
	margin: 3rem 0;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
}
.style-guide section:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 1rem;
}
.style-guide .section-label {
	font-size: 0.72rem;
	font-style: italic;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
	text-transform: lowercase;
	margin: 0 0 1.2rem;
}
.swatch-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 1rem 0 1.5rem;
}
.swatch {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-style: italic;
	color: var(--ink-muted);
}
.swatch-chip {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 4px;
	border: 1px solid var(--rule);
}

/* ────────────────────────────────────────────────────────────────
 * Editor — the writing surface
 *
 * Distraction-free by default: no formatting toolbar, no chrome.
 * Markdown shortcuts handle structure; the canvas IS the text.
 * Subtle app-bar at top (state + save + publish), subtle footer
 * (word count + keyboard hints). Inherits the read-view typography
 * so what you write is what you read — no mode discontinuity.
 * ──────────────────────────────────────────────────────────────── */

.editor-view { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }

.app-bar {
	position: sticky;
	top: 0;
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	z-index: 10;
}
/* Used on read-view-style pages (post) — drops the rule so the bar
 * blends into the paper surface, no horizontal seam between header
 * and prose. */
.app-bar.app-bar-seamless {
	border-bottom: none;
}
.app-bar-inner {
	max-width: var(--column);
	margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
/* Tool views (console + metrics) use a wider canvas — let the bar match. */
.console-view .app-bar-inner { max-width: 48rem; }
.app-bar-left, .app-bar-right {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.app-link {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--accent-warm);          /* brand colour by default */
	text-decoration: none;
	text-transform: lowercase;
	transition: color 0.15s ease;
}
.app-link:hover { color: var(--ink); }   /* shifts toward full ink on hover */
.app-crumb { color: var(--ink-muted); font-size: 0.85rem; opacity: 0.6; }
.app-context {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	text-transform: lowercase;
	font-style: italic;
}
/* Names (recipient on share-link views) preserve their case — italic + soft,
 * but not flattened to lowercase like the "for" / "private" labels. */
.app-context-name {
	text-transform: none;
}

/* Status pills — small, hairline border, no shouting */
.status-pill {
	font-size: 0.74rem;
	font-style: italic;
	letter-spacing: 0.03em;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	border: 1px solid var(--rule);
	color: var(--ink-soft);
	background: transparent;
	text-transform: lowercase;
}
.status-pill.status-draft     { color: var(--ink-muted); }
.status-pill.status-published { color: var(--accent-warm); border-color: var(--accent-warm-soft); }
.status-pill.status-public    { color: var(--ink); border-color: var(--ink-soft); }
.status-pill.status-shared    { color: var(--ink-soft); }

.save-state {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--ink-muted);
}

/* Buttons — restrained, hairline border, no fill until primary action */
.btn {
	font-family: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	padding: 0.4rem 0.9rem;
	border-radius: 4px;
	border: 1px solid var(--rule);
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
	text-decoration: none;        /* anchors styled as buttons */
	display: inline-block;
}
.btn:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn-primary {
	border-color: var(--ink);
	color: var(--ink);
}
.btn-primary:hover { background: var(--accent-warm); border-color: var(--accent-warm); color: #fff; }
.btn-ghost {
	border-color: transparent;
	color: var(--ink-muted);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.btn-ghost:hover { color: var(--accent-warm); border-color: transparent; }

/* Editor canvas */
.editor-canvas { flex: 1 0 auto; padding: 3rem 0 4rem; }
.editor-frame { max-width: var(--column); margin: 0 auto; padding: 0 1.5rem; }

.editor-title,
.editor-title-input {
	font-family: ui-serif, Georgia, "Iowan Old Style", "Charter", "New York", serif;
	font-weight: 300;
	font-size: 2.4rem;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
	outline: none;
	color: var(--ink);
}
input.editor-title-input {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	caret-color: var(--accent-warm);
}
.editor-title-input::placeholder { color: var(--ink-muted); font-weight: 300; }
.editor-dek,
.editor-dek-input {
	font-family: ui-serif, Georgia, "Iowan Old Style", "Charter", "New York", serif;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.4;
	color: var(--ink-soft);
	margin: 0 0 2rem;
	outline: none;
}
input.editor-dek-input {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	caret-color: var(--accent-warm);
}
.editor-dek-input::placeholder { color: var(--ink-muted); }

/* Body textarea — same paper-feel typography as the read view */
.editor-body-textarea {
	font-family: ui-serif, Georgia, "Iowan Old Style", "Charter", "New York", serif;
	font-size: 1.05rem;
	line-height: 1.65;
	font-weight: 400;
	color: var(--ink);
	background: transparent;
	border: 0;
	outline: none;
	width: 100%;
	min-height: 60vh;
	resize: none;
	padding: 0;
	margin: 0;
	caret-color: var(--accent-warm);
	font-feature-settings: "kern", "liga", "onum";
}
.editor-body-textarea::placeholder { color: var(--ink-muted); font-style: italic; }
.editor-body-textarea.dragging {
	box-shadow: 0 0 0 3px var(--accent-warm-soft);
	border-radius: 4px;
	transition: box-shadow 0.12s ease;
}

.editor-body { outline: none; }
.editor-body p { margin: 0 0 1.1em; }
.editor-body em { font-style: italic; }
.editor-body strong { font-weight: 600; }

/* Markdown-source visible: the **, ##, etc. show in muted colour while
 * the styled output renders alongside. iA Writer / Bear feel. */
.md-syntax {
	color: var(--ink-muted);
	font-weight: 300;
	font-style: normal;
	font-size: 0.9em;
}
.md-heading {
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 2.2rem 0 0.9rem;
}

/* Inherit the read-view blockquote treatment — what you write is what you read */
.editor-body blockquote {
	position: relative;
	margin: 2.2rem 0 2.2rem 0.4rem;
	padding: 1.65rem 0 0 1.6rem;
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.55;
	color: var(--ink-soft);
}
.editor-body blockquote::before {
	content: "\201C";
	position: absolute;
	top: 0;
	left: 0;
	font-family: ui-serif, Georgia, "Iowan Old Style", serif;
	font-style: normal;
	font-weight: 300;
	font-size: 3.4rem;
	line-height: 0.85;
	color: var(--ink-muted);
}

/* Cursor — blinking caret on the active line. Warm accent so your
 * writing has a quiet colour cue distinct from the prose ink. */
.cursor-line { color: var(--ink); }
.cursor {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	background: var(--accent-warm);
	vertical-align: text-bottom;
	margin-left: 1px;
	animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Editor footer — kept quiet; word count + keyboard hints */
.editor-footer {
	border-top: 1px solid var(--rule);
	background: var(--bg);
	flex-shrink: 0;
}
.footer-inner {
	max-width: var(--column);
	margin: 0 auto;
	padding: 0.7rem 1.5rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.72rem;
	font-style: italic;
	color: var(--ink-muted);
}
.footer-inner .word-count { letter-spacing: 0.02em; }

/* ────────────────────────────────────────────────────────────────
 * Console — the workshop
 *
 * Posts list grouped by state. Clicking a row expands an inline panel
 * showing share-token management + per-recipient analytics. New-post
 * action top-right. No nav menu — the console IS the only logged-in
 * surface besides the editor.
 * ──────────────────────────────────────────────────────────────── */

.console-view { background: var(--bg); min-height: 100vh; }

.console-frame {
	max-width: 48rem;            /* tool view; narrower than 52rem so type reads at comfortable distance */
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.console-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 2.8rem 0 0.5rem;
}
.console-title {
	font-weight: 300;
	font-size: 1.85rem;
	letter-spacing: -0.01em;
	margin: 0;
}
.console-sub {
	font-size: 0.9rem;
	font-style: italic;
	color: var(--ink-muted);
	margin: 0.4rem 0 0;
}

.console-section { margin-top: 2.8rem; }
.console-section-head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: var(--ink-muted);
	font-style: italic;
	margin: 0 0 0.7rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--rule);
}
.console-section-head .count {
	font-style: normal;
	color: var(--ink-muted);
}

.post-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 1.2rem;
	align-items: center;
	padding: 1rem 0.5rem;
	border-bottom: 1px solid var(--rule);
	transition: background 0.12s ease;
}
.post-row:hover { background: rgba(0,0,0,0.015); }
@media (prefers-color-scheme: dark) {
	.post-row:hover { background: rgba(255,255,255,0.03); }
}
.post-row-main {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.post-row-title {
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s ease;
}
.post-row-title:hover { color: var(--accent-warm); }
.post-row-title.untitled { color: var(--ink-muted); font-style: italic; }
.post-row-meta {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--ink-muted);
}
.post-row-pills {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}
.post-row-stats {
	font-size: 0.88rem;
	font-style: italic;
	color: var(--ink-muted);
	min-width: 5rem;
	text-align: right;
}
.post-row-link {
	color: var(--ink-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}
.post-row-link:hover { color: var(--accent-warm); }

/* ──── Per-post actions: 3-dot menu (Delete, Unpublish, …) ──── */

.post-actions {
	position: relative;
	display: inline-block;
}
.post-actions-trigger {
	cursor: pointer;
	list-style: none;
	color: var(--ink-muted);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.25rem 0.55rem;
	border-radius: 4px;
	transition: color 0.15s ease, background 0.12s ease;
	user-select: none;
}
.post-actions-trigger::marker,
.post-actions-trigger::-webkit-details-marker { display: none; content: ''; }
.post-actions-trigger::before {
	content: '\2022\2002\2022\2002\2022';        /* three bullets, en-spaced — calmer than ⋯ at this size */
	letter-spacing: -0.04em;
	font-size: 0.7em;
}
.post-actions-trigger:hover { color: var(--ink); }
.post-actions[open] .post-actions-trigger { background: var(--rule); color: var(--ink); }

.post-actions-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	background: var(--bg);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 0.3rem 0;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
	min-width: 9rem;
	z-index: 50;
}
@media (prefers-color-scheme: dark) {
	.post-actions-menu { box-shadow: 0 6px 22px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5); }
}
.post-actions-menu form {
	margin: 0;
}
.post-action-item {
	display: block;
	width: 100%;
	padding: 0.45rem 0.95rem;
	background: transparent;
	border: 0;
	text-align: left;
	font-family: inherit;
	font-size: 0.88rem;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.post-action-item:hover { background: var(--rule); color: var(--ink); }
.post-action-danger { color: var(--ink-soft); }
.post-action-danger:hover { background: var(--accent-warm-soft); color: var(--accent-warm); }

/* Expanded panel under a row — share-token management */
.post-row-panel {
	background: rgba(0,0,0,0.018);
	border-bottom: 1px solid var(--rule);
	padding: 1.3rem 1rem 1.5rem;
}
@media (prefers-color-scheme: dark) {
	.post-row-panel { background: rgba(255,255,255,0.025); }
}
.panel-section { margin-bottom: 1.4rem; }
.panel-section:last-child { margin-bottom: 0; }
.panel-label {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
	font-style: italic;
	text-transform: lowercase;
	margin: 0 0 0.7rem;
}

/* Token table */
.token-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.token-table th {
	font-weight: 400;
	font-style: italic;
	font-size: 0.8rem;
	text-align: left;
	letter-spacing: 0.04em;
	color: var(--ink-muted);
	padding: 0.5rem 0.55rem;
	border-bottom: 1px solid var(--rule);
	text-transform: lowercase;
}
.token-table td {
	padding: 0.65rem 0.55rem;
	border-bottom: 1px solid var(--rule);
	vertical-align: middle;
}
.token-table tr:last-child td { border-bottom: 0; }
.token-name { color: var(--ink); }
.token-url {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.85rem;
	color: var(--ink-muted);
}
.token-meta {
	font-size: 0.88rem;
	font-style: italic;
	color: var(--ink-muted);
}
.token-actions {
	display: flex;
	gap: 0.35rem;
	justify-content: flex-end;
}
.token-actions .btn { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
.token-row.revoked .token-name,
.token-row.revoked .token-url,
.token-row.revoked .token-meta { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-muted); }

/* Mint share-link form — inline, restrained */
.mint-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.7rem;
}
.mint-form input {
	flex: 1;
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--rule);
	background: var(--bg);
	color: var(--ink);
	border-radius: 4px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mint-form input:focus {
	border-color: var(--accent-warm);
	box-shadow: 0 0 0 3px var(--accent-warm-soft);
}
.mint-form input::placeholder { color: var(--ink-muted); font-style: italic; }

/* Public toggle row */
.public-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 0.5rem;
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.public-toggle-text { font-size: 0.95rem; color: var(--ink-soft); }
.public-toggle-text strong { color: var(--ink); font-weight: 500; }
.public-toggle-text-meta { font-size: 0.85rem; font-style: italic; color: var(--ink-muted); display: block; margin-top: 0.2rem; }
.toggle-switch {
	position: relative;
	width: 2.4rem;
	height: 1.3rem;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: var(--rule);
	cursor: pointer;
	transition: background 0.15s ease;
}
.toggle-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(1.3rem - 4px);
	height: calc(1.3rem - 4px);
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--ink-muted);
	transition: transform 0.15s ease;
}
.toggle-switch.on { background: var(--accent-warm); }
.toggle-switch.on::after { transform: translateX(1.1rem); border-color: var(--accent-warm); }

/* ────────────────────────────────────────────────────────────────
 * Metrics — per-post numbers surface
 * ──────────────────────────────────────────────────────────────── */

.metrics-frame {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.metrics-header { padding: 2.8rem 0 1rem; }
.metrics-title { font-weight: 300; font-size: 2rem; letter-spacing: -0.01em; margin: 0; }
.metrics-meta { font-size: 0.88rem; font-style: italic; color: var(--ink-muted); margin: 0.45rem 0 0; }

.metric-block {
	margin-top: 2.4rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--rule);
}
.metric-block:first-of-type { border-top: 0; padding-top: 0.5rem; }
.metric-block-label {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: var(--ink-muted);
	font-style: italic;
	margin: 0 0 1.1rem;
}

.metric-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.7rem 0;
	border-bottom: 1px dashed var(--rule);
	gap: 1rem;
}
.metric-row:last-child { border-bottom: 0; }
.metric-row-label { font-size: 1rem; color: var(--ink-soft); }
.metric-row-value {
	font-size: 1.15rem;
	font-variant-numeric: oldstyle-nums tabular-nums;
	color: var(--ink);
}
.metric-row-value.dim { color: var(--ink-muted); font-size: 1rem; font-style: italic; }

/* Sparkline — inline mini-chart, just enough signal */
.sparkline {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 1.6rem;
}
.sparkline span {
	display: inline-block;
	width: 5px;
	background: var(--ink-soft);
	opacity: 0.7;
	border-radius: 1px;
}
.sparkline span.peak { background: var(--accent-warm); opacity: 0.9; }

/* Signals callouts — italic, ink-soft, em-dash bullets like prose.
 * Warn variant uses the warm accent so unread / forwarded signals
 * earn a quiet visual nudge without shouting. */
.signals { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.signals li {
	position: relative;
	padding-left: 1.2rem;
	margin: 0.6rem 0;
	font-size: 1rem;
	color: var(--ink-soft);
	font-style: italic;
	line-height: 1.55;
}
.signals li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--ink-muted);
	font-style: normal;
}
.signals li.warn::before { color: var(--accent-warm); }
.signals li a { color: var(--accent-warm); text-decoration: underline; text-decoration-color: var(--accent-warm-soft); text-underline-offset: 0.18em; }
.signals li a:hover { text-decoration-color: var(--accent-warm); }

/* ────────────────────────────────────────────────────────────────
 * Mockups index
 * ──────────────────────────────────────────────────────────────── */

.index-frame {
	max-width: var(--column);
	margin: 0 auto;
	padding: 4rem 1.5rem;
}
.index-frame h1 { font-weight: 300; font-size: 2.2rem; letter-spacing: -0.015em; margin: 0 0 0.5rem; }
.index-frame .dek { margin-bottom: 2.5rem; }

.index-list { list-style: none; padding: 0; margin: 0; }
.index-list li {
	border-top: 1px solid var(--rule);
	padding: 1.2rem 0;
}
.index-list li:last-child { border-bottom: 1px solid var(--rule); }
.index-list a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.index-list .index-name {
	font-size: 1.15rem;
	color: var(--ink);
	margin: 0 0 0.25rem;
}
.index-list .index-desc {
	font-size: 0.95rem;
	color: var(--ink-soft);
	font-style: italic;
	margin: 0;
}
.index-list a:hover .index-name { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ink-muted); text-underline-offset: 0.18em; }

/* ────────────────────────────────────────────────────────────────
 * Images in prose — read view + editor share the figure treatment.
 * Slight negative horizontal margin so images break a touch wider
 * than the column without leaving it. Caption italic + centred.
 * ──────────────────────────────────────────────────────────────── */

.post-body figure,
.editor-body figure {
	margin: 2.4rem -0.5rem;
	padding: 0;
}
.post-body figure img,
.editor-body figure img,
.post-body figure .image-placeholder,
.editor-body figure .image-placeholder {
	display: block;
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--rule);
}
.post-body figure figcaption,
.editor-body figure figcaption {
	font-size: 0.92rem;
	font-style: italic;
	color: var(--ink-muted);
	text-align: center;
	margin-top: 0.75rem;
	line-height: 1.45;
}

/* Mockup placeholder image — gradient stand-in. Real images replace it. */
.image-placeholder {
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #e8e3d4 0%, #c9c2ad 60%, #a8a698 100%);
}
@media (prefers-color-scheme: dark) {
	.image-placeholder {
		background: linear-gradient(135deg, #2c2c2a 0%, #393937 50%, #1f1f1d 100%);
	}
}

/* Editor: markdown source shown above the rendered image, mono + muted */
.editor-body figure .md-syntax-line {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.82rem;
	color: var(--ink-muted);
	margin: 0 0 0.7rem;
	text-align: left;
}

/* ────────────────────────────────────────────────────────────────
 * Floating selection toolbar — appears above selected text in editor.
 * Hairline, low elevation, single-line. Buttons inherit btn-ghost
 * weight so the toolbar feels like a quiet presence, not chrome.
 * ──────────────────────────────────────────────────────────────── */

.selection-toolbar {
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
	background: var(--bg);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 0.25rem;
	box-shadow: 0 6px 20px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.06);
	font-size: 0.85rem;
	/* Production toolbar is JS-positioned (editor.src.ts → updateSelectionToolbar).
	 * Fixed escapes the editor's stacking context; z-index keeps it above prose.
	 * In the static mockup file the toolbar is laid out inline, so position:fixed
	 * applies there too but the page renders without it anchored — close enough
	 * for design review. */
	position: fixed;
	z-index: 1000;
	white-space: nowrap;
}
.selection-toolbar[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
	.selection-toolbar {
		box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
	}
}
.selection-toolbar button {
	font-family: inherit;
	font-size: 0.95rem;
	background: transparent;
	border: 0;
	color: var(--ink-soft);
	padding: 0.25rem 0.55rem;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
	min-width: 1.8rem;
	line-height: 1;
}
.selection-toolbar button:hover { background: var(--accent-warm-soft); color: var(--accent-warm); }
.selection-toolbar .tb-bold     { font-weight: 700; }
.selection-toolbar .tb-italic   { font-style: italic; }
.selection-toolbar .tb-link     { font-size: 0.78rem; padding: 0.4rem 0.55rem; }
.selection-toolbar .tb-h2       { font-size: 0.78rem; padding: 0.4rem 0.55rem; letter-spacing: 0.02em; }
.selection-toolbar .tb-quote    { font-size: 1.1rem; padding: 0.15rem 0.6rem 0.35rem; }
.selection-toolbar .tb-divider  {
	width: 1px;
	height: 1.1rem;
	background: var(--rule);
	margin: 0 0.2rem;
}

/* Faked text selection in the editor mockup, where the toolbar anchors */
.faux-selection { background: var(--select); border-radius: 2px; padding: 0 0.05rem; }

/* ────────────────────────────────────────────────────────────────
 * Standalone surfaces — login, revoked-link landing
 * Both kept paper-feel; minimal, no chrome.
 * ──────────────────────────────────────────────────────────────── */

.center-stage {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1.5rem;
}
.center-card {
	max-width: 26rem;
	width: 100%;
	text-align: center;
}
.center-card h1 {
	font-weight: 300;
	font-size: 1.7rem;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
}
.center-card p {
	font-size: 1rem;
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0 0 1.6rem;
}
.center-card .quiet { font-size: 0.88rem; color: var(--ink-muted); font-style: italic; }
.center-card form {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: 1.2rem;
}
.center-card input[type="password"],
.center-card input[type="email"],
.center-card input[type="text"] {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--rule);
	background: var(--bg);
	color: var(--ink);
	border-radius: 4px;
	outline: none;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.center-card input:focus {
	border-color: var(--accent-warm);
	box-shadow: 0 0 0 3px var(--accent-warm-soft);
}
.center-card input::placeholder {
	color: var(--ink-muted);
	font-style: italic;
}
.center-card .btn-primary { padding: 0.7rem 1rem; font-size: 0.95rem; }

/* Subtle wordmark above the card on standalone pages */
.center-mark {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: var(--accent-warm);
	text-transform: lowercase;
	margin: 0 0 2.5rem;
	text-align: center;
}

/* Selection across all pages — warm tint */
.editor-body ::selection,
.post-body ::selection,
.editor-canvas ::selection { background: var(--select); }

/* ────────────────────────────────────────────────────────────────
 * Mobile — tighter padding, slightly smaller display type
 * ──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	body { font-size: 17px; }
	article { padding: 2rem 1.25rem 3rem; }
	h1 { font-size: 2rem; }
	.dek { font-size: 1.05rem; }
	.post-body blockquote { margin-left: 0.2rem; padding-top: 1.4rem; padding-left: 1.2rem; }
	.post-body blockquote::before { font-size: 2.8rem; }
	.masthead { padding-top: 1.5rem; }
}

/* Console post-row collapses to single column on narrow viewports so the
 * title isn't squeezed into 3 wrapping fragments. Pills + actions stack
 * underneath. */
@media (max-width: 640px) {
	.post-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.1rem 0.4rem;
	}
	.post-row-pills,
	.post-row-stats {
		justify-self: start;
	}
	.post-row-stats {
		min-width: 0;
		text-align: left;
		display: flex;
		gap: 0.25rem;
		align-items: center;
	}
	.post-row-title {
		font-size: 1.1rem;
	}
	/* Menu opens left-aligned on mobile so it doesn't run off the right edge */
	.post-actions-menu {
		right: auto;
		left: 0;
	}
	.console-frame { padding: 0 1rem 4rem; }
	.console-header { padding-top: 2rem; }
	.console-title { font-size: 1.6rem; }
	.app-bar-inner { padding: 0.75rem 1rem; }
}