@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display&display=swap');
:root {
	/* Cirrus brand palette - sourced from cirrusdesignstudio.com */
	--brand-navy: #202f54;
	--brand-slate: #405162;
	--brand-raspberry: #b2315e;
	--brand-apricot: #e8a070;

	--lighter-colour: #eff4fe;
	--main-colour: #e6eeff;
	--main-colour-darker: #ccd9f0;
	--base-colour: #7d8ea6;
	--header-colour: #202f54;
	--nav-colour: #1a2642;
	--nav-darker-colour: #101828;
	--padding: 15px;
	--form-padding: 8px;
	--border-radius-small: 3px;
	--border-radius-large: 6px;
	--border-radius-xlarge: 12px;
	--loader-background-colour: rgba(32, 47, 84, 0.7);
	--header-height: 50px;
	/* Task boxes - pale theme blue, visibly blue against --main-colour. */
	--task-colour: #dbe6fa;
	--task-completed-colour: #d6f0dc;
}
html,
body {
	background-color: var(--header-colour);
	margin: 0;
	font-size: 95%;
	font-weight: 400;
	font-family: 'DM Sans', sans-serif;
}
* {
	box-sizing: border-box;
	/* border: 1px dotted red; debug helper */
}
hr {
	height: 1px;
	background: var(--header-colour);
	font-size: 0;
	border: 0;
}
strong {
	font-weight: 600
}
h1,
h2,
h3 {
	color: var(--header-colour);
	font-size: 135%;
	text-transform: capitalize;
	font-weight: 600
}
h2 {
	font-size: 125%
}
h3 {
	font-size: 115%
}
/* The header is fixed, so the page starts below it and scrolls under it. The
   padding is on body.has_header (set in start.php - popups have no header).
   Body's navy shows through the header at the top of the page, so it only
   looks translucent once content is underneath. */
html:has(body.has_header) {
	scroll-padding-top: var(--header-height)
}
body.has_header {
	padding-top: var(--header-height)
}
header {
	color: var(--main-colour);
	padding: var(--padding);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 3;
	font-weight: 400;
	/* --header-colour at 75%, with whatever is behind it blurred. */
	background-color: rgba(32, 47, 84, .75);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%)
}
/* No blur support - keep the text readable over whatever scrolls past. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header { background-color: rgba(32, 47, 84, .95) }
}
header .header_version {
	font-size: 80%;
	opacity: .7
}
header img {
	height: 20px;
	width: auto;
	margin-right: 10px;
	margin-bottom: -4px;
}
header span:before {
	content: ' | ';
}
/* The divider and "Good Morning, ..." - hidden on a phone, see mobile.css. */
.header_greeting {
	font-style: normal;
	display: inline-flex;
	align-items: center;
	gap: 6px
}
main {
	background-color: var(--main-colour);
	position: relative;
	z-index: 2
}
footer {
	padding: var(--padding);
	color: var(--main-colour);
	text-align: center;
	position: relative;
	z-index: 1
}
footer p {
	margin: 0;
}

