/* Desktop draw-room layout refinements for the immersive table. */
.consultation {
	--draw-panel-bg: rgba(9, 8, 25, 0.74);
	--draw-panel-border: rgba(232, 207, 138, 0.16);
	--draw-panel-shadow: 0 20px 76px rgba(0, 0, 0, 0.34);
}

.consultation .consultation-shell {
	width: min(1440px, calc(100% - clamp(24px, 4vw, 56px)));
	padding-top: clamp(18px, 2.2vw, 30px);
}

.consultation .scene-header {
	margin-bottom: clamp(12px, 1.6vw, 18px);
}

@media (min-width: 900px) {
	html:has(.consultation:not([data-reading-active='true'])),
	body:has(.consultation:not([data-reading-active='true'])) {
		height: 100%;
		overflow: hidden;
	}

	body:has(.consultation:not([data-reading-active='true'])) main {
		height: 100dvh;
		min-height: 100dvh !important;
		overflow: hidden;
	}

	body:has(.consultation:not([data-reading-active='true'])) > footer {
		display: none;
	}

	.consultation {
		height: calc(100dvh - 66px);
		min-height: 0;
		overflow: hidden;
	}

	.consultation .consultation-shell {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		width: min(1760px, calc(100% - clamp(18px, 2.2vw, 40px)));
		height: 100%;
		min-height: 0;
		padding-block: clamp(10px, 1.4vh, 16px);
	}

	.consultation .scene-header {
		min-height: 0;
		margin-bottom: clamp(8px, 1vh, 12px);
	}

	.consultation .scene-mark {
		font-size: 0.72rem;
	}

	.consultation .scene-status {
		padding: 7px 10px;
		font-size: 0.76rem;
	}

	.consultation .ritual-grid {
		display: grid;
		grid-template-columns: minmax(286px, 34%) minmax(0, 1fr);
		grid-template-rows: minmax(0, 0.72fr) minmax(0, 0.28fr);
		grid-template-areas:
			"reader table"
			"reader reading";
		gap: clamp(12px, 1.4vw, 18px);
		align-items: stretch;
		height: 100%;
		min-height: 0;
	}

	.consultation .reader-stage,
	.consultation .table-stage,
	.consultation .reading-panel {
		min-height: 0;
		border-color: var(--draw-panel-border);
		border-radius: 8px;
		background:
			linear-gradient(180deg, rgba(18, 17, 42, 0.76), rgba(8, 8, 22, 0.72)),
			radial-gradient(ellipse at center 52%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%);
		box-shadow: var(--draw-panel-shadow);
	}

	.consultation .reader-stage {
		grid-area: reader;
		position: relative;
		top: auto;
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto auto;
		gap: 0;
		height: 100%;
		margin-top: 0;
		overflow: hidden;
		padding: 0;
		pointer-events: auto;
	}

	.consultation .reader-stage::before {
		inset: 0;
		background:
			radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 58%),
			linear-gradient(180deg, rgba(6, 6, 18, 0.12), rgba(6, 6, 18, 0.82) 78%);
		opacity: 0.96;
	}

	.consultation .reader-stage::after {
		left: 0;
		right: 0;
		bottom: 0;
		height: 55%;
		background:
			linear-gradient(180deg, transparent, rgba(5, 5, 16, 0.82) 62%),
			radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
		opacity: 0.78;
	}

	.consultation .reader-visual {
		--figure-scale: 0.82;
		width: 100%;
		height: 100%;
		min-height: 0;
		margin: 0 auto -28px;
		overflow: hidden;
		transform: none;
		filter:
			drop-shadow(0 24px 46px rgba(0, 0, 0, 0.44))
			drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 18%, transparent));
	}

	.consultation .reader-backlight {
		inset: 2% -10% -4%;
	}

	.consultation .reader-aura-field {
		inset: 5% -2% 0;
	}

	.consultation .reader-orbit {
		width: 88%;
		height: 88%;
	}

	.consultation .reader-fullbody {
		bottom: -3%;
		width: min(108%, 520px);
		height: 104%;
	}

	.consultation .reader-copy {
		padding: 0 clamp(16px, 1.6vw, 22px) 12px;
	}

	.consultation #readerName {
		margin: 4px 0 8px;
		font-size: clamp(1.65rem, 2vw, 2rem);
		line-height: 1.05;
	}

	.consultation #readerGreeting {
		max-width: none;
		font-size: 0.9rem;
		line-height: 1.58;
	}

	.consultation .dialogue {
		width: auto;
		margin: 0 clamp(16px, 1.6vw, 22px) clamp(14px, 1.6vh, 20px);
		padding: 12px 0 12px 13px;
		font-size: 0.88rem;
		line-height: 1.62;
		background: linear-gradient(90deg, rgba(7, 7, 19, 0.62), rgba(7, 7, 19, 0.12));
	}

	.consultation .dialogue span {
		width: 26px;
		height: 26px;
		margin-bottom: 8px;
	}

	.consultation .table-stage {
		grid-area: table;
		display: grid;
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		gap: 0;
		height: 100%;
		overflow: hidden;
		padding: clamp(14px, 1.4vw, 20px);
	}

	.consultation .reading-panel {
		grid-area: reading;
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: auto;
		padding: clamp(14px, 1.4vw, 20px);
		scrollbar-width: thin;
	}

	.consultation .question-panel {
		padding-bottom: 10px;
	}

	.consultation[data-phase='reveal'] .prompt-chips {
		display: none;
	}

	.consultation .question-panel label {
		font-size: 0.82rem;
	}

	.consultation .question-row {
		gap: 8px;
	}

	.consultation .classic-spread-tabs {
		margin-top: 0.54rem;
		margin-bottom: 0.62rem;
		padding-top: 0.56rem;
		gap: 0.34rem 0.52rem;
	}

	.consultation .spread-tab-primary {
		min-width: min(8.8rem, 100%);
	}

	.consultation .spread-tab-note {
		display: none;
	}

	.consultation .spread-more {
		min-width: min(14rem, 100%);
	}

	.consultation .card-table {
		min-height: 0;
		height: 100%;
		overflow: hidden;
	}

	.consultation[data-phase='reveal'] .card-table {
		min-height: 180px;
		display: grid;
		place-items: center;
	}

	.consultation[data-phase='reveal'] .spread-slots {
		position: absolute;
		inset: 50% auto auto 50%;
		width: min(100%, 42rem);
		padding-block: 0;
		transform: translate(-50%, -50%);
	}

	.consultation[data-phase='picking'] .deck-fan,
	.consultation .deck-fan.is-open,
	.consultation .deck-fan.is-picking-card {
		height: min(100%, clamp(230px, 34vh, 330px));
		bottom: clamp(8px, 3vh, 28px);
	}

	.consultation .spread-slots {
		min-height: auto;
		padding-top: clamp(22px, 4vh, 44px);
		padding-bottom: 14px;
		--slot-min: 4.6rem;
		--slot-max: 6.5rem;
	}

	.consultation .spread-celtic {
		--slot-min: 3.85rem;
		--slot-max: 5.35rem;
		gap: clamp(0.42rem, 1vw, 0.7rem);
	}

	.consultation .spread-hexagram,
	.consultation .spread-i_thou_relationship {
		--slot-min: 4.1rem;
		--slot-max: 5.8rem;
		gap: clamp(0.48rem, 1vw, 0.74rem);
	}

	.consultation .table-actions {
		margin-top: 10px;
	}

	.consultation .table-actions button {
		padding: 8px 11px;
		font-size: 0.86rem;
	}

	.consultation .panel-head {
		flex: 0 0 auto;
		margin-bottom: 12px;
		padding-bottom: 12px;
	}

	.consultation .panel-head h2 {
		font-size: clamp(1.2rem, 1.45vw, 1.48rem);
	}

	.consultation .empty-state {
		min-height: 0;
		flex: 1 1 auto;
	}

	.consultation .reading-result {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		overflow: visible;
	}

	.consultation .picked-cards {
		grid-template-columns: 1fr;
		gap: 9px;
	}

	.consultation .picked-card {
		grid-template-columns: 48px minmax(0, 1fr);
		padding: 9px;
	}

	.consultation .picked-card img {
		width: 48px;
	}

	.consultation .advice-box,
	.consultation .follow-box {
		padding: 12px;
	}
}

