/*
 * The inside of the phone, when the section draws the screens instead of
 * showing a picture of them.
 *
 * Colours and shapes are the app's own design system (src/ui.js): cream page,
 * ink #21063D, purple #360B60 for the thinking tasks, yellow #FFC400 for the
 * moving ones, and the night palette for bedtime.
 *
 * SIZING. Everything is in `em` on top of one base font-size that follows the
 * width of the phone frame (container query units), so a screen scales exactly
 * like a screenshot would — one column 180px wide on desktop, one 300px wide on
 * a phone, same proportions. Where container units are missing the base falls
 * back to a fixed size, which still reads correctly, just without the scaling.
 */

.ase__phone.is-live {
	background: #FFF4E2;
}

.ase .s {
	--ink: #21063D;
	--muted: #6E5F82;
	--cream: #FFF4E2;
	--paper: #FFFFFF;
	--line: #E9DDCB;
	--tint: #F1ECF5;
	--purple: #360B60;
	--yellow: #FFC400;
	--green: #00D67F;
	--pink: #FF2E7E;

	font-size: 4.1cqw;
	line-height: 1.35;
	color: var(--ink);
	background: var(--cream);
	min-height: 100%;
	/* The top strip is left clear on purpose: it is where the phone's own
	   status bar would sit, and where the section paints its step number. */
	padding: calc(1em + 20px) 1em 1.2em;
	display: flex;
	flex-direction: column;
	gap: .75em;
	font-family: inherit;
	text-align: left;
}

@supports not (container-type: size) {
	.ase .s {
		font-size: 13px;
	}
}

.ase .s * {
	box-sizing: border-box;
}

.ase .s b,
.ase .s h4,
.ase .s h5 {
	font-weight: 800;
}

/* ---- pieces shared by more than one screen ----------------------------- */

.ase .s-title {
	font-size: 1.45em;
	line-height: 1.15;
	margin: 0;
	font-weight: 800;
}

.ase .s-eyebrow {
	font-size: .72em;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
	font-weight: 700;
}

.ase .s-lead {
	font-size: .82em;
	color: var(--muted);
	margin: -.2em 0 .2em;
}

.ase .s-btn {
	display: block;
	text-align: center;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 800;
	border-radius: 999px;
	padding: .85em 1em;
	font-size: .95em;
}

.ase .s-btn--sm {
	display: inline-block;
	padding: .6em 1.1em;
	font-size: .85em;
}

.ase .s-chev {
	margin-left: auto;
	color: var(--muted);
	font-size: 1.1em;
}

.ase .s-row {
	display: flex;
	align-items: center;
	gap: .6em;
	background: var(--paper);
	border-radius: 1em;
	padding: .6em .7em;
	box-shadow: 0 .15em .5em rgba(33, 6, 61, .06);
}

.ase .s-row--print {
	background: transparent;
	box-shadow: none;
	border: 1px dashed var(--line);
}

.ase .s-ico {
	flex: 0 0 2em;
	height: 2em;
	border-radius: .6em;
	background: var(--tint);
	display: grid;
	place-items: center;
	font-size: .95em;
}

.ase .s-row-txt {
	min-width: 0;
}

.ase .s-row-txt b {
	display: block;
	font-size: .85em;
	line-height: 1.2;
}

.ase .s-row-txt small {
	display: block;
	font-size: .72em;
	color: var(--muted);
	line-height: 1.25;
}

.ase .s-row-txt em {
	display: block;
	font-style: normal;
	font-size: .7em;
	font-weight: 700;
	color: var(--green);
	margin-top: .15em;
}

.ase .s-row-txt u {
	text-decoration: none;
	margin-left: .4em;
	font-size: .82em;
	background: var(--green);
	color: #06331F;
	border-radius: .5em;
	padding: 0 .4em;
	vertical-align: .1em;
}

/* ---- 1 · the question -------------------------------------------------- */

.ase .s-top {
	display: flex;
	align-items: center;
	gap: .6em;
}

.ase .s-back {
	flex: 0 0 1.9em;
	height: 1.9em;
	border-radius: 50%;
	background: var(--paper);
	display: grid;
	place-items: center;
	font-size: .9em;
	box-shadow: 0 .15em .4em rgba(33, 6, 61, .08);
}

.ase .s-bar {
	flex: 1;
	height: .45em;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}

.ase .s-bar i {
	display: block;
	height: 100%;
	background: var(--green);
}

.ase .s-step {
	font-size: .75em;
	color: var(--muted);
}

