/**
 * Dream Dictionary styles. Light, Astra-matched theme: the tool inherits the
 * live site's palette through the theme's CSS variables (with hex fallbacks),
 * so it reads as part of rosmertapublishing.com rather than a separate app.
 * Slate text on white and a quiet alt surface; blue for every interactive
 * affordance; a gold brand accent used sparingly for literary decoration only.
 * Fonts are inherited from the theme, never imposed.
 *
 * Two surfaces: the hub (a searchable index of cards) and the entry page (one
 * symbol, four lenses, sources).
 */

.dd-app {
	/* Theme-driven palette. Inherits Astra's global colors when present,
	   falls back to the published palette otherwise. */
	--dd-bg: var(--ast-global-color-4, #ffffff);
	--dd-surface: var(--ast-global-color-5, #F0F5FA);
	--dd-text: var(--ast-global-color-3, #334155);
	--dd-heading: var(--ast-global-color-2, #1e293b);
	--dd-primary: var(--ast-global-color-0, #046bd2);
	--dd-primary-hover: var(--ast-global-color-1, #045cb4);
	--dd-border: var(--ast-global-color-7, #D1D5DB);
	--dd-gold: var(--rwod-gold, #c4a86a);
	--dd-muted: #51606f; /* muted slate, meets AA on both white and the alt surface */

	color: var(--dd-text);
	font-family: inherit;
	line-height: 1.6;
	max-width: 1180px;
	margin: 0 auto;
}

/* JS visibility toggles ------------------------------------------------ */
.dd-app:not(.dd-js) .dd-js-only { display: none !important; }
.dd-app.dd-js .dd-js-hide { display: none !important; }
.dd-hidden { display: none !important; }

/* Intro ---------------------------------------------------------------- */
.dd-intro { margin-bottom: 1.8rem; }
.dd-lede {
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--dd-heading);
	border-left: 3px solid var(--dd-gold);
	padding-left: 1rem;
}

/* Controls ------------------------------------------------------------- */
.dd-controls {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	color: var(--dd-text);
	border-radius: 12px;
	padding: 1.1rem 1.2rem;
	margin: 1.5rem 0;
	position: sticky;
	top: 0.5rem;
	z-index: 5;
}
.dd-search input {
	width: 100%;
	font-size: 1.05rem;
	padding: 0.7rem 0.9rem;
	border-radius: 8px;
	border: 1px solid var(--dd-border);
	background: var(--dd-bg);
	color: var(--dd-text);
}
.dd-search input:focus { border-color: var(--dd-primary); outline: none; }
.dd-search input::placeholder { color: var(--dd-muted); }

.dd-search-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}
.dd-search { flex: 1 1 260px; }
.dd-result-count {
	margin: 0;
	font-size: 0.92rem;
	color: var(--dd-muted);
	white-space: nowrap;
}

/* Browse: A-Z + theme chips ------------------------------------------- */
.dd-browse { margin-top: 0.85rem; }
.dd-browse > summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.92rem;
	color: var(--dd-primary);
	padding: 0.35rem 0;
}
.dd-browse > summary::-webkit-details-marker { display: none; }
.dd-browse > summary::before { content: "\25B8 "; }
.dd-browse[open] > summary::before { content: "\25BE "; }
.dd-browse-body { margin-top: 0.7rem; }
.dd-az { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dd-az-btn {
	font: inherit;
	font-size: 0.85rem;
	min-width: 2.2rem;
	min-height: 2.2rem;
	text-align: center;
	cursor: pointer;
	border: 1px solid var(--dd-border);
	background: var(--dd-bg);
	color: var(--dd-text);
	padding: 0.25rem 0.45rem;
	border-radius: 6px;
}
.dd-az-btn.is-empty { opacity: 0.3; cursor: default; }
.dd-az-btn.is-active {
	background: var(--dd-primary);
	border-color: var(--dd-primary);
	color: #fff;
	font-weight: 700;
}
.dd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.dd-chip {
	font: inherit;
	font-size: 0.85rem;
	min-height: 2.2rem;
	cursor: pointer;
	border: 1px solid var(--dd-border);
	background: var(--dd-bg);
	color: var(--dd-text);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}
.dd-chip.is-active {
	background: var(--dd-primary);
	border-color: var(--dd-primary);
	color: #fff;
	font-weight: 700;
}

/* About (collapsed why / how) ----------------------------------------- */
.dd-about { margin-top: 1rem; display: grid; gap: 0.5rem; }
.dd-about-d > summary {
	cursor: pointer;
	font-family: inherit;
	color: var(--dd-primary);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	padding: 0.35rem 0;
}
.dd-about-body { margin-top: 0.3rem; }

/* Empty / zero-results state ------------------------------------------ */
.dd-empty {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: 10px;
	padding: 1.2rem;
	margin: 0 0 1rem;
	font-style: italic;
	color: var(--dd-muted);
}

/* Layout --------------------------------------------------------------- */
.dd-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 900px) {
	.dd-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.dd-section-h {
	font-family: inherit;
	color: var(--dd-heading);
	border-bottom: 2px solid var(--dd-gold);
	padding-bottom: 0.3rem;
	margin: 1.6rem 0 1rem;
}
.dd-section-note {
	margin: -0.5rem 0 1rem;
	font-size: 0.92rem;
	color: var(--dd-muted);
}

/* Hub index ------------------------------------------------------------ */
/*
 * A dictionary index is a list of words. Each row is a link plus a compact add
 * control, in a fixed-height row, laid out in responsive columns.
 *
 * The fixed row height matters. The previous build used cards that varied from
 * about 120px to 300px while telling the browser to assume 200px, so every card
 * that scrolled into view re-measured and shifted the page: aiming at "Add to
 * tray" meant aiming at a moving target. Uniform rows make the declared size
 * accurate, so nothing jumps under the cursor.
 */
.dd-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.35rem;
}
@media (min-width: 560px) {
	.dd-index { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
}
@media (min-width: 900px) {
	.dd-index { grid-template-columns: 1fr 1fr 1fr; }
}

.dd-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 0.25rem 0 0.75rem;
	border: 1px solid transparent;
	border-bottom-color: var(--dd-border);
	border-radius: 8px;
	transition: background 0.14s ease, border-color 0.14s ease;
	content-visibility: auto;
	contain-intrinsic-size: 48px;
}
.dd-item:hover {
	background: var(--dd-surface);
	border-color: var(--dd-border);
}

.dd-item-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--dd-heading);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.3;
}
.dd-item-link:hover { color: var(--dd-primary); text-decoration: underline; }
.dd-item-link[aria-expanded="true"] { color: var(--dd-primary); font-weight: 700; }

/* Inline expansion: reading a symbol without leaving the tool ---------- */
/*
 * The panel spans the full width of the index grid, so an opened symbol reads
 * as a proper block of prose rather than being squeezed into one column. Several
 * can be open at once, which is the point: working through a dream means holding
 * three or four symbols side by side.
 */
.dd-detail {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0.4rem 0 1rem;
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-left: 3px solid var(--dd-gold);
	border-radius: 10px;
	padding: 1.1rem 1.25rem 1.2rem;
}
.dd-detail.is-loading { color: var(--dd-muted); font-style: italic; }

.dd-detail-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.dd-detail-title {
	margin: 0 0 0.3rem;
	font-size: 1.35rem;
	color: var(--dd-heading);
}
.dd-detail-title:focus-visible { outline: 3px solid var(--dd-primary); outline-offset: 3px; }
.dd-detail-close {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
	color: var(--dd-muted);
	border-radius: 8px;
}
.dd-detail-close:hover { color: var(--dd-primary); background: var(--dd-bg); }

.dd-detail-answer {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.55;
	color: var(--dd-heading);
}
.dd-detail-lenses { display: grid; gap: 1rem; }
@media (min-width: 780px) {
	.dd-detail-lenses { grid-template-columns: 1fr 1fr; gap: 1rem 1.75rem; }
}
.dd-detail .dd-lens { border-left: 2px solid var(--dd-border); padding-left: 0.85rem; }
.dd-detail .dd-lens-text { font-size: 0.95rem; line-height: 1.6; }

.dd-detail-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--dd-border);
}
.dd-detail-full {
	font-size: 0.9rem;
	color: var(--dd-primary);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Start-here steps ----------------------------------------------------- */
.dd-steps {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	counter-reset: none;
}
@media (min-width: 760px) {
	.dd-steps { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
.dd-steps li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
	color: var(--dd-text);
	line-height: 1.45;
}
.dd-step-n {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 999px;
	background: var(--dd-primary);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
}

/* Add-to-tray control -------------------------------------------------- */
/*
 * A real button, not a bare 13px checkbox. 44px minimum in both directions so
 * it is reliably hittable on a phone, and it visibly changes state on success,
 * because the tray it feeds may be scrolled offscreen or collapsed into a
 * bottom sheet where a silent increment reads as a failed click.
 */
.dd-collect {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--dd-border);
	border-radius: 8px;
	padding: 0.35rem;
	background: transparent;
	color: var(--dd-primary);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dd-collect:hover { background: var(--dd-primary); border-color: var(--dd-primary); color: #fff; }
.dd-collect .dd-collect-icon { font-size: 1.15rem; line-height: 1; font-weight: 700; }

.dd-collect.is-added {
	background: var(--dd-primary);
	border-color: var(--dd-primary);
	color: #fff;
}
.dd-collect.is-added:hover {
	background: var(--dd-primary-hover);
	border-color: var(--dd-primary-hover);
}

/* The wide, labelled variant used on entry pages. */
.dd-collect-lg {
	min-width: 16rem;
	font-size: 1rem;
	padding: 0.7rem 1.4rem;
	border-color: var(--dd-primary);
	background: var(--dd-bg);
}

/* Toast ---------------------------------------------------------------- */
.dd-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	z-index: 90;
	max-width: min(30rem, calc(100vw - 2rem));
	background: var(--dd-heading, #1e293b);
	color: #fff;
	font-size: 0.9rem;
	padding: 0.65rem 1.1rem;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.dd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 899px) {
	/* Clear the sticky tray pill. */
	.dd-toast { bottom: 5rem; }
}

/* Entry page ----------------------------------------------------------- */
.dd-single { max-width: 820px; }

.dd-breadcrumb {
	font-size: 0.88rem;
	color: var(--dd-muted);
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.dd-breadcrumb a { color: var(--dd-primary); text-decoration: none; }
.dd-breadcrumb a:hover { text-decoration: underline; }

.dd-question {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-style: italic;
	color: var(--dd-muted);
}
/* The direct answer. Deliberately prominent: it is what a reader came for and
   what a search engine or AI assistant will lift. */
.dd-answer {
	margin: 0 0 1.2rem;
	font-size: 1.2rem;
	line-height: 1.55;
	font-weight: 600;
	color: var(--dd-heading);
	border-left: 3px solid var(--dd-gold);
	padding-left: 1rem;
}

/* Crisis note ---------------------------------------------------------- */
/*
 * Deliberately the most visually distinct block on the page. It is not styled
 * as a warning or a disclaimer, both of which readers skim past, but as a plain
 * addressed note. Colour is not the only signal: the border weight and the
 * position above the interpretations carry it too.
 */
.dd-crisis {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: #fdf6f6;
	border: 1px solid #e3c4c4;
	border-left: 4px solid #a8332f;
	border-radius: 8px;
}
.dd-crisis p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: #5c2b29;
}
@media (prefers-color-scheme: dark) {
	.dd-crisis { background: rgba(168, 51, 47, 0.12); border-color: rgba(168, 51, 47, 0.5); }
	.dd-crisis p { color: inherit; }
}

.dd-entry-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.dd-browse-link {
	font-size: 0.9rem;
	color: var(--dd-primary);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Previous / next --------------------------------------------------- */
.dd-adjacent {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--dd-border);
}
.dd-adj {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-height: 44px;
	justify-content: center;
	text-decoration: none;
	color: var(--dd-primary);
	max-width: 48%;
}
.dd-adj-next { text-align: right; align-items: flex-end; }
.dd-adj-dir {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dd-muted);
}
.dd-adj-name { font-size: 1rem; font-weight: 600; }
.dd-adj:hover .dd-adj-name { text-decoration: underline; }

.dd-lenses-note {
	font-size: 0.92rem;
	color: var(--dd-muted);
	margin: 0 0 1.1rem;
}
.dd-lenses { display: grid; gap: 1.2rem; }
.dd-lens {
	border-left: 3px solid var(--dd-border);
	padding-left: 1rem;
}
.dd-lens-label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dd-heading);
}
.dd-lens-text { margin: 0 0 0.4rem; font-size: 1rem; line-height: 1.65; }
.dd-lens-source { display: block; font-size: 0.82rem; color: var(--dd-muted); font-style: normal; }

/* Writers' layer ------------------------------------------------------- */
/*
 * Visually distinct from the lenses (gold rather than the neutral rule, on the
 * alt surface) so a dreamer can see at a glance that this section is not for
 * them, without it being hidden from the writers who came for exactly this.
 */
.dd-writers {
	margin-top: 2.5rem;
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-left: 3px solid var(--dd-gold);
	border-radius: 10px;
	padding: 1.2rem 1.3rem 1.3rem;
}
.dd-writers .dd-section-h { margin-top: 0; }
.dd-writers-intro {
	font-size: 0.95rem;
	color: var(--dd-muted);
	margin: 0 0 1.2rem;
}
.dd-writers-body { display: grid; gap: 1.1rem; }
.dd-writers-label {
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dd-heading);
}
.dd-writers-text { margin: 0 0 0.3rem; font-size: 1rem; line-height: 1.6; }
.dd-writers-source { display: block; font-size: 0.82rem; color: var(--dd-muted); font-style: normal; }
/* The one field that is an instruction rather than an observation. */
.dd-writers-prompt {
	border-top: 1px solid var(--dd-border);
	padding-top: 1rem;
}
.dd-writers-prompt .dd-writers-text { font-style: italic; }