@media (min-width: 1200px) {
	.consultation .consultation-shell {
		width: min(1760px, calc(100% - clamp(24px, 2.8vw, 52px)));
	}

	.consultation .ritual-grid {
		grid-template-columns: minmax(320px, 24vw) minmax(420px, 1fr) minmax(330px, 30vw);
		grid-template-rows: minmax(0, 1fr);
		grid-template-areas: "reader table reading";
	}

	.consultation .reader-visual {
		--figure-scale: 0.9;
	}

	.consultation .reading-panel {
		overflow: auto;
	}

	.consultation .reading-result {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1500px) {
	.consultation .ritual-grid {
		grid-template-columns: minmax(360px, 25vw) minmax(500px, 1fr) minmax(380px, 28vw);
	}

	.consultation .reader-visual {
		--figure-scale: 1;
	}
}

/* Focused reading mode: one document scroll, a compact table memory, and one reading path. */
html:has(.consultation[data-reading-active='true']),
body:has(.consultation[data-reading-active='true']) {
	height: auto;
	min-height: 100%;
	overflow-x: clip;
	overflow-y: auto;
}

body:has(.consultation[data-reading-active='true']) main {
	height: auto;
	min-height: 100dvh !important;
	overflow: visible;
}

.consultation[data-reading-active='true'] {
	height: auto;
	min-height: calc(100dvh - 66px);
	overflow: visible;
	padding-bottom: clamp(32px, 6vw, 72px);
}

.consultation[data-reading-active='true'] .consultation-shell {
	display: block;
	width: min(1440px, calc(100% - clamp(20px, 4vw, 56px)));
	height: auto;
	padding-block: clamp(14px, 2vw, 28px);
}

.consultation[data-reading-active='true'] .scene-header {
	margin-bottom: clamp(12px, 2vw, 22px);
}

.consultation[data-reading-active='true'] .ritual-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"reader"
		"table"
		"reading";
	gap: clamp(14px, 2.2vw, 24px);
	align-items: start;
	height: auto;
	min-width: 0;
	overflow: visible;
}

