/* ============================================
   STREETWORKS TRACKER

   Enqueued only on page-streetworks.php.

   Leans on the site's existing furniture rather than inventing a parallel
   design: the green page header is the same .mcf-page-header the Insights and
   Projects archives use, and the FAQ block uses the site-wide .mcf-faq styles
   so the accordion looks and behaves identically everywhere.

   Everything is scoped under .mcf-template, matching the rest of the theme.
   ============================================ */

/* .mcf-sw is a bare wrapper, because it contains the full bleed green header.
   Horizontal padding belongs to the body below it. The county filter recounts
   the figures from within this root, which is why the stats sit inside it
   rather than outside. */
.mcf-template .mcf-sw {
	padding: 0;
}

/*
 * The hidden attribute is how this page hides things: rows filtered out, the
 * no-results message. It works through a browser default,
 * `[hidden] { display: none }`, and any author rule that sets display on the
 * same element silently beats it. A container set to display grid or flex
 * simply ignores being hidden, which is a genuinely confusing half hour when
 * it happens.
 *
 * Two classes and an attribute outrank any single class rule inside this
 * block, so this settles it once for everything here, including whatever gets
 * added later.
 */
.mcf-template .mcf-sw [hidden] {
	display: none;
}

/* --------- Green page header --------- */

/* The hero holds a title and nothing else.
   
   It used to carry a badge, two paragraphs of introduction, four large figures
   and a source line. On a phone that was most of a screen and a half before
   the first permit, on a page whose entire value is the list. The prose moved
   below the list, the figures moved next to the filters that recount them.
   
   The breadcrumb already clears the fixed nav, so the top margin the shared
   header carries for pages with nothing above it is cancelled here. */
.mcf-template .mcf-page-header--streetworks {
	margin-top: 0;
	padding: clamp(28px, 3.4vw, 44px) var(--mcf-pad) clamp(26px, 3.2vw, 40px);
}

.mcf-template .mcf-page-header--streetworks > * {
	max-width: 1100px;
}

/* Marginally tighter than the shared header's clamp, since it is now carrying
   the band on its own rather than leading into body copy. */
.mcf-template .mcf-page-header--streetworks h1 {
	font-size: clamp(30px, 3.8vw, 46px);
	margin: 0;
}

/* --------- Live indicator --------- */

/* Rendered only when the API answered and gave a time, so the dot is a
   statement of fact rather than decoration.

   It sits directly under the H1 in the green band. That is where a reader
   looks to find out what they are looking at, and "how current is this" is
   part of that answer on a page whose whole claim is being live. */
.mcf-template .mcf-sw__live {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 9px;
	margin: 14px 0 0;
}

/* Inside the header .mcf-label is already the bright gold rather than the
   AA-safe dark one, which is the right way round on green. */
.mcf-template .mcf-page-header--streetworks .mcf-sw__updated {
	color: rgba(253, 252, 250, 0.72);
}

.mcf-template .mcf-sw__pulse {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mcf-gold);
}

/* The expanding ring is a pseudo element so the solid dot stays put and only
   the halo animates. */
.mcf-template .mcf-sw__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--mcf-gold);
	animation: mcf-sw-pulse 2.4s ease-out infinite;
}

@keyframes mcf-sw-pulse {
	0% {
		transform: scale(1);
		opacity: 0.65;
	}
	70% {
		transform: scale(3.4);
		opacity: 0;
	}
	100% {
		transform: scale(3.4);
		opacity: 0;
	}
}

/* The open count beside a county name. Tabular so the pills do not shift
   width as the numbers change through the day, and quiet enough that the
   county name is still what you read first. */
