/**
 * Product screens.
 */

.auth-screen-body {
	align-items: center;
	justify-content: safe center;
	overflow: auto;
	padding: clamp( 0.5rem, 1dvh, 1rem ) 1rem
		clamp( 3rem, 10dvh, 6rem );
}

.auth-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp( 0.5rem, 1.5dvh, 1rem );
	width: min( 90ch, 100% );
	margin-block: auto;
	text-align: center;
}

.auth-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	max-width: 100%;
	transform: translateY( -20px );
}

.auth-logo-stack {
	display: grid;
	max-width: 100%;
	padding-inline-end: 0.12em;
	padding-block-end: 0.12em;
	background: transparent;
}

.auth-logo {
	grid-area: 1 / 1;
	margin: 0;
	background: transparent;
	font-family: var(--font-ui);
	font-size: min( var(--font-size-ui), clamp( 5px, 1.8vw, 18px ) );
	font-weight: normal;
	line-height: 1;
	white-space: pre;
}

.auth-logo-shadow {
	z-index: 0;
	color: var(--color-text);
	transform: translate( 0.12em, 0.12em );
}

.auth-logo-foreground {
	z-index: 1;
	color: var(--color-text-intense);
}

.auth-ornaments {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	z-index: 2;
	margin-top: calc( clamp( -2rem, -3vw, -1rem ) - 20px );
}

.auth-ornament {
	display: block;
	flex: 0 0 auto;
	width: clamp( 3rem, 8vw, 5rem );
	aspect-ratio: 23 / 18;
	background-color: var(--color-text-intense);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.auth-ornament-book {
	background-color: var(--color-accent);
	-webkit-mask-image: url("../images/book.png");
	mask-image: url("../images/book.png");
}

.auth-ornament-robot {
	background-color: var(--color-accent);
	-webkit-mask-image: url("../images/robot.png");
	mask-image: url("../images/robot.png");
}

@media (max-width: 640px) {
	.auth-screen-body {
		padding-block-start: calc(
			clamp( 0.5rem, 1dvh, 1rem ) + 20px
		);
	}

	.auth-ornaments {
		margin-top: calc( clamp( -2rem, -3vw, -1rem ) - 4px );
	}

	.auth-ornament {
		width: 2.25rem;
	}
}

.auth-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: min( 68ch, 100% );
}

.auth-intro h2 {
	color: var(--color-title);
	text-align: center;
}

.auth-description {
	width: min( 68ch, 100% );
	color: var(--color-text);
	text-align: left;
}

.auth-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	max-width: 100%;
	margin-block: clamp( 1rem, 2.5dvh, 2rem );
}

.auth-actions h2 {
	color: var(--color-text-intense);
}

.auth-actions h2:empty {
	display: none;
}

.auth-screen-body.screen-body-centered-menu .retro-menu {
	width: max-content;
	max-width: 100%;
}

.screen-body-menu {
	min-height: 0;
}