.nav_open,
.nav_open:visited {
	text-decoration: none;
	transition: .25s;
	position: fixed;
	top: 13px;
	right: 24px;
	color: var(--main-colour) !important;
	z-index: 5;
}
.nav_is_open {
	transform: rotate(-90deg)
}
nav {
	position: fixed;
	z-index: 4;
	background-color: var(--nav-colour);
	top: 0;
	padding-top: 48px;
	right: -147px;
	bottom: 0;
	transition: .25s
}
nav a,
nav a:visited {
	color: var(--main-colour);
	text-decoration: none;
	display: block;
	margin: 10px 0 10px 0;
	opacity: .5;
	transition: .5s;
	text-transform: capitalize
}
nav a:hover {
	opacity: 1
}
nav span {
	display: inline-block;
	vertical-align: middle
}
nav div span:nth-child(1) {
	width: 60px;
	font-size: 25px;
	padding-left: 14px
}
nav div span:nth-child(2) {
	width: 150px;
	margin-bottom: -2px;
	padding: 0 var(--padding) 0 5px
}
.nav_show {
	right: 0;
}
section {
	padding: var(--padding);
	padding-right: 80px;
	max-width: 1500px;
	margin: auto;
	position: relative
}
input[type=text],
input[type=password],
input[type=submit],
select,
textarea {
	outline: none;
	appearance: none;
	padding: var(--form-padding);
	font-size: inherit;
	font-style: inherit;
	border-radius: var(--border-radius-small);
	background-color: rgba(255, 255, 255, 0.75);
	resize: none;
	border: none
}
input[type=submit] {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	text-transform: uppercase;
}
input[type=submit]:disabled {
	opacity: .2 !important
}
/* Breadcrumb row - sits above <section>, so it matches its width and padding. */
.breadcrumb {
	max-width: 1500px;
	margin: auto;
	padding: 10px 80px 0 var(--padding);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 90%;
	color: var(--brand-slate)
}
.breadcrumb a,
.breadcrumb a:visited {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--header-colour);
	text-decoration: none
}
.breadcrumb a:hover { text-decoration: underline }
.breadcrumb .material-symbols-outlined { font-size: 1.15em }
.breadcrumb_sep { opacity: .5 }
.breadcrumb_here { font-weight: 600 }
/* A link that looks like the submit buttons above. */
a.button {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: var(--form-padding);
	border-radius: var(--border-radius-small);
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	text-transform: uppercase;
	text-decoration: none
}
a.button:hover {
	background-color: var(--nav-colour)
}
a.button .material-symbols-outlined {
	font-size: 1.2em
}
select {
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 5px;
	margin-right: 2rem;
	padding-right: 2rem;
}
.required_field {
	color: red;
	margin-right: 5px
}
.required_field_marked {
	background-color: rgb(246, 197, 193) !important
}
/* Jodit hides the textarea and puts its editor straight before it. */
.jodit-container:has(+ .required_field_marked) {
	border-color: red !important
}
/* Saved editor content - bullet lists, numbered lists, strikethrough. */
.rich_text p { margin: 0 0 .5em }
.rich_text ul,
.rich_text ol { margin: 0 0 .5em; padding-left: 1.5em }
.rich_text > :last-child { margin-bottom: 0 }
/* ------------------------------------------------------- All Jobs list */
.job_count { margin: 0 0 10px }
.job_filter_reset { margin: 10px 0 0 }
.job_filter_reset a { font-size: 90% }
.job_table th {
	position: sticky;
	top: var(--header-height);
	background: var(--main-colour-darker);
	z-index: 1
}
.job_table a.job_title,
.job_table a.job_title:visited {
	color: inherit;
	text-decoration: none
}
.job_table a.job_title:hover { text-decoration: underline }
/* Completed and cancelled jobs (tr.job_closed) are shown at full strength,
   like the rest - their Status column says what they are. */