.consultation[data-reading-active='true'] .reader-stage,
.consultation[data-reading-active='true'] .table-stage,
.consultation[data-reading-active='true'] .reading-panel {
	width: 100%;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	height: auto;
	overflow: visible;
}

.consultation[data-reading-active='true'] .reader-stage {
	grid-area: reader;
	display: grid;
	grid-template-rows: minmax(220px, 320px) auto auto;
	min-height: 0;
}

.consultation[data-reading-active='true'] .reader-visual {
	--figure-scale: 0.72;
	height: clamp(230px, 42vw, 320px);
	min-height: 220px;
	margin: 0 auto -34px;
}

.consultation[data-reading-active='true'] .reader-copy {
	padding: 0 clamp(16px, 2vw, 24px) 10px;
}

.consultation[data-reading-active='true'] #readerName {
	margin-bottom: 6px;
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

.consultation[data-reading-active='true'] #readerGreeting {
	display: none;
}

.consultation[data-reading-active='true'] .dialogue {
	max-height: none;
	overflow: visible;
	margin: 0 clamp(16px, 2vw, 24px) clamp(14px, 2vw, 20px);
	font-size: 0.9rem;
	line-height: 1.65;
}

.consultation[data-reading-active='true'] .table-stage {
	grid-area: table;
	display: block;
	padding: clamp(14px, 2vw, 20px);
}

.consultation[data-reading-active='true'] .question-panel,
.consultation[data-reading-active='true'] .classic-spread-tabs,
.consultation[data-reading-active='true'] .deck-fan,
.consultation[data-reading-active='true'] .table-actions {
	display: none;
}

.consultation[data-reading-active='true'] .card-table {
	display: block;
	height: auto;
	min-height: 0;
	overflow: visible;
	padding: 0;
}

.consultation[data-reading-active='true'] .spread-slots {
	position: relative;
	inset: auto;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	transform: none;
	--slot-min: 3.6rem;
	--slot-max: 4.8rem;
	gap: clamp(0.5rem, 1.4vw, 0.8rem);
}

.consultation[data-reading-active='true'] .spread-slots:not(.spread-single) {
	grid-template-columns: repeat(auto-fit, minmax(min(4.6rem, 100%), 1fr));
	grid-template-areas: none;
	align-items: start;
}

.consultation[data-reading-active='true'] .spread-slots:not(.spread-single) > * {
	grid-column: auto !important;
	grid-row: auto !important;
	grid-area: auto !important;
	padding: 0;
	transform: none;
}

.consultation[data-reading-active='true'] .spread-celtic > :nth-child(2) .slot-card {
	transform: none;
}

.consultation[data-reading-active='true'] .spread-slots .slot-card {
	width: clamp(var(--slot-min), 8vw, var(--slot-max));
}

.consultation[data-reading-active='true'] .spread-slots .slot-label {
	font-size: 0.68rem;
	line-height: 1.28;
	overflow-wrap: anywhere;
}

.consultation[data-reading-active='true'] .reading-panel {
	grid-area: reading;
	display: block;
	padding: clamp(18px, 3vw, 34px);
	overflow: visible;
	scrollbar-width: auto;
}

.consultation[data-reading-active='true'] .panel-head {
	margin-bottom: clamp(16px, 2vw, 24px);
	padding-bottom: clamp(12px, 1.8vw, 18px);
}

.consultation[data-reading-active='true'] .reading-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(18px, 2.4vw, 28px);
	overflow: visible;
}

@media (min-width: 1200px) {
	.consultation[data-reading-active='true'] .ritual-grid {
		grid-template-columns: minmax(300px, 0.7fr) minmax(620px, 1.85fr);
		grid-template-areas:
			"reader reading"
			"table reading";
		column-gap: clamp(18px, 2.2vw, 32px);
		row-gap: clamp(14px, 1.6vw, 22px);
	}

	.consultation[data-reading-active='true'] .reader-stage {
		grid-template-rows: minmax(240px, 340px) auto auto;
	}

	.consultation[data-reading-active='true'] .reader-visual {
		height: clamp(250px, 27vw, 340px);
	}

	.consultation[data-reading-active='true'] .table-stage {
		align-self: start;
	}

	.consultation[data-reading-active='true'] .reading-panel {
		align-self: stretch;
	}
}

