/**
 * LoveMsgs Core - shared styling for the Step 11-14 tool shells (Write
 * Room, Should I Text Them, Daily Love Message, Unspoken Letters).
 *
 * Deliberately mirrors wheel.css's visual language (pill buttons in mono
 * caps, the same border/surface tokens, the same result-card treatment)
 * so these four new native pages feel like the same product as the
 * already-verified wheel rather than a visually distinct add-on. Built
 * entirely on core.css's tokens - no new colors are introduced here.
 */

/* ---- Shared wrapper + button primitives ---- */

.lm-write-room,
.lm-pause-tool,
.lm-daily-message,
.lm-unspoken-letters,
.lm-crisis-support {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--lm-space-lg) var(--lm-space-md);
	font-family: var(--lm-font-body);
	color: var(--lm-text-on-dark);
}

/* Unconditionally suppress the browser's default focus outline on these
   controls (rather than only inside the :focus-visible rule below). Chrome's
   focus-visible heuristic does not always match a script-triggered
   .focus() call (e.g. pause-tool.js auto-focusing the first answer option
   after a click-driven question transition) - when it doesn't match, the
   :focus-visible rule never applies and the element falls through to the
   browser's default blue outline, clashing with the brand palette. This
   was caught during Step 12 live QA (see CHANGELOG.md). Removing the
   default outline here for every focus state, and reserving the gold ring
   for genuine :focus-visible matches (real keyboard navigation), fixes the
   clash without weakening keyboard accessibility. */
.lm-write-room :is(button, [tabindex], select, input, textarea, a):focus,
.lm-pause-tool :is(button, [tabindex], select, input, textarea, a):focus,
.lm-daily-message :is(button, [tabindex], select, input, textarea, a):focus,
.lm-unspoken-letters :is(button, [tabindex], select, input, textarea, a):focus,
.lm-crisis-support :is(button, [tabindex], select, input, textarea, a):focus {
	outline: none;
}

.lm-write-room :is(button, [tabindex], select, input, textarea, a):focus-visible,
.lm-pause-tool :is(button, [tabindex], select, input, textarea, a):focus-visible,
.lm-daily-message :is(button, [tabindex], select, input, textarea, a):focus-visible,
.lm-unspoken-letters :is(button, [tabindex], select, input, textarea, a):focus-visible,
.lm-crisis-support :is(button, [tabindex], select, input, textarea, a):focus-visible {
	outline: none;
	box-shadow: var(--lm-focus-ring);
}

.lm-write-privacy-notice,
.lm-pause-privacy-notice {
	font-size: 0.85rem;
	opacity: 0.75;
	border: 1px solid var(--lm-border-subtle);
	border-radius: 8px;
	padding: var(--lm-space-sm);
	margin-bottom: var(--lm-space-md);
}

/* Pill action buttons, matching .lm-gate-submit / .lm-spin-trigger exactly */
.lm-write-action-btn,
.lm-write-mode-btn,
.lm-pause-option-btn,
.lm-pause-action-btn,
.lm-daily-link-btn,
.lm-daily-copy-btn,
.lm-unspoken-submit-btn {
	font-family: var(--lm-font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.8rem;
	padding: 0.8em 1.5em;
	border-radius: 999px;
	border: 1px solid var(--lm-accent);
	background: transparent;
	color: var(--lm-accent);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background var(--lm-duration-standard) var(--lm-ease-standard),
		color var(--lm-duration-standard) var(--lm-ease-standard);
}

.lm-write-action-btn:hover,
.lm-write-mode-btn:hover,
.lm-pause-option-btn:hover,
.lm-pause-action-btn:hover,
.lm-daily-link-btn:hover,
.lm-daily-copy-btn:hover,
.lm-unspoken-submit-btn:hover {
	background: var(--lm-accent);
	color: var(--lm-color-deep-night);
}

.lm-write-mode-btn.is-active {
	background: var(--lm-accent);
	color: var(--lm-color-deep-night);
}

textarea,
input[type='email'] {
	width: 100%;
	padding: 0.85em 1em;
	border-radius: 8px;
	border: 1px solid var(--lm-border-subtle);
	background: rgba(255, 255, 255, 0.04);
	color: var(--lm-text-on-dark);
	font-family: var(--lm-font-body);
	font-size: 1rem;
}

/* ---- Write Room ---- */

.lm-write-modes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-space-xs);
	margin-bottom: var(--lm-space-md);
}

