/*
 * 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.
 *
 * Copyright © 2026 Daryo89 Ltd. All rights reserved. Licensed, not sold;
 * see NOTICE.md in the plugin folder.
 */

: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 — horizontal only.
 *
 * 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 it starts at the top. Until 2.4.2 the block also took auto
 * top and bottom margins, which floated short content to the middle of
 * the wrapper's minimum height; the request was for the portal to sit
 * at the top like the rest of a page and only be centred side to side.
 * The wrapper keeps its minimum height so the page footer does not jump
 * up under a short list, but the space is now below the content rather
 * than around it.
 */
.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: 0;
	margin-bottom: 0;
	margin-inline: auto;
	margin-block: 0;
}

/* 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 data need room too. Without a floor, names wrap to
   "Jane / Okafor" and a sort code to "**** / 4021", which is harder to
   scan than a scrollbar. Switched off below 700px, where the rows become
   cards and wrapping is exactly what should happen. */
@media (min-width: 701px) {
	.d89il-table--wide {
		min-width: 56rem;
	}

	/* Short values that read worse broken across two lines. */
	.d89il-table--wide td:nth-child(2),
	.d89il-table--wide td:nth-child(4),
	.d89il-table--wide td:last-child {
		white-space: nowrap;
	}
}

/* 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);
}

/* ------------------------------------------------------------ queries */

.d89il-thread {
	margin: 0 0 1.75rem;
}

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

/* An internal note has to be unmistakable at a glance. Somebody skimming a
   thread and replying to the wrong thing sends their own working out to
   the contractor. */
.d89il-message--internal {
	border-left-color: #b45309;
	border-style: dashed;
}