.consultation .follow-thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: none;
	overflow: visible;
	margin-bottom: 12px;
	padding-right: 0;
}

.consultation .follow-turn {
	border: 1px solid rgba(232, 207, 138, 0.2);
	border-radius: 10px;
	padding: 12px 14px;
	background: rgba(12, 10, 28, 0.68);
}

.consultation .follow-turn--user {
	border-color: rgba(196, 168, 232, 0.42);
	background: rgba(66, 47, 94, 0.28);
}

.consultation .follow-turn-label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 230, 154, 0.9);
}

.consultation .follow-turn p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.65;
	color: #fff7d7;
}

.consultation .table-closing {
	display: grid;
	gap: 14px;
	margin-top: 2px;
	padding: clamp(18px, 2.6vw, 28px);
	border: 1px solid rgba(232, 207, 138, 0.28);
	border-radius: 12px;
	background:
		linear-gradient(135deg, rgba(232, 207, 138, 0.08), transparent 52%),
		rgba(15, 12, 32, 0.74);
}

.consultation .table-closing h3 {
	margin: 0;
	color: #ffe79e;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	letter-spacing: 0.02em;
}

.consultation .table-closing-summary {
	margin: 0;
	padding: clamp(15px, 2.2vw, 22px);
	border-left: 3px solid color-mix(in srgb, var(--accent) 68%, #e8cf8a);
	background: rgba(8, 7, 21, 0.64);
	color: #fff8dc;
	font-family: ui-serif, Georgia, "Times New Roman", serif;
	font-size: clamp(1.02rem, 1.8vw, 1.2rem);
	line-height: 1.7;
}

.consultation .table-closing-actions,
.consultation .end-session-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.consultation .closing-copy,
.consultation .closing-download,
.consultation .closing-journal-link,
.consultation .end-session-actions button,
.consultation .end-session-actions a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(232, 207, 138, 0.34);
	border-radius: 999px;
	background: rgba(232, 207, 138, 0.1);
	color: #fff3c4;
	padding: 9px 16px;
	font: inherit;
	font-size: 0.86rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.consultation .closing-copy {
	border-color: color-mix(in srgb, var(--accent) 64%, #e8cf8a);
	background: color-mix(in srgb, var(--accent) 22%, rgba(232, 207, 138, 0.12));
	color: #fffbe9;
	font-weight: 750;
}

.consultation .closing-copy:hover,
.consultation .closing-download:hover,
.consultation .closing-journal-link:hover,
.consultation .end-session-actions button:hover,
.consultation .end-session-actions a:hover {
	border-color: rgba(255, 231, 158, 0.72);
	background: rgba(232, 207, 138, 0.18);
}

.consultation .closing-copy-status {
	min-height: 1.5em;
	margin: -6px 0 0;
	color: #d8c6f5;
	font-size: 0.8rem;
	line-height: 1.5;
}

.consultation .closing-journal {
	min-width: 0;
}

.consultation .closing-journal-note {
	margin: 0;
	color: rgba(255, 247, 215, 0.76);
	font-size: 0.82rem;
	line-height: 1.55;
}

.consultation .end-session {
	border-top: 1px solid rgba(232, 207, 138, 0.16);
	padding-top: 12px;
}

.consultation .end-session > summary {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #f4dda0;
	font-size: 0.86rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.consultation .end-session > summary::after {
	content: "+";
	font-size: 1.1rem;
	transition: transform 0.18s ease;
}

.consultation .end-session[open] > summary::after {
	transform: rotate(45deg);
}

.consultation .end-session > summary::-webkit-details-marker {
	display: none;
}

.consultation .end-session-actions {
	padding-top: 8px;
}

.consultation .follow-compose {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: end;
	margin-top: 4px;
}

.consultation .follow-input {
	width: 100%;
	min-height: 88px;
	resize: vertical;
	border-radius: 10px;
	border: 1px solid rgba(232, 207, 138, 0.32);
	background: rgba(8, 7, 20, 0.82);
	color: #fff7d7;
	padding: 12px 14px;
	font: inherit;
	line-height: 1.5;
}

.consultation .follow-input::placeholder {
	color: rgba(255, 238, 190, 0.68);
}

.consultation .follow-input:focus-visible {
	outline: 2px solid #f5d777;
	outline-offset: 3px;
	border-color: rgba(245, 215, 119, 0.86);
}

.consultation .follow-input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.consultation .follow-send {
	display: inline-flex;
	min-width: 5rem;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(232, 207, 138, 0.28);
	background: rgba(232, 207, 138, 0.12);
	color: #fff7d7;
	border-radius: 999px;
	padding: 10px 16px;
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
	white-space: nowrap;
}

.consultation .follow-send:hover:not(:disabled) {
	background: rgba(232, 207, 138, 0.2);
}

.consultation .follow-send:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.consultation .follow-remaining {
	margin: 8px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255, 235, 181, 0.78);
}

.consultation .regenerate-reading {
	display: none;
}

.consultation .regenerate-reading:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.consultation .reading-sections {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.consultation .reading-section {
	border: 1px solid rgba(232, 207, 138, 0.22);
	border-radius: 10px;
	background: rgba(12, 10, 28, 0.62);
	overflow: hidden;
}

.consultation .reading-section summary {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	padding: 11px 14px;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #f8dfa0;
	list-style: none;
}

.consultation .reading-section summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.1rem;
	transition: transform 0.18s ease;
}

.consultation .reading-section[open] summary::after {
	transform: rotate(45deg);
}

.consultation .reading-section summary::-webkit-details-marker {
	display: none;
}

.consultation .reading-section-body {
	padding: 2px 14px 16px;
	font-size: 0.92rem;
	line-height: 1.72;
	color: #fff7d7;
}

.consultation .reading-section-body p {
	margin: 0 0 8px;
}

.consultation .reading-position-block {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid rgba(232, 207, 138, 0.1);
}

.consultation .reading-position-block:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.consultation .reading-position-block h4 {
	margin: 0 0 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: rgba(196, 168, 232, 0.92);
}

.consultation .reading-disclaimer {
	margin-top: 14px;
	padding: 12px 14px;
	border-left: 2px solid rgba(196, 168, 232, 0.58);
	background: rgba(70, 51, 98, 0.18);
	color: rgba(248, 239, 255, 0.86);
	font-size: 0.84rem;
}

.consultation .picked-card-body {
	font-size: 0.84rem;
	line-height: 1.55;
	color: rgba(255, 247, 215, 0.92);
}

.consultation .picked-card-body p {
	margin: 0 0 6px;
}

.consultation .picked-card-imagery {
	color: rgba(255, 238, 181, 0.96);
}

.consultation .picked-card-description {
	color: rgba(255, 247, 215, 0.92);
}

.consultation .picked-card-keywords {
	color: rgba(206, 189, 243, 0.96);
}

.consultation .reading-context {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 16px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid rgba(232, 207, 138, 0.18);
	border-radius: 10px;
	background: rgba(8, 7, 22, 0.56);
}

.consultation .reading-context-question,
.consultation .reading-context-spread {
	margin: 0;
	line-height: 1.55;
}

.consultation .reading-context-question {
	min-width: 0;
	color: rgba(255, 247, 215, 0.9);
	font-size: 0.88rem;
	overflow-wrap: anywhere;
}

.consultation .reading-context-spread {
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.04));
	color: #f7dd99;
	padding: 5px 10px;
	font-size: 0.74rem;
	font-weight: 750;
	white-space: nowrap;
}

