/**
 * START HERE — responsive.css
 *
 * main.css and navigator.css hold the small-screen layout, because that is
 * where most people will read this. Everything here widens it.
 *
 * Breakpoints
 *   40rem  large phone / small tablet
 *   56rem  tablet, two columns become worthwhile
 *   72rem  desktop
 */

/* ------------------------------------------------------------------
 * Small screens first: a few things that only make sense when narrow.
 * ---------------------------------------------------------------- */

@media (max-width: 39.99rem) {
	.sh-panel,
	.sh-step {
		padding: var(--sh-space-3);
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		margin-inline: calc(-1 * var(--sh-space-3));
	}

	.sh-path__actions .sh-button,
	.sh-step__footer .sh-button {
		flex: 1 1 auto;
	}

	.sh-panel__actions--split .sh-button {
		flex: 1 1 auto;
	}

	/* The filter row scrolls sideways rather than wrapping into four
	 * lines and pushing the roadmap off the screen. */
	.sh-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.25rem;
	}

	.sh-filter {
		flex: none;
	}

	.sh-searchbox__input {
		max-width: none;
	}

	.sh-hero__figure {
		padding: var(--sh-space-3);
	}
}

/* ------------------------------------------------------------------
 * 40rem
 * ---------------------------------------------------------------- */

@media (min-width: 40rem) {
	.sh-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-claims {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-stage-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-archive__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-buckets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-toolbar {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.sh-progress__row {
		grid-template-columns: 12rem 1fr auto;
	}

	.sh-progress__bar {
		grid-column: auto;
	}

	.sh-review__row {
		grid-template-columns: 14rem 1fr auto;
		align-items: baseline;
		gap: var(--sh-space-2);
	}

	.sh-review__question {
		font-size: var(--sh-size-0);
	}

	.sh-hero__actions .sh-button {
		min-width: 12rem;
	}
}

/* ------------------------------------------------------------------
 * 56rem
 * ---------------------------------------------------------------- */

@media (min-width: 56rem) {
	.sh-header__cta {
		display: block;
	}

	.sh-hero {
		padding-block: var(--sh-space-6) var(--sh-space-5);
	}

	.sh-hero__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
		gap: var(--sh-space-5);
	}

	.sh-split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--sh-space-5);
	}

	.sh-split__aside {
		border-top: 0;
		border-left: 2px solid var(--sh-route);
		padding-top: 0;
		padding-left: var(--sh-space-3);
	}

	.sh-footer__inner {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--sh-space-4);
	}

	.sh-claims {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sh-stage-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Step and panel read better centred with generous margins. */
	.sh-panel,
	.sh-step {
		padding: var(--sh-space-5);
	}

	.sh-node {
		gap: var(--sh-space-3);
		padding-block: var(--sh-space-2);
	}

	.sh-nodes {
		padding-left: 1.75rem;
	}

	.sh-nodes::before {
		left: 7px;
	}

	.sh-node__rail {
		left: -1.75rem;
	}

	.sh-synopsis__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--sh-space-4);
	}

	.sh-synopsis__list::before {
		display: none;
	}

	.sh-synopsis__item {
		padding-top: var(--sh-space-2);
		border-top: 2px solid var(--sh-line);
	}

	.sh-synopsis__item::before {
		left: 0;
		top: -7px;
	}

	.sh-synopsis__item.is-current {
		border-top-color: var(--sh-route);
	}
}

/* ------------------------------------------------------------------
 * 72rem
 * ---------------------------------------------------------------- */

@media (min-width: 72rem) {
	.sh-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sh-claims {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sh-buckets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sh-hero__title {
		font-size: var(--sh-size-4);
	}

	.sh-synopsis__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * Pointer and motion preferences
 * ---------------------------------------------------------------- */

/* Touch targets stay comfortable on devices without a fine pointer. */
@media (pointer: coarse) {
	.sh-filter,
	.sh-status__button {
		min-height: 2.75rem;
	}

	.sh-check__label {
		width: 1.75rem;
		height: 1.75rem;
	}

	.sh-node__open {
		padding-block: 0.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sh-progressbar__fill,
	.sh-stage__toggle::after,
	.sh-option__label {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * High contrast and forced colours
 * ---------------------------------------------------------------- */

@media (forced-colors: active) {
	.sh-badge,
	.sh-filter,
	.sh-status__button,
	.sh-check__label,
	.sh-node__marker,
	.sh-stage__dot,
	.sh-journey__dot {
		border-color: CanvasText;
	}

	.sh-filter.is-active,
	.sh-status__button.is-active {
		border-width: 3px;
	}

	.sh-progress__fill,
	.sh-progressbar__fill {
		background: Highlight;
	}
}