.lm-write-mode-intro {
	opacity: 0.85;
	margin-bottom: var(--lm-space-md);
}

.lm-write-doors {
	display: grid;
	gap: var(--lm-space-sm);
	margin-bottom: var(--lm-space-md);
}

.lm-write-door {
	display: flex;
	align-items: baseline;
	gap: var(--lm-space-sm);
}

.lm-write-door-number {
	font-family: var(--lm-font-mono);
	color: var(--lm-accent-soft);
	font-size: 0.85rem;
	min-width: 1.75em;
}

.lm-write-door-label {
	font-family: var(--lm-font-display);
	font-size: 1.1rem;
	color: var(--lm-text-heading-on-dark);
}

.lm-write-mode-closing {
	font-style: italic;
	opacity: 0.8;
	margin: var(--lm-space-md) 0;
}

.lm-write-canvas {
	min-height: 16em;
	resize: vertical;
	margin-bottom: var(--lm-space-sm);
}

.lm-write-status {
	min-height: 1.5em;
	font-size: 0.85rem;
	color: var(--lm-accent-soft);
}

.lm-write-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-space-xs);
	margin: var(--lm-space-sm) 0 var(--lm-space-md);
}

.lm-write-release-btn {
	border-color: var(--lm-color-burgundy);
	color: var(--lm-color-soft-rose);
}

.lm-write-release-btn:hover {
	background: var(--lm-color-burgundy);
	color: var(--lm-text-on-dark);
}

.lm-write-confirm {
	border: 1px solid var(--lm-color-burgundy);
	border-radius: 12px;
	padding: var(--lm-space-md);
	margin-bottom: var(--lm-space-md);
}

.lm-write-confirm p {
	margin-top: 0;
}

.lm-write-disclaimer,
.lm-pause-disclaimer,
.lm-daily-disclaimer,
.lm-unspoken-disclaimer {
	font-size: 0.8rem;
	line-height: 1.6;
	opacity: 0.65;
	margin-top: var(--lm-space-lg);
}

/* ---- Should I Text Them ---- */

.lm-pause-question {
	margin-bottom: var(--lm-space-md);
}

.lm-pause-question-text {
	font-family: var(--lm-font-display);
	font-size: 1.35rem;
	color: var(--lm-text-heading-on-dark);
	margin-bottom: var(--lm-space-sm);
}

.lm-pause-options {
	display: flex;
	flex-direction: column;
	gap: var(--lm-space-xs);
	align-items: flex-start;
}

.lm-pause-progress {
	font-family: var(--lm-font-mono);
	font-size: 0.75rem;
	opacity: 0.6;
	margin-top: var(--lm-space-sm);
}

.lm-pause-result-title {
	font-family: var(--lm-font-display);
	font-size: 1.75rem;
	color: var(--lm-text-heading-on-dark);
}

.lm-pause-result-reflection {
	line-height: 1.6;
	margin-bottom: var(--lm-space-md);
}

.lm-pause-safety-box {
	background: rgba(124, 45, 58, 0.25);
	border: 1px solid var(--lm-color-burgundy);
	border-radius: 12px;
	padding: var(--lm-space-md);
	margin-bottom: var(--lm-space-md);
}

.lm-pause-crisis-link {
	display: inline-block;
	margin-top: var(--lm-space-xs);
	font-weight: bold;
	color: var(--lm-accent);
}

.lm-pause-result-block {
	margin-bottom: var(--lm-space-md);
}

.lm-pause-result-block h4 {
	font-family: var(--lm-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--lm-accent-soft);
	margin-bottom: 0.3em;
}

.lm-pause-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-space-xs);
	margin-top: var(--lm-space-md);
}

/* ---- Daily Love Message ---- */

.lm-daily-content {
	text-align: center;
}

