/*
 * Section: Scope of work.
 *
 * Loaded only on pages carrying the `scope_of_work` layout.
 *
 * Design: _design/SharpQuery GBP Included.dc.html — "two checklist columns
 * divided by a 2px rule, one tick marker throughout".
 *
 * The columns are a grid rather than two floated halves so they share a top
 * rule and the divider can sit between them at any height, and they stack in
 * source order on a phone with the divider becoming the rule above the second.
 */


.scope__header {
	/* The comp's 860px. The heading is display type; nothing here is read at
	 * length, so it is not held to the body measure. */
	max-width: 53.75rem;
}

.scope__heading {
	line-height: 0.96;
}

.scope__intro > * {
	margin: 0;
	text-wrap: pretty;
}

.scope__intro > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================== COLUMNS ==
 *
 * The heavy rule above the set is what marks it as the deliverables block —
 * the design system's "sections separated by rules, not by air alone", applied
 * inside a section.
 */

.scope__groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sq-space-6);
	padding-top: 1.375rem; /* 22 */
	border-top: var(--sq-border-width-accent) solid var(--sq-border);
}

.scope__group {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-4);
	min-width: 0;
}

/*
 * Stacked, the divider becomes the rule above the second column. It is a
 * hairline rather than the heavy rule above the set, so the two read as one
 * block split in two rather than as two blocks.
 */
.scope__group + .scope__group:not(.scope__group--addendum) {
	padding-top: 1.375rem; /* 22 */
	border-top: var(--sq-border-width) solid var(--sq-rule);
}

/*
 * Title and count share a baseline. `align-items: baseline` rather than
 * `center` because the two are five type sizes apart and centring them makes
 * the count look like it is floating.
 */
.scope__group-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-1) var(--sq-space-3);
	align-items: baseline;
}

.scope__group-title {
	margin: 0;
	font-size: 1.625rem; /* 26 */
	line-height: 1.05;
	text-transform: uppercase;
}

.scope__group-count {
	margin: 0;
	color: var(--sq-fg-muted);
	font-size: var(--sq-text-small);
	font-weight: var(--sq-weight-bold);
	white-space: nowrap;
}


/* ================================================================ ITEMS ==
 *
 * One marker throughout, and it is drawn here rather than written into the
 * markup: fifteen inline SVGs of the same tick is fifteen copies of the same
 * shape, and a literal ✓ in the HTML is a character read out before every
 * line. Two borders rotated 45° give the same mark for nothing.
 *
 * `currentColor` so it follows the band with no dark variant, and `em` units
 * so it scales with the line it sits beside rather than drifting if the type
 * size ever changes.
 */

.scope__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* 12 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.scope__item {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr); /* 20 */
	gap: 0.75rem; /* 12 */
	align-items: start;
	margin: 0; /* base.css spaces li + li; the flex gap owns it here */
	font-size: 1.0625rem; /* 17 */
	line-height: 1.5;
	text-wrap: pretty;
}

.scope__item::before {
	width: 0.5em;
	height: 0.85em;
	/* Sits on the cap height of the first line rather than its top edge. */
	margin-top: 0.2em;
	margin-left: 0.25em;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
	content: '';
}


/* ================================================= LABELLED DRAWING ==
 *
 * The second drawing, chosen with `presentation`. Same content, same tick,
 * same textarea — what changes is the label device, the ruled rows and the
 * column model:
 *
 *   titled     a headed, counted column per group, groups side by side
 *   labelled   one small label over a full-width rule, every row ruled, and
 *              ONE group's items flowing across two columns
 *
 * One field rather than four, for the reason `channels` gives about its own
 * presentation: these are one drawing, and nobody wants the mono label with
 * the counted columns or the ruled rows without the label.
 *
 * The heavy rule above the groups belongs to `titled` — here the label carries
 * its own rule, and two heavy lines a few pixels apart is one line drawn twice.
 */

.scope--labelled .scope__groups {
	padding-top: 0;
	border-top: 0;
}

/* Each group draws its own rule under its label, so the divider above the
 * second one is the same line a few pixels higher. */
.scope--labelled .scope__group + .scope__group:not(.scope__group--addendum) {
	padding-top: 0;
	border-top: 0;
}

.scope--labelled .scope__group-header {
	display: block;
	padding-bottom: var(--sq-space-3);
	border-bottom: var(--sq-border-width) solid var(--sq-border);
}

/*
 * Still an H3 — only the type changes, so the document outline is the same in
 * both drawings. Mono for the reason `timeline` gives: an eyebrow names a band
 * above a heading, and this names a block inside one.
 */