.job_table td.job_overdue { color: #c00; font-weight: 600 }
.job_table td.job_due_soon { color: #b26a00; font-weight: 600 }
.job_table .job_over { color: #c00 }
/* Task boxes on a job page: a pale shade of the theme blue, with the task's
   status colour as a strip down the left edge rather than a tint over the
   whole box (a red or orange tint over blue read as purple). */
/* Jump buttons under the Tasks heading, shown at 5+ tasks. The bottom border
   carries the task's status colour; completed tasks are faded to match. */
.task_jump {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--padding)
}
.task_jump a {
	padding: 4px 10px;
	border-radius: var(--border-radius-small);
	border-bottom: 3px solid transparent;
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	font-size: 90%;
	text-decoration: none
}
.task_jump a:hover { background-color: var(--nav-colour) }
.task_jump a.task_completed { opacity: .5 }
.box.task_box {
	background-color: var(--task-colour);
	border-color: var(--main-colour-darker);
	overflow: hidden
}
.box.task_box .box_background {
	right: auto;
	width: 5px;
	opacity: .8
}
.box.task_box.task_completed {
	background-color: var(--task-completed-colour);
	opacity: .5
}
/* The icons under each task sit in a footer band inside the box. It runs to the
   box edges but starts after the 5px status strip, so the strip stays whole. */
.task_actions {
	display: flex;
	align-items: center;
	margin: 12px calc(-1 * var(--padding)) calc(-1 * var(--padding)) calc(5px - var(--padding));
	padding: 8px var(--padding) 8px calc(var(--padding) - 5px);
	background-color: rgba(32, 47, 84, .07)
}
/* Personal "dealt with" tick, far right of the footer. Same colour as the
   other icons, faded until ticked, then bright with a slight shadow. It is not a task status - only its
   owner sees it. */
.box .task_actions .task_tick,
.box .task_actions .task_tick:visited {
	margin: 0 0 0 auto;
	font-size: 1.5em;
	opacity: .2;
	transition: opacity .25s, text-shadow .25s
}
.box .task_actions .task_tick:hover { opacity: .6 }
.box .task_actions .task_tick.ticked {
	opacity: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35)
}
.form {
	display: inline-block
}
/* Not inside the Jodit editor, where it stacks up on every nested element of
   the toolbar. :where keeps this rule's weight as it was. */
.form x-label *:where(:not(.jodit, .jodit *)) {
	margin-top: 5px;
}
.form x-label {
	display: inline-block;
	vertical-align: bottom;
	padding: var(--padding) var(--padding) 0 var(--padding);
}
.form_1 x-label {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.form_2 x-label {
	width: calc(100%/2);
}
.form_3 x-label {
	width: calc(100%/3);
}
.form_4 x-label {
	width: calc(100%/4);
}
.form_5 x-label {
	width: calc(100%/5);
}
.form_6 x-label {
	width: calc(100%/6);
}
/* first and last field of every row, so a second row lines up with the first */
.form_2 x-label:nth-child(2n+1),
.form_3 x-label:nth-child(3n+1),
.form_4 x-label:nth-child(4n+1),
.form_5 x-label:nth-child(5n+1),
.form_6 x-label:nth-child(6n+1) {
	padding-left: 0
}
.form_2 x-label:nth-child(2n),
.form_3 x-label:nth-child(3n),
.form_4 x-label:nth-child(4n),
.form_5 x-label:nth-child(5n),
.form_6 x-label:nth-child(6n) {
	padding-right: 0
}
.debug {
	color: var(--lighter-colour);
	padding: var(--padding);
	border-top: dashed 1px var(--lighter-colour);
	display: block;
	text-decoration: none;
	pointer-events: none;
	opacity: .5
}
.debug ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile_menu {
	display: none;
	background-color: var(--nav-colour);
}
.mobile_menu a,
.mobile_menu a:visited {
	display: block;
	text-align: center;
	color: var(--lighter-colour);
	text-decoration: none;
	padding: var(--form-padding)
}
.mobile_menu a span:nth-child(1) {
	display: none
}
.mobile_menu div {
	display: none
}
.open_mobile_menu {
	background-color: var(--nav-darker-colour)
}
.paging a,
.paging a:visited {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	padding: var(--form-padding);
	margin-right: var(--form-padding);
	border-radius: var(--border-radius-small)
}
.paging a:hover {
	background-color: var(--nav-colour)
}
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: inherit;
	vertical-align: middle;
	background: transparent;
	border-collapse: collapse
}
td,
th {
	padding: var(--form-padding);
}
.data td,
.data th {
	border: 1px solid var(--header-colour);
}
.data tr:nth-child(even) td {
	background-color: rgba(0, 0, 0, 0.10)
}
.data tr:nth-child(odd) td {
	background-color: rgba(0, 0, 0, 0.05)
}
.data th {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	border: none;
	border-radius: 0;
	font-weight: 400;
	text-transform: uppercase
}
.table_divider {
	border-radius: 0 !important;
	background-color: var(--header-colour) !important;
	color: var(--lighter-colour) !important;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase
}
.data tr:last-child td:last-child {
	border-radius: 0 0 var(--border-radius-xlarge) 0 !important;
}
.data tr:last-child td:first-child {
	border-radius: 0 0 0 var(--border-radius-xlarge) !important;
}
.data tr:last-child td {
	border-bottom: none;
}
.data tr td:first-child {
	border-left: none
}
.data tr td:last-child {
	border-right: none
}
.full {
	width: 100%
}
.nowrap {
	white-space: nowrap
}
.center {
	text-align: center
}
.top {
	vertical-align: top
}
.loading,
.popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	background-color: var(--loader-background-colour);
	display: none;
}
.loading img {
	width: 200px;
	aspect-ratio: 1/1;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px
}
.development {
	padding: var(--padding);
	text-align: center;
	background-color: orangered;
	color: white;
	text-transform: uppercase
}
noscript {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding: var(--padding);
	color: var(--lighter-colour);
	background-color: var(--base-colour);
	text-align: center;
	z-index: 200
}
.system_message {
	position: absolute;
	z-index: 5;
	background-color: salmon;
	padding: calc(var(--padding)*2);
	top: 0;
	right: 0;
	left: 0;
	padding-right: var(--padding);
	text-align: center;
	color: black;
	text-transform: uppercase;
	opacity: .7;
}
.box,
.invoice_copybox {
	padding: var(--padding);
	background-color: var(--main-colour-darker);
	border-radius: var(--border-radius-large);
	margin-bottom: var(--padding);
	position: relative;
	border: 1px solid var(--base-colour);
}
.invoice_copybox {
	font-family: monospace;
	background-color: rgba(255, 255, 255, 0.7)
}
section .box:last-child {
	margin-bottom: 0;
}
.box h1,
.box h2,
.box h3 {
	margin-top: 0
}
.material-symbols-outlined,
.material-symbols-outlined:visited {
	text-decoration: none;
	color: inherit;
	font-size: inherit;
}
.material-symbols-outlined:hover {
	opacity: 1
}
.box .material-symbols-outlined,
.box .material-symbols-outlined:visited {
	opacity: .5;
	transition: .5s;
	margin-right: var(--padding)
}
.box .material-symbols-outlined:hover {
	opacity: 1
}
.box_details {
	position: relative;
	z-index: 2
}
.box_background {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .1
}
.pop_up_inner {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: var(--main-colour);
	padding: var(--padding);
	padding-top: calc(var(--padding)*2);
	border-radius: var(--border-radius-large);
	width: 500px;
	/* as deep as its content, up to the window less a margin, then it scrolls */
	height: auto;
	max-height: calc(100% - 40px);
	overflow-y: auto;
	margin-left: -250px;
	transform: translateY(-50%)
}
.close_popup,
.close_popup:visited,
.close_popup:hover {
	position: absolute;
	right: 10px;
	top: 10px;
	color: var(--base-colour);
	text-decoration: none
}
.pipeline td {
	position: relative;
	border: none;
	vertical-align: top;
}
.pipeline_cards {
	position: relative;
	z-index: 2
}
.pipeline_base {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	opacity: .3;
}