.mcf-template .mcf-sw__filter-count {
	margin-left: 6px;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* --------- The same filters as dropdowns, for narrow screens --------- */

/* Hidden by default and swapped in below 640px, where three rows of pills
   scrolled sideways against the page's own vertical scroll. A native select
   opens the platform picker, shows every option at once and needs no work
   from us to be reachable by keyboard or screen reader. */
.mcf-template .mcf-sw__selects {
	display: none;
	gap: 8px;
}

/* Label beside the control, not above it.
   
   Stacked labels cost three extra lines, which is most of what swapping the
   scrolling pills for dropdowns had just saved. Set inline, the three filters
   occupy about the same height the pill rows did while being far easier to
   use, which was the whole point of the change. The label stays a real
   <label> with a for attribute rather than becoming placeholder text. */
.mcf-template .mcf-sw__select {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.mcf-template .mcf-sw__select label {
	font-family: var(--mcf-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcf-warm-grey);
}

/* Same treatment as the forms elsewhere on the site: the native chevron
   replaced with the brand one, so the control belongs to the design rather
   than to the operating system. Green rather than the gold used on the plant
   hire form, because this sits on cream instead of on a white card. */
.mcf-template .mcf-sw__select select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--mcf-sans);
	font-size: 15px;
	line-height: 1.2;
	padding: 11px 36px 11px 13px;
	background-color: var(--mcf-white);
	border: 1px solid var(--mcf-stone);
	border-radius: 2px;
	color: var(--mcf-charcoal);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%231C3D2F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

.mcf-template .mcf-sw__select select:focus-visible {
	outline: 2px solid var(--mcf-green);
	outline-offset: 2px;
}

/* --------- Headline figures, beside the filters --------- */

/* These were 56px serif numerals reversed out of the green header. They are
   now a readout: still the first thing worth knowing, but sized as a caption
   to the list rather than as the page's headline. The JS recounts them when a
   filter changes, which is the reason they sit next to the filters. */

.mcf-template .mcf-sw__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcf-template .mcf-sw__stat {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

/* Set in the sans, not the serif.
   
   Playfair is a high contrast display face: its hairlines are the whole point
   at 56px in a hero and are the whole problem at 22px in a readout, where the
   thin strokes of a 4 or an 8 start to break up. These are instrument
   readings, and instruments are not set in a display serif.
   
   Tabular figures so the numbers hold a column as they change, and they do
   change: the filters recount them live. */
.mcf-template .mcf-sw__stat-number {
	font-family: var(--mcf-sans);
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--mcf-charcoal);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.mcf-template .mcf-sw__stat-label {
	font-family: var(--mcf-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mcf-warm-grey);
}

/* Set apart from the label beside it: sentence case, unletterspaced and
   lighter, so "LAST UPDATED" reads as the caption and the time reads as the
   value rather than the pair running together as one shouted string. */
.mcf-template .mcf-sw__updated {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	white-space: nowrap;
}

/* Whose works these are, up front beside the timestamp. Same quiet register
   as the timestamp, separated by a middot so the strip reads as one line of
   facts rather than a sentence. Wraps whole on small screens. */
.mcf-template .mcf-sw__whose {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	color: rgba(253, 252, 250, 0.72);
}
.mcf-template .mcf-sw__updated + .mcf-sw__whose::before {
	content: "\00b7";
	margin-right: 9px;
	color: rgba(253, 252, 250, 0.45);
}

/* --------- Body --------- */

.mcf-template .mcf-sw__body {
	padding: clamp(40px, 5vw, 64px) var(--mcf-pad) var(--mcf-v-space);
}

/* Admin only diagnostic. Deliberately ugly: it is a tool, not part of the
   page, and it should be obvious that it is not meant to be seen by readers. */
.mcf-template .mcf-sw__debug {
	margin: 0 0 28px;
	padding: 14px 16px;
	background: #fffbe6;
	border: 2px dashed #b8860b;
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	overflow-x: auto;
}

.mcf-template .mcf-sw__debug table {
	border-collapse: collapse;
	width: 100%;
}

.mcf-template .mcf-sw__debug th,
.mcf-template .mcf-sw__debug td {
	text-align: left;
	padding: 4px 10px 4px 0;
	vertical-align: top;
	border-bottom: 1px solid rgba(184, 134, 11, 0.25);
}

/* --------- Controls: filters left, live readout right --------- */

.mcf-template .mcf-sw__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 48px;
	margin-bottom: 34px;
}

/* Takes the width, because the filter rows are the wider and more variable of
   the two and the readout is a fixed handful of short numbers. */
.mcf-template .mcf-sw__filterset {
	flex: 1 1 460px;
	min-width: 0;
}

/* The last filter row carries the block's bottom margin, so it is cancelled
   here and owned by .mcf-sw__controls instead. Otherwise the two stack. */
.mcf-template .mcf-sw__filterset .mcf-sw__filters:last-child {
	margin-bottom: 0;
}

.mcf-template .mcf-sw__readout {
	flex: 0 1 auto;
	max-width: 320px;
}

/* --------- Filters: county, then sector, then status --------- */

/* Three rows, deliberately not three equal rows. They are read top down as
   where, then who, then what state, and each is set a step quieter than the
   one above so the block reads as one control with three axes rather than as
   three competing decisions. */

.mcf-template .mcf-sw__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
}

