/*
 * Story C — chapters 05 (next), 06 (coach) and 07 (climb).
 * Markup: patterns/story-c.php. Source: src/features/landing/landing-page.tsx.
 *
 * The chapter shell (.id-ch, rail, node, body grid, eyebrow, title, lede) is
 * base.css. This file styles only the three right-hand graphics, in their
 * FINISHED state (the React component's first render). landing.js overwrites
 * background / transform / opacity / height / display inline while it
 * animates; nothing here depends on those properties staying put.
 *
 * None of the three graphics changed with the React wide / xl state, so there
 * are no breakpoints here: the clamp() values carry the scaling.
 */

/* ---------------------------------------------------------------------------
 * 05 · Next band — the ladder card (data-ref="ladder")
 * ------------------------------------------------------------------------ */
.id-next {
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(9, 20, 40, 0.05), 0 40px 80px -56px rgba(9, 20, 40, 0.45), inset 0 0 0 1px rgba(9, 20, 40, 0.06);
	padding: clamp(22px, 3vw, 32px);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 22px;
}

/* Left column: 7.0 on top, the rail, 6.5 at the bottom. */
.id-next__scale {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.id-next__band {
	padding: 6px 10px;
	border-radius: 10px;
	background: #E7F5EE;
	font-family: 'Geist Mono', monospace;
	font-size: 18px;
	font-weight: 600;
	color: #0A6E48;
}
.id-next__band--from {
	background: #F1F5FC;
	color: #586A87;
}
.id-next__track {
	position: relative;
	flex: 1;
	width: 6px;
	min-height: 140px;
	margin: 10px 0;
	border-radius: 3px;
	background: #EDF2FA;
	overflow: hidden;
}
/* Finished: full height. landing.js writes height inline (0% → 100%). */
.id-next__rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	border-radius: 3px;
	background: #0E8F5E;
}

/* The three steps, first step at the bottom (column-reverse). */
.id-next__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	gap: 12px;
}
/* Finished: ticked (green). landing.js writes background inline. */
.id-next__step {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: 18px;
	background: #E7F5EE;
	font-size: 15px;
	font-weight: 700;
	transition: background .4s ease;
}
/* Finished: green tick. landing.js writes background + transform inline. */
.id-next__check {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	background: #0E8F5E;
	color: #FFFFFF;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 800;
	transition: background .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.id-next__text {
	flex: 1;
	min-width: 0;
}
.id-next__key {
	font-family: 'Geist Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	color: #586A87;
}

/* ---------------------------------------------------------------------------
 * 06 · Ask the Coach — the chat panel (data-ref="chat")
 * ------------------------------------------------------------------------ */
.id-coach {
	border-radius: 30px;
	background: #0B1120;
	padding: clamp(20px, 3vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 50px 80px -50px rgba(9, 20, 40, 0.8);
}
.id-coach__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 14px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.id-coach__avatar {
	width: 32px;
	height: 32px;
	border-radius: 11px;
	background: #4DA2FF;
	color: #04101F;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 800;
}
.id-coach__who {
	line-height: 1.25;
}
.id-coach__name {
	font-size: 14px;
	font-weight: 800;
	color: #EEF3FB;
}
.id-coach__status {
	font-size: 12px;
	font-weight: 600;
	color: #8291AD;
}
.id-coach__live {
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ADE9B;
}

/* The learner's question. landing.js writes opacity + transform inline. */
.id-coach__ask {
	align-self: flex-end;
	max-width: 84%;
	padding: 13px 17px;
	border-radius: 20px 20px 6px 20px;
	background: #1668D9;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

/* "Coach is typing". As the React first render: in the flow, invisible.
   landing.js writes opacity + display inline. */
.id-coach__typing {
	align-self: flex-start;
	display: flex;
	gap: 5px;
	padding: 14px 16px;
	border-radius: 20px 20px 20px 6px;
	background: #182238;
	opacity: 0;
}
.id-coach__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9AA9C4;
	animation: id-dots 1.2s ease-in-out infinite;
}
.id-coach__dot:nth-child(2) {
	animation-delay: .15s;
}
.id-coach__dot:nth-child(3) {
	animation-delay: .3s;
}

/* The Coach's reply. Finished: full text. landing.js writes display inline and
   types the text into its [data-ref="coach"] span. */
.id-coach__reply {
	align-self: flex-start;
	max-width: 90%;
	padding: 13px 17px;
	border-radius: 20px 20px 20px 6px;
	background: #182238;
	color: #EEF3FB;
	font-size: 15px;
	line-height: 1.55;
}

/* Follow-up chips. landing.js writes opacity + transform inline. */
.id-coach__chips {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.id-coach__chip {
	padding: 8px 12px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	color: #EEF3FB;
	font-size: 13px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 07 · Progress — the band chart card. The SVG keeps its own presentation
 * attributes; landing.js draws [data-ref="line"], fades [data-ref="area"] and
 * pops the [data-pt] points.
 * ------------------------------------------------------------------------ */
.id-climb {
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(9, 20, 40, 0.05), 0 40px 80px -56px rgba(9, 20, 40, 0.45), inset 0 0 0 1px rgba(9, 20, 40, 0.06);
	padding: clamp(20px, 2.8vw, 30px);
}
.id-climb__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
}
.id-climb__label {
	font-size: 14px;
	font-weight: 800;
}
.id-climb__count {
	font-size: 13px;
	font-weight: 600;
	color: #586A87;
}
.id-climb__delta {
	margin-left: auto;
	padding: 5px 10px;
	border-radius: 999px;
	background: #E7F5EE;
	color: #0A6E48;
	font-size: 12px;
	font-weight: 800;
}
.id-climb__chart {
	display: block;
	width: 100%;
}