.consultation .reading-summary {
	margin: 0;
	color: #fff9e4;
	font-family: ui-serif, Georgia, "Times New Roman", serif;
	font-size: clamp(1.04rem, 1.7vw, 1.2rem);
	line-height: 1.75;
}

.consultation .reading-result[data-state='loading'] .reading-summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	color: rgba(255, 247, 215, 0.86);
}

.consultation .reading-result[data-state='loading'] .reading-summary::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-top: 0.55em;
	border: 2px solid rgba(245, 215, 119, 0.52);
	border-top-color: #f5d777;
	border-radius: 50%;
	animation: reading-status-turn 0.9s linear infinite;
}

.consultation .reading-result[data-state='error'] .reading-summary {
	border-left: 3px solid #ff9b9b;
	padding-left: 14px;
	color: #ffe6e6;
}

.consultation .reading-status {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.consultation .reading-status button {
	min-height: 44px;
	border: 1px solid rgba(255, 174, 174, 0.66);
	border-radius: 999px;
	background: rgba(127, 39, 49, 0.34);
	color: #fff3f3;
	padding: 9px 16px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.consultation .reading-notice {
	margin: -10px 0 0;
	padding: 11px 13px;
	border: 1px solid rgba(245, 215, 119, 0.3);
	border-left-width: 3px;
	border-radius: 8px;
	background: rgba(78, 61, 24, 0.24);
	color: #ffe9ab;
	font-size: 0.84rem;
	line-height: 1.58;
}

.consultation[data-reading-active='true'] .picked-cards {
	display: block;
	min-width: 0;
}

.consultation .learning-selector-label {
	margin: 0 0 10px;
	color: #f7dda0;
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.consultation .learning-card-selector {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(4.8rem, 100%), 1fr));
	gap: 8px;
	width: 100%;
	min-width: 0;
	margin-bottom: 14px;
}

.consultation .learning-card-choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	min-width: 0;
	min-height: 72px;
	align-items: center;
	border: 1px solid rgba(232, 207, 138, 0.2);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.035);
	color: rgba(255, 247, 215, 0.8);
	padding: 6px 8px;
	font: inherit;
	font-size: 0.72rem;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		transform 0.18s ease;
}

