/*
 * D89 Invoice Lite — contractor portal.
 *
 * Two jobs, and they pull against each other.
 *
 * On a desktop the portal should have room: a comfortable floor of 700px
 * wide and 500px tall so it does not sit as a cramped strip inside a
 * narrow theme column. On a phone it has to fit a 360px screen with no
 * sideways scrolling at all.
 *
 * A fixed min-width of 700px would satisfy the first and destroy the
 * second — every screen would scroll horizontally, which is the worst
 * thing a form can do on a phone. So the floor is conditional: it applies
 * only from the breakpoint where the viewport can actually afford it, and
 * min() keeps it inside the containing block so a narrow theme column is
 * never overflowed either.
 *
 * The floors are custom properties, so a site can change them without
 * touching this file:
 *
 *   .d89il { --d89il-min-w: 820px; --d89il-min-h: 60vh; }
 *
 * Below 700px both data tables stop being tables. Rows become cards and
 * every cell carries its own label, which is why the markup writes
 * data-label on each td — a six column table of inputs on a phone is not
 * something you can scroll your way out of.
 *
 * Tokens read from the recruit plugin's :root where it has set them, so on
 * a site running both, one palette wins and it is the site's.
 */

:root {
	--d89il-accent: var(--d89cr-accent, #2563EB);
	--d89il-ink: var(--d89cr-ink, #22303c);
	--d89il-line: var(--d89cr-line, rgba(128, 128, 128, 0.28));
	--d89il-muted: var(--d89cr-muted, rgba(128, 128, 128, 0.95));
	--d89il-surface: var(--d89cr-surface, rgba(128, 128, 128, 0.06));
	--d89il-radius: var(--d89cr-radius, 8px);
}

.d89il {
	/* Overridable floors. */
	--d89il-min-w: 700px;
	--d89il-min-h: 500px;
	--d89il-max-w: 1100px;

	width: 100%;
	box-sizing: border-box;

	/* A column, so the inner block can take auto margins and centre
	   itself in whatever space is left over. */
	display: flex;
	flex-direction: column;

	/* Grows with the viewport, but never below the floor and never so
	   tall that a short page leaves the footer stranded. */
	min-height: 500px; /* fallback for engines without clamp() */
	min-height: clamp(var(--d89il-min-h), 62vh, 900px);

	font-size: 1rem; /* fallback */
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
	line-height: 1.55;

	/* A stray wide element inside a card is the usual cause of a page
	   that scrolls sideways on a phone for no visible reason. */
	overflow-wrap: break-word;
}

.d89il *,
.d89il *::before,
.d89il *::after {
	box-sizing: inherit;
}

/*
 * The centring.
 *
 * Horizontally with an auto inline margin and a maximum width, so the
 * portal sits in the middle of a wide theme rather than running to the
 * edges — a line of text 1800px long is not readable.
 *
 * Vertically with `margin-block: auto` rather than `justify-content:
 * center`. They look identical when the content is short, and they are
 * not the same thing when it is long: centred justification overflows a
 * flex container in both directions, so the top of a long invoice list
 * would be cut off above the scroll origin and unreachable. An auto
 * margin distributes only the space that is actually spare, so short
 * content centres and long content simply starts at the top.
 */
.d89il-inner {
	width: 100%;
	max-width: var(--d89il-max-w);

	/* Physical properties first. The logical ones say the same thing and
	   are what the file would prefer to use, but an engine that does not
	   know them discards the declaration and the block goes back to the
	   left edge — which is exactly what happened in testing. */
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	margin-inline: auto;
	margin-block: auto;
}

/* The width floor, only where there is width to spare. min() keeps it
   inside a narrow theme column rather than bursting out of one. */
@media (min-width: 760px) {
	.d89il {
		min-width: min(var(--d89il-min-w), 100%);
	}
}

.d89il-title {
	margin: 0 0 1rem;
	font-size: 1.6rem; /* fallback */
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
	line-height: 1.2;
}

.d89il-standfirst {
	font-size: 1.0625em;
	margin: 0 0 1.5rem;
}

.d89il-muted {
	color: var(--d89il-muted);
	font-size: 0.8125rem;
}

.d89il-help {
	display: block;
	color: var(--d89il-muted);
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

/* ------------------------------------------------- title and account */

.d89il-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1rem;
}

.d89il-head .d89il-title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.d89il-account {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	flex: 0 0 auto;
	font-size: 0.8125rem;
}

.d89il-account__who {
	color: var(--d89il-muted);
}

.d89il-account__out {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--d89il-line);
	border-radius: calc(var(--d89il-radius) - 3px);
	color: var(--d89il-accent);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.d89il-account__out:hover,
.d89il-account__out:focus {
	color: var(--d89il-accent);
	border-color: var(--d89il-accent);
	background: var(--d89il-surface);
}

/* ---------------------------------------------------------------- tabs */

.d89il-tabs {
	display: flex;
	gap: 0.25rem;
	border-bottom: 1px solid var(--d89il-line);
	margin: 0 0 1.75rem;
	flex-wrap: wrap;
}

.d89il-tab {
	padding: 0.75rem 1.1rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d89il-muted);
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}

.d89il-tab.is-current {
	color: var(--d89il-accent);
	border-bottom-color: var(--d89il-accent);
}

.d89il-tab:focus-visible {
	outline: 2px solid var(--d89il-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- notices */

.d89il-note {
	padding: 0.9rem 1.1rem;
	border-radius: var(--d89il-radius);
	border-left: 3px solid var(--d89il-accent);
	background: var(--d89il-surface);
	margin: 0 0 1.5rem;
}

.d89il-note--good { border-left-color: #15803d; }
.d89il-note--bad  { border-left-color: #b91c1c; }
.d89il-note--warn { border-left-color: #b45309; }

/* -------------------------------------------------------------- panels */

.d89il-panel {
	margin: 0 0 2rem;
}

.d89il-panel-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--d89il-accent);
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 1rem;
}

.d89il-panel-title::after {
	content: "";
	flex: 1;
	height: 1px;
	max-width: 80px;
	background: var(--d89il-line);
}

/* --------------------------------------------------- definition tables */

.d89il-facts {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375em;
	margin-bottom: 1rem;
}

.d89il-facts th {
	width: 32%;
	padding: 0.8rem 1rem 0.8rem 0;
	text-align: left;
	vertical-align: top;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--d89il-muted);
	border-bottom: 1px solid var(--d89il-line);
}

.d89il-facts td {
	padding: 0.8rem 0;
	vertical-align: top;
	border-bottom: 1px solid var(--d89il-line);
}

/* --------------------------------------------------------- data tables */

.d89il-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.25rem;
}

.d89il-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375em;
}

.d89il-table th {
	padding: 0.7rem 0.8rem;
	text-align: left;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.d89il-table td {
	padding: 0.85rem 0.8rem;
	border-bottom: 1px solid var(--d89il-line);
	vertical-align: top;
}

.d89il-lines td {
	padding: 0.5rem 0.4rem;
}

.d89il-lines input,
.d89il-lines select {
	width: 100%;
	min-width: 8ch;
}

/* Seven columns of controls do not fit a narrow content column without
   squashing the dropdowns to "Monday to Frida / y, daytime", which is
   worse than a scrollbar. So the table keeps a working minimum and the
   wrapper scrolls it — on wide screens nothing scrolls at all, and this
   whole rule is switched off below 700px where the rows become cards. */
@media (min-width: 701px) {
	.d89il-lines {
		min-width: 46rem;
	}

	.d89il-lines select {
		min-width: 11ch;
	}

	/* "Monday to Friday, daytime" is the longest thing in the row and it
	   sets the width of the column, not the other way round. */
	.d89il-lines .d89il-band {
		min-width: 14ch;
	}

	.d89il-lines .d89il-amount {
		padding-left: 0.8rem;
	}
}

.d89il-amount,
.d89il-total {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------- the finance queue */

.d89il-figures {
	/* Flex rather than grid. It is a row of four cards that wraps, which
	   is the one thing flexbox has always done well, and it degrades to a
	   readable stack anywhere `repeat(auto-fit)` is not understood
	   instead of collapsing to one column on screens that could show
	   four. */
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 0 0 2rem;
}

.d89il-figure {
	display: block;
	flex: 1 1 160px;
	min-width: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--d89il-line);
	border-left: 4px solid var(--d89il-accent);
	border-radius: var(--d89il-radius);
	background: var(--d89il-surface);
	text-decoration: none;
	color: inherit;
}

.d89il-figure:hover,
.d89il-figure:focus {
	color: inherit;
	border-left-width: 6px;
}

.d89il-figure--good { border-left-color: #15803d; }
.d89il-figure--warn { border-left-color: #b45309; }
.d89il-figure--bad  { border-left-color: #b91c1c; }

.d89il-figure__count {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.d89il-figure__label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--d89il-muted);
	margin: 0.3rem 0;
}

.d89il-figure__value {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.d89il-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 1.25rem;
}

.d89il-filters select,
.d89il-filters input {
	padding: 0.5rem 0.6rem;
	min-height: 44px;
	border: 1px solid var(--d89il-line);
	border-radius: calc(var(--d89il-radius) - 3px);
	background: transparent;
	color: inherit;
	font: inherit;
}

.d89il-filters .d89il-button {
	min-height: 44px;
	padding: 0.5rem 1.1rem;
}

/* An action is a decision, so each one is boxed rather than run together
   as a row of buttons somebody can hit by accident. */
.d89il-action-card {
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
	border: 1px solid var(--d89il-line);
	border-radius: var(--d89il-radius);
	background: var(--d89il-surface);
}

.d89il-action-card p:last-child {
	margin-bottom: 0;
}

.d89il-trail {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
}

.d89il-trail li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--d89il-line);
}

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

.d89il-pill {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid currentColor;
}

.d89il-pill--good { color: #15803d; }
.d89il-pill--wait { color: #1d4ed8; }
.d89il-pill--warn { color: #b45309; }
.d89il-pill--dead { color: var(--d89il-muted); }

/* ---------------------------------------------------------------- forms */

.d89il-form {
	margin-top: 1rem;
}

.d89il-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* fallback */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.d89il-field label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d89il-muted);
	margin-bottom: 0.35rem;
}

.d89il-field input,
.d89il-field textarea,
.d89il-field select,
.d89il-lines input,
.d89il-lines select,
.d89il-inline-form input {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--d89il-line);
	border-radius: calc(var(--d89il-radius) - 3px);
	background: transparent;
	color: inherit;
	font: inherit;
	min-height: 44px;
}

.d89il-field input:focus,
.d89il-field textarea:focus,
.d89il-field select:focus,
.d89il-lines input:focus,
.d89il-lines select:focus {
	outline: 2px solid var(--d89il-accent);
	outline-offset: 1px;
}

.d89il-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* fallback */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.d89il-choice {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 1rem;
	border: 1px solid var(--d89il-line);
	border-radius: var(--d89il-radius);
	background: var(--d89il-surface);
	cursor: pointer;
	font-size: 0.9375em;
}

.d89il-choice input {
	/* A radio the size of the default is a poor target with a thumb. */
	width: 22px;
	height: 22px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--d89il-accent);
}

.d89il-choice:has(input:checked) {
	border-color: var(--d89il-accent);
	box-shadow: inset 0 0 0 1px var(--d89il-accent);
}

.d89il-route[hidden] {
	display: none;
}

.d89il-inline-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1rem 0;
}