/* Small, because these are now a desktop control only.
   
   Phones get the dropdowns below, which means these no longer have to satisfy
   a 44px touch target and can be sized for a pointer. Three rows of filters
   should read as a toolbar above the data, not compete with it. */
/* The county row is anchors, not buttons, because each county is a real
   page. Every rule here therefore names both, or the two rows would not
   look like the same control. */
.mcf-template .mcf-sw__filters--county a,
.mcf-template .mcf-sw__filters button {
	font-family: var(--mcf-sans);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 6px 11px;
	border: 1px solid var(--mcf-stone);
	border-radius: 999px;
	background: transparent;
	color: var(--mcf-text);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mcf-template .mcf-sw__filters--county a:hover,
.mcf-template .mcf-sw__filters button:hover {
	border-color: var(--mcf-green);
	color: var(--mcf-green);
}

.mcf-template .mcf-sw__filters--county a.is-active,
.mcf-template .mcf-sw__filters button.is-active {
	background: var(--mcf-green);
	border-color: var(--mcf-green);
	color: var(--mcf-white);
}

.mcf-template .mcf-sw__filters--county a:focus-visible,
.mcf-template .mcf-sw__filters button:focus-visible {
	outline: 2px solid var(--mcf-green);
	outline-offset: 2px;
}

/* Second axis. Same size as the counties, filled in charcoal rather than
   green when active, so two active pills in a row are never mistaken for one
   selection wrapped onto two lines.

   These modifier blocks have to stay below the base block above: they carry
   the same specificity, so source order is the only thing deciding them. */
.mcf-template .mcf-sw__filters--sector button {
	border-color: var(--mcf-border);
}

.mcf-template .mcf-sw__filters--sector button:hover {
	border-color: var(--mcf-charcoal);
	color: var(--mcf-charcoal);
}

.mcf-template .mcf-sw__filters--sector button.is-active {
	background: var(--mcf-charcoal);
	border-color: var(--mcf-charcoal);
	color: var(--mcf-white);
}

/* Third axis, and the quietest: a status is a refinement of a list somebody
   has already narrowed, not a way in to it. */
.mcf-template .mcf-sw__filters--status button {
	font-size: 0.6875rem;
	padding: 5px 9px;
	border-color: var(--mcf-border);
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__filters--status button:hover {
	border-color: var(--mcf-green);
	color: var(--mcf-green);
}

.mcf-template .mcf-sw__filters--status button.is-active {
	background: var(--mcf-cream-dark);
	border-color: var(--mcf-stone);
	color: var(--mcf-charcoal);
	font-weight: 600;
}

/* --------- Truncation note --------- */

/* Sits between the filters and the rows, because that is where the reader
   forms their idea of how much they are looking at. Quiet: it is a caveat, not
   a warning, and the list is not wrong. */
/* The whole-dataset sector mix, sharing the truncation note's block. Set as
   its own line rather than run on, because it answers a different question
   from the sentence above it: that one is about this page, this one is about
   the road network. */
.mcf-template .mcf-sw__mix {
	display: block;
	margin-top: 6px;
	color: var(--mcf-charcoal);
}

.mcf-template .mcf-sw__truncation {
	font-family: var(--mcf-sans);
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 62ch;
	margin: 0 0 28px;
	padding-left: 14px;
	border-left: 2px solid var(--mcf-stone);
	color: var(--mcf-warm-grey);
}

/* --------- Rail legend --------- */

/* Quiet by design. It has to be present for the rail to mean anything, and
   absent enough that it never competes with the data it explains. */
.mcf-template .mcf-sw__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--mcf-border);
	font-family: var(--mcf-sans);
	font-size: 0.75rem;
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__legend-lead {
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mcf-charcoal);
}