.consultation .learning-card-choice:hover,
.consultation .learning-card-choice[aria-pressed='true'] {
	border-color: color-mix(in srgb, var(--accent) 72%, #f5d777);
	background: color-mix(in srgb, var(--accent) 16%, rgba(232, 207, 138, 0.08));
	color: #fff5cf;
}

.consultation .learning-card-choice[aria-pressed='true'] {
	box-shadow: inset 0 0 0 1px rgba(245, 215, 119, 0.2);
}

.consultation .learning-card-choice img {
	display: block;
	width: 34px;
	aspect-ratio: 3 / 5;
	border: 1px solid rgba(232, 207, 138, 0.24);
	border-radius: 4px;
	object-fit: cover;
}

.consultation .learning-card-choice img.is-reversed,
.consultation .learning-card-image.is-reversed {
	transform: rotate(180deg);
}

.consultation .learning-card-choice span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.consultation .learning-card-panel {
	display: grid;
	grid-template-columns: minmax(132px, 180px) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 30px);
	align-items: start;
	min-width: 0;
	padding: clamp(16px, 2.8vw, 26px);
	border: 1px solid rgba(232, 207, 138, 0.25);
	border-radius: 12px;
	background:
		radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
		rgba(10, 9, 26, 0.72);
}

.consultation .learning-card-image {
	display: block;
	width: 100%;
	max-width: 180px;
	aspect-ratio: 3 / 5;
	justify-self: center;
	border: 1px solid rgba(245, 215, 119, 0.48);
	border-radius: 8px;
	object-fit: cover;
	box-shadow:
		0 18px 38px rgba(0, 0, 0, 0.38),
		0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.consultation .learning-card-copy {
	min-width: 0;
}

.consultation .learning-card-copy h3 {
	margin: 0 0 16px;
	color: #fff4c8;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.35;
}

.consultation .learning-card-copy h4 {
	margin: 0 0 6px;
	color: #f4d98f;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

.consultation .learning-card-copy > p {
	margin: 0 0 14px;
	font-size: 0.92rem;
	line-height: 1.72;
}

.consultation .learning-card-copy .picked-card-keywords {
	display: inline-block;
	max-width: 100%;
	border: 1px solid rgba(196, 168, 232, 0.28);
	border-radius: 999px;
	background: rgba(86, 61, 117, 0.2);
	color: #e3d3fa;
	padding: 7px 11px;
	font-size: 0.78rem;
	overflow-wrap: anywhere;
}

.consultation .learning-card-detail {
	margin-top: 10px;
	border: 1px solid rgba(232, 207, 138, 0.2);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.025);
	overflow: hidden;
}

.consultation .learning-card-detail > summary {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 13px;
	color: #f4dda0;
	font-size: 0.84rem;
	font-weight: 750;
	list-style: none;
	cursor: pointer;
}

.consultation .learning-card-detail > summary::after {
	content: "+";
	font-size: 1.05rem;
	transition: transform 0.18s ease;
}

.consultation .learning-card-detail[open] > summary::after {
	transform: rotate(45deg);
}

.consultation .learning-card-detail > summary::-webkit-details-marker {
	display: none;
}

.consultation .learning-card-detail > p,
.consultation .learning-card-detail > div {
	margin: 0;
	padding: 2px 13px 14px;
	color: rgba(255, 247, 215, 0.9);
	font-size: 0.88rem;
	line-height: 1.68;
}

.consultation .learning-card-detail > div p {
	margin: 0 0 8px;
}

.consultation[data-reading-active='true'] .advice-box {
	padding: clamp(16px, 2.4vw, 22px);
	border: 1px solid rgba(196, 168, 232, 0.28);
	border-radius: 10px;
	background: rgba(70, 51, 98, 0.18);
}

.consultation[data-reading-active='true'] .advice-box .box-label {
	margin: 0 0 8px;
	color: #d9c3f6;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.consultation[data-reading-active='true'] .advice-box #adviceText {
	margin: 0;
	color: #fff5d6;
	font-size: 0.92rem;
	line-height: 1.68;
}

.consultation .reading-continuation {
	border: 1px solid rgba(232, 207, 138, 0.2);
	border-radius: 10px;
	background: rgba(10, 9, 26, 0.56);
	padding: 0;
}

.consultation .reading-continuation > summary.box-label {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 11px 14px;
	color: #f4dda0;
	font-size: 0.86rem;
	font-weight: 750;
	list-style: none;
	cursor: pointer;
}

.consultation .reading-continuation > summary.box-label::after {
	content: "+";
	font-size: 1.1rem;
	transition: transform 0.18s ease;
}

.consultation .reading-continuation[open] > summary.box-label::after {
	transform: rotate(45deg);
}

.consultation .reading-continuation > summary.box-label::-webkit-details-marker {
	display: none;
}

.consultation .reading-continuation[open] {
	padding-bottom: 14px;
}

.consultation .reading-continuation[open] > :not(summary) {
	margin-inline: 14px;
}

.consultation .follow-prompts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.consultation .follow-prompts button {
	min-height: 44px;
	border: 1px solid rgba(196, 168, 232, 0.3);
	border-radius: 9px;
	background: rgba(86, 61, 117, 0.16);
	color: #f4e9ff;
	padding: 10px 12px;
	font: inherit;
	font-size: 0.82rem;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.consultation .follow-prompts button:hover:not(:disabled) {
	border-color: rgba(216, 194, 248, 0.66);
	background: rgba(112, 79, 150, 0.24);
}

.consultation .follow-prompts button:disabled {
	opacity: 0.52;
	cursor: not-allowed;
}

.consultation .follow-error {
	margin: 10px 14px 0;
	border-left: 3px solid #ff9b9b;
	background: rgba(127, 39, 49, 0.22);
	color: #ffe6e6;
	padding: 10px 12px;
	font-size: 0.84rem;
	line-height: 1.55;
}

.consultation :where(
	.learning-card-choice,
	.reading-status button,
	.closing-copy,
	.closing-download,
	.closing-journal-link,
	.end-session > summary,
	.end-session-actions button,
	.end-session-actions a,
	.learning-card-detail > summary,
	.reading-section > summary,
	.reading-continuation > summary,
	.follow-prompts button,
	.follow-send
):focus-visible {
	outline: 2px solid #f5d777;
	outline-offset: 3px;
}

.consultation .learning-card-detail > summary:focus-visible,
.consultation .reading-section > summary:focus-visible {
	outline-offset: -3px;
}

@keyframes reading-status-turn {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.consultation .consultation-shell {
		width: min(100% - 24px, 1160px);
	}

	.consultation .reader-visual {
		--figure-scale: 0.76;
	}

	.consultation #readerName {
		font-size: clamp(1.5rem, 2.2vw, 1.82rem);
	}

	.consultation #readerGreeting,
	.consultation .dialogue {
		font-size: 0.84rem;
		line-height: 1.54;
	}

	.consultation .reader-copy {
		padding-inline: 14px;
	}

	.consultation .dialogue {
		margin-inline: 14px;
	}

	.consultation .classic-spread-tabs {
		max-height: 92px;
		overflow: auto;
		scrollbar-width: thin;
	}

	.consultation .spread-slots {
		--slot-min: 3.9rem;
		--slot-max: 5.6rem;
	}

	.consultation .spread-celtic {
		--slot-min: 3.15rem;
		--slot-max: 4.38rem;
	}

	.consultation .spread-hexagram,
	.consultation .spread-i_thou_relationship {
		--slot-min: 3.45rem;
		--slot-max: 4.8rem;
	}
}

@media (min-width: 900px) and (max-height: 760px) {
	.consultation .consultation-shell {
		padding-block: 8px;
	}

	.consultation .scene-header {
		margin-bottom: 8px;
	}

	.consultation .reader-visual {
		--figure-scale: 0.72;
	}

	.consultation #readerGreeting {
		display: none;
	}

	.consultation:not([data-reading-active='true']) .dialogue {
		max-height: 110px;
		overflow: auto;
	}

	.consultation .question-panel {
		padding-bottom: 8px;
	}

	.consultation .classic-spread-tabs {
		max-height: 78px;
	}

	.consultation .spread-slots {
		padding-top: 18px;
		--slot-min: 3.45rem;
		--slot-max: 4.9rem;
	}
}