.scope--labelled .scope__group-title {
	color: var(--sq-fg-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-regular);
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.scope--labelled .scope__group-note {
	max-width: 62ch;
	margin: var(--sq-space-2) 0 0;
	color: var(--sq-fg-muted);
	font-size: var(--sq-text-small);
	line-height: 1.5;
}

/*
 * Multi-column, not grid, and for the reason `checklist` gives: the items are
 * one continuous list that happens to be set in two columns, so the browser
 * balances them and `break-inside: avoid` is what stops a wrapping item being
 * split down the middle of the column break.
 *
 * The vertical rhythm is padding + margin on every item rather than a gap,
 * because a `+ .scope__item` margin would land on whichever item begins the
 * second column and open a hole at the top of it.
 */
.scope--labelled .scope__list {
	display: block;
	column-gap: var(--sq-space-7);
}

.scope--labelled .scope__item {
	margin-bottom: 0.875rem; /* 14 */
	padding-bottom: 0.875rem;
	border-bottom: var(--sq-border-width-hair) solid var(--sq-rule);
	break-inside: avoid;
}

/* The tick takes the accent here, where `titled` leaves it in currentColor.
 * A role token either way, so it inverts on a dark band without a variant. */
.scope--labelled .scope__item::before {
	color: var(--sq-accent);
}


/* ------------------------------------------------------------ ADDENDUM --
 *
 * "Only if this applies to you" — set apart in a panel rather than given a
 * column, because it is not part of the main list and a third column would say
 * it was. The accent edge is the mark; there is no badge and no colour shift,
 * the same restraint `factors` shows with its limitation label.
 *
 * It never flows into two columns however wide it gets: it is a short set read
 * as an exception, and two columns of three lines is a table of nothing.
 */

.scope__group.scope__group--addendum {
	/* (0,2,0) on purpose: the divider rules above are (0,2,0) and (0,3,0), and
	 * a panel that inherits half a divider is a border on three sides plus a
	 * stray rule. The `border` shorthand is what clears the divider's own. */
	grid-column: 1 / -1;
	max-width: 40rem; /* 640 */
	padding: var(--sq-space-5);
	border: var(--sq-border-width-hair) solid var(--sq-rule);
	border-left: 6px solid var(--sq-accent);
	background-color: var(--sq-color-surface-raised);
}

/* A light surface on a dark band, so the roles inside point back at the light
 * set — the same re-point `.sq-on-dark .callout--subtle` makes. */
.sq-on-dark .scope__group--addendum {
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-support);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-hairline);
	--sq-accent: var(--sq-color-orange-text);

	color: var(--sq-color-ink);
}

.scope--labelled .scope__group--addendum .scope__group-header {
	border-bottom-width: var(--sq-border-width-hair);
	border-bottom-color: var(--sq-rule);
}

.scope--labelled .scope__group--addendum .scope__list {
	columns: 1;
}

/* The last row closes the panel; the rule under it would double the border. */
.scope__group--addendum .scope__item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}


/* ============================================================== DESKTOP == */

@media (min-width: 61.25em) {

	.scope__header {
		gap: var(--sq-space-4);
	}

	.scope__heading {
		line-height: 1;
	}

	.scope__groups {
		padding-top: 1.75rem; /* 28 */
	}

	/*
	 * Two columns, with the divider drawn as the second column's left edge
	 * rather than the first's right. Same line either way, but this way a
	 * single-column set never draws a rule with nothing on the other side of
	 * it — the rule belongs to the pairing, not to the first column.
	 */
	.scope--columns-2 .scope__groups {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--sq-space-7);
	}

	/*
	 * `labelled` never sets its GROUPS side by side — the columns it draws are
	 * the items inside one group. A two-group labelled section stacks, each
	 * with its own label and rule, which is what the reference drawing does
	 * with its addendum underneath.
	 */
	.scope--labelled .scope__groups {
		grid-template-columns: minmax(0, 1fr);
	}

	.scope--labelled .scope__list {
		columns: 2;
	}

	.scope--columns-2 .scope__group + .scope__group:not(.scope__group--addendum) {
		padding-top: 0;
		padding-left: var(--sq-space-7);
		border-top: 0;
		border-left: var(--sq-border-width) solid var(--sq-rule);
	}

	.scope__group-title {
		font-size: 1.875rem; /* 30 */
	}

	.scope__item {
		gap: 0.875rem; /* 14 */
		font-size: 1.1875rem; /* 19 */
	}

	.scope__list {
		gap: 0.875rem; /* 14 */
	}
}