.pipeline tr:nth-child(2) td:first-child .pipeline_base {
	border-radius: 0 0 0 var(--border-radius-xlarge) !important
}
.pipeline tr:nth-child(2) td:last-child .pipeline_base {
	border-radius: 0 0 var(--border-radius-xlarge) 0 !important
}


.pipe_card {
	padding: var(--padding);
	border-radius: var(--border-radius-large);
	border: 1px solid var(--lighter-colour);
	background-color: rgba(255, 255, 255, 0.2);
	margin-bottom: var(--form-padding);
	text-align: center;
	cursor: move;
	font-size: 85%;
	z-index: 1000
}
.pipe_card p {
	margin: 0
}
.pipe_card .pipe_title {
	margin: 4px 0;
	overflow-wrap: anywhere
}
.pipe_card .pipe_status {
	display: inline-block;
	margin-bottom: 4px;
	padding: 1px 8px;
	border-radius: var(--border-radius-small);
	color: #fff;
	font-size: 85%;
	font-weight: 600;
	letter-spacing: .05em
}
.pipe_card .pipe_status_new { background-color: green }
.pipe_card .pipe_status_hold { background-color: #c00 }
.pipe_card .pipe_hours { opacity: .7 }
.pipe_card .pipe_hours_ok { color: green; opacity: 1 }
.pipe_card .pipe_hours_over { color: #c00; opacity: 1 }
td .pipe_card:last-child {
	margin-bottom: 0
}
.stat_bar {
	display: block;
	height: 20px;
	border-radius: var(--border-radius-small);
	opacity: .75
}
.hours_invoiced {
	opacity: .3;
	text-decoration: line-through;
	color: black !important
}
.reminder_box {
	background-color: rgba(249, 127, 114, 0.483)
}
.reminder_box_alerts {
	display: none
}
.show_note_content {
	padding: var(--padding);
	border-radius: var(--border-radius-small);
	background-color: white;
	font-family: monospace;
	font-size: 110%
}
/* Working days left (homepage). The heading and the month sit on one line, the
   bar below it fills as the month is used up, and the figures read underneath.
   The bar's colour is set per render in days_remain() - green through to red. */
.days_remain_head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px
}
.days_remain_head h2 { margin: 0 }
.days_remain_month {
	color: var(--brand-slate);
	font-size: 90%
}
.days_remain div {
	white-space: nowrap;
	position: relative;
	z-index: 1;
	border-radius: 999px;
	overflow: hidden
}
.days_remain div {
	background-color: rgba(32, 47, 84, .12);
	width: 100%;
}
.days_remain .stat_bar {
	position: relative;
	z-index: 3;
	opacity: 1;
	border-radius: 999px !important;
	height: 14px !important;
}
.days_remain_sub {
	margin: 8px 0 0;
	font-size: 85%;
	color: var(--brand-slate)
}
/* Server health line under the working days (home_server_strip()). One line
   when all is well; the servers needing attention are listed under it. */
.server_strip { padding-top: 12px; padding-bottom: 12px }
.server_strip p,
.server_strip ul { margin: 0 }
.server_strip_line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px
}
.server_strip_when { color: var(--brand-slate); font-size: 90% }
.server_strip_cdn { margin-top: 6px !important }
.server_strip_soon { margin-top: 8px !important; font-weight: 600; color: var(--brand-slate) }
/* Stock items: the Online / Offline button on the list, and the pair of
   buttons on the item form (radios, so one is always pressed). */
