/* ==========================================================================
   Long-form post — Good complaints handling for law firms
   The set-piece is the contents rail: 31 entries on a thin track, one navy
   lozenge travelling down it as you read, pale lozenges left on finished
   sections, and a four-petal meter that fills one petal per quarter read.
   Everything else is quiet: the prose never animates.

   Final state first. With no script the rail is a plain anchor list with
   the meter drawn in full; html.lf-live (set by post_longform.js once it is
   wired up) is what empties the meter and shows the traveller and the bar.

    1  Masthead (post)      5  Lists, figures, pull lines
    2  Reading grid         6  End matter
    3  Contents rail        7  Contents bar, sheet, no-script list
    4  Article              8  Responsive
   ========================================================================== */

/* 1. Masthead — navy rises from the bottom edge, yellow above it ---------- */
.mast--lf .mast__h1 { grid-column: 1 / 11; font-size: var(--mast-post); line-height: 1.02; }
.mast--lf .mast__stand { grid-column: 1 / 9; margin-top: clamp(1.25rem, 1.8vw, 2rem); }
.mast__kind { color: var(--ink); }

.lf-meta {
	grid-column: 1 / 9;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.5rem;
	margin: clamp(1.25rem, 2.2vw, 2.5rem) 0 0;
	font-size: var(--tiny);
	color: var(--body);
}
.lf-meta__date { display: inline-flex; align-items: center; gap: 0.5em; }
.lf-meta svg { width: 1.05em; height: 1.05em; flex: none; }
.lf-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.35em 0.95em;
	border-radius: 999px;
	background: var(--acc-tint);
	color: var(--body);
}
.lf-chip .lz { width: 8px; }
.lf-chip:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Navy rises from the bottom edge (behind the first rules of the article)
   and yellow hangs from behind the glass header on the same vertical axis:
   the mark's top and bottom petals, with the title between them. */
@media (min-width: 1025px) {
	.mast--lf .mast__petal--a {
		width: min(26vw, 500px);
		right: 5vw;
		bottom: calc(min(26vw, 500px) * -0.46);
	}
	.mast--lf .mast__petal--b {
		width: min(8vw, 150px);
		right: calc(5vw + min(26vw, 500px) / 2 - min(8vw, 150px) / 2);
		top: calc(var(--header-h) - min(8vw, 150px) * 0.45);
	}
}
/* 641-1024: the same pair, scaled, instead of the chassis's shared corner —
   there the long title and the 'Long read' label would sit on the petals.
   The standfirst keeps to cols 1-7 so navy can rise beside it. */
@media (min-width: 641px) and (max-width: 1024px) {
	.mast--lf .mast__petal--a {
		width: 34vw;
		left: auto !important;
		right: 4vw !important;
		top: auto !important;
		bottom: calc(34vw * -0.5);
	}
	.mast--lf .mast__petal--b {
		width: 11vw;
		left: auto !important;
		right: calc(4vw + 17vw - 5.5vw) !important;
		top: calc(var(--header-h) - 11vw * 0.62) !important;
	}
	.mast--lf .mast__h1 { padding-top: 0; margin-top: clamp(2rem, 5vw, 3rem); }
	.mast--lf .mast__stand,
	.mast--lf .lf-meta { grid-column: 1 / 8 !important; }
}

/* 2. Reading grid — rail cols 1-3, prose cols 4-9, margin cols 10-12 ------- */
.lf { position: relative; }
.lf__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	/* no gap: the first rules sit on the masthead's bottom edge, so the navy
	   petal appears to rise from behind them */
	padding-bottom: var(--section-y);
}
.lf__grid > * { grid-column: 1 / -1; min-width: 0; }
/* The rail and the article share a grid of their own: a sticky element is
   held inside its containing block, so the rail lets go where the article
   ends ('Further reading') instead of riding down over the end matter. */
.lf__read {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
}
.lf__read > * { min-width: 0; }
.toc-details,
.toc-bar { display: none; }