.mcf-template .mcf-sw__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

/* The same 4px bar as the rail itself, at row scale, so the connection is
   made by shape as well as by colour. That also keeps the key usable for a
   reader who cannot separate the reds and greens. */
.mcf-template .mcf-sw__legend-swatch {
	display: inline-block;
	width: 4px;
	height: 15px;
	flex: 0 0 auto;
	background: var(--mcf-stone);
}

.mcf-template .mcf-sw__legend-item.is-closure .mcf-sw__legend-swatch {
	background: var(--mcf-gold);
}
.mcf-template .mcf-sw__legend-item.is-emergency .mcf-sw__legend-swatch {
	background: #b45309;
}
.mcf-template .mcf-sw__legend-item.is-progress .mcf-sw__legend-swatch {
	background: var(--mcf-green);
}
.mcf-template .mcf-sw__legend-item.is-planned .mcf-sw__legend-swatch {
	background: var(--mcf-stone);
}

/* --------- Permit rows --------- */

/*
 * Each row is a register entry, not a card in a feed. A permit is a legal
 * instrument granted by an authority, and the design leans into that: square
 * corners, hairline rules, a coloured rail down the left that can be scanned
 * vertically at any list length, and figures set in tabular numerals so the
 * dates line up column to column across every row on the page.
 */

.mcf-template .mcf-sw__rows {
	display: grid;
	gap: 10px;
}

/* Two columns once there is room for two.
   
   1200px rather than a laptop-ish 1024: each card holds a four column facts
   strip and a wrapping chip list, and halving the width below this point
   makes both of them wrap in ways that cost more height than the second
   column saves. Stretch is deliberate, so paired cards share a baseline
   rather than leaving a ragged step between them. */