@media (max-width: 899px) {
	.consultation .table-stage,
	.consultation .reading-panel {
		border-color: var(--draw-panel-border);
	}
}

@media (min-width: 761px) and (max-width: 1199px) {
	.consultation[data-reading-active='true'] .consultation-shell {
		width: min(100% - 32px, 980px);
	}

	.consultation[data-reading-active='true'] .reader-stage {
		grid-template-rows: minmax(240px, 320px) auto auto;
	}

	.consultation[data-reading-active='true'] .spread-slots:not(.spread-single) {
		grid-template-columns: repeat(auto-fit, minmax(min(5.8rem, 100%), 1fr));
	}

	.consultation[data-reading-active='true'] .learning-card-selector {
		grid-template-columns: repeat(auto-fit, minmax(min(5.4rem, 100%), 1fr));
	}
}

/* Keep the single-column mobile room from being widened by its reader/table content. */
@media (max-width: 760px) {
	html:has(.consultation),
	body:has(.consultation) {
		height: auto;
		overflow-y: auto;
	}

	body:has(.consultation) main,
	.consultation.consultation {
		height: auto;
		overflow: visible;
	}

	.consultation .ritual-grid {
		grid-template-columns: minmax(0, 1fr);
		min-width: 0;
	}

	.consultation .reader-stage,
	.consultation .table-stage,
	.consultation .reading-panel {
		min-width: 0;
		max-width: 100%;
	}

	.consultation .question-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.consultation .primary-action {
		min-width: 4.75rem;
		padding-inline: 0.75rem;
	}

	.consultation[data-reading-active='true'] {
		padding-bottom: 36px;
	}

	.consultation[data-reading-active='true'] .consultation-shell {
		width: calc(100% - 20px);
		padding-block: 12px 20px;
	}

	.consultation[data-reading-active='true'] .ritual-grid {
		gap: 12px;
	}

	.consultation[data-reading-active='true'] .reader-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(210px, 270px) auto auto;
	}

	.consultation[data-reading-active='true'] .reader-visual {
		--figure-scale: 0.66;
		width: 100%;
		max-width: 100%;
		height: clamp(220px, 64vw, 270px);
		min-height: 210px;
		margin-bottom: -30px;
	}

	.consultation[data-reading-active='true'] .reader-copy {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding-inline: 14px;
	}

	.consultation[data-reading-active='true'] .dialogue {
		width: auto;
		min-width: 0;
		max-width: 100%;
		margin-inline: 14px;
		overflow: visible;
		font-size: 0.86rem;
	}

	.consultation[data-reading-active='true'] .dialogue p {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.consultation[data-reading-active='true'] .table-stage {
		padding: 12px;
	}

	.consultation[data-reading-active='true'] .spread-slots {
		--slot-min: 3.3rem;
		--slot-max: 4.4rem;
	}

	.consultation[data-reading-active='true'] .spread-slots:not(.spread-single) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.consultation[data-reading-active='true'] .spread-single {
		grid-template-columns: minmax(6.5rem, 8.5rem);
	}

	.consultation[data-reading-active='true'] .reading-panel {
		padding: 16px 14px 20px;
	}

	.consultation[data-reading-active='true'] .reading-result {
		gap: 18px;
	}

	.consultation .reading-context {
		grid-template-columns: minmax(0, 1fr);
	}

	.consultation .reading-context-spread {
		justify-self: start;
		white-space: normal;
	}

	.consultation .learning-card-selector {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.consultation .learning-card-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 16px;
	}

	.consultation .learning-card-image {
		width: min(52%, 160px);
	}

	.consultation .follow-compose {
		grid-template-columns: minmax(0, 1fr);
	}

	.consultation .follow-send {
		width: 100%;
	}

	.consultation .table-closing-actions,
	.consultation .end-session-actions {
		align-items: stretch;
	}

	.consultation .table-closing-actions > *,
	.consultation .end-session-actions > * {
		flex: 1 1 12rem;
	}
}