.stock_switch,
.stock_switch:visited,
.stock_status label > span {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--brand-slate);
	border-radius: 999px;
	color: inherit;
	font-size: 90%;
	text-decoration: none;
	cursor: pointer
}
.stock_switch:hover { border-color: var(--header-colour) }
.stock_switch.busy { opacity: .5; cursor: progress }
.stock_status { display: inline-flex; gap: 6px; margin-top: 4px }
.stock_status input { position: absolute; opacity: 0; pointer-events: none }
.stock_status input:not(:checked) + span { opacity: .55 }
.stock_status input:checked + span { border-width: 2px; font-weight: 600 }
.stock_status input:focus-visible + span { outline: 2px solid var(--header-colour) }
.stock_offline td:not(:nth-last-child(-n+2)) { opacity: .55 }
/* The On / Off button beside each stock item on a client's page: a hidden
   checkbox, showing whichever word matches. */
.stock_onoff input { position: absolute; opacity: 0; pointer-events: none }
.stock_onoff > span {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--brand-slate);
	border-radius: 999px;
	font-size: 90%;
	cursor: pointer
}
.stock_onoff input:checked ~ .stock_onoff_off,
.stock_onoff input:not(:checked) ~ .stock_onoff_on { display: none }
.stock_onoff input:checked ~ .stock_onoff_on { border-width: 2px; font-weight: 600 }
.stock_onoff input:focus-visible ~ span { outline: 2px solid var(--header-colour) }
.client_stock .client_stock_price { width: 8em }
.client_stock tr.stock_offline td:nth-child(-n+2) { opacity: .55 }
.client_stock_total td { border-top: 2px solid var(--brand-slate) }
/* Monthly fee on the client page: worked out from the stock items, never typed. */
#client_stock_sum { cursor: default; font-weight: 600; opacity: .8 }
#client_stock_sum:focus { outline: none }
/* Client profile boxes on the client page: side by side, not resizable. */
.profile_fields textarea { resize: none }
.server_strip_link,
.server_strip_link:visited {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 90%;
	text-decoration: none
}
.server_strip_link .material-symbols-outlined { font-size: 18px }
.server_strip_detail {
	margin-top: 8px !important;
	padding-left: 0;
	list-style: none;
	font-size: 90%
}
.server_strip_detail li { margin-top: 4px }
/* The three tiles under it (home_tiles()). Each whole tile is a link. A rail
   down the left carries the state colour, as on the headline tiles. */
.hero_tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 16px
}
.hero_tile,
.hero_tile:visited {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px 14px;
	text-decoration: none;
	color: inherit;
	transition: transform .15s, box-shadow .15s
}
.hero_tile:hover { transform: translateY(-2px) }
.hero_good, .hero_warn, .hero_bad { box-shadow: inset 4px 0 0 0 var(--hero-rail) }
.hero_good { --hero-rail: #2e8b57 }
.hero_warn { --hero-rail: #e8a070 }
.hero_bad  { --hero-rail: var(--brand-raspberry) }
.hero_head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--brand-slate)
}
.hero_head .material-symbols-outlined { font-size: 20px; color: var(--hero-rail, inherit) }
.hero_value {
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
	font-variant-numeric: tabular-nums
}
.hero_sub { font-size: 13px; color: var(--brand-slate) }
.hero_more {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 600
}
.hero_more .material-symbols-outlined { font-size: 16px; transition: transform .15s }
.hero_tile:hover .hero_more .material-symbols-outlined { transform: translateX(3px) }
/* The pages the tiles open. */
.home_intro { margin-top: -4px; color: var(--brand-slate); font-size: 90% }
.home_when { font-style: normal; font-size: 85%; opacity: .75 }
.home_over { color: var(--brand-raspberry) }
.home_task { font-size: 90%; opacity: .8 }
.home_mywork_tiles { margin-bottom: 16px }
.job_easy_invoice_copy {
	background-color: #f2f2f2;
	font-family: monospace;
	color: black;
	padding: 20px;
	font-size: 120%;
	border-radius: var(--border-radius-large);
	position: relative
}
.job_easy_invoice_copy p:first-of-type {
	margin-top: 0;
}
.job_easy_invoice_copy p:last-of-type {
	margin-bottom: 0;
}
/* ---------------------------------------------------------- Xero module */
.xero_status {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 20px;
	margin: 0 0 24px;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 6px;
}
.xero_status div { display: flex; flex-direction: column; }
.xero_status span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.xero_status strong { font-size: 15px; }