/* 3. Contents rail ---------------------------------------------------------- */
.rail-toc {
	grid-column: 1 / 4;
	grid-row: 1;
	align-self: start;
	display: flex;
	flex-direction: column;
	padding-right: clamp(0.5rem, 2.4vw, 3rem);
}
/* The rail's top rule belongs to the page, not to the sticky rail: it lies
   level with the first section's rule and stays there, instead of riding
   along under the header as an orphan line once the rail holds. */
.lf__read::before {
	content: '';
	grid-column: 1 / 4;
	grid-row: 1;
	align-self: start;
	border-top: var(--rule-strong);
}
.rail-toc__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 1rem;
	align-items: center;
	padding: clamp(1.75rem, 2.6vw, 3rem) 0 1rem;
}
.rail-toc__head .qmeter { grid-row: 1 / 3; }
.rail-toc__t {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--small);
	line-height: 1.25;
	color: var(--ink);
}
.rail-toc__m { margin: 0; font-size: var(--tiny); line-height: 1.35; color: var(--body); }

/* the quarter meter: the #i-logo as four petals, filling in logo order */
.qmeter { width: 40px; height: 40px; flex: none; overflow: visible; }
.qmeter--sm { width: 24px; height: 24px; }
.qmeter .seal__p { transform-box: fill-box; transform-origin: center; }
html.lf-live .qmeter .seal__p:not(.is-on) rect {
	fill: transparent;
	stroke: var(--ink);
	stroke-width: 1.4px;
	vector-effect: non-scaling-stroke;
}
html.lf-live .qmeter .seal__p.is-on { animation: pop 0.45s var(--ease-out) both; }

.rail-toc__scroll { position: relative; }
.rail-toc__list { position: relative; padding: 0.9rem 0 1.25rem; }
.rail-toc__track,
.rail-toc__fill {
	position: absolute;
	left: 7px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--line);
}
.rail-toc__fill {
	display: none;
	background: var(--ink);
	transform: scaleY(var(--fill, 0));
	transform-origin: top;
}
/* the traveller sits on the active entry and glides to the next; the ink
   fill runs on ahead of it as that section is read. translate (not
   transform) moves it while the lozenge itself stays turned 45deg; under
   reduced motion style.css collapses the transition, so it jumps. */
.rail-toc__trav {
	display: none;
	position: absolute;
	left: 1px;
	top: -7px;
	width: 14px;
	height: 14px;
	border-radius: 22%;
	background: var(--acc);
	box-shadow: 0 0 0 3px var(--white);
	rotate: 45deg;
	translate: 0 var(--y, 16px);
	transition: translate 0.45s var(--ease-out);
}
html.lf-live .rail-toc__fill,
html.lf-live .rail-toc__trav { display: block; }

/* entries — shared by the rail, the sheet and the no-script list */
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list > li { position: relative; }
.toc-list a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	padding: 0.4rem 0 0.4rem 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--body);
	transition: color 0.2s ease;
}
.toc-list__n {
	font-size: 0.8125rem;
	line-height: calc(0.9375rem * 1.35);  /* centred on the title's first line */
	font-variant-numeric: tabular-nums;
	color: var(--body);
}
.toc-list a:hover,
.toc-list a:focus-visible { color: var(--ink); }
/* inside a scrolling list the ring is drawn inward, so the edge never clips it */
.toc-list a:focus-visible { outline-offset: -3px; }
.toc-list a:hover .toc-list__t { text-decoration: underline; text-underline-offset: 3px; }
.toc-list > li.is-active > a { color: var(--ink); font-family: var(--font-head); font-weight: 500; }
.toc-list > li.is-active .toc-list__n { color: var(--acc-text); }
/* a finished section leaves a pale lozenge on the track */
.toc-list--rail > li::before {
	content: '';
	position: absolute;
	left: 5px;
	top: calc(0.4rem + 0.9375rem * 1.35 / 2 - 3px);
	width: 6px;
	height: 6px;
	border-radius: 22%;
	background: var(--acc-pale);
	rotate: 45deg;
	opacity: 0;
	scale: 0.4;
	transition: opacity 0.3s ease, scale 0.3s var(--ease-out);
}
.toc-list--rail > li.is-passed::before { opacity: 1; scale: 1; }