/* Keep the current portrait visible until the decoded replacement is ready. */
.consultation .reader-fullbody img.is-switching {
	opacity: 1 !important;
}

/* Welcome state: let the reader meet the querent at portrait distance.
   Do not set transform:!important here — it overrides reader-portrait-breathe keyframes. */
.consultation[data-reader-framing='portrait'] .reader-fullbody {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	animation: reader-portrait-breathe 7s ease-in-out infinite !important;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
}

.consultation[data-reader-framing='portrait'] .reader-fullbody img.is-halfbody {
	position: absolute;
	inset: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 44%;
	transform: none;
	border-radius: 8px 8px 0 0;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}

.consultation[data-reader-framing='portrait'] .reader-orbit,
.consultation[data-reader-framing='portrait'] .reader-aura-field,
.consultation[data-reader-framing='portrait'] .reader-backlight {
	opacity: 0.34;
}

.consultation[data-reader-framing='portrait'] .reader-floor,
.consultation[data-reader-framing='portrait'] .reader-sigil {
	opacity: 0.24;
}

@keyframes reader-portrait-breathe {
	0%,
	100% {
		transform: scale(1.015);
	}
	50% {
		transform: scale(1.035) translateY(-3px);
	}
}

@media (max-width: 760px) {
	.consultation[data-reader-framing='portrait'] .reader-fullbody img.is-halfbody {
		object-position: 50% 38%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.consultation[data-reader-framing='portrait'] .reader-fullbody {
		animation: none !important;
		transform: scale(1.02) !important;
	}
}

/* Move the sigil glow off box-shadow so the compositor only animates opacity/transform. */
.consultation .reader-sigil {
	animation: none !important;
	box-shadow: none !important;
	isolation: isolate;
}

.consultation .reader-sigil::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -0.55rem;
	border-radius: inherit;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 52%, transparent), transparent 68%);
	opacity: 0.42;
	transform: scale(0.88);
	animation: reader-sigil-composite 3.2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes reader-sigil-composite {
	50% {
		opacity: 0.78;
		transform: scale(1.14);
	}
}

@media (prefers-reduced-motion: reduce) {
	.consultation .learning-card-choice,
	.consultation .reading-section summary::after,
	.consultation .learning-card-detail > summary::after,
	.consultation .reading-continuation > summary.box-label::after,
	.consultation .end-session > summary::after {
		transition: none !important;
	}

	.consultation .reading-result[data-state='loading'] .reading-summary::before {
		animation: none !important;
		border-color: #f5d777;
	}

	.consultation .reader-sigil::before {
		animation: none !important;
		opacity: 0.55;
		transform: none;
	}
}