.ase .s-q {
	font-size: 1.05em;
	margin: .3em 0 .2em;
	line-height: 1.25;
}

.ase .s-opts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5em;
}

.ase .s-opt {
	display: flex;
	align-items: center;
	gap: .5em;
	background: var(--paper);
	border-radius: .85em;
	padding: .65em .8em;
	font-size: .82em;
	box-shadow: 0 .15em .4em rgba(33, 6, 61, .05);
}

.ase .s-opt.is-on {
	background: var(--tint);
}

.ase .s-opt b {
	margin-left: auto;
	color: var(--purple);
}

.ase .s-foot {
	margin-top: auto;
	display: grid;
	gap: .5em;
}

.ase .s-foot small {
	text-align: center;
	font-size: .68em;
	color: var(--muted);
}

/* ---- 2 · the day plan --------------------------------------------------- */

.ase .s-head {
	display: flex;
	align-items: center;
	gap: .6em;
}

.ase .s-face {
	flex: 0 0 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: #BFE7FF;
	display: grid;
	place-items: center;
	font-size: 1.1em;
}

.ase .s-pill {
	background: var(--paper);
	border-radius: 999px;
	padding: .5em .9em;
	font-size: .75em;
	font-weight: 700;
	box-shadow: 0 .15em .5em rgba(33, 6, 61, .08);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ase .s-week {
	display: flex;
	align-items: center;
	gap: .3em;
	background: var(--paper);
	border-radius: 1em;
	padding: .5em .4em;
	box-shadow: 0 .15em .5em rgba(33, 6, 61, .07);
}

.ase .s-week-in {
	display: flex;
	flex: 1;
	justify-content: space-between;
}

.ase .s-arrow {
	color: var(--muted);
	font-size: .9em;
	padding: 0 .1em;
}

.ase .s-day {
	display: grid;
	justify-items: center;
	gap: .1em;
	padding: .25em .35em;
	border-radius: .6em;
	font-size: .68em;
}

.ase .s-day.is-on {
	background: var(--tint);
}

.ase .s-day b {
	font-weight: 700;
}

.ase .s-day u {
	text-decoration: none;
	color: var(--muted);
}

.ase .s-day i {
	width: .34em;
	height: .34em;
	border-radius: 50%;
	background: var(--purple);
}

.ase .s-day i.off {
	background: var(--line);
}

.ase .s-path {
	list-style: none;
	margin: .2em 0 0;
	padding: 0;
	display: grid;
	justify-items: center;
	gap: .9em;
}

.ase .s-path li {
	display: grid;
	justify-items: center;
	gap: .25em;
	position: relative;
}

.ase .s-path li + li::before {
	content: "";
	position: absolute;
	top: -.9em;
	left: 50%;
	width: 2px;
	height: .9em;
	background: var(--line);
}

.ase .s-bub {
	width: 3.4em;
	height: 3.4em;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1.25em;
	box-shadow: 0 .2em .5em rgba(33, 6, 61, .18);
}

.ase .s-bub.is-brain {
	background: var(--purple);
}

.ase .s-bub.is-body {
	background: var(--yellow);
}

.ase .s-path em {
	font-style: normal;
	font-size: .8em;
	font-weight: 700;
}

.ase .s-print {
	font-size: .6em;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--purple);
	text-align: center;
	margin: 0;
}

.ase .s-card {
	background: var(--paper);
	border-radius: 1em;
	padding: .7em .8em;
	box-shadow: 0 .2em .6em rgba(33, 6, 61, .08);
	display: grid;
	gap: .5em;
}

.ase .s-card-top {
	display: flex;
	align-items: baseline;
	gap: .5em;
	font-size: .82em;
}

.ase .s-card-top span {
	margin-left: auto;
	font-size: .85em;
	color: var(--muted);
}

.ase .s-card-row {
	display: flex;
	align-items: center;
	gap: .55em;
}

.ase .s-dot {
	flex: 0 0 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: #FF4D4D;
}

.ase .s-card-txt b {
	display: block;
	font-size: .8em;
}

.ase .s-card-txt small {
	display: block;
	font-size: .68em;
	color: var(--muted);
	line-height: 1.25;
}

.ase .s-play {
	margin-left: auto;
	background: var(--yellow);
	border-radius: 999px;
	padding: .4em .9em;
	font-size: .75em;
	font-weight: 800;
	white-space: nowrap;
}