.d89il-message__who {
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

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

/* ---------------------------------------------------------------- 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;
}

/* Help text under an inline form sits on its own row, not squeezed
   between the field and the button. */
.d89il-inline-form .d89il-help {
	flex-basis: 100%;
	margin-top: 0;
}

/* A field with a button welded to its right. */
.d89il-lookup {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.d89il-lookup input {
	flex: 1 1 auto;
	min-width: 0;
}

.d89il-lookup .d89il-button {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

/* WordPress's own inline notice classes arrive on the lookup result, so
   they are given the portal's own look rather than the dashboard's. */
.d89il-note.notice-success { border-left-color: #15803d; }
.d89il-note.notice-warning { border-left-color: #b45309; }
.d89il-note.notice-error   { border-left-color: #b91c1c; }

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

/* -------------------------------------------------------------- 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;
}

/* ------------------------------------------------- theme independence */

/*
 * Why this block exists.
 *
 * The portal renders inside whatever the theme calls its content area,
 * so every element here is also matched by the theme's own content
 * rules. Those are nearly always descendant selectors — `.entry-content
 * a`, `.entry-content td` — and a descendant selector beats a single
 * class, so the theme wins both on properties this file never mentioned
 * and on several it did.
 *
 * Measured on a Kadence site, that produced: tabs in the theme's link
 * blue with underlines under them, a button-styled link carrying an
 * underline and a stray bottom border, a drop shadow beneath a
 * transparent button, and a full 1px grid drawn around every table cell.
 * None of it is a theme bug. Kadence exempts `.button` from its content
 * link rules; it has no way to know about `.d89il-button`.
 *
 * Two techniques, in this order:
 *
 * 1. Specificity, wherever it is enough. The controls below are written
 *    as `.d89il a.d89il-tab` — two classes and an element — which
 *    clears the ordinary `.entry-content a` shape with no escalation.
 *
 * 2. `!important`, on a closed list of five properties — colour,
 *    background, border, text-decoration and box-shadow — and only on
 *    the plugin's own buttons and tabs. A theme writing `body .site
 *    .entry-content button` outranks anything reasonable this file can
 *    spell, and those five are the ones that decide whether a control is
 *    still legible: white text left on a background the theme turned
 *    transparent cannot be read at all.
 *
 *    The line is drawn there deliberately. Border radius, text
 *    transform, letter spacing and font are all left alone, because a
 *    theme changing those has restyled the button rather than broken it,
 *    and a site is entitled to that. Nothing about layout or spacing is
 *    forced either. The custom properties at the top of this file remain
 *    the supported way to restyle the portal, and they still work, since
 *    every declaration below resolves through them rather than around
 *    them: set `--d89il-accent` and the buttons follow.
 */

/* Controls, not content links. */
.d89il a.d89il-button,
.d89il button.d89il-button,
.d89il a.d89il-tab {
	text-decoration: none !important;
	background-image: none !important;
	box-shadow: none !important;
	transition: none;
}

/* A button owns its own colour, whatever the theme does to links. */
.d89il a.d89il-button,
.d89il button.d89il-button {
	border: 1px solid var(--d89il-accent) !important;
	background-color: var(--d89il-accent) !important;
	color: #fff !important;
}

.d89il a.d89il-button:hover,
.d89il a.d89il-button:focus,
.d89il button.d89il-button:hover,
.d89il button.d89il-button:focus {
	color: #fff !important;
	background-color: var(--d89il-accent) !important;
}

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

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

/* A tab's underline is the current-page indicator, so a theme's link
   underline has to stay off it or there are two lines saying different
   things. */
.d89il a.d89il-tab {
	color: var(--d89il-muted) !important;
	border-bottom: 3px solid transparent !important;
}

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

/*
 * Table cells. A theme that boxes every cell turns the invoice list into
 * a spreadsheet grid. Only the three sides the plugin never draws are
 * forced off; the bottom rule is left to ordinary specificity so that
 * the phone layout below 700px — where rows become cards and the last
 * cell in a card drops its rule — still overrides it.
 */
.d89il table th {
	border: 0 !important;
}

/*
 * Every table the portal draws, not just the invoice list: the fact
 * table on an invoice was still being boxed because the armour named
 * one class instead of the element.
 *
 * The one cell in the whole stylesheet that genuinely wants a top rule
 * is the running-total row on the phone line form, so it is excluded by
 * name rather than the rule being weakened for everything.
 */
.d89il table td:not(.d89il-amount) {
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

.d89il table td.d89il-amount {
	border-left: 0 !important;
	border-right: 0 !important;
}

.d89il .d89il-table td,
.d89il .d89il-facts th,
.d89il .d89il-facts td {
	border-bottom: 1px solid var(--d89il-line);
}

/* Fields, for themes that shadow or gradient their inputs. */
.d89il .d89il-field input,
.d89il .d89il-field select,
.d89il .d89il-field textarea,
.d89il .d89il-lines input,
.d89il .d89il-lines select,
.d89il .d89il-inline-form input,
.d89il .d89il-lookup input {
	box-shadow: none;
	background-image: none;
}

/* ------------------------------------------------------ how it works */

/* Numbered steps: a bold title and a line of detail under it, with the
   number set off to the left so the eye reads it as a sequence. */
.d89il-steps {
	list-style: none;
	counter-reset: d89il-step;
	margin: 0 0 1.25rem 0;
	padding: 0;
}

.d89il-steps li {
	position: relative;
	counter-increment: d89il-step;
	padding: 0 0 1rem 2.75rem;
}

.d89il-steps li::before {
	content: counter(d89il-step);
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--d89il-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.9rem;
	text-align: center;
}

.d89il-steps li strong {
	display: block;
	margin-bottom: 0.2rem;
}

.d89il-steps li span {
	display: block;
	color: var(--d89il-muted);
}

.d89il-plain {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.d89il-plain li {
	margin-bottom: 0.5rem;
}

/* ------------------------------------------------------ communications */

.d89il-communication { margin-bottom: 1.25rem; }
.d89il-communication-subject { margin: 0.25rem 0 0.75rem; font-size: 1.1rem; }
.d89il-communication-body { margin-bottom: 1rem; }
.d89il-communication-footer {
	color: var(--d89il-muted);
	font-size: 0.875rem;
	border-top: 1px solid var(--d89il-line);
	padding-top: 0.75rem;
}

/* -------------------------------------------------------- HCA and rates */

.d89il-hca-note { margin: 0 0 1rem 0; }
.d89il-rate-flag { font-size: 0.8rem; white-space: nowrap; }

/* ---------------------------------------------------------- 2FA warning */

.d89il-2fa-warning { margin: 0 0 1rem 0; }
.d89il-2fa-warning .d89il-button { margin-top: 0.5rem; }


/* ------------------------------------------------------------- the road */

/* Submitted -> approved, awaiting payment -> paid. The same three steps
   on every screen, so "where has my invoice got to" is answered by
   looking rather than by asking. */
.d89il-road {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
}

.d89il-road-step {
	position: relative;
	flex: 1 1 0;
	min-width: 8rem;
	padding: 0 0.5rem 0 0;
	text-align: center;
}

/* The line joining one step to the next, drawn behind the marks. */
.d89il-road-step::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--d89il-line, #d7dbe0);
}

.d89il-road-step:first-child::before { display: none; }
.d89il-road-step.is-done::before,
.d89il-road-step.is-now::before { background: var(--d89il-accent, #3B82F6); }
.d89il-road-step.is-problem::before { background: #b45309; }

.d89il-road-mark {
	position: relative;
	display: block;
	width: 0.85rem;
	height: 0.85rem;
	margin: 0.2rem auto 0.5rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--d89il-line, #d7dbe0);
}

.d89il-road-step.is-done .d89il-road-mark {
	background: var(--d89il-accent, #3B82F6);
	border-color: var(--d89il-accent, #3B82F6);
}

.d89il-road-step.is-now .d89il-road-mark {
	background: #fff;
	border-color: var(--d89il-accent, #3B82F6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.d89il-road-step.is-problem .d89il-road-mark {
	background: #b45309;
	border-color: #b45309;
}

.d89il-road-label {
	display: block;
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--d89il-muted, #6e777f);
}

.d89il-road-step.is-now .d89il-road-label,
.d89il-road-step.is-problem .d89il-road-label { font-weight: 700; color: inherit; }
.d89il-road-step.is-problem .d89il-road-label { color: #b45309; }

.d89il-road-note {
	display: block;
	font-size: 0.75rem;
	color: var(--d89il-muted, #6e777f);
	margin-top: 0.15rem;
}

@media (max-width: 480px) {
	.d89il-road { display: block; }
	.d89il-road-step { text-align: left; padding: 0 0 0 1.5rem; min-height: 1.9rem; }
	.d89il-road-step::before { top: 0; left: 0.38rem; width: 2px; height: 100%; }
	.d89il-road-mark { position: absolute; left: 0; top: 0.25rem; margin: 0; }
}

/* ------------------------------------------------------------ progress */

/* Submitted -> approved, awaiting payment -> paid. Horizontal where
   there is room, stacked on a phone, and never relying on colour alone:
   the step it is on is also the only bold one. */
.d89il-progress {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 1.25rem;
	padding: 0;
}

.d89il-progress-step {
	flex: 1 1 0;
	min-width: 8rem;
	position: relative;
	padding: 0 0.5rem 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--d89il-muted);
}

/* The line joining one step to the next, behind the marks. */
.d89il-progress-step::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--d89il-line);
}

.d89il-progress-step:last-child::before {
	display: none;
}

.d89il-progress-mark {
	position: relative;
	z-index: 1;
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0 auto 0.4rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--d89il-line);
}

.d89il-progress-label {
	display: block;
	line-height: 1.3;
}

.d89il-progress-note {
	display: block;
	font-size: 0.8rem;
	opacity: 0.85;
}

.d89il-progress-step.is-done .d89il-progress-mark {
	background: var(--d89il-accent);
	border-color: var(--d89il-accent);
}

.d89il-progress-step.is-done::before {
	background: var(--d89il-accent);
}

.d89il-progress-step.is-now .d89il-progress-mark {
	background: #fff;
	border-color: var(--d89il-accent);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.d89il-progress-step.is-now {
	color: var(--d89il-ink);
	font-weight: 600;
}

.d89il-progress-step.is-problem .d89il-progress-mark {
	background: #b45309;
	border-color: #b45309;
}

.d89il-progress-step.is-problem {
	color: #b45309;
	font-weight: 600;
}

@media (max-width: 600px) {
	.d89il-progress {
		display: block;
	}

	.d89il-progress-step {
		display: flex;
		align-items: baseline;
		gap: 0.5rem;
		text-align: left;
		padding: 0 0 0.6rem;
		min-width: 0;
	}

	.d89il-progress-step::before {
		top: 1.1rem;
		left: 0.5rem;
		width: 2px;
		height: 100%;
	}

	.d89il-progress-mark {
		margin: 0;
		flex: 0 0 auto;
	}

	.d89il-progress-note::before {
		content: " — ";
	}

	.d89il-progress-note {
		display: inline;
	}
}

/* --------------------------------------------------------- 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 side to side and sitting at the top, the same as every
 * other screen since 2.4.2. It used to be centred vertically as well,
 * being the one genuinely short screen; that went with the rest so the
 * portal behaves one way everywhere.
 *
 * The min-height is on the compound selector so the mobile rule that
 * releases it elsewhere cannot win here; it keeps the footer from
 * jumping up under the card.
 */
.d89il.d89il--signin {
	min-width: 0;
	min-height: 420px; /* fallback */
	min-height: clamp(420px, 72vh, 760px);

	/* No justify-content here, deliberately: it would centre vertically,
	   and on a short frame it overflows in both directions and pushes the
	   heading above the scroll origin. That clipped "Sign in to invoice
	   us" in testing, before the card was moved to the top anyway. */
}

.d89il-signin-card {
	width: 100%;
	max-width: 24rem;
	margin: 0 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%;
	}

	/* The lookup button drops under its field rather than squeezing it. */
	.d89il-lookup {
		flex-direction: column;
	}

	.d89il-lookup .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;
	}
}

/* ---------------------------------------------------------------------
 * The same view, drawn inside wp-admin.
 *
 * Everything above is sized for a front-end content column: a maximum
 * width so a line of prose does not run to forty words, and auto margins
 * so it sits in the middle of whatever the theme gives it. Both are right
 * there and wrong here. The dashboard has already done the centring and
 * already has a sidebar taking its share, so a second 1100px cap inside
 * it leaves the queries screen occupying a narrow strip of a wide monitor
 * with empty space either side.
 *
 * The floors go too. A 700px minimum and a 500px minimum height are there
 * to stop a theme squashing the portal into a column or leaving the
 * footer stranded under a short list; wp-admin does neither.
 * ------------------------------------------------------------------ */

.d89il--in-admin {
	--d89il-min-w: 0;
	--d89il-min-h: 0;
	--d89il-max-w: none;

	min-height: 0;
}

.d89il--in-admin .d89il-inner {
	max-width: none;

	/* Physical first, for the same reason as the rule it overrides. */
	margin-left: 0;
	margin-right: 0;
	margin-inline: 0;
}

/* A label column set as a proportion of a 1100px block is reasonable.
   The same proportion of a 2000px one is a third of the monitor holding
   the words "Raised by". */
.d89il--in-admin .d89il-facts th {
	width: 220px;
}

/* The conversation itself reads badly at full monitor width — that is
   prose, and the cap above exists for prose. The tables want the room;
   the messages do not. */
.d89il--in-admin .d89il-trail,
.d89il--in-admin .d89il-form {
	max-width: 1100px;
}

/* ---------------------------------------------------------------------
 * The verdict on a chosen file, beside the button.
 *
 * Written by file-check.js the moment a file is picked. Colour alone
 * never carries the meaning — the tick or the cross is a character, and
 * the words say what is wrong — because a red-green distinction is the
 * one a colour-blind reader is most likely to miss, and this is the
 * message that decides whether they waste ten minutes typing an invoice.
 * ------------------------------------------------------------------ */

.d89il-filecheck {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.9375em;
	line-height: 1.45;
}

.d89il-filecheck:empty {
	display: none;
}

.d89il-filecheck__mark {
	display: inline-block;
	min-width: 1.25em;
	font-weight: 700;
}

.d89il-filecheck--ok {
	color: #106b33;
}

.d89il-filecheck--bad {
	color: #b32d2e;
	font-weight: 600;
}

.d89il-filecheck__help {
	display: block;
	margin-left: 1.25em;
	font-weight: 400;
	color: inherit;
	opacity: 0.9;
}

/* The reason the Send button is unavailable, under the button itself. */

.d89il-submit-blocked {
	margin: 0.4rem 0 0;
	color: #b32d2e;
	font-weight: 600;
	font-size: 0.9375em;
}

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

.d89il-submit button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * The heading above each row of figures.
 *
 * Clinical and non-clinical money answer different questions, so the
 * rows are labelled rather than left to be told apart by position.
 * ------------------------------------------------------------------ */

.d89il-figures__heading {
	margin: 1.25rem 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #4b5563;
}

.d89il-figures__heading:first-child {
	margin-top: 0;
}

/* A pill broken over two lines — "Approved," then "awaiting payment" —
 * needs its own line height, or the two lines sit on top of each other. */

.d89il-pill {
	line-height: 1.35;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Our own reference, under the contractor's invoice number.
 *
 * A point smaller than the muted text around it and held on one line:
 * "CCD--ID00007-02" is a single identifier and breaking it after "CCD--"
 * makes it read as two things, as well as making every row taller.
 *
 * Only on a screen wide enough to hold it. On a phone the tables become
 * stacked cards, and a reference that refuses to wrap there would run
 * off the side instead.
 * ------------------------------------------------------------------ */

.d89il-ref {
	font-size: 0.75rem;
}

@media (min-width: 701px) {
	.d89il-ref {
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------
 * Reports (2.8.0).
 *
 * The same report is drawn in the dashboard and on this tab. The cards
 * are the queue's figure cards with a third line; the bars are plain
 * spans with a width, because a chart library for seven bars a week is
 * a dependency with no return.
 * ------------------------------------------------------------------ */

.d89il-report__filters {
	align-items: flex-end;
}

.d89il-report__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.8125rem;
	min-width: 0;
}

.d89il-report__field > span {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d89il-muted);
}

.d89il-report__filters select,
.d89il-report__filters input {
	min-height: 38px;
}

.d89il-report__hint {
	flex: 1 0 100%;
	margin: 0.25rem 0 0;
}

.d89il-report__period {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--d89il-line);
	border-left: 3px solid var(--d89il-accent);
	border-radius: var(--d89il-radius);
	background: var(--d89il-surface);
}

.d89il-report__range {
	margin: 0;
}

.d89il-report__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.d89il-report__tools .d89il-inline-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

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

.d89il-report__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 0 0 1.5rem;
}

.d89il-report__card {
	display: block;
	flex: 1 1 170px;
	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;
}

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

.d89il-report__card--good  { border-left-color: #15803d; }
.d89il-report__card--warn  { border-left-color: #b45309; }
.d89il-report__card--bad   { border-left-color: #b91c1c; }
.d89il-report__card--wait  { border-left-color: #1d4ed8; }
.d89il-report__card--plain { border-left-color: var(--d89il-muted); }

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

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

.d89il-report__small {
	display: block;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.d89il-report__table .d89il-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

.d89il-report__total td {
	border-top: 2px solid var(--d89il-ink);
	border-bottom: 0;
}

.d89il-report__barcell {
	min-width: 140px;
}

.d89il-report__bar {
	display: block;
	height: 7px;
	border-radius: 4px;
	margin: 3px 0;
	min-width: 2px;
	max-width: 100%;
}

.d89il-report__bar--paid     { background: #15803d; }
.d89il-report__bar--received { background: #93c5fd; }

.d89il-report__pct {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.d89il-report__legend {
	font-size: 0.75rem;
	color: var(--d89il-muted);
	white-space: nowrap;
}

.d89il-report__swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	vertical-align: middle;
}

.d89il-report__swatch--paid     { background: #15803d; }
.d89il-report__swatch--received { background: #93c5fd; }

@media (max-width: 700px) {
	.d89il-report__field {
		flex: 1 1 100%;
	}

	.d89il-report__field--date {
		flex: 1 1 45%;
	}

	.d89il-report__field select,
	.d89il-report__field input,
	.d89il-report__filters > .d89il-button {
		width: 100%;
		min-height: 42px;
	}

	.d89il-report__table tfoot,
	.d89il-report__table tfoot tr,
	.d89il-report__table tfoot td {
		display: block;
		width: 100%;
	}

	.d89il-report__table .d89il-num {
		text-align: right;
	}

	.d89il-report__barcell {
		display: block;
		min-width: 0;
	}

	.d89il-report__barcell::before {
		display: block;
		margin-bottom: 0.25rem;
	}
}

@media print {
	.d89il-tabs,
	.d89il-account,
	.d89il-report__filters,
	.d89il-report__tools,
	.d89il-credit {
		display: none !important;
	}

	.d89il {
		min-height: 0;
	}

	.d89il-report__card,
	.d89il-report__period {
		break-inside: avoid;
		background: none;
	}

	.d89il-report__bar--paid     { background: #15803d !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.d89il-report__bar--received { background: #93c5fd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}