.screen-body-menu .scroll-region {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.screen-edit-blueprint .scroll-region,
.screen-concept-picker .scroll-region {
	align-items: center;
}

.screen-edit-blueprint .scroll-region > .retro-menu,
.screen-concept-picker .scroll-region > .retro-menu {
	width: max-content;
	max-width: 100%;
}

.screen-edit-blueprint .scroll-region > .retro-menu button,
.screen-concept-picker .scroll-region > .retro-menu button {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.screen-finalize-topic .split-pane-tree .retro-menu button {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.screen-edit-blueprint .screen-actions {
	display: none;
}

@media (max-width: 640px) {
	.screen-edit-blueprint .screen-actions {
		display: grid;
	}
}

.screen-body-centered-menu .scroll-region {
	--centered-menu-lift: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-content: safe center;
	flex: 1;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: auto;
	padding-block-end: calc(
		var(--centered-menu-lift) + var(--centered-menu-lift)
	);
}

.screen-body-centered-menu .retro-menu {
	width: max-content;
	max-width: 100%;
}

.screen-body-centered-menu .retro-menu.is-fixed-settings-width {
	width: calc( var(--settings-menu-content-width) + 4ch + 8px );
}

.screen-body-centered-menu .retro-menu button {
	width: auto;
	justify-self: stretch;
	overflow-wrap: anywhere;
}

.screen-body-centered-menu [data-screen-extras] {
	max-width: 100%;
}

.screen-body-centered-menu .quiz-mix-block .retro-menu {
	width: calc( 42ch + 8px );
	max-width: 100%;
}

.screen-body-centered-menu .quiz-mix-menu button {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 4ch;
	align-items: center;
	padding: 0 0 0 2ch;
	overflow-wrap: normal;
}

.quiz-mix-type {
	min-width: 0;
}

.quiz-mix-pct {
	text-align: right;
	white-space: nowrap;
}

.screen-body-centered-menu .quiz-mix-block [data-screen-extras] {
	width: calc( 42ch + 8px );
	max-width: 100%;
	min-width: 0;
	padding-inline: calc( 2ch + 4px ) 4px;
}

.quiz-mix-label {
	color: var(--color-status);
}

.quiz-mix-bar {
	width: 40ch;
	max-width: 100%;
	min-width: 0;
	margin-bottom: var(--space-2);
	white-space: pre;
	overflow: hidden;
}

.quiz-mix-segment {
	display: inline-block;
	position: relative;
}

.quiz-mix-segment + .quiz-mix-segment::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 1px;
	background: var(--color-bg);
	pointer-events: none;
}

.quiz-mix-segment-status {
	background: var(--color-status);
	color: var(--color-status);
}

.quiz-mix-segment-title {
	background: var(--color-title);
	color: var(--color-title);
}

.quiz-mix-segment-footer {
	background: var(--color-accent);
	color: var(--color-accent);
}

html[data-theme^="mono-"] .quiz-mix-segment-status,
html[data-theme^="mono-"] .quiz-mix-segment-footer {
	background: var(--color-text);
	color: var(--color-text);
}

.screen-body-centered-menu .file-upload {
	width: min( 40ch, 100% );
	max-width: 100%;
}

.screen-body-reader {
	gap: 0;
}

.screen-body-reader .scroll-region {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.screen-body-reader .retro-separator {
	flex: 0 0 auto;
}

.screen-body-reader .retro-menu {
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
}

.about-article {
	width: min( 72ch, 100% );
	margin-inline: auto;
	padding: var(--space-3) 2ch var(--space-4) 0;
}

.about-article section,
.about-article li + li {
	margin-top: var(--space-4);
}

.about-article h2 {
	color: var(--color-title);
	margin-bottom: var(--space-2);
}

.about-article ol,
.about-article ul {
	padding-inline-start: 3ch;
}

.about-lead {
	color: var(--color-text-intense);
}

.about-caution {
	color: var(--color-status-intense);
}

.screen-body-api-token {
	gap: 0;
}

.screen-body-api-token .scroll-region {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-content: safe center;
	flex: 1;
	width: 100%;
	min-height: 0;
	overflow: auto;
	padding: var(--space-3) 2ch var(--space-4);
}

.api-token-panel {
	width: min( 76ch, 100% );
	max-width: 100%;
}

.screen-body-api-token .retro-menu {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

.api-token-panel > .retro-separator {
	margin-block: var(--space-4) var(--space-2);
}

.api-token-heading {
	color: var(--color-title);
	margin-bottom: var(--space-3);
}

.api-token-created {
	color: var(--color-status);
}

.api-token-caution {
	color: var(--color-status-intense);
}

.api-token-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block: var(--space-4);
	color: var(--color-status);
}

.api-token-field input {
	width: min( 76ch, calc( 100% - 4px ) );
	max-width: calc( 100% - 4px );
	min-height: var(--control-min-height);
	margin-inline: 4px 0;
	padding: var(--space-2);
	border: 1px solid var(--color-text);
	background: var(--color-bg);
	color: var(--color-text-intense);
	font: inherit;
}

.api-token-field input:focus-visible {
	border-color: var(--color-title);
}

.screen-body-lesson-ready {
	gap: 0;
}

.screen-body-lesson-ready .scroll-region {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.screen-body-lesson-ready .retro-separator {
	flex: 0 0 auto;
}

.screen-body-lesson-ready .retro-menu {
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
}

.screen-body-study-lesson,
.screen-body-quiz,
.screen-body-lesson-progress {
	gap: 0;
}

.quiz-stage {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.screen-body-study-lesson .scroll-region,
.screen-body-quiz .scroll-region,
.screen-body-lesson-progress .scroll-region {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.screen-body-study-lesson .retro-separator,
.screen-body-quiz .retro-separator,
.screen-body-lesson-progress .retro-separator {
	flex: 0 0 auto;
}

.screen-body-study-lesson .retro-menu,
.screen-body-quiz .retro-menu,
.screen-body-lesson-progress .retro-menu {
	flex: 0 0 auto;
	width: max-content;
	max-width: 100%;
}

.quiz-stage.is-choice-question {
	justify-content: center;
	justify-content: safe center;
	overflow: auto;
	padding-inline: 2ch;
}

.quiz-stage.is-choice-question > .scroll-region {
	flex: 0 0 auto;
	width: 100%;
	min-height: auto;
	overflow: visible;
	padding-inline: 0;
}

.quiz-stage.is-choice-question > .retro-separator {
	display: none;
}

.quiz-stage.is-choice-question > .retro-menu {
	align-items: center;
	width: 100%;
	max-width: 100%;
}

.quiz-stage.is-choice-question .quiz-article {
	width: min( 64ch, 100% );
	margin-inline: auto;
	text-align: left;
}

.quiz-stage.is-choice-question .quiz-prompt {
	margin-bottom: 0;
}

.quiz-answer-choices {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: min( 64ch, 100% );
	margin-top: 1lh;
}

.quiz-answer-choices button {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.quiz-answer-choices button:first-child {
	margin-top: 0;
}

.quiz-stage.is-choice-question .retro-menu-divider {
	width: min( 64ch, 100% );
}

.quiz-stage.is-choice-question button[data-value="skip"] {
	width: min( 64ch, 100% );
}

.study-article {
	width: 100%;
	color: var(--color-text);
	/*white-space: pre-wrap;*/
	overflow-wrap: anywhere;
	padding-right: 10px;
}

.study-article p {
	margin: 0 0 var(--space-3);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.study-article p + p {
	margin-top: 0;
}

.study-article h2,
.study-article h3,
.study-article h4 {
	color: var(--color-title);
	margin: var(--space-4) 0 var(--space-2);
}

.study-article h2:first-child,
.study-article h3:first-child,
.study-article h4:first-child {
	margin-top: 0;
}

.study-article ul,
.study-article ol {
	margin: 0 0 var(--space-3);
	padding-left: 2ch;
}

.study-article li {
	margin-bottom: var(--space-1);
}

.study-article blockquote {
	border-left: 1px solid var(--color-status);
	color: var(--color-status);
	margin: 0 0 var(--space-3);
	padding-left: var(--space-3);
}

.study-article a {
	color: var(--color-accent);
}

.study-article pre,
.study-article code {
	color: var(--color-accent);
	font-family: inherit;
	font-size: inherit;
}

.study-article code {
	overflow-wrap: anywhere;
}

.study-article pre {
	margin: 0 0 var(--space-3);
	overflow-x: auto;
	white-space: pre;
}

.study-article .lesson-markdown-fallback {
	color: var(--color-text);
	white-space: pre-wrap;
}

.study-qa {
	margin-top: var(--space-4);
}

.study-divider {
	border: 0;
	border-top: 1px solid var(--color-text);
	margin: var(--space-4) 0;
}

.study-qa-turn {
	margin-bottom: var(--space-3);
}

.study-qa-you {
	color: var(--color-accent);
}

.study-qa-guide {
	color: var(--color-status);
}

.study-qa-turn p {
	margin: 0 0 var(--space-3);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.study-sources {
	margin-top: var(--space-4);
	color: var(--color-status);
}

.study-sources-title {
	color: var(--color-status);
	margin: 0 0 var(--space-2);
}

.study-sources-list {
	margin: 0;
	padding-left: 1.5em;
}

.quiz-article {
	width: 100%;
	color: var(--color-text);
}

.quiz-concept {
	color: var(--color-status);
	margin: 0 0 var(--space-3);
	overflow-wrap: anywhere;
}

.quiz-prompt,
.quiz-feedback,
.quiz-explanation {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.quiz-result-header {
	margin: 0 0 var(--space-3);
}

.quiz-result-header.is-correct {
	color: var(--color-accent);
}

.quiz-result-header.is-incorrect {
	color: var(--color-status);
}

.quiz-result-score {
	margin: 0 0 var(--space-2);
	color: var(--color-text-intense);
}

.quiz-explanation-label {
	color: var(--color-status);
	margin: var(--space-4) 0 var(--space-2);
}

.screen-body-centered-menu .progress-menu button.progress-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 2ch;
	align-items: baseline;
	text-align: left;
}

.progress-row-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.progress-row-score {
	white-space: nowrap;
	color: var(--color-status);
}

.progress-detail {
	max-width: 72ch;
	width: 100%;
}

.progress-score-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 2ch;
	align-items: baseline;
	margin: 0 0 var(--space-2);
}

.progress-score-row.is-subtopic {
	color: var(--color-status);
	margin-top: var(--space-3);
}

.progress-detail .progress-score-row.is-subtopic:first-child {
	margin-top: 0;
}

.progress-score-row.is-concept {
	color: var(--color-text);
	padding-left: 2ch;
}

.progress-score-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.progress-score-value {
	white-space: nowrap;
}

.progress-stats {
	margin: 0 0 var(--space-3);
	padding-left: 4ch;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.lesson-summary-title,
.lesson-ready-title {
	color: var(--color-title);
	margin-bottom: var(--space-3);
}

.lesson-summary-warn {
	color: var(--color-status);
	margin-bottom: var(--space-3);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.lesson-field {
	margin-bottom: var(--space-3);
}

.lesson-field-label {
	color: var(--color-status);
}

.lesson-field-value {
	color: var(--color-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.screen-body-split .split-heading {
	color: var(--color-title);
	margin-bottom: var(--space-2);
	flex: 0 0 auto;
}

.screen-body-split .split-pane-question .retro-menu,
.screen-body-split .split-pane-lesson-config .retro-menu {
	width: max-content;
	max-width: 100%;
}

.blueprint-preview {
	color: var(--color-text);
}

.blueprint-preview .blueprint-title {
	color: var(--color-title);
	margin-bottom: var(--space-2);
}

.blueprint-preview .blueprint-empty {
	color: var(--color-status);
}

.blueprint-preview .blueprint-subtopics,
.blueprint-preview .blueprint-concepts,
.blueprint-preview .blueprint-notes {
	margin: 0;
	padding-left: 1.5em;
}

.blueprint-preview .blueprint-subtopics > li::marker {
	content: "+ ";
}

.blueprint-preview .blueprint-concepts > li::marker {
	content: "- ";
}

.blueprint-preview .blueprint-notes-heading {
	color: var(--color-title);
	margin-top: var(--space-3);
	margin-bottom: var(--space-2);
}

.inspector-badge {
	color: var(--color-status);
	margin-bottom: var(--space-2);
	flex: 0 0 auto;
}

.split-pane-inspector .inspector-description {
	color: var(--color-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.screen-body-menu .screen-actions {
	margin-top: var(--space-2);
}

.screen-body-split .screen-actions.is-horizontal,
.screen-body-menu .screen-actions.is-horizontal {
	width: 100%;
}

.blueprint-add {
	color: var(--color-accent);
}

.document-preview {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-family: inherit;
	font-size: inherit;
	color: var(--color-text);
}

.debug-guide .guide-heading {
	color: var(--color-title);
	margin-top: var(--space-4);
	margin-bottom: var(--space-2);
}

.debug-guide .guide-field {
	margin-bottom: var(--space-3);
}

.debug-guide .guide-field-label,
.debug-guide .guide-chunks {
	color: var(--color-status);
}

.debug-guide .guide-field-value,
.debug-guide .guide-summary,
.debug-guide .guide-topics,
.debug-guide .guide-note {
	color: var(--color-text);
}

.debug-guide .guide-boundary-list {
	margin: var(--space-2) 0 0 1.5em;
	padding: 0;
}

.debug-guide .guide-item {
	margin-bottom: var(--space-4);
}

.debug-guide .guide-item-button {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: var(--control-min-height);
	padding: 0 2ch;
	margin: 4px 0;
	text-align: left;
	color: var(--color-text);
	overflow-wrap: anywhere;
	position: relative;
}

.debug-guide .guide-item-button:hover:not(:focus-visible) {
	color: var(--color-text-intense);
}

.debug-guide .guide-item-button:focus-visible {
	background: transparent;
	color: var(--color-title);
}

.debug-guide .guide-item-button:focus-visible::before {
	content: ">" / "";
	position: absolute;
	left: 0.5ch;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-title);
	pointer-events: none;
}

.debug-chunk .chunk-meta {
	margin-bottom: var(--space-2);
}

.debug-chunk .chunk-meta-label {
	color: var(--color-status);
}

.debug-chunk .chunk-meta-value {
	color: var(--color-text);
}

.debug-chunk .document-preview {
	margin-top: var(--space-3);
}