.d89il-inline-form label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d89il-muted);
}

.d89il-inline-form input {
	width: auto;
	min-width: 7rem;
}

/* -------------------------------------------------------------- buttons */

.d89il-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.65rem 1.4rem;
	background: var(--d89il-accent);
	border: 1px solid var(--d89il-accent);
	border-radius: calc(var(--d89il-radius) - 3px);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}

.d89il-button:hover,
.d89il-button:focus {
	filter: brightness(0.92);
	color: #fff;
}

.d89il-button--quiet {
	background: transparent;
	color: var(--d89il-accent);
}

.d89il-button--quiet:hover,
.d89il-button--quiet:focus {
	color: var(--d89il-accent);
	background: var(--d89il-surface);
}

.d89il-submit {
	margin-top: 1.5rem;
}

/* --------------------------------------------------------- authorship */

.d89il-credit {
	margin: 2.5rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--d89il-line);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--d89il-muted);
}

.d89il-credit a {
	color: inherit;
	text-decoration: underline;
}

.d89il-credit a:hover,
.d89il-credit a:focus {
	color: var(--d89il-accent);
}

/* On the sign-in card it sits inside a box that is already bordered, so
   the rule above it would be a second line in a small space. */
.d89il-signin-card .d89il-credit {
	margin-top: 1.5rem;
	padding-top: 0.9rem;
	text-align: center;
}