.dd-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.dd-related-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--dd-border);
	border-radius: 999px;
	background: var(--dd-surface);
	color: var(--dd-primary);
	text-decoration: none;
	font-size: 0.92rem;
}
.dd-related-list a:hover { border-color: var(--dd-primary); }

.dd-entry-foot {
	margin-top: 2rem;
	border-top: 1px solid var(--dd-border);
	padding-top: 1rem;
}

/* Interpret tray ------------------------------------------------------- */
.dd-tray { align-self: start; }
@media (min-width: 900px) {
	.dd-hub .dd-tray {
		position: sticky;
		top: 6.5rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/*
 * On an entry page the tray is always a bottom sheet, at every width. The
 * reading column stays a single clean measure, and the tray is one tap away
 * wherever the reader is, rather than requiring a walk back to the hub to
 * interpret anything they just collected.
 */
.dd-single .dd-tray {
	position: fixed;
	left: auto;
	right: 1.5rem;
	bottom: 0;
	width: min(24rem, calc(100vw - 3rem));
	z-index: 70;
	max-height: 82vh;
	overflow: auto;
	transform: translateY(105%);
	transition: transform 0.25s ease;
	border-radius: 16px 16px 0 0;
}
.dd-single.dd-tray-open .dd-tray { transform: translateY(0); }
.dd-single .dd-tray-close { display: block; }
.dd-app.dd-single.dd-js .dd-tray-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 60;
	min-height: 48px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	border: none;
	border-radius: 999px;
	padding: 0.8rem 1.4rem;
	background: var(--dd-primary);
	color: #fff;
	box-shadow: 0 8px 24px rgba(4, 107, 210, 0.3);
}
.dd-single .dd-tray-pill .dd-pill-count {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 0.05rem 0.55rem;
	font-size: 0.9rem;
}
@media (max-width: 899px) {
	/* Full-width sheet on a phone, same as the hub. */
	.dd-single .dd-tray { left: 0; right: 0; width: auto; }
	.dd-app.dd-single.dd-js .dd-tray-pill { left: 1rem; right: 1rem; bottom: 1rem; }
}

/* Clear control -------------------------------------------------------- */
.dd-tray-clear {
	font: inherit;
	font-size: 0.82rem;
	cursor: pointer;
	background: none;
	border: none;
	color: var(--dd-muted);
	text-decoration: underline;
	padding: 0.35rem 0;
	min-height: 36px;
}
.dd-tray-clear:hover { color: var(--dd-primary); }

/* Mobile bottom-sheet tray + sticky pill ------------------------------ */
.dd-tray-pill { display: none; }
@media (max-width: 899px) {
	.dd-app.dd-js .dd-tray-pill {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		position: fixed;
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		z-index: 60;
		min-height: 48px;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
		border: none;
		border-radius: 999px;
		padding: 0.8rem 1.2rem;
		background: var(--dd-primary);
		color: #fff;
		box-shadow: 0 8px 24px rgba(4, 107, 210, 0.3);
	}
	.dd-tray-pill .dd-pill-count {
		background: rgba(255, 255, 255, 0.25);
		border-radius: 999px;
		padding: 0.05rem 0.55rem;
		font-size: 0.9rem;
	}
	.dd-app.dd-js .dd-tray {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 70;
		margin: 0;
		max-height: 82vh;
		overflow: auto;
		transform: translateY(105%);
		transition: transform 0.25s ease;
		border-radius: 16px 16px 0 0;
	}
	.dd-app.dd-js.dd-tray-open .dd-tray { transform: translateY(0); }
	.dd-tray-inner { position: relative; }
	.dd-tray-close {
		display: block;
		position: absolute;
		top: 0.5rem;
		right: 0.7rem;
		background: none;
		border: none;
		color: var(--dd-muted);
		font-size: 1.7rem;
		line-height: 1;
		cursor: pointer;
		min-width: 44px;
		min-height: 44px;
	}
}
.dd-tray-inner {
	background: var(--dd-surface);
	color: var(--dd-text);
	border: 1px solid var(--dd-border);
	border-radius: 12px;
	padding: 1.1rem 1.15rem 1.3rem;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.dd-tray-inner h2 { color: var(--dd-heading); font-family: inherit; margin-top: 0; }
.dd-tray-count { font-size: 0.9rem; font-weight: normal; color: var(--dd-muted); }
.dd-tray-close { display: none; }
.dd-tray-empty { font-size: 0.9rem; color: var(--dd-muted); font-style: italic; }
.dd-tray-list { list-style: none; margin: 0 0 0.7rem; padding: 0; }
.dd-tray-item {
	display: flex; justify-content: space-between; align-items: center;
	background: var(--dd-bg);
	border: 1px solid var(--dd-border);
	border-radius: 6px;
	padding: 0.35rem 0.35rem 0.35rem 0.6rem;
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}
.dd-tray-remove {
	background: none; border: none; color: var(--dd-muted);
	font-size: 1.2rem; line-height: 1; cursor: pointer;
	min-width: 36px; min-height: 36px;
}
.dd-tray-remove:hover { color: var(--dd-primary); }

/* Optional feeling selector (lives inside the tray) -------------------- */
.dd-feeling {
	border: 1px solid var(--dd-border);
	border-radius: 8px;
	padding: 0.6rem 0.75rem 0.8rem;
	margin: 0.8rem 0 0;
}
.dd-feeling-legend {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dd-heading);
	padding: 0 0.35rem;
}
.dd-feeling-tones {
	display: flex; flex-wrap: wrap; gap: 0.35rem;
	margin-bottom: 0.6rem;
}
.dd-feeling-tone {
	--dd-tone: var(--dd-primary);
	font: inherit; font-size: 0.85rem; cursor: pointer;
	border: 1px solid var(--dd-border);
	background: var(--dd-bg); color: var(--dd-text);
	padding: 0.35rem 0.7rem; border-radius: 999px;
	min-height: 36px;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.dd-feeling-tone:hover { border-color: var(--dd-tone); }
.dd-feeling-tone.is-active {
	background: var(--dd-tone);
	border-color: var(--dd-gold);
	color: #fff;
	font-weight: 700; /* non-color active signal, alongside the gold border and ring */
	box-shadow: 0 0 0 2px rgba(196, 168, 106, 0.35);
}
.dd-feeling-field { display: block; font-size: 0.88rem; margin: 0.2rem 0 0.3rem; color: var(--dd-muted); }
#dd-feeling {
	width: 100%; padding: 0.5rem 0.6rem; border-radius: 6px;
	border: 1px solid var(--dd-border);
	background: var(--dd-bg); color: var(--dd-text);
}
#dd-feeling:focus { border-color: var(--dd-primary); outline: none; }

/* For-writers toggle (deliberately quiet) ------------------------------ */
.dd-creative { margin: 0.7rem 0 0; }
.dd-creative-toggle {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.88rem; color: var(--dd-muted); cursor: pointer;
	min-height: 36px;
}
.dd-creative-help {
	display: block; font-size: 0.78rem; font-style: italic;
	color: var(--dd-muted); margin-top: 0.15rem;
}
.dd-interpret-btn {
	margin-top: 0.9rem; width: 100%;
	font: inherit; font-size: 1.05rem; font-weight: 600;
	cursor: pointer; border: 1px solid var(--dd-primary); border-radius: 8px;
	padding: 0.75rem 1rem;
	min-height: 48px;
	background: var(--dd-primary);
	color: #fff;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
}
.dd-interpret-btn:hover:not(:disabled) { background: var(--dd-primary-hover); border-color: var(--dd-primary-hover); }
.dd-interpret-btn:active:not(:disabled) { transform: translateY(1px); }
.dd-interpret-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.dd-reading { margin-top: 1rem; }
.dd-reading:empty { display: none; }
.dd-reading-h { color: var(--dd-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 1rem 0 0.3rem; }
.dd-reading p { font-size: 0.96rem; line-height: 1.6; margin: 0 0 0.7rem; }
.dd-reading-cite {
	display: block; font-size: 0.82rem; font-style: normal;
	color: var(--dd-muted);
	border-top: 1px solid var(--dd-border);
	padding-top: 0.5rem; margin: 0.3rem 0 0.2rem;
}
.dd-reading-q { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.dd-reading-q li { font-size: 0.95rem; margin-bottom: 0.4rem; }

.dd-reading-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; }
.dd-reading-actions button {
	font: inherit; font-size: 0.85rem; cursor: pointer;
	border: 1px solid var(--dd-border); background: var(--dd-bg);
	color: var(--dd-text); padding: 0.4rem 0.9rem; border-radius: 6px;
	min-height: 36px;
}
.dd-reading-actions button:hover { border-color: var(--dd-primary); color: var(--dd-primary); }
.dd-wellbeing { font-size: 0.85rem; color: var(--dd-muted); margin-top: 0.9rem; }
.dd-disclaimer { font-size: 0.82rem; font-style: italic; color: var(--dd-muted); margin-top: 0.5rem; }

/* Footer --------------------------------------------------------------- */
.dd-footer { margin-top: 2rem; border-top: 1px solid var(--dd-border); padding-top: 1rem; }
.dd-updated { font-size: 0.82rem; color: var(--dd-muted); margin: 0 0 0.3rem; }
.dd-attribution { font-size: 0.85rem; color: var(--dd-muted); }

/* Bibliography --------------------------------------------------------- */
.dd-biblio { max-width: 820px; }
.dd-biblio-note { font-size: 1.05rem; color: var(--dd-heading); }
.dd-biblio-list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
@media (min-width: 720px) {
	.dd-biblio-list { grid-template-columns: 1fr 1fr; }
}
.dd-biblio-item {
	display: flex;
	flex-direction: column;
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-left: 3px solid var(--dd-gold);
	border-radius: 10px;
	padding: 1.1rem 1.2rem 1.15rem;
}
.dd-biblio-title {
	margin: 0 0 0.15rem;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--dd-heading);
}
.dd-biblio-byline {
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	color: var(--dd-muted);
}
.dd-biblio-desc { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.55; }
.dd-biblio-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: auto 0 0;
	padding-top: 0.3rem;
}