.xero_counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.xero_counts span {
	font-size: 12px; padding: 4px 10px; border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
}
.xero_counts .c_matched { background: rgba(0, 127, 0, .12); color: #060; }
.xero_counts .c_exact   { background: rgba(0, 127, 0, .12); color: #060; }
.xero_counts .c_near    { background: rgba(255, 165, 0, .18); color: #a60; }
.xero_counts .c_hint    { background: rgba(0, 0, 255, .10); color: #33a; }
.xero_counts .c_none    { background: rgba(255, 0, 0, .10); color: #a00; }

.xero_tools {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	margin: 0 0 12px; padding: 10px 0;
	position: sticky; top: var(--header-height); z-index: 5;
	background: #fff;
}
.xero_tools .xero_filter { flex: 1 1 220px; max-width: 340px; }
.xero_tools label { font-size: 13px; white-space: nowrap; }

table.xero_match td { vertical-align: top; }
table.xero_match select { max-width: 320px; }
table.xero_match em { font-style: normal; font-size: 11px; }
table.xero_match .x_exact { color: #060; }
table.xero_match .x_near  { color: #a60; }
table.xero_match .x_hint  { color: #33a; }
table.xero_match .x_none  { color: #999; }
table.xero_match .x_gone  { color: #a00; font-weight: bold; }
table.xero_match tr.x_matched td:first-child strong { opacity: .65; font-weight: normal; }

/* Send-to-Xero control */
.send_xero_off { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
em.xero_blocked { font-style: normal; font-size: 12px; color: var(--brand-raspberry); }

/* Maintenance reconciliation */
.maint_light { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.maint_red    { background:#b2315e; }
.maint_orange { background:#e8a070; }
.maint_green  { background:#2e8b57; }
.maint_grey   { background:#ccc; }
table.maint_table em { font-style:normal; font-size:11px; opacity:.7; }
em.maint_jobs { font-style:normal; font-size:11px; color:var(--brand-slate); }
/* Servers page: the health light, what is wrong, and each check on demand. */
td.server_health { min-width: 160px }
td.server_health em,
em.server_disk_of { font-style: normal; font-size: 12px; opacity: .8 }
td.server_health details { margin-top: 4px; font-size: 12px }
td.server_health summary { cursor: pointer; opacity: .7 }
td.server_health ul { margin: 4px 0 0; padding: 0; list-style: none }
td.server_health li { margin: 2px 0 }

/* ------------------------------------------------- Headline figures block */
.hl_block {
	background: #fff;
	border-radius: var(--border-radius-large);
	padding: var(--padding);
	margin: 0 0 var(--padding);
}
.hl_head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
}
.hl_head h2 { margin: 0 }
.hl_head .hl_todate {
	font-weight: 400;
	text-transform: none;
	opacity: .55;
	font-size: 80%;
}
.hl_refresh { margin: 0; font-size: 80% }
.hl_refresh a { color: var(--brand-slate) }
.hl_paging { margin: 0 }
.hl_paging a,
.hl_paging a:visited {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	padding: var(--form-padding);
	margin-right: var(--form-padding);
	border-radius: var(--border-radius-small);
	font-size: 80%;
}
.hl_paging a:hover { background-color: var(--nav-colour) }

/* auto-fit means the row reflows to 3, 2 then 1 across without a breakpoint
   for every count - the tiles are all the same shape, so they can just wrap. */
.hl_tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 2px;
	background: var(--main-colour-darker);
	border-radius: var(--border-radius-small);
	overflow: hidden;
}
.hl_tile {
	background: var(--lighter-colour);
	padding: 12px 14px 13px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.hl_label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--brand-slate);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hl_value {
	font-size: 26px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--header-colour);
	/* tabular figures stop the numbers jittering as the month ticks over */
	font-variant-numeric: tabular-nums;
}
.hl_sub {
	font-size: 11px;
	color: var(--brand-slate);
	opacity: .8;
}
.hl_sub em { font-style: normal; font-weight: 600 }
.hl_up   { color: #2e8b57 }
.hl_down { color: var(--brand-raspberry) }
.hl_flat { opacity: .6 }

/* A second tile row needs a heading to separate it from the trading figures,
   but not the full month header - no navigation, no refresh link. */
.hl_head_sub {
	margin-top: 18px;
}
.hl_head_sub h2 {
	font-size: 15px;
}

/* State rail. Drawn with an inset box-shadow rather than a border so it does
   not change the tile's box and knock the grid out of alignment - the tiles
   are separated by a 2px gap showing the container behind, and a border would
   eat into the padding instead of sitting alongside it. */
.hl_tile.hl_good,
.hl_tile.hl_warn,
.hl_tile.hl_bad {
	box-shadow: inset 3px 0 0 0 currentColor;
	padding-left: 17px;
}
.hl_tile.hl_good { color: #2e8b57 }
.hl_tile.hl_warn { color: #b26a00 }
.hl_tile.hl_bad  { color: var(--brand-raspberry) }
/* The rail carries the colour; the text inside must not inherit it. */
.hl_tile.hl_good .hl_value,
.hl_tile.hl_warn .hl_value,
.hl_tile.hl_bad .hl_value { color: var(--header-colour) }
.hl_tile.hl_good .hl_label,
.hl_tile.hl_warn .hl_label,
.hl_tile.hl_bad .hl_label,
.hl_tile.hl_good .hl_sub,
.hl_tile.hl_warn .hl_sub,
.hl_tile.hl_bad .hl_sub { color: var(--brand-slate) }
/* Bad is the one worth reading before the label, so it keeps the colour. */
.hl_tile.hl_bad .hl_value { color: var(--brand-raspberry) }

/* Folded notes under the tax tiles. <details> rather than a scripted toggle -
   it keeps the disclosure semantics, the keyboard behaviour and find-in-page
   for free, and there is no JS on this block at all. */
.hl_notes {
	margin-top: 12px;
	border-top: 1px solid var(--main-colour-darker);
}
.hl_notes > summary {
	cursor: pointer;
	list-style: none;
	padding: 9px 0 0;
	font-size: 12px;
	color: var(--brand-slate);
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Safari still needs the webkit pseudo-element to drop the native marker. */
.hl_notes > summary::-webkit-details-marker { display: none }
.hl_notes > summary::before {
	content: "";
	width: 0; height: 0;
	border-left: 4px solid currentColor;
	border-top: 3.5px solid transparent;
	border-bottom: 3.5px solid transparent;
	transition: transform .15s ease;
}
.hl_notes[open] > summary::before { transform: rotate(90deg) }
.hl_notes > summary:hover { color: var(--header-colour) }
.hl_notes > summary:focus-visible {
	outline: 2px solid var(--brand-slate);
	outline-offset: 2px;
	border-radius: 2px;
}
/* A warning inside a closed section would otherwise be invisible. */
.hl_notes.has_warning > summary { color: var(--brand-raspberry); font-weight: 600 }
.hl_notes.has_warning > summary::after {
	content: "needs attention";
	font-weight: 400;
	opacity: .75;
}
@media (prefers-reduced-motion: reduce) {
	.hl_notes > summary::before { transition: none }
}

.hl_note {
	font-size: 12px;
	margin: 12px 0 0;
	line-height: 1.5;
}
.hl_note.warning {
	background: rgba(178, 49, 94, .07);
	border-left: 3px solid var(--brand-raspberry);
	padding: 10px 12px;
	border-radius: var(--border-radius-small);
}

/* On a phone the tiles go two-up - one per row wastes the width and pushes the
   later figures below the fold, and the numbers are short enough to pair. */
@media screen and (max-width: 640px) {
	.hl_tiles { grid-template-columns: repeat(2, 1fr) }
	.hl_value { font-size: 21px }
	.hl_head { margin-bottom: 10px }
	.breadcrumb { padding-right: var(--padding) }
}

/* ---------------------------------------------------------- Sign-in page */
/* The card fills the space between header and footer and sits in its middle. */
.gw_wrap {
	min-height: calc(100vh - var(--header-height) - 140px);
	display: flex;
	align-items: center;
	justify-content: center
}
.gw_box {
	width: 100%;
	max-width: 420px;
	padding: 32px 28px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--main-colour-darker);
	border-radius: var(--border-radius-xlarge);
	box-shadow: 0 8px 30px rgba(32, 47, 84, .12)
}
/* section has 80px on the right for the menu button and 15px on the left -
   the difference is added here so the card sits in the true centre. */
.gw_wrap { padding-left: 65px }
@media screen and (max-width: 640px) {
	.gw_wrap { padding-left: 0 }
}
.gw_box p.success,
.gw_box p.warning {
	padding: 10px 12px;
	border-radius: var(--border-radius-small)
}
.gw_box p.success { background: #e3f4e8; color: #1e6b3a }
.gw_box p.warning { background: #fdecea; color: #a4262c }
/* Padlock above the heading. */
.gw_box .gw_lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 12px;
	border-radius: 50%;
	font-size: 34px;
	color: var(--header-colour);
	background: var(--main-colour);
	border: 1px solid var(--main-colour-darker)
}
.gw_box h1 { margin: 0 0 12px }
.gw_box p { margin: 0 0 18px }
.gw_box form { margin: 0 0 18px }
.gw_box p.gw_small { margin-bottom: 0 }
/* The old form is left-aligned inside the card, if it ever shows again. */
.gw_legacy { text-align: left }
button.gw_google {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 500;
	color: #1f1f1f;
	background: #fff;
	border: 1px solid #747775;
	border-radius: 20px;
	cursor: pointer
}
button.gw_google:hover { background: #f2f2f2 }
button.gw_google:disabled { opacity: .6; cursor: wait }
.gw_small { font-size: 85%; opacity: .7 }

/* ------------------------------------------------------------ File shares (share/) */
.share_link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share_link input { flex: 1 1 320px; }
.share_drop {
	border: 2px dashed var(--base-colour);
	border-radius: var(--border-radius-large);
	padding: 24px var(--padding);
	text-align: center;
}
.share_drop.share_over { border-color: var(--brand-raspberry); background: var(--lighter-colour); }
.share_drop > .material-symbols-outlined { font-size: 40px; color: var(--base-colour); }
.share_pick { text-decoration: underline; cursor: pointer; }
.share_hint { font-size: 85%; opacity: 0.8; }
.share_queue { list-style: none; padding: 0; }
.share_queue li { padding: 6px 0; }
.share_queue progress { display: block; width: 100%; height: 8px; }
.share_queue .share_q_error .share_q_state { color: var(--brand-raspberry); font-weight: bold; }
.share_list .material-symbols-outlined { font-size: 16px; vertical-align: middle; }

/* Search (find/) */
.find_table td { vertical-align: top }
.find_table mark { background: rgba(232, 160, 112, 0.45); color: inherit; border-radius: 2px; padding: 0 1px }
.find_table small { opacity: 0.75 }
.find_table .find_excerpt { color: inherit; text-decoration: none }
.find_table .find_excerpt:hover { text-decoration: underline }
.find_table .find_file { white-space: nowrap }
.find_table .material-symbols-outlined { font-size: 1.1em; vertical-align: -0.2em }
.find_table .find_done { color: var(--sys-green) }

/* Backblaze cost tile (s3/): a refresh button in its top right corner. */
.s3_cost { position: relative }
.s3_cost:hover { transform: none }
.s3_refresh_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--glass-border, rgba(0,0,0,.12));
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s, background-color .15s
}
.s3_refresh_btn:hover, .s3_refresh_btn:focus-visible { opacity: 1; background-color: rgba(127,127,127,.12) }
.s3_refresh_btn .material-symbols-outlined { font-size: 20px }
.s3_refresh_btn.busy { cursor: progress; opacity: 1 }
.s3_refresh_btn.busy .material-symbols-outlined { animation: s3_spin 1s linear infinite }
#s3_refresh.busy .material-symbols-outlined { animation: s3_spin 1s linear infinite }
@keyframes s3_spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) {
	.s3_refresh_btn.busy .material-symbols-outlined, #s3_refresh.busy .material-symbols-outlined { animation: none }
}

/* CDN page (cdn/). The tiles reuse .hero_tile but are not links. */
.cdn_loading { display: flex; align-items: center; gap: 12px; padding: 28px 4px; opacity: .8 }
.cdn_loading img { width: 40px; height: 40px }
.cdn_tiles .hero_tile:hover { transform: none }
.cdn_bar {
	height: 8px;
	min-width: 120px;
	margin: 4px 0;
	border-radius: 999px;
	overflow: hidden;
	background-color: rgba(125, 142, 166, .25)
}
.cdn_bar span { display: block; height: 100%; border-radius: 999px }
.cdn_good { background-color: var(--sys-green, #2e8b57) }
.cdn_warn { background-color: var(--sys-orange, #e8a070) }
.cdn_bad  { background-color: var(--sys-pink, #b2315e) }
span.cdn_bad { background: none; color: var(--sys-pink, #b2315e); font-weight: 600 }
.cdn_small { font-size: 85%; opacity: .75 }