/* -------------------------------------------------------------- sign in */

/*
 * Signing in.
 *
 * A card, centred both ways. This is the only screen in the portal that is
 * genuinely short, so it is the only one where vertical centring is always
 * doing something — and it is the first thing a new contractor ever sees,
 * so it is worth it looking deliberate rather than like a form that fell
 * to the top left of the page.
 *
 * The min-height is on the compound selector so the mobile rule that
 * releases it elsewhere cannot win here: a sign-in box hugging the top of
 * a phone screen is the one place the centring still reads well.
 */
.d89il.d89il--signin {
	min-width: 0;
	min-height: 420px; /* fallback */
	min-height: clamp(420px, 72vh, 760px);

	/* No justify-content here, deliberately. The card's own `margin: auto`
	   does the centring, and it is the version that degrades safely: where
	   the card is taller than the frame — a short laptop in landscape, or
	   a theme that constrains the height — an auto margin resolves to zero
	   and the card simply starts at the top. `justify-content: center`
	   overflows equally in both directions instead, pushing the heading
	   above the scroll origin where it cannot be reached. That is not
	   theoretical: it clipped "Sign in to invoice us" in testing. */
}

.d89il-signin-card {
	width: 100%;
	max-width: 24rem;
	margin: auto;
	padding: 1.75rem; /* fallback */
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	border: 1px solid var(--d89il-line);
	border-radius: var(--d89il-radius);
	background: var(--d89il-surface);
	text-align: center;
}