/* sticky only where there is room to hold it; the rail scrolls itself */
@media (min-width: 1025px) and (min-height: 760px) {
	.rail-toc {
		position: sticky;
		top: var(--seam-t);
		max-height: calc(100vh - var(--seam-t) - 2rem);
	}
	.rail-toc__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--line) transparent;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		/* a keyboard-focused entry is scrolled clear of the 24px fades (the
		   script's own scrollTop is unaffected) */
		scroll-padding-block: 28px;
	}
	/* and the first and last entries start clear of them */
	.rail-toc__list { padding: 1.5rem 0; }
}

/* 4. Article ---------------------------------------------------------------- */
.lf__article {
	grid-column: 4 / -1;
	grid-row: 1;
	font-size: var(--read);
	line-height: 1.7;
	color: var(--body);
}
.lf-sec {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
	padding-top: clamp(1.75rem, 2.6vw, 3rem);
	border-top: var(--rule-strong);
}
.lf-sec + .lf-sec { margin-top: 5rem; }
.lf-sec > * { grid-column: 1 / 7; min-width: 0; }
.lf-sec p { margin: 0 0 1.1em; }
.lf-sec > h2 {
	max-width: 17em;
	margin: 0 0 0.85em;
	font-size: var(--h2-sm);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
	/* on top of the html scroll-padding: the section's rule lands in view too */
	scroll-margin-top: calc(clamp(1.75rem, 2.6vw, 3rem) + 1.5rem);
}

/* the margin marker: '§ 07' over '07 / 31' */
.lf-mark {
	grid-column: 7 / -1;
	grid-row: 1 / span 3;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	font-family: var(--font-head);
	pointer-events: none;
}
.lf-mark__big {
	font-weight: 600;
	font-size: var(--numeral-sm);
	line-height: 0.8;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--acc-pale);
}
.lf-mark__s { font-size: 0.5em; vertical-align: 0.62em; letter-spacing: 0; }
.lf-mark__of { color: var(--body); }

.lf-sec h3 { color: var(--ink); }
.runin { margin: 2em 0 0.5em; font-size: var(--h5); line-height: 1.3; }
.lf-sec > h2 + .runin { margin-top: 0; }
.lf-h3 {
	margin: 2.4em 0 0.6em;
	padding-top: 1.2em;
	border-top: var(--rule);
	font-size: var(--h4);
	line-height: 1.25;
}
.lf-sec strong { color: var(--ink); }
.lf-lead strong { font-family: var(--font-head); font-weight: 500; font-size: 0.94em; }

/* 5. Lists, figures, pull lines -------------------------------------------- */
.lf-list { list-style: none; margin: 0 0 1.2em; padding: 0 0 0 1.5em; }
.lf-list > li { position: relative; margin: 0 0 0.6em; }
.lf-list li > p { margin: 0.6em 0 0; }
/* the source's bullet glyph, drawn as a lozenge (the text stays in the DOM) */
.lf-m {
	position: absolute;
	left: -1.3em;
	top: 0.66em;
	width: 0.38em;
	height: 0.38em;
	overflow: hidden;
	border-radius: 22%;
	background: var(--acc);
	color: transparent;
	line-height: 1;
	rotate: 45deg;
}
/* the source's dashes stay visible, hung in the margin */
.lf-m--dash {
	left: -1.15em;
	top: 0;
	width: auto;
	height: auto;
	overflow: visible;
	border-radius: 0;
	background: none;
	color: var(--acc-text);
	line-height: inherit;
	rotate: none;
}
.lf-list--sub { margin: 0.5em 0 0.3em; padding-left: 1.2em; font-size: 0.94em; }
.lf-list--sub > li { margin-bottom: 0.4em; }

