/**
 * DELIAN — mobile usability layer.
 *
 * Deliberately quiet. Phones get the things that make a long industrial page
 * easier to use on a small screen, not decoration:
 *
 *   - thumb-sized hero actions and 44 px touch targets
 *   - swipeable card rails, so long sections stay short
 *   - a scroll-driven process timeline while the stages are stacked (phones only)
 *   - a drawer navigation with a clear call to action
 *   - a sticky action bar that respects the safe area
 *
 * No aurora, no parallax, no pulses, no haptics. Scoped to narrow viewports and
 * inert for `prefers-reduced-motion`.
 *
 *  1. Shell & hero      3. Card rails
 *  2. Process timeline  4. Action bar, drawer & touch
 */

@media (max-width: 899px) {
	/* 1. Shell & hero ------------------------------------------------------ */
	:root {
		--dl-m-pad: 1.15rem;
		--dl-m-safe: env(safe-area-inset-bottom, 0px);
	}

	.dl-js .dl-section > .dl-container {
		padding: var(--dl-m-pad);
	}

	.dl-js .dl-section-head__title {
		font-size: clamp(1.45rem, 6.4vw, 2rem);
	}

	/*
	 * The hero on a phone is a photograph band with the copy underneath it, on the
	 * page's own ground. The client's 390 px screenshot showed why: the headline and
	 * the subtitle ran straight across the press, and no single copy colour can read
	 * on a photograph that carries a bright plant hall and a dark machine in the same
	 * band. The photograph keeps its full width with nothing laid over it — the type
	 * simply stops sitting on it, so it stays legible whatever photograph is
	 * uploaded later (see item 80 of the development report).
	 */
	/*
	 * Only the heroes whose photograph is the section's own background (the homepage
	 * carousel, and a homepage hero with a single slide). Product, solution, project
	 * and technology heroes carry the photograph in the media column instead, and the
	 * band treatment there reserved 58 vw of empty space above a picture that was
	 * never behind the type — the client's "这是啥，怎么是这样的". `--split` marks exactly
	 * those heroes, so they keep the dark band with white copy and their picture panel.
	 */
	.dl-js .dl-hero:not(.dl-hero--split) {
		min-height: 0;
		padding-top: 58vw;
		align-items: flex-start;
		background-color: var(--dl-ind-ground);
		background-size: 100% 58vw;
		/* `center top`, not `center`: the shorthand centres both axes, which put the
		   band in the middle of the section — over the copy it is meant to sit above. */
		background-position: center top;
		background-repeat: no-repeat;
		color: var(--dl-ind-black);
	}

	/* Slides 2 to 4 are overlays over the whole band: their photograph belongs in
	   the same strip as slide 1's, while their copy lines up with it below. */
	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__slide-img {
		inset: 0 0 auto 0;
		height: 58vw;
	}

	/*
	 * The industry mosaic's strips belong in the same band as the other slides'
	 * photographs, one strip per sector, and the row scrolls like the rest of the
	 * mobile rails rather than squeezing six strips into 390 px. It covers the
	 * whole hero, because this slide carries no copy underneath the band.
	 */
	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__slide--panels .dl-hero__panels {
		position: absolute;
		inset: 0;
		display: flex;
		gap: 2px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient( to right, #000 calc(100% - 2.5rem), transparent );
		mask-image: linear-gradient( to right, #000 calc(100% - 2.5rem), transparent );
	}

	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__panel {
		/*
		 * 74 %, not the 58 % the first pass used: the strip now carries a label, a
		 * rule and a sentence, and at 58 % of a 390 px phone (226 px) that block ran
		 * to within 11 px of both edges — the copy read as a wall over the picture
		 * (item 125). A wider card leaves the sentence a real margin and keeps the
		 * next strip's edge on screen as the swipe affordance.
		 */
		flex: 0 0 74%;
		min-width: 0;
		scroll-snap-align: start;
	}

	/* The copy keeps a wider margin inside the strip than it does on desktop. */
	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__panel-copy {
		width: calc(100% - 2.6rem);
	}

	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__inner {
		/*
		 * The carousel dots sit in the bottom strip of the hero (`bottom: 1.1rem`,
		 * 27 px tall with their hit area). While the copy was laid over the
		 * photograph the buttons stopped well above them, but the copy now ends at
		 * the hero's bottom edge, so the last button and the dots landed on each
		 * other — the client's "这里挡住了". The extra 3.75 rem is that strip plus a
		 * gap, and it is measured: 660 → 625 px against dots at 640.
		 */
		padding: 1.4rem var(--dl-gutter) 3.75rem;
	}

	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__title,
	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__subtitle {
		color: var(--dl-ind-black);
		text-shadow: none;
	}

	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__text-body {
		color: var(--dl-text);
	}

	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__actions .dl-btn,
	.dl-js .dl-hero:not(.dl-hero--split) .dl-hero__actions .dl-btn--text {
		background: transparent;
		border-color: var(--dl-ind-green);
		color: var(--dl-ind-green-dark);
	}

	.dl-js .dl-hero::before {
		animation: none;
	}

	/*
	 * A long call to action cannot stay on one line on a phone. "Explore
	 * microtunneling solutions" is 374 px wide under `white-space: nowrap` — 47 px
	 * more than the feature band's content box — and that one button pushed the
	 * whole document 41 px wider than the screen, cutting off every line in the band
	 * (the client's "这里也不全"). Full width and allowed to wrap, like the hero
	 * buttons above.
	 */
	.dl-js .dl-feature__actions .dl-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
		white-space: normal;
	}

	.dl-js .dl-hero__actions {
		display: grid;
		gap: 0.55rem;
	}

	.dl-js .dl-hero__actions .dl-btn,
	.dl-js .dl-hero__actions .dl-btn--text {
		width: 100%;
		justify-content: center;
	}

	/* 2. Process timeline (phones: the stages stack vertically) ------------ */
	.dl-js .dl-timeline .dl-flow__list {
		position: relative;
		padding-left: 2.4rem;
		border-top: 0;
		background-image: none;
		animation: none;
	}

	.dl-js .dl-timeline .dl-flow__list::before,
	.dl-js .dl-timeline .dl-flow__list::after {
		content: "";
		position: absolute;
		left: 0.8rem;
		width: 2px;
		border-radius: 999px;
	}

	.dl-js .dl-timeline .dl-flow__list::before {
		top: 0.6rem;
		bottom: 0.6rem;
		background: rgba(24, 24, 24, 0.14);
	}

	.dl-js .dl-timeline .dl-flow__list::after {
		top: 0.6rem;
		height: calc(var(--dl-timeline-progress, 0) * (100% - 1.2rem));
		background: var(--dl-accent, #7db713);
	}

	.dl-js .dl-timeline .dl-flow__stage {
		position: relative;
		border-bottom: 0;
		padding: 1.05rem 0;
		opacity: 0.6;
		transition: opacity 240ms ease;
	}

	.dl-js .dl-timeline .dl-flow__stage::after {
		content: "";
		position: absolute;
		left: -1.98rem;
		top: 1.4rem;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #ffffff;
		border: 2px solid rgba(24, 24, 24, 0.2);
	}

	.dl-js .dl-timeline .dl-flow__stage.is-done {
		opacity: 0.85;
	}

	.dl-js .dl-timeline .dl-flow__stage.is-active {
		opacity: 1;
	}

	.dl-js .dl-timeline .dl-flow__stage.is-active::after {
		background: var(--dl-accent, #7db713);
		border-color: var(--dl-accent, #7db713);
	}

	.dl-js .dl-timeline .dl-flow__stage.is-active .dl-flow__index,
	.dl-js .dl-timeline .dl-flow__stage.is-active .dl-flow__icon {
		background: var(--dl-accent, #7db713);
		color: #ffffff;
	}

	.dl-js .dl-timeline .dl-flow__stage .dl-flow__title {
		font-size: 1.05rem;
	}

	.dl-js .dl-timeline .dl-flow__detail {
		max-width: 46ch;
		font-size: 0.875rem;
	}

	.dl-js .dl-timeline .dl-flow__branches {
		margin-left: 2.4rem;
	}

	.dl-flow__counter {
		display: flex;
		gap: 0.45rem;
		align-items: baseline;
		justify-content: flex-end;
		margin: 0 0 0.5rem;
		font-family: var(--dl-font-mono, ui-monospace, monospace);
		font-size: 0.6875rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--dl-muted, #5c5c5c);
	}

	.dl-flow__counter-current {
		color: var(--dl-accent, #7db713);
		font-size: 1.25rem;
		font-weight: 700;
	}

	/* 3. Card rails -------------------------------------------------------- */
	.dl-js .dl-rail {
		display: flex;
		gap: 0.7rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0.25rem 0 0.75rem;
		scrollbar-width: none;
	}

	.dl-js .dl-rail::-webkit-scrollbar,
	.dl-js .dl-chips::-webkit-scrollbar,
	.dl-js .dl-chip-list::-webkit-scrollbar,
	.dl-js .dl-gallery::-webkit-scrollbar,
	.dl-js .dl-before-after::-webkit-scrollbar {
		display: none;
	}

	.dl-js .dl-rail > * {
		flex: 0 0 82%;
		max-width: 82%;
		scroll-snap-align: center;
	}

	/*
	 * Cards in a rail are all the height of the tallest one, so their call-to-action
	 * rows line up (the client's "这都不一般高"). The grid does this on its own; in a
	 * flex row the card's own `height: 100%` resolves against an indefinite height and
	 * the stretch never happens, so the rail states it: stretch, and let the card's
	 * internal flex put the button at the bottom.
	 */
	.dl-js .dl-rail > .dl-card {
		height: auto;
		align-self: stretch;
	}

	.dl-rail-dots {
		display: flex;
		gap: 0.35rem;
		justify-content: center;
		margin: 0 0 0.5rem;
	}

	.dl-rail-dots span {
		width: 5px;
		height: 5px;
		border-radius: 999px;
		background: rgba(24, 24, 24, 0.2);
		transition: width 200ms ease, background 200ms ease;
	}

	.dl-rail-dots span.is-active {
		width: 14px;
		background: var(--dl-accent, #7db713);
	}

	.dl-js .dl-chips,
	.dl-js .dl-chip-list {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		padding-bottom: 0.35rem;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	/*
	 * The next chip peeks past the right edge of the equipment row. Sliced off
	 * mid-word it reads as a bug rather than as "swipe me" — the client sent exactly
	 * that crop ("还有这里"). A mask fades the last 2.5 rem instead, which works on any
	 * band colour because it fades to transparent rather than to a hard-coded ground.
	 * Only `.dl-chips` scrolls: `.dl-chip-list` wraps (its base rule sets
	 * `flex-wrap: wrap`), so a fade there would eat the right edge of the last chip
	 * on a light section for no reason.
	 */
	.dl-js .dl-chips {
		-webkit-mask-image: linear-gradient( to right, #000 calc(100% - 2.5rem), transparent );
		mask-image: linear-gradient( to right, #000 calc(100% - 2.5rem), transparent );
	}

	.dl-js .dl-chips__item,
	.dl-js .dl-chip-list > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.dl-js .dl-gallery,
	.dl-js .dl-before-after {
		display: flex;
		gap: 0.7rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dl-js .dl-gallery > *,
	.dl-js .dl-before-after > * {
		flex: 0 0 86%;
		scroll-snap-align: center;
	}

	/* 4. Action bar, drawer & touch --------------------------------------- */
	.dl-js .dl-sticky-actions {
		padding: 0.55rem var(--dl-m-pad) calc(0.55rem + var(--dl-m-safe));
	}

	.dl-js .dl-sticky-actions a {
		min-height: 3rem;
	}

	.dl-drawer-cta {
		display: grid;
		gap: 0.5rem;
		margin-top: 1.5rem;
	}

	.dl-drawer-cta a {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		justify-content: center;
		min-height: 3rem;
		padding: 0.75rem 1rem;
		background: var(--dl-accent, #7db713);
		color: #ffffff;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-decoration: none;
		text-transform: uppercase;
	}

	.dl-drawer-cta a + a {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.4);
	}

	.dl-js .dl-card,
	.dl-js .dl-btn,
	.dl-js .dl-chip,
	.dl-js .dl-download,
	.dl-js .dl-chips__item a,
	.dl-js .dl-faq__trigger {
		-webkit-tap-highlight-color: transparent;
	}

	/*
	 * 44 px on the controls a thumb actually hits. The layer claimed this in its own
	 * header and the README but only ever set it on form fields, the FAQ trigger and
	 * the sticky bar — measured on the real pages, buttons came out 42 px and chips
	 * 38 px (item 85). The consent checkbox is left at the browser's 13 px for the
	 * same reason until now.
	 */
	.dl-js .dl-btn,
	.dl-js .dl-chip {
		min-height: 44px;
	}

	.dl-js .dl-form__consent input[type="checkbox"] {
		/* `flex: 0 0 auto` matters: the label is a flex row now, and a checkbox with a
		   long consent sentence next to it is otherwise shrunk back to the browser's
		   13 px box. */
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
	}

	.dl-js .dl-form__consent label {
		min-height: 44px;
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	/*
	 * The carousel dots stay 8 px wide and 28 px when active — that is the design —
	 * but their tap area grows to 44 px tall through an invisible pseudo-element, so
	 * the layout is untouched.
	 */
	.dl-js .dl-hero__dot {
		position: relative;
	}

	.dl-js .dl-hero__dot::after {
		content: "";
		position: absolute;
		inset: -18px 0;
	}

	.dl-js .dl-card:active,
	.dl-js .dl-chips__item a:active,
	.dl-js .dl-download:active,
	.dl-js .dl-btn:active {
		transform: scale(0.99);
	}

	.dl-js .dl-flow__toggle {
		width: 44px;
		height: 44px;
	}

	.dl-js .dl-faq__trigger {
		min-height: 3.25rem;
	}

	.dl-js .dl-field__input {
		min-height: 3rem;
		font-size: 1rem;
	}

	/* Hero carousel on phones: dots only, centred under the copy. */
	.dl-js .dl-hero__dots {
		left: 0;
		right: 0;
		bottom: 1.1rem;
		justify-content: center;
	}

	.dl-js .dl-hero__nav-arrow {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.dl-js .dl-timeline .dl-flow__stage {
			opacity: 1;
		}
	}
}