.lm-daily-date {
	font-family: var(--lm-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	opacity: 0.7;
	text-transform: uppercase;
}

.lm-daily-text {
	font-family: var(--lm-font-display);
	font-size: 1.6rem;
	color: var(--lm-text-heading-on-dark);
	line-height: 1.4;
	margin: var(--lm-space-sm) 0 var(--lm-space-lg);
}

.lm-daily-block {
	text-align: left;
	max-width: 480px;
	margin: 0 auto var(--lm-space-md);
}

.lm-daily-block h4 {
	font-family: var(--lm-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--lm-accent-soft);
	margin-bottom: 0.3em;
}

.lm-daily-affirmation {
	font-style: italic;
	color: var(--lm-accent);
	margin: var(--lm-space-md) 0;
}

.lm-daily-copy-status {
	display: block;
	font-size: 0.8rem;
	opacity: 0.7;
	margin-top: var(--lm-space-xs);
}

.lm-daily-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lm-space-xs);
	margin: var(--lm-space-lg) 0;
}

/* ---- Unspoken Letters ---- */

.lm-unspoken-letters {
	text-align: center;
}

.lm-unspoken-kicker {
	font-family: var(--lm-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	color: var(--lm-accent-soft);
	text-transform: uppercase;
}

.lm-unspoken-title {
	font-family: var(--lm-font-display);
	font-size: 2.25rem;
	color: var(--lm-text-heading-on-dark);
	margin: 0.2em 0;
}

.lm-unspoken-subtitle {
	font-size: 1.1rem;
	opacity: 0.85;
	margin-bottom: var(--lm-space-md);
}

.lm-unspoken-body {
	max-width: 520px;
	margin: 0 auto var(--lm-space-lg);
	line-height: 1.6;
}

.lm-unspoken-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lm-space-xs);
	max-width: 480px;
	margin: 0 auto;
}

.lm-unspoken-form input[type='email'] {
	flex: 1 1 220px;
}

.lm-unspoken-fineprint {
	font-family: var(--lm-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	opacity: 0.6;
	margin-top: var(--lm-space-sm);
}

.lm-unspoken-confirm-msg {
	font-size: 0.9rem;
	opacity: 0.85;
	margin-top: var(--lm-space-sm);
}

/* ---- Crisis Support ---- */

.lm-crisis-support {
	text-align: left;
}

.lm-crisis-kicker {
	font-family: var(--lm-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	color: var(--lm-accent-soft);
	text-transform: uppercase;
	text-align: center;
}

.lm-crisis-title {
	font-family: var(--lm-font-display);
	font-size: 2.25rem;
	color: var(--lm-text-heading-on-dark);
	margin: 0.2em 0 0.8em;
	text-align: center;
}

.lm-crisis-intro {
	line-height: 1.7;
	margin-bottom: var(--lm-space-md);
}

.lm-crisis-emergency {
	background: rgba(124, 45, 58, 0.25);
	border: 1px solid var(--lm-color-burgundy);
	border-radius: 12px;
	padding: var(--lm-space-sm) var(--lm-space-md);
	margin-bottom: var(--lm-space-lg);
	line-height: 1.6;
}

.lm-crisis-resources {
	display: grid;
	gap: var(--lm-space-md);
	margin-bottom: var(--lm-space-lg);
}

.lm-crisis-resource {
	border: 1px solid var(--lm-border-subtle);
	border-radius: 12px;
	padding: var(--lm-space-md);
	background: var(--lm-bg-surface);
}

.lm-crisis-resource-name {
	font-family: var(--lm-font-display);
	font-size: 1.4rem;
	color: var(--lm-text-heading-on-dark);
	margin: 0 0 0.3em;
}

.lm-crisis-resource-for {
	opacity: 0.85;
	margin-bottom: 0.6em;
}

.lm-crisis-resource-methods {
	list-style: none;
	margin: 0 0 0.6em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.lm-crisis-resource-methods a {
	color: var(--lm-accent);
	font-weight: bold;
	text-decoration: underline;
}

.lm-crisis-resource-avail {
	font-family: var(--lm-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0;
}

.lm-crisis-outro {
	line-height: 1.7;
	opacity: 0.9;
	margin-bottom: var(--lm-space-lg);
}

.lm-crisis-return {
	text-align: center;
	font-family: var(--lm-font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

.lm-crisis-return a {
	color: var(--lm-accent);
}