.lf-figs {
	list-style: none;
	max-width: 26em;
	margin: 0.2em 0 1.4em;
	padding: 0;
	border-top: var(--rule-strong);
}
.lf-figs li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5em 0;
	border-bottom: var(--rule);
}
.lf-figs__v {
	font-family: var(--font-head);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.lf-pull {
	grid-column: 1 / -1;
	margin: 1.75rem 0 0;
	padding: clamp(1.75rem, 3vw, 3.5rem) 0;
	border-top: var(--rule);
	border-bottom: var(--rule);
}
.lf-pull .statement { margin: 0 !important; }
@media (min-width: 861px) {
	.lf-pull .statement { padding-left: 1.2em; }
	.lf-pull .statement::before { left: 0; }
}

/* Further reading: end matter */
.lf-sec--end { border-top: 3px solid var(--ink); font-size: var(--small); }
.lf-sec--end > h2 { font-size: var(--h4); }

/* 6. End matter --------------------------------------------------------------- */
.lf__end { grid-column: 4 / 10; margin-top: clamp(3rem, 5vw, 6rem); }
/* share, then 'Back to top', on one ruled line */
.lf-endrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: clamp(1.25rem, 2vw, 2rem);
	border-top: var(--rule);
}
.lf-endrow .post-share { margin: 0; padding: 0; border: 0; }
.lf-top { margin: 0; }
.lf-top a {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--small);
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.lf-top a:hover { text-decoration-thickness: 2px; }
.lf-top svg { width: 1em; height: 1em; rotate: 180deg; }
.lf-rel {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: end;
	margin-top: clamp(2.5rem, 4vw, 4.5rem);
}
.lf-rel .service-card { grid-column: 1 / 5; }
.lf-rel .service-card__more { opacity: 1; transform: none; }
/* One card alone, not a row of four: the homepage's 141px of air under the
   glyph would leave a tall empty card and a dead zone beside it. */
.lf-rel .service-card__icon { margin-bottom: clamp(1.75rem, 3.2vw, 3.75rem); }
/* the pill holds one line; where its cell is narrow it runs on into the
   empty margin column rather than wrapping. Its bottom edge sits on the
   card's inner padding line, level with the card's own 'Learn more' pill. */
.lf-rel > .btn { grid-column: 5 / -1; justify-self: start; white-space: nowrap; margin-bottom: var(--card-pad); }
.lf__grid > .pnav { grid-column: 1 / -1; margin-top: clamp(3rem, 5vw, 6rem); }

/* 7. Contents bar (≤1024 or under 760 tall), its sheet, the no-script list --- */
.toc-bar {
	position: relative;
	z-index: 90;
	height: 52px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: var(--rule);
}
.toc-bar__inner { display: flex; align-items: center; gap: 0.85rem; height: 100%; }
.toc-bar__now {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--small);
	color: var(--ink);
}
.toc-bar__n { color: var(--acc-text); font-variant-numeric: tabular-nums; }
.toc-bar__btn {
	flex: none;
	padding: 0.5em 1.1em;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--tiny);
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.toc-bar__btn:hover { border-color: var(--green); background: var(--green-tint); }
/* the chassis readbar, moved from the top of the window to the bar's edge */
.toc-bar .readbar { position: absolute; top: auto; bottom: -1px; height: 2px; z-index: 1; }