/* Citation and rights: present, findable, not shouting. The old version put
   the copyright note in red italic, which read as an error rather than a
   licensing fact. */
.dd-biblio-more { margin-top: 0.8rem; }
.dd-biblio-more > summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.82rem;
	color: var(--dd-muted);
	padding: 0.3rem 0;
}
.dd-biblio-more > summary::-webkit-details-marker { display: none; }
.dd-biblio-more > summary::before { content: "\25B8 "; }
.dd-biblio-more[open] > summary::before { content: "\25BE "; }
.dd-biblio-cite { margin: 0.3rem 0; font-size: 0.85rem; line-height: 1.5; color: var(--dd-muted); }
.dd-biblio-cite cite { font-style: normal; }
.dd-biblio-flag {
	margin: 0.4rem 0 0;
	font-size: 0.82rem;
	color: var(--dd-muted);
	border-left: 2px solid var(--dd-border);
	padding-left: 0.6rem;
}

/* The Bookshop shelf widget sits in its own section, clearly separated from
   the sourced list above it. */
.dd-biblio-shelf { margin-top: 2.5rem; }
.dd-shelf-note { font-size: 0.95rem; color: var(--dd-muted); margin: -0.5rem 0 1rem; }
.dd-link-free, .dd-buy {
	font-size: 0.88rem; text-decoration: none; border-radius: 6px;
	padding: 0.45rem 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem;
	min-height: 44px;
}
.dd-link-free { color: var(--dd-primary); border: 1px solid var(--dd-border); }
.dd-buy-bookshop { background: var(--dd-primary); color: #fff; }
.dd-buy-amazon { background: var(--dd-bg); color: var(--dd-primary); border: 1px solid var(--dd-primary); }
.dd-aff-chip {
	font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
	background: var(--dd-gold); color: #2a2008; padding: 0.05rem 0.35rem; border-radius: 4px;
}
.dd-disclosure {
	font-size: 0.85rem; color: var(--dd-muted); font-style: italic;
	border-top: 1px solid var(--dd-border); padding-top: 0.8rem; margin-top: 1.5rem;
}

/* Accessibility -------------------------------------------------------- */
.dd-app a:focus-visible,
.dd-app button:focus-visible,
.dd-app input:focus-visible {
	outline: 3px solid var(--dd-primary);
	outline-offset: 2px;
}
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	.dd-app *, .dd-app *::before, .dd-app *::after,
	.dd-toast {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

@media print {
	.dd-controls, .dd-entry-actions, .dd-reading-actions, .dd-interpret-btn,
	.dd-tray-pill, .dd-tray-close, .dd-collect, .dd-toast, .dd-browse { display: none !important; }
	.dd-item { break-inside: avoid; content-visibility: visible; }
	.dd-tray-inner { background: #fff; color: #000; box-shadow: none; }
	.dd-tray-inner h2, .dd-reading-h, .dd-reading-cite { color: #000 !important; }
	.dd-reading-cite { border-top-color: #999; }
	.dd-feeling, .dd-creative { display: none !important; }
}

/* Symbols overview (A to Z directory) --------------------------------- */
.dd-overview { max-width: 1100px; }
.dd-overview-lede { font-size: 1.02rem; color: var(--dd-muted); margin: 1rem 0 1.2rem; }
.dd-overview-az {
	position: sticky;
	top: 0.5rem;
	z-index: 4;
	background: var(--dd-bg);
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--dd-border);
	margin-bottom: 1rem;
}
.dd-overview-az .dd-az-btn { text-decoration: none; color: var(--dd-primary); }
.dd-overview-az .dd-az-btn:hover { background: var(--dd-primary); border-color: var(--dd-primary); color: #fff; }
.dd-letter-h { scroll-margin-top: 4.5rem; }

/* Plain rows: no tray control, so the name gets the full width. */
.dd-index-plain .dd-item { padding: 0 0.5rem; min-height: 40px; contain-intrinsic-size: 40px; }
.dd-index-plain .dd-item-link { min-height: 38px; }
@media (min-width: 900px) {
	.dd-index-plain { grid-template-columns: repeat(4, 1fr); }
}

/* Book recommendations ------------------------------------------------- */
/*
 * Quiet by design. This sits below the writers layer, after the reader has had
 * everything they came for, and it is styled as a reading list rather than a
 * storefront: no buttons competing with the content above, no urgency.
 */
.dd-books { margin-top: 2.5rem; }
.dd-books-intro { font-size: 0.95rem; color: var(--dd-muted); margin: -0.5rem 0 1.1rem; }
.dd-books-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}
@media (min-width: 700px) {
	.dd-books-list { grid-template-columns: 1fr 1fr; }
}
.dd-book {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dd-border);
	border-radius: 10px;
	padding: 0.9rem 1rem 1rem;
	background: var(--dd-bg);
}
.dd-book-title { margin: 0 0 0.1rem; font-weight: 700; color: var(--dd-heading); font-size: 1rem; line-height: 1.35; }
.dd-book-author { margin: 0 0 0.5rem; font-size: 0.86rem; color: var(--dd-muted); }
.dd-book-why { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.5; color: var(--dd-text); }
.dd-book-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: auto 0 0; }
.dd-books .dd-disclosure { margin-top: 1.2rem; }