.d89il-signin-card .d89il-title {
	margin-bottom: 0.5rem;
	font-size: 1.35rem; /* fallback */
	font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
}

.d89il-signin-card > p {
	color: var(--d89il-muted);
	font-size: 0.9375em;
	margin: 0 0 1.5rem;
}

/* The fields themselves read left to right, whatever the card does. */
.d89il-signin-card form {
	text-align: left;
}

.d89il-signin-card .login-username,
.d89il-signin-card .login-password {
	margin: 0 0 1rem;
}

.d89il-signin-card label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d89il-muted);
}

.d89il-signin-card input[type="text"],
.d89il-signin-card input[type="password"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	min-height: 44px;
	border: 1px solid var(--d89il-line);
	border-radius: calc(var(--d89il-radius) - 3px);
	background: transparent;
	color: inherit;
	font: inherit;
}

.d89il-signin-card input[type="text"]:focus,
.d89il-signin-card input[type="password"]:focus {
	outline: 2px solid var(--d89il-accent);
	outline-offset: 1px;
}

.d89il-signin-card .login-remember {
	margin: 0 0 1.25rem;
	font-size: 0.875em;
	color: var(--d89il-muted);
}

.d89il-signin-card .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: inherit;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

.d89il-signin-card .login-remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--d89il-accent);
}

.d89il-signin-card .login-submit {
	margin: 0;
}