.toc-sheet {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: none;
	max-height: 80dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: var(--white);
	color: var(--ink);
	box-shadow: 0 -1px 2px rgba(20, 22, 27, 0.05), 0 -24px 60px rgba(20, 22, 27, 0.14);
	overflow: hidden;
}
.toc-sheet[open] { display: flex; flex-direction: column; animation: lf-sheet 0.3s var(--ease-out) both; }
@keyframes lf-sheet { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: none; } }
.toc-sheet::backdrop { background: rgba(20, 22, 27, 0.42); }
.toc-sheet__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem var(--gutter);
	border-bottom: var(--rule);
}
.toc-sheet__t { flex: 1; margin: 0; font-family: var(--font-head); font-weight: 600; font-size: var(--base); }
.toc-sheet__x {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--white);
	cursor: pointer;
}
.toc-sheet__x::before,
.toc-sheet__x::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	border-radius: 2px;
	background: var(--ink);
	rotate: 45deg;
}
.toc-sheet__x::after { rotate: -45deg; }
.toc-sheet__x:hover { border-color: var(--green); background: var(--green-tint); }
.toc-sheet__nav {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.25rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
}
.toc-list--sheet a,
.toc-list--details a {
	grid-template-columns: 36px minmax(0, 1fr);
	padding: 0.7rem 0;
	font-size: 1rem;
	border-bottom: var(--rule);
}
.toc-list--sheet .toc-list__n,
.toc-list--details .toc-list__n { line-height: 1.35rem; }

.toc-details { border-top: var(--rule-strong); border-bottom: var(--rule); }
.toc-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--base);
	color: var(--ink);
}
.toc-details summary::-webkit-details-marker { display: none; }
.toc-details summary::after {
	content: '';
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.3em;
	border-right: 2px solid;
	border-bottom: 2px solid;
	rotate: 45deg;
}
.toc-details[open] summary::after { rotate: 225deg; }
.toc-details .toc-list { padding-bottom: 1rem; }

/* 8. Responsive --------------------------------------------------------------- */
/* Wherever the rail cannot hold — 1024 and under, or a window under 760px
   tall (a 1366x768 laptop's browser viewport), where the rail is not sticky
   and would scroll away for the whole guide — the bar takes over. */
@media (max-width: 1024px), (max-height: 759px) {
	.rail-toc,
	.lf__read::before { display: none; }
	.lf__read { display: block; }
	.lf__article,
	.lf__end { grid-column: 1 / -1; grid-row: auto; max-width: 44em; }
	.lf__article { font-size: var(--read); }
	.lf-sec { display: block; }
	.lf-sec > h2 { scroll-margin-top: calc(52px + 2.5rem); }
	.lf-pull { max-width: none; }

	/* the margin marker becomes one inline label: '§ 07 / 31' */
	.lf-mark {
		display: block;
		margin: 0 0 0.9rem;
		font-weight: 500;
		font-size: var(--tiny);
		line-height: 1.3;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--acc-text);
	}
	.lf-mark__big { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; }
	.lf-mark__s { font-size: inherit; vertical-align: baseline; }
	.lf-mark__of { color: inherit; }
	.lf-mark__dup { display: none; }

	.toc-details { display: block; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
	html.lf-live .toc-details { display: none; }
	html.lf-live .toc-bar { display: block; }
}
/* the bar holds under the header wherever the window has height to spare */
@media (max-width: 1024px) and (min-height: 480px), (min-height: 480px) and (max-height: 759px) {
	.toc-bar { position: sticky; top: var(--header-h); }
}

@media (max-width: 860px) {
	.lf-rel { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
	.lf-rel .service-card,
	.lf-rel > .btn { grid-column: 1 / -1; }
	.lf-rel > .btn { margin-bottom: 0; }
	.lf-list { padding-left: 1.25em; }
	.lf-m { left: -1.15em; }
}

@media (max-width: 640px) {
	/* the chassis corner petal holds the top right here; the post's long
	   crumb wraps before it rather than running on under the navy */
	.mast--lf .breadcrumb { max-width: 58vw; }
	.lf-meta { gap: 0.5rem 1rem; }
	.toc-bar__inner { gap: 0.65rem; }
	.toc-bar__now { font-size: var(--tiny); }
}