@media (min-width: 1200px) {
	.mcf-template .mcf-sw__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	/* Share the card evenly rather than capping each column at 132px, which
	   at half width left the fourth fact hanging off the end of the strip. */
	.mcf-template .mcf-sw__facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mcf-template .mcf-sw__row {
	position: relative;
	padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
	padding-left: clamp(24px, 2.8vw, 34px);
	background: var(--mcf-white);
	border: 1px solid var(--mcf-border);
	border-radius: 0;
	transition: border-color 0.18s ease, background 0.18s ease;
}

/* The rail. A pseudo element rather than a border so it can grow on hover
   without shifting the content beside it. */
.mcf-template .mcf-sw__row::before {
	content: "";
	position: absolute;
	inset: -1px auto -1px -1px;
	width: 4px;
	background: var(--mcf-stone);
	transition: width 0.18s ease;
}

.mcf-template .mcf-sw__row:hover {
	border-color: var(--mcf-stone);
	background: #fffdfa;
}

.mcf-template .mcf-sw__row:hover::before {
	width: 7px;
}

.mcf-template .mcf-sw__row[hidden] {
	display: none;
}

/* Rail colour by state, ordered by what a reader most needs to notice. */
.mcf-template .mcf-sw__row.is-closure::before {
	background: var(--mcf-gold);
}
.mcf-template .mcf-sw__row.is-emergency::before {
	background: #b45309;
}
.mcf-template .mcf-sw__row.is-progress::before {
	background: var(--mcf-green);
}
.mcf-template .mcf-sw__row.is-planned::before,
.mcf-template .mcf-sw__row.is-done::before {
	background: var(--mcf-stone);
}

/* Works that finished today. Present because a live page should show things
   ending as well as starting, but quieter than the open ones, because they
   are no longer affecting anybody's journey. */
.mcf-template .mcf-sw__row.is-done {
	background: transparent;
}

.mcf-template .mcf-sw__row.is-done .mcf-sw__street,
.mcf-template .mcf-sw__row.is-done .mcf-sw__fact dd {
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__row.is-done .mcf-sw__promoter-name {
	color: var(--mcf-warm-grey);
}

/* --------- Street --------- */

.mcf-template .mcf-sw__rowhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
}

.mcf-template .mcf-sw__street {
	font-family: var(--mcf-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mcf-charcoal);
	margin: 0;
	/* Street names arrive in capitals from the feed. Small caps would be
	   better but the stack has no true small caps, so they are left as sent
	   and the town is what carries the contrast. */
}

/* The town is set exactly as the street is, so the two read as the single
   phrase a person would say out loud rather than as a label and a tag. It
   keeps its own element for the sake of the wrap rule below and so that
   anything wanting to treat the town separately still can. */
.mcf-template .mcf-sw__town {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	/* The pair may wrap between street and town, but a town name must never
	   break across lines in the middle of itself. */
	white-space: nowrap;
}

/* --------- State pill --------- */

/* The rail, in words, on the card itself. Carries the same swatch shape as
   the key at the top so the two are obviously the same vocabulary, and so a
   reader who cannot separate the colours still gets the answer. */
.mcf-template .mcf-sw__state {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	padding: 6px 12px 6px 9px;
	border: 1px solid var(--mcf-border);
	background: var(--mcf-cream);
	font-family: var(--mcf-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__state-swatch {
	display: inline-block;
	width: 4px;
	height: 13px;
	flex: 0 0 auto;
	background: var(--mcf-stone);
}

.mcf-template .mcf-sw__state.is-closure {
	background: rgba(212, 168, 67, 0.14);
	border-color: rgba(139, 105, 20, 0.3);
	color: #8b6914;
}
.mcf-template .mcf-sw__state.is-closure .mcf-sw__state-swatch {
	background: var(--mcf-gold);
}

.mcf-template .mcf-sw__state.is-emergency {
	background: rgba(254, 243, 199, 0.55);
	border-color: rgba(180, 83, 9, 0.3);
	color: #92400e;
}
.mcf-template .mcf-sw__state.is-emergency .mcf-sw__state-swatch {
	background: #b45309;
}

.mcf-template .mcf-sw__state.is-progress {
	background: rgba(28, 61, 47, 0.06);
	border-color: rgba(28, 61, 47, 0.2);
	color: var(--mcf-green);
}
.mcf-template .mcf-sw__state.is-progress .mcf-sw__state-swatch {
	background: var(--mcf-green);
}

.mcf-template .mcf-sw__state.is-planned .mcf-sw__state-swatch,
.mcf-template .mcf-sw__state.is-done .mcf-sw__state-swatch {
	background: var(--mcf-stone);
}

/* --------- Promoter --------- */

/* Who is digging. The single most useful fact on the row, so it is set as a
   filed-by line rather than buried in a sentence. */
.mcf-template .mcf-sw__promoter {
	font-family: var(--mcf-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 10px 0 0;
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__promoter-name {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mcf-green);
}

/* Sector sits between the promoter and the activity, deliberately without a
   colour of its own. The row already carries one colour system in the rail
   down its left, which means status; a second would make the reader work out
   which is which on every row. */
.mcf-template .mcf-sw__sector {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__sector::before,
.mcf-template .mcf-sw__activity::before {
	content: "·";
	margin: 0 8px;
	color: var(--mcf-stone);
}

/* --------- Chips --------- */

.mcf-template .mcf-sw__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.mcf-template .mcf-sw__chip {
	font-family: var(--mcf-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 10px;
	border: 1px solid var(--mcf-border);
	background: transparent;
	color: var(--mcf-warm-grey);
}

/* Immediate works: a burst or a leak, not a planned scheme. */
.mcf-template .mcf-sw__chip.is-warning {
	border-color: rgba(180, 83, 9, 0.35);
	background: rgba(254, 243, 199, 0.55);
	color: #92400e;
}

.mcf-template .mcf-sw__chip.is-danger {
	border-color: rgba(154, 52, 18, 0.32);
	background: rgba(254, 226, 226, 0.5);
	color: #9a3412;
}

/* --------- Dates --------- */

/* Fixed columns so the figures align down the page. At two rows it looks
   tidy, at two hundred it becomes readable in a way a wrapping sentence
   never is. */
.mcf-template .mcf-sw__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 132px));
	gap: 0;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--mcf-border);
}

.mcf-template .mcf-sw__fact dt {
	font-family: var(--mcf-sans);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mcf-warm-grey);
	margin: 0 0 5px;
}

.mcf-template .mcf-sw__fact dd {
	font-family: var(--mcf-sans);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--mcf-charcoal);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* The gap between the permitted end date and reality. The reason the page
   exists, so it is the one figure allowed to shout. */
.mcf-template .mcf-sw__fact.is-emphasis dd {
	color: #9a3412;
	font-weight: 700;
}

.mcf-template .mcf-sw__fact.is-emphasis dt {
	color: #9a3412;
}

/* --------- Footer --------- */

.mcf-template .mcf-sw__rowfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
	margin: 16px 0 0;
	padding: 13px 0 0;
	border-top: 1px solid var(--mcf-border);
	font-family: var(--mcf-sans);
	font-size: 0.8125rem;
	color: var(--mcf-warm-grey);
}