.d89il-signin-card .login-submit input[type="submit"] {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 1.4rem;
	background: var(--d89il-accent);
	border: 1px solid var(--d89il-accent);
	border-radius: calc(var(--d89il-radius) - 3px);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.d89il-signin-card .login-submit input[type="submit"]:hover,
.d89il-signin-card .login-submit input[type="submit"]:focus {
	filter: brightness(0.92);
}

.d89il-signin-card .d89il-help {
	margin-top: 1.25rem;
	text-align: center;
}

/* =======================================================================
   Phones and small tablets.

   Both tables stop being tables. Each row becomes a card and each cell
   grows its own label from data-label, so nothing has to be scrolled
   sideways to be read or filled in.
   ======================================================================= */

@media (max-width: 700px) {

	.d89il {
		/* The desktop floors would force sideways scrolling here. */
		min-width: 0;
		min-height: 0;
	}

	.d89il-scroll {
		overflow-x: visible;
	}

	/* The account block goes under the title rather than beside it, and
	   the sign-out becomes a proper target instead of a small link in a
	   corner. */
	.d89il-head {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.d89il-account {
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.d89il-account__out {
		min-height: 44px;
	}

	.d89il-tabs {
		gap: 0;
	}

	.d89il-tab {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}

	/* iOS zooms the page whenever a focused field is under 16px, and then
	   leaves it zoomed. Every input the contractor touches is 16px here
	   for that reason alone. */
	.d89il input,
	.d89il select,
	.d89il textarea {
		font-size: 16px;
	}

	.d89il-facts th,
	.d89il-facts td {
		display: block;
		width: auto;
		padding: 0;
	}

	.d89il-facts th {
		border: 0;
		padding-top: 0.9rem;
	}

	.d89il-facts td {
		padding-bottom: 0.9rem;
	}

	.d89il-table,
	.d89il-table tbody,
	.d89il-table tr,
	.d89il-table td {
		display: block;
		width: 100%;
	}

	.d89il-table thead {
		/* Hidden from sight, kept for screen readers. */
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.d89il-table tr {
		border: 1px solid var(--d89il-line);
		border-radius: var(--d89il-radius);
		background: var(--d89il-surface);
		padding: 0.2rem 0.9rem;
		margin-bottom: 0.85rem;
	}

	.d89il-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--d89il-line);
		text-align: right;
	}

	.d89il-table tr td:last-child {
		border-bottom: 0;
	}

	/* One flex item for the whole value. Without this, a cell holding a
	   name and a reference on two lines becomes two items and they sit
	   beside each other instead of above and below. */
	.d89il-table td > .d89il-cell {
		flex: 1 1 auto;
		min-width: 0;
		text-align: right;
	}

	.d89il-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--d89il-muted);
	}

	/* The shift rows are a form, not a report, so they stack rather than
	   sitting label-left value-right. */
	.d89il-lines tbody {
		counter-reset: d89il-shift;
	}

	.d89il-lines .d89il-line {
		counter-increment: d89il-shift;
		padding-bottom: 0.9rem;
	}

	.d89il-lines .d89il-line::before {
		content: "Shift " counter(d89il-shift);
		display: block;
		padding: 0.7rem 0 0.5rem;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--d89il-accent);
	}

	.d89il-lines td {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3rem;
		text-align: left;
		border-bottom: 0;
		padding: 0.35rem 0;
	}

	.d89il-lines td.d89il-amount {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		text-align: right;
		padding-top: 0.7rem;
		border-top: 1px solid var(--d89il-line);
		font-weight: 700;
	}

	/* The running total follows you down the form rather than scrolling
	   away above the rows it is adding up. */
	.d89il-lines tfoot {
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 2;
	}

	.d89il-lines tfoot tr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0;
		padding: 0.75rem 0.9rem;
		border: 0;
		border-radius: calc(var(--d89il-radius) - 2px);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);

		/* Opaque, and it has to be. The row backgrounds elsewhere are a
		   translucent grey, which on a sticky element means the shifts
		   scroll visibly through the total sitting on top of them. */
		background: var(--d89il-ink, #22303c);
		color: #fff;
	}

	/* A newly added shift is scrolled to, so it needs room above it
	   rather than landing under the site header. */
	.d89il-lines .d89il-line {
		scroll-margin-top: 5rem;
		scroll-margin-bottom: 5rem;
	}

	.d89il-lines tfoot th {
		display: block;
		padding: 0;
		white-space: normal;
	}

	/* A full width button is a bigger target and reads as the next thing
	   to do, which on a small screen it is. */
	.d89il-button,
	#d89il-add-line {
		width: 100%;
	}

	.d89il-figures {
		gap: 0.6rem;
	}

	/* Two up on a phone rather than four across or one down: the counts
	   stay legible and the block stays short enough to see the queue
	   underneath it without scrolling. */
	.d89il-figure {
		flex: 1 1 calc(50% - 0.3rem);
		padding: 0.8rem 0.9rem;
	}

	.d89il-figure__count {
		font-size: 1.5rem;
	}

	.d89il-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.d89il-filters select,
	.d89il-filters input,
	.d89il-filters .d89il-button {
		width: 100%;
	}

	.d89il-inline-form {
		flex-direction: column;
		align-items: stretch;
	}

	.d89il-inline-form input,
	.d89il-inline-form button {
		width: 100%;
	}

	.d89il-inline-form .d89il-help {
		order: 99;
	}
}

/* Landscape on a short phone: the clamped minimum height would push the
   submit button below the fold on every screen. */
@media (max-height: 520px) {
	.d89il {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.d89il * {
		scroll-behavior: auto !important;
	}
}