.ase .s-pick {
	margin: 0;
	text-align: center;
	font-size: .7em;
	font-weight: 700;
	color: var(--purple);
}

.ase .s-deck {
	display: flex;
	align-items: center;
	gap: .6em;
	background: var(--purple);
	color: #fff;
	border-radius: 1em;
	padding: .7em .8em;
}

.ase .s-deck-face {
	flex: 0 0 2em;
	height: 2em;
	border-radius: .6em;
	background: #fff;
	display: grid;
	place-items: center;
	font-size: 1em;
}

.ase .s-deck b {
	display: block;
	font-size: .82em;
}

.ase .s-deck small {
	display: block;
	font-size: .68em;
	opacity: .8;
}

.ase .s-deck .s-chev {
	color: #fff;
}

/* ---- 3 · the activity card ---------------------------------------------- */

.ase .s-top--card {
	align-items: flex-start;
}

.ase .s-top--card b {
	display: block;
	font-size: .95em;
}

.ase .s-top--card small {
	display: block;
	font-size: .72em;
	color: var(--muted);
}

.ase .s-dots {
	display: flex;
	justify-content: center;
	gap: .35em;
}

.ase .s-dots i {
	width: .4em;
	height: .4em;
	border-radius: 50%;
	background: var(--line);
}

.ase .s-dots i.on {
	width: 1.2em;
	border-radius: 999px;
	background: var(--yellow);
}

.ase .s-sheet {
	background: #FFFEFC;
	border: 1px solid #E9D9C6;
	border-radius: 1.1em;
	padding: 1em .9em;
	display: grid;
	justify-items: center;
	gap: .6em;
	box-shadow: 0 .3em .8em rgba(33, 6, 61, .1);
	margin: .4em 0;
}

.ase .s-sheet h5 {
	margin: 0;
	font-size: 1.05em;
	text-align: center;
}

.ase .s-sheet img {
	width: 62%;
	height: auto;
	display: block;
}

.ase .s-sheet p {
	margin: 0;
	background: #FBF3E6;
	border: 1px solid #EADCC6;
	border-radius: .7em;
	padding: .6em .7em;
	font-size: .74em;
	text-align: center;
	width: 100%;
}

.ase .s-reps {
	border: 1px solid #EADCC6;
	border-radius: 999px;
	padding: .4em 1em;
	font-size: .75em;
	font-weight: 800;
	color: #8A5A2B;
}

.ase .s-cardbtns {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
}

.ase .s-ghost {
	background: var(--paper);
	border-radius: 999px;
	padding: .6em 1.1em;
	font-size: .8em;
	font-weight: 700;
	color: var(--muted);
	box-shadow: 0 .15em .4em rgba(33, 6, 61, .08);
}

/* ---- 5 · bedtime -------------------------------------------------------- */

.ase .s--night {
	--ink: #EAF2FF;
	--muted: #9DB2DE;
	--cream: #0B1430;
	--paper: #17224A;
	--line: #2B3A6B;
	color: var(--ink);
}

.ase .s--night .s-row {
	box-shadow: none;
}

.ase .s-tabs,
.ase .s-timer {
	display: flex;
	align-items: center;
	gap: .4em;
	flex-wrap: wrap;
}

.ase .s-tabs span,
.ase .s-timer span {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .35em .8em;
	font-size: .72em;
	font-weight: 700;
}

.ase .s-tabs span.is-on,
.ase .s-timer span.is-on {
	background: #C89A4E;
	border-color: #C89A4E;
	color: #1A1200;
}

.ase .s-timer b {
	font-size: .72em;
	margin-right: .2em;
}

.ase .s-thumb {
	flex: 0 0 3em;
	height: 2.3em;
	border-radius: .5em;
	overflow: hidden;
	background: #24306A;
	display: grid;
	place-items: center;
}

.ase .s-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ase .s-playbtn {
	margin-left: auto;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	font-size: .7em;
}

/* ---- the bottom bar ----------------------------------------------------- */

.ase .s-nav {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--paper);
	border-radius: 999px;
	padding: .5em .8em;
	box-shadow: 0 .2em .6em rgba(33, 6, 61, .1);
}

.ase .s-nav span {
	font-size: .85em;
	color: var(--muted);
	opacity: .75;
}

.ase .s-nav span.is-on {
	color: var(--purple);
	opacity: 1;
}

.ase .s-nav.is-night {
	background: transparent;
	box-shadow: none;
}

.ase .s-nav.is-night span.is-on {
	color: #3DE0A8;
}