/* The granting authority. Deliberately quiet: it is context for the permit,
   not the story of the row. */
.mcf-template .mcf-sw__authority {
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__rowfoot-end {
	display: inline-flex;
	align-items: baseline;
	gap: 18px;
}

/* The permit's own reference. A small authenticity detail: this is a real
   identifier you could quote back to the authority. */
.mcf-template .mcf-sw__ref {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--mcf-stone);
	font-variant-numeric: tabular-nums;
}

.mcf-template .mcf-sw__map {
	color: var(--mcf-green);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.mcf-template .mcf-sw__map:hover {
	border-bottom-color: var(--mcf-green);
}

/* --------- Status pills --------- */

.mcf-template .mcf-sw__pill {
	flex: 0 0 auto;
	font-family: var(--mcf-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 6px 11px;
	border-radius: 0;
	background: var(--mcf-cream);
	color: var(--mcf-warm-grey);
}

.mcf-template .mcf-sw__pill.is-warning {
	background: #fef3c7;
	color: #854d0e;
}

.mcf-template .mcf-sw__pill.is-success {
	background: #dcfce7;
	color: #166534;
}

/* --------- Entrance --------- */

/* One staggered reveal on load, capped at twelve so a long list does not
   spend two seconds animating. */
@media (prefers-reduced-motion: no-preference) {
	.mcf-template .mcf-sw__row {
		animation: mcf-sw-rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
		animation-delay: calc(var(--row-index, 1) * 45ms);
	}
}

@keyframes mcf-sw-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --------- Empty and quiet states --------- */

.mcf-template .mcf-sw__empty,
.mcf-template .mcf-sw__noresults,
.mcf-template .mcf-sw__quiet {
	font-family: var(--mcf-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mcf-warm-grey);
	background: var(--mcf-cream);
	border-left: 3px solid var(--mcf-stone);
	padding: 24px 28px;
	margin: 0;
}

.mcf-template .mcf-sw__noresults[hidden] {
	display: none;
}

.mcf-template .mcf-sw__empty a,
.mcf-template .mcf-sw__quiet a {
	color: var(--mcf-green);
	text-decoration: underline;
}

/* --------- Load more --------- */

/* Sits under the list, full width, so it reads as the end of the rows rather
   than as another control belonging to the filters at the top. Every row is
   already in the document, so this reveals rather than fetches: there is no
   spinner state to design because there is nothing to wait for. */
.mcf-template .mcf-sw__more {
	margin-top: 18px;
}

.mcf-template .mcf-sw__more-btn {
	display: block;
	width: 100%;
	font-family: var(--mcf-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 18px 24px;
	background: transparent;
	border: 1px solid var(--mcf-stone);
	border-radius: 0;
	color: var(--mcf-green);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mcf-template .mcf-sw__more-btn:hover {
	background: var(--mcf-green);
	border-color: var(--mcf-green);
	color: var(--mcf-white);
}

.mcf-template .mcf-sw__more-btn:focus-visible {
	outline: 2px solid var(--mcf-green);
	outline-offset: 2px;
}

/* --------- Explanation, below the list --------- */

/*
 * Both bands run the full width, gutter to gutter, like the cards above them.
 *
 * Which forces the column count rather than the other way round. Comfortable
 * reading is 45 to 75 characters a line, and at 17px that is roughly 560px.
 * One column across an 1800px screen would be about 190 characters, which is
 * unreadable; two would be 95, still too long. Three lands at about 58, so
 * three is what fills a wide screen without ruining it.
 *
 * The per column cap is in ch rather than pixels so it tracks the font size,
 * and it only bites past about 2200px where even three columns get too wide.
 */
.mcf-template .mcf-sw__intro {
	padding: clamp(44px, 5vw, 68px) var(--mcf-pad);
}

/*
 * The columns count themselves rather than being switched at hand picked
 * breakpoints, because the thing that actually matters is how wide a column
 * ends up, not how wide the window is.
 *
 * 27rem is the narrowest column worth having. Measured rather than guessed:
 * at 24rem a 1440px screen took three columns of 42 characters, which is
 * under the comfortable floor of about 45 and makes long words and the
 * linked article titles wrap badly. At 27rem the same screen takes two
 * columns of 65, and a 1790px one takes three of 53. Two on a laptop, three
 * on a wide monitor, without either number being written down.
 *
 * min(100%, 24rem) rather than 24rem alone, so a viewport narrower than one
 * column still gets a single column instead of overflowing.
 */
.mcf-template .mcf-sw__intro-body,
.mcf-template .mcf-sw__method-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
	gap: 40px;
}

.mcf-template .mcf-sw__intro-body p {
	font-family: var(--mcf-sans);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--mcf-text);
	margin: 0;
	max-width: 70ch;
}

.mcf-template .mcf-sw__intro-body a {
	color: var(--mcf-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------- Method note --------- */

/* A full bleed band, like the green header and the FAQ below it, rather than
   a box inset inside the body's padding. This is the section that pre-empts
   the obvious objection and the one an AI engine is most likely to quote, so
   it carries the same weight as everything else on the page. */
.mcf-template .mcf-sw__method {
	max-width: none;
	margin: 0;
	padding: clamp(48px, 6vw, 80px) var(--mcf-pad);
	background: var(--mcf-white);
	border-top: 1px solid var(--mcf-border);
	border-bottom: 1px solid var(--mcf-border);
}

.mcf-template .mcf-sw__method-inner {
	max-width: none;
}

.mcf-template .mcf-sw__method h2 {
	font-family: var(--mcf-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	color: var(--mcf-charcoal);
	margin: 0 0 clamp(28px, 3vw, 40px);
}

/*
 * A real grid, not a text flow. column-count balances by height, which means
 * it decides where a paragraph breaks and can leave the last one stranded in
 * a column of its own with a void beneath it. A grid puts one note per
 * column, all starting on the same line, which is what the rule above each of
 * them is for. Column sizing is shared with the intro above.
 */

/* The rule gives the three notes a shared baseline to hang from and turns a
   block of grey text into something with a structure you can see before you
   read it. Green rather than a hairline grey, because at this size it is the
   only brand colour in the band and the section is otherwise very quiet. */
.mcf-template .mcf-sw__note {
	border-top: 2px solid var(--mcf-green);
	padding-top: 16px;
}

.mcf-template .mcf-sw__note h3 {
	font-family: var(--mcf-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mcf-green);
	margin: 0 0 12px;
}

.mcf-template .mcf-sw__note p {
	font-family: var(--mcf-sans);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--mcf-text);
	margin: 0;
	/* Bites when the notes are stacked, and again past about 2200px where even
	   three columns run too wide. Between those it does nothing, because the
	   grid track is already narrower. */
	max-width: 70ch;
}

.mcf-template .mcf-sw__method a {
	color: var(--mcf-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------- FAQ --------- */

/* Uses the site-wide .mcf-faq block, which already carries its own full bleed
   padding, so nothing needs overriding here beyond removing the top margin
   that would otherwise gap it from the method band above.

   The accordion behaviour comes from mcf_faq_script() in functions.php, which
   has to list this template explicitly or the questions will not open. */
.mcf-template .mcf-sw__faq {
	margin-top: 0;
}

/* --------- Licence --------- */

/* Sits under the permit list, inside the body, so it inherits the body's
   horizontal padding and needs none of its own. Centred, because it reads as
   a caption to the data above rather than as another left aligned block. */
.mcf-template .mcf-sw__licence {
	font-family: var(--mcf-sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	text-align: center;
	color: var(--mcf-warm-grey);
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--mcf-border);
}

.mcf-template .mcf-sw__licence a {
	color: var(--mcf-warm-grey);
	text-decoration: underline;
}

/* --------- Responsive --------- */

@media (max-width: 1024px) {

	/* Three columns at tablet width. Four leaves the last one orphaned when
	   a permit has not overrun and there are only three facts to show. */
	.mcf-template .mcf-sw__facts {
		grid-template-columns: repeat(3, minmax(0, 132px));
		gap: 16px 0;
	}
}

@media (max-width: 640px) {
	/* The readout drops under the filters and rules off from them, so the
	   figures are not mistaken for another row of controls.

	   The space above the rule is the larger of the two on purpose. A divider
	   reads as belonging to what follows it, so crowding it against the last
	   dropdown makes it look like part of that control rather than the start
	   of a new block. Four pixels there was not enough for it to separate
	   anything. */
	.mcf-template .mcf-sw__readout {
		max-width: none;
		width: 100%;
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid var(--mcf-border);
	}

	.mcf-template .mcf-sw__stats {
		gap: 10px 20px;
	}

	/* Two up rather than four across, which at this width would either wrap
	   mid-label or shrink the numerals below the point of showing them. */
	.mcf-template .mcf-sw__stat {
		flex: 0 0 calc(50% - 10px);
	}

	.mcf-template .mcf-sw__controls {
		gap: 0;
		margin-bottom: 26px;
	}

	/* Status first on a narrow screen. It is the thing worth knowing before
	   you have read the street name. */
	.mcf-template .mcf-sw__rowhead {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 10px;
	}

	/* The town drops to its own line, so the leader rule that separates it
	   from the street would be dangling. */
	/* Two columns rather than four, so the figures stay readable instead of
	   being squeezed to a couple of characters each. */
	.mcf-template .mcf-sw__facts {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	/* Tighter chips, because a row can now carry five of them: traffic
	   management, where on the street, the footway, what pedestrians get
	   instead, and traffic sensitive. At the desktop size that wrapped to four
	   lines on a phone, which is a lot of height to add to every card in a
	   list of fifty. The letterspacing is what costs the most and buys the
	   least at this size. */
	.mcf-template .mcf-sw__chip {
		letter-spacing: 0.04em;
		padding: 6px 8px;
	}

	.mcf-template .mcf-sw__chips {
		gap: 6px;
	}

	.mcf-template .mcf-sw__rowfoot {
		flex-direction: column;
		align-items: flex-start;
	}

	.mcf-template .mcf-sw__rowfoot-end {
		flex-wrap: wrap;
		gap: 6px 14px;
	}

	.mcf-template .mcf-sw__method {
		padding: 28px 22px;
	}

	/* Wraps rather than scrolls, unlike the filters. It is reference material
	   rather than a control, so nothing is lost by it taking two lines and
	   something is lost by half of it being off screen. */
	.mcf-template .mcf-sw__legend {
		gap: 8px 14px;
		font-size: 0.6875rem;
	}

	/* Dropdowns replace the pills outright here.
	   
	   The pills previously scrolled sideways, three rows of them. That hid
	   options behind a gesture that competes with the page's own scrolling,
	   and it is the wrong control for a phone regardless: a native select
	   shows every option at once in the platform's own picker.
	   
	   Both sets stay in the DOM and the script keeps them in step, so a filter
	   chosen here survives a rotation into the pill layout. */
	.mcf-template .mcf-sw__filters {
		display: none;
	}

	.mcf-template .mcf-sw__selects {
		display: grid;
	}

	.mcf-template .mcf-sw__filters--county a,
	.mcf-template .mcf-sw__filters button {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcf-template .mcf-sw__filters button,
	.mcf-template .mcf-sw__row {
		transition: none;
	}

	/* The solid dot stays, the animation goes. The indicator still reads as
	   live without moving. */
	.mcf-template .mcf-sw__pulse::after {
		animation: none;
	}
}