/* Editra Core Reader structural and compatibility styles. */

.editra-reader-shell[hidden],
.editra-reader-shell [hidden] {
	display: none !important;
}

.editra-reader-shell {
	box-sizing: border-box;
	color: inherit;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin-block: 1.5rem;
	max-width: 46rem;
	width: 100%;
}

.editra-reader-entry,
.editra-reader-player__primary,
.editra-reader-player__actions,
.editra-reader-control-row,
.editra-reader-segmented {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.editra-reader-entry,
.editra-reader-player {
	background: #fff;
	border: 1px solid #e5e1da;
	box-sizing: border-box;
	color: #181716;
	padding: 0.75rem;
}

.editra-reader-entry {
	justify-content: space-between;
}

.editra-reader-entry__meta,
.editra-reader-player__identity {
	display: grid;
	gap: 0.1rem;
}

.editra-reader-entry__eyebrow,
.editra-reader-control-label,
.editra-reader-field > span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.editra-reader-player {
	border-block-start: 0;
	position: sticky;
	inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
	z-index: 120;
}

.editra-reader-player__primary {
	justify-content: space-between;
}

.editra-reader-player__advanced {
	border-block-start: 1px solid #e5e1da;
	display: grid;
	gap: 1rem;
	margin-block-start: 0.75rem;
	padding-block-start: 0.75rem;
}

.editra-reader-button,
.editra-reader-icon-button,
.editra-reader-segmented button,
.editra-reader-resume,
.editra-reader-field select,
.editra-reader-compact-field select {
	background: #f5f3ef;
	border: 1px solid #cfc8be;
	border-radius: 3px;
	box-sizing: border-box;
	color: #181716;
	font: inherit;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
}

.editra-reader-button,
.editra-reader-icon-button,
.editra-reader-segmented button,
.editra-reader-resume {
	cursor: pointer;
}

.editra-reader-button--primary,
.editra-reader-segmented button[aria-pressed="true"] {
	background: #e84c2a;
	border-color: #e84c2a;
	color: #fff;
}

.editra-reader-icon-button {
	display: inline-grid;
	min-width: 44px;
	place-items: center;
}

.editra-reader-icon {
	block-size: 1.25rem;
	display: block;
	inline-size: 1.25rem;
}

.editra-reader-icon--pause {
	display: none;
}

[data-editra-reader-action="play"][data-state="playing"] .editra-reader-icon--play {
	display: none;
}

[data-editra-reader-action="play"][data-state="playing"] .editra-reader-icon--pause {
	display: block;
}

.editra-reader-player__percent {
	font-variant-numeric: tabular-nums;
	min-width: 3ch;
}

.editra-reader-field {
	display: grid;
	gap: 0.35rem;
}

.editra-reader-toggle {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.editra-reader-page-progress {
	block-size: 3px;
	inset: 0 0 auto;
	pointer-events: none;
	position: fixed;
	z-index: 10002;
}

.editra-reader-page-progress span {
	background: currentColor;
	display: block;
	block-size: 100%;
	inline-size: var(--editra-reader-progress, 0%);
	transition: inline-size 100ms linear;
}

.admin-bar .editra-reader-page-progress {
	inset-block-start: 32px;
}

[data-editra-reader-content][data-editra-reader-size="small"] {
	font-size: 1rem !important;
}

[data-editra-reader-content][data-editra-reader-size="large"] {
	font-size: clamp(1.2rem, 1.5vw, 1.35rem) !important;
}

[data-editra-reader-content][data-editra-reader-size="x-large"] {
	font-size: clamp(1.35rem, 1.8vw, 1.55rem) !important;
}

[data-editra-reader-content][data-editra-reader-width="narrow"] {
	max-width: 36rem !important;
}

[data-editra-reader-content][data-editra-reader-width="comfortable"] {
	max-width: 42.5rem !important;
}

[data-editra-reader-content][data-editra-reader-width="wide"] {
	max-width: 52rem !important;
}

[data-editra-reader-content][data-editra-reader-mode]:not([data-editra-reader-mode="theme"]) {
	box-sizing: border-box;
	padding: clamp(1rem, 4vw, 2.5rem);
}

[data-editra-reader-content][data-editra-reader-mode="light"] {
	background: #fbfaf7;
	color: #15171a;
}

[data-editra-reader-content][data-editra-reader-mode="dark"] {
	background: #17191c;
	color: #f5f3ed;
}

[data-editra-reader-content][data-editra-reader-mode="sepia"] {
	background: #f3ead7;
	color: #382f26;
}

[data-editra-reader-content][data-editra-reader-mode="dark"] a {
	color: #ff9a82;
}

[data-editra-reader-content][data-editra-reader-mode="sepia"] a {
	color: #a53821;
}

.editra-reader-sentence-overlay {
	background: #fff0a8;
	border-radius: 0.12em;
	mix-blend-mode: multiply;
	pointer-events: none;
	position: absolute;
	z-index: 10003;
}

::highlight(editra-reader-current) {
	background: #fff0a8;
	color: #211b12;
}

.editra-reader-focus-mode .editra-reader-shell,
.editra-reader-focus-mode [data-editra-reader-content] {
	position: relative;
	z-index: 2;
}

.editra-reader-focus-mode header,
.editra-reader-focus-mode footer,
.editra-reader-focus-mode main > :not(.editra-article-header):not(.wp-block-post-featured-image):not(.editra-reader-shell):not([data-editra-reader-content]):not(.editra-reader-essential) {
	display: none !important;
}

.editra-reader-focus-mode main {
	padding-block-start: 0 !important;
}

@media (max-width: 600px) {
	.editra-reader-player {
		inset-block-end: env(safe-area-inset-bottom);
		margin-inline: -0.5rem;
		padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
	}

	.editra-reader-player__primary {
		align-items: flex-start;
	}

	.editra-reader-player__identity {
		flex: 1 0 100%;
	}

	.editra-reader-player__actions {
		justify-content: space-between;
		width: 100%;
	}

	.editra-reader-segmented {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.editra-reader-page-progress span {
		transition: none;
	}
}

@media print {
	.editra-reader-shell,
	.editra-reader-page-progress {
		display: none !important;
	}

	.editra-reader-focus-mode header,
	.editra-reader-focus-mode footer,
	.editra-reader-focus-mode main > * {
		display: revert !important;
	}

	[data-editra-reader-content] {
		background: transparent !important;
		color: #000 !important;
		font-size: 12pt !important;
		max-width: none !important;
		padding: 0 !important;
	}

	.editra-reader-sentence-overlay {
		display: none !important;
	}

	::highlight(editra-reader-current) {
		background: transparent !important;
		color: inherit !important;
	}
}