/* Glass theme - Day, Night and Auto.

   Loaded by start.php and start.popup.php after taskmaster.css, mobile.css and
   the jQuery UI theme, so it only restates what changes: colours, surfaces,
   radii and type. Layout stays in taskmaster.css and mobile.css.

   Choosing a theme: the inline script in start.php copies localStorage
   "taskit_theme" ("light" or "dark") onto <html data-theme> before anything
   paints. No saved value is Auto, and the device setting decides through
   prefers-color-scheme. The header button (theme_toggle() in functions.js)
   cycles Auto -> Day -> Night.

   The Night tokens appear twice - once for "Auto, and the device is dark",
   once for "Night chosen". CSS cannot share one block between a media query
   and an attribute selector, so keep the two copies in step.

   Status, priority and type colours in arrays.php are var(--sys-*) values, so
   they follow the theme too. They are Apple's system colours: the
   high-contrast variants by day (readable as text on a pale surface), the
   standard dark variants by night. */

:root {
	color-scheme: light;

	--font: -apple-system, BlinkMacSystemFont, "DM Sans", system-ui, "Segoe UI", Roboto, sans-serif;

	--bg-base: #edf1f8;
	--wall-1: rgba(32, 47, 84, .30);
	--wall-2: rgba(178, 49, 94, .20);
	--wall-3: rgba(232, 160, 112, .30);
	--wall-4: rgba(80, 140, 230, .26);
	--wall-5: rgba(140, 110, 220, .22);
	--wall-6: rgba(60, 190, 190, .16);
	--grain-opacity: .05;

	--glass: rgba(255, 255, 255, .42);
	--glass-strong: rgba(255, 255, 255, .72);
	--glass-bar: rgba(247, 249, 253, .52);
	--glass-border: rgba(255, 255, 255, .70);
	--glass-shine: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .30), inset 0 0 0 1px rgba(255, 255, 255, .22);
	/* A soft diagonal highlight laid over each glass surface. */
	--glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .14) 38%, rgba(255, 255, 255, .03) 70%, rgba(255, 255, 255, .10) 100%);
	--glass-shadow: 0 1px 2px rgba(32, 47, 84, .05), 0 8px 28px rgba(32, 47, 84, .09);
	--glass-shadow-lift: 0 2px 6px rgba(32, 47, 84, .08), 0 18px 48px rgba(32, 47, 84, .18);
	--blur: blur(30px) saturate(200%);

	--text: #1b2233;
	--text-muted: #5d6679;
	--heading: #182442;
	--link: #2a4a9a;
	--accent: #202f54;
	--accent-hover: #2e4475;
	--accent-text: #ffffff;
	--fill: rgba(118, 118, 128, .10);
	--fill-strong: rgba(118, 118, 128, .18);
	--separator: rgba(60, 60, 67, .12);
	--focus: rgba(42, 74, 154, .30);
	--overlay: rgba(20, 28, 48, .28);
	--select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6679' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");

	--sys-red: #d70015;
	--sys-crimson: #a3122f;
	--sys-orange: #c93400;
	--sys-yellow: #b25000;
	--sys-green: #248a3d;
	--sys-mint: #0c817b;
	--sys-teal: #008299;
	--sys-cyan: #0071a4;
	--sys-blue: #0040dd;
	--sys-indigo: #3634a3;
	--sys-purple: #8944ab;
	--sys-pink: #d30f45;
	--sys-brown: #7f6545;
	--sys-gray: #6c6c70;
	--sys-navy: #202f54;
	/* Chart slices: the validated categorical palette, slots 1-5 in fixed
	   order, plus a neutral for "Other". */
	--series-1: #2a78d6;
	--series-2: #eb6834;
	--series-3: #1baf7a;
	--series-4: #eda100;
	--series-5: #e87ba4;
	--series-other: #a3a8b3;
	/* Text drawn on a solid --sys-* fill (pipeline column heads). */
	--on-sys: #ffffff;

	/* Older names used across taskmaster.css and the module stylesheets. */
	--brand-slate: var(--text-muted);
	--header-colour: var(--heading);
	--main-colour-darker: var(--separator);
	--task-colour: var(--glass);
	--task-completed-colour: var(--glass);
	--border-radius-small: 10px;
	--border-radius-large: 16px;
	--border-radius-xlarge: 22px;
	--loader-background-colour: var(--overlay);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg-base: #0b0f1a;
		--wall-1: rgba(70, 100, 190, .38);
		--wall-2: rgba(178, 49, 94, .26);
		--wall-3: rgba(232, 160, 112, .16);
		--wall-4: rgba(40, 150, 200, .22);
		--wall-5: rgba(120, 90, 220, .26);
		--wall-6: rgba(30, 170, 170, .16);
		--grain-opacity: .07;

		--glass: rgba(30, 34, 48, .40);
		--glass-strong: rgba(34, 38, 54, .76);
		--glass-bar: rgba(18, 22, 34, .50);
		--glass-border: rgba(255, 255, 255, .10);
		--glass-shine: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .04);
		--glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .04) 100%);
		--glass-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 28px rgba(0, 0, 0, .38);
		--glass-shadow-lift: 0 2px 6px rgba(0, 0, 0, .40), 0 18px 48px rgba(0, 0, 0, .55);

		--text: #e7ebf3;
		--text-muted: #9ca6ba;
		--heading: #f4f6fb;
		--link: #9db6f5;
		--accent: #4d6ec4;
		--accent-hover: #5d7fd8;
		--accent-text: #ffffff;
		--fill: rgba(118, 118, 128, .22);
		--fill-strong: rgba(118, 118, 128, .34);
		--separator: rgba(255, 255, 255, .09);
		--focus: rgba(157, 182, 245, .38);
		--overlay: rgba(0, 0, 0, .50);
		--select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239ca6ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");

		--sys-red: #ff6961;
		--sys-crimson: #ff7f8f;
		--sys-orange: #ffb340;
		--sys-yellow: #ffd426;
		--sys-green: #30db5b;
		--sys-mint: #66d4cf;
		--sys-teal: #5de6ff;
		--sys-cyan: #70d7ff;
		--sys-blue: #409cff;
		--sys-indigo: #7d7aff;
		--sys-purple: #da8fff;
		--sys-pink: #ff6482;
		--sys-brown: #b59469;
		--sys-gray: #aeaeb2;
		--sys-navy: #9db6f5;
		--on-sys: #15171c;
		--series-1: #3987e5;
		--series-2: #d95926;
		--series-3: #199e70;
		--series-4: #c98500;
		--series-5: #d55181;
		--series-other: #5f6574;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg-base: #0b0f1a;
	--wall-1: rgba(70, 100, 190, .38);
	--wall-2: rgba(178, 49, 94, .26);
	--wall-3: rgba(232, 160, 112, .16);
	--wall-4: rgba(40, 150, 200, .22);
	--wall-5: rgba(120, 90, 220, .26);
	--wall-6: rgba(30, 170, 170, .16);
	--grain-opacity: .07;

	--glass: rgba(30, 34, 48, .40);
	--glass-strong: rgba(34, 38, 54, .76);
	--glass-bar: rgba(18, 22, 34, .50);
	--glass-border: rgba(255, 255, 255, .10);
	--glass-shine: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(255, 255, 255, .04);
	--glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .04) 100%);
	--glass-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 28px rgba(0, 0, 0, .38);
	--glass-shadow-lift: 0 2px 6px rgba(0, 0, 0, .40), 0 18px 48px rgba(0, 0, 0, .55);

	--text: #e7ebf3;
	--text-muted: #9ca6ba;
	--heading: #f4f6fb;
	--link: #9db6f5;
	--accent: #4d6ec4;
	--accent-hover: #5d7fd8;
	--accent-text: #ffffff;
	--fill: rgba(118, 118, 128, .22);
	--fill-strong: rgba(118, 118, 128, .34);
	--separator: rgba(255, 255, 255, .09);
	--focus: rgba(157, 182, 245, .38);
	--overlay: rgba(0, 0, 0, .50);
	--select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239ca6ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");

	--sys-red: #ff6961;
	--sys-crimson: #ff7f8f;
	--sys-orange: #ffb340;
	--sys-yellow: #ffd426;
	--sys-green: #30db5b;
	--sys-mint: #66d4cf;
	--sys-teal: #5de6ff;
	--sys-cyan: #70d7ff;
	--sys-blue: #409cff;
	--sys-indigo: #7d7aff;
	--sys-purple: #da8fff;
	--sys-pink: #ff6482;
	--sys-brown: #b59469;
	--sys-gray: #aeaeb2;
	--sys-navy: #9db6f5;
	--on-sys: #15171c;
	--series-1: #3987e5;
	--series-2: #d95926;
	--series-3: #199e70;
	--series-4: #c98500;
	--series-5: #d55181;
	--series-other: #5f6574;
}

/* ============================================================ Icons */
/* Google's Rounded symbols - softer, closer to Apple's SF Symbols than the
   Outlined set. start.php loads the Rounded font; every icon in the markup
   still carries the old class name, so the base rule Google ships for
   .material-symbols-rounded is restated for it here. */
.material-symbols-outlined {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Kept from taskmaster.css, which these replace in source order. */
a.material-symbols-outlined,
a.material-symbols-outlined:visited {
	text-decoration: none;
	color: inherit;
	font-size: inherit;
}

/* ============================================================ Base */
/* Glass needs something behind it to blur: a soft brand-tinted wallpaper on a
   fixed layer. Not background-attachment: fixed, which iOS Safari ignores. */
html {
	background-color: var(--bg-base);
	-webkit-text-size-adjust: 100%;
}
html,
body {
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.45;
}
body {
	background: transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}
body::before {
	content: "";
	position: fixed;
	/* Overscan, so the blur below does not pull in a pale edge. */
	inset: -80px;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(55vmax 45vmax at 6% -2%, var(--wall-1), transparent 65%),
		radial-gradient(45vmax 40vmax at 102% 14%, var(--wall-2), transparent 65%),
		radial-gradient(40vmax 34vmax at 58% 32%, var(--wall-5), transparent 68%),
		radial-gradient(50vmax 45vmax at 90% 100%, var(--wall-3), transparent 65%),
		radial-gradient(38vmax 32vmax at 32% 74%, var(--wall-6), transparent 68%),
		radial-gradient(45vmax 40vmax at -4% 92%, var(--wall-4), transparent 65%),
		var(--bg-base);
	/* Melts the colour fields into one another, the way a frosted pane does. */
	filter: blur(48px) saturate(125%);
	transform: translateZ(0);
}
/* Fine grain over the mesh - flat gradients read as plastic; a little noise
   reads as frosted glass. Fixed and non-interactive, so it costs one paint. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--grain-opacity);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 160px 160px;
}
main {
	background-color: transparent;
}
a,
a:visited {
	color: var(--link);
	text-underline-offset: 2px;
}
hr {
	background: var(--separator);
}
h1,
h2,
h3 {
	color: var(--heading);
	font-weight: 650;
	letter-spacing: -.015em;
}
h1 { font-size: 1.6rem }
h2 { font-size: 1.3rem }
h3 { font-size: 1.1rem }
strong { font-weight: 600 }
::selection { background: var(--focus) }
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* ============================================================ Surfaces */
.box,
.hl_block,
.gw_box,
.log_day,
.xero_tools {
	background-color: var(--glass);
	background-image: var(--glass-sheen);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-large);
	box-shadow: var(--glass-shine), var(--glass-shadow);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
}
.box {
	padding: 18px 20px;
	margin-bottom: 16px;
}
/* Without blur, a stronger fill keeps text readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.box,
	.hl_block,
	.gw_box,
	.log_day,
	.xero_tools,
	header,
	nav { background-color: var(--glass-strong) }
}

/* ============================================================ Header */
header {
	color: var(--heading);
	background-color: var(--glass-bar);
	border-bottom: 1px solid var(--separator);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	font-weight: 600;
	letter-spacing: -.01em;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 0;
	padding-bottom: 0;
}
header img {
	width: 30px;
	height: 30px;
	margin-bottom: 0;
	margin-right: 4px;
	border-radius: 7px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
header .header_version {
	color: var(--text-muted);
	font-weight: 500;
	opacity: 1;
}
header span:before {
	content: '';
}
/* The greeting, after the version - quieter than the name. */
header span {
	width: 1px;
	height: 16px;
	background: var(--separator);
	margin: 0 6px;
}
header {
	font-size: 17px;
}
.nav_open,
.nav_open:visited {
	color: var(--heading) !important;
	width: 36px;
	height: 36px;
	top: 7px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 22px;
	background: var(--fill);
}
.nav_open:hover {
	background-color: var(--glass-strong);
}
/* Header buttons and the popup close are clear glass discs. */
.nav_open,
.nav_open:visited,
.theme_toggle,
.theme_toggle:visited,
.close_popup,
.close_popup:visited {
	background-color: var(--glass);
	background-image: var(--glass-sheen);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shine), 0 2px 8px rgba(0, 0, 0, .08);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	box-sizing: border-box;
}
.theme_toggle:hover,
.close_popup:hover { background-color: var(--glass-strong) }
/* Open: the button stays put (the old icon rotated) and takes the accent. */
.nav_open.nav_is_open {
	transform: none;
	background: var(--accent);
	color: var(--accent-text) !important;
}

/* Theme switch, left of the menu button. Signed out there is no menu button,
   so it moves into that spot. */
.theme_toggle,
.theme_toggle:visited {
	position: fixed;
	top: 7px;
	right: 62px;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 20px;
	color: var(--heading);
	text-decoration: none;
	transition: background-color .2s, transform .35s cubic-bezier(.2, .8, .2, 1);
	user-select: none;
}
.theme_toggle.spin {
	transform: rotate(180deg);
}
body:not(:has(.nav_open)) .theme_toggle {
	right: 18px;
}
/* A small label under the switch saying which mode was picked. */
.theme_toast {
	position: fixed;
	top: 52px;
	right: 18px;
	z-index: 6;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--heading);
	background: var(--glass-strong);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.theme_toast.show {
	opacity: 1;
	transform: none;
}

/* ============================================================ Menu */
/* A floating glass panel, opened from the three-dot button top right. Hidden
   completely until then - no edge strip - so pages get their full width.
   It grows out of the button's corner, like an Apple context menu. */
nav {
	position: fixed;
	top: calc(var(--header-height) + 6px);
	right: 12px;
	bottom: auto;
	left: auto;
	z-index: 6;
	width: 268px;
	max-height: calc(100vh - var(--header-height) - 18px);
	max-height: calc(100dvh - var(--header-height) - 18px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	border-radius: 18px;
	background-color: var(--glass-strong);
	background-image: var(--glass-sheen);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shine), var(--glass-shadow-lift);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	transform-origin: top right;
	transform: scale(.9) translateY(-6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .22s cubic-bezier(.2, .9, .3, 1.15), opacity .16s ease, visibility 0s linear .22s;
}
nav.nav_show {
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .22s cubic-bezier(.2, .9, .3, 1.15), opacity .16s ease, visibility 0s;
}
nav a,
nav a:visited {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 9px 12px;
	border-radius: 11px;
	color: var(--heading);
	opacity: 1;
	text-transform: none;
	font-weight: 500;
	font-size: 15px;
	transition: background-color .12s;
}
nav a:hover,
nav a:focus-visible {
	background-color: var(--fill-strong);
	outline: none;
}
nav a:active {
	background-color: var(--accent);
	color: var(--accent-text);
}
nav div span:nth-child(1),
nav div span:nth-child(2) {
	width: auto;
	padding: 0;
	margin: 0;
}
nav div span:nth-child(1) {
	font-size: 21px;
	width: 24px;
	text-align: center;
	color: var(--text-muted);
}
nav a:active span:nth-child(1) { color: inherit }
/* Sign out sits apart at the foot, as on a system menu. */
nav a[href^="/gateway/goodbye.php"] {
	margin-top: 6px;
	position: relative;
}
nav a[href^="/gateway/goodbye.php"]::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	top: -4px;
	height: 1px;
	background: var(--separator);
}
/* The page no longer keeps 80px clear on the right for the old icon strip. */
section { padding-right: var(--padding) }
.breadcrumb { padding-right: var(--padding) }
.gw_wrap { padding-left: 0 }
.mobile_menu {
	background-color: var(--glass-bar);
	border-bottom: 1px solid var(--separator);
}
.mobile_menu a,
.mobile_menu a:visited { color: var(--heading) }
.open_mobile_menu { background-color: var(--fill) }

/* ============================================================ Page frame */
.breadcrumb {
	color: var(--text-muted);
	padding-top: 14px;
}
.breadcrumb a,
.breadcrumb a:visited { color: var(--link) }
footer {
	color: var(--text-muted);
	padding-bottom: calc(var(--padding) + env(safe-area-inset-bottom));
}
.footer_notice { border-top-color: var(--separator) }
.debug {
	color: var(--text-muted);
	border-top-color: var(--separator);
}
.development {
	background: color-mix(in srgb, var(--sys-orange) 85%, transparent);
	color: #fff;
	padding: 8px var(--padding);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
}

/* ============================================================ Forms */
input[type=text],
input[type=password],
input[type=date],
input[type=number],
input[type=email],
input[type=search],
select,
textarea {
	background-color: var(--fill);
	color: var(--text);
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 9px 12px;
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
	background-color: var(--glass-strong);
	border-color: var(--link);
	box-shadow: 0 0 0 4px var(--focus);
}
input[readonly] {
	color: var(--text-muted);
}
input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
	opacity: .75;
}
select {
	background-image: var(--select-arrow);
	background-position: right 12px center;
	background-size: 12px 8px;
	padding-right: 34px;
}
select option {
	background-color: var(--bg-base);
	color: var(--text);
}
.form x-label {
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
}
/* Fields only - most submit buttons also sit inside an x-label, and this
   selector outranks the button rule below, so it must not reach them. */
.form x-label input:not([type=submit]):not([type=button]),
.form x-label select,
.form x-label textarea {
	font-size: 15px;
	color: var(--text);
	font-weight: 400;
}

/* One pill style for every button-like control: tinted glass. The navy tint
   keeps white labels readable on pale and dark panels alike; the top light
   edge, sheen and soft glow give it the glass. */
input[type=submit],
button:not(.gw_google):not([class*="tox-"]),
a.button,
a.button:visited,
.paging a,
.paging a:visited,
.hl_paging a,
.hl_paging a:visited,
.task_jump a,
.task_jump a:visited {
	background-color: color-mix(in srgb, var(--accent) 80%, transparent);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, 0) 53%, rgba(255, 255, 255, .10) 100%);
	color: var(--accent-text);
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 999px;
	padding: 9px 18px;
	text-transform: capitalize;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
	font-family: inherit;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .50),
		inset 0 -1px 0 rgba(0, 0, 0, .14),
		0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent),
		0 1px 2px rgba(0, 0, 0, .12);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	backdrop-filter: blur(12px) saturate(180%);
	transition: background-color .15s, box-shadow .15s, transform .1s;
	cursor: pointer;
}
input[type=submit]:hover,
button:not(.gw_google):not([class*="tox-"]):hover,
a.button:hover,
.paging a:hover,
.hl_paging a:hover,
.task_jump a:hover {
	background-color: color-mix(in srgb, var(--accent-hover) 90%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(0, 0, 0, .14),
		0 6px 20px color-mix(in srgb, var(--accent) 42%, transparent),
		0 1px 2px rgba(0, 0, 0, .12);
}
input[type=submit]:active,
button:not(.gw_google):not([class*="tox-"]):active,
a.button:active,
.paging a:active,
.task_jump a:active {
	transform: scale(.97);
}
.task_jump a { padding: 5px 13px; font-size: 13px }
.paging a { font-size: 14px }
.paging + p { color: var(--text-muted); font-size: 13px }

.required_field {
	color: var(--sys-red);
	font-weight: 700;
	margin: 0 0 0 3px;
}
.required_note {
	margin: 0 0 2px;
	font-size: 12px;
	color: var(--text-muted);
}
.required_note .required_field { margin: 0 2px 0 0 }
.required_field_marked {
	background-color: color-mix(in srgb, var(--sys-red) 12%, transparent) !important;
	border-color: var(--sys-red) !important;
}

/* ============================================================ Notices */
p.warning,
p.success,
.system_message {
	border-radius: 12px;
	padding: 11px 14px;
	font-weight: 500;
}
p.warning {
	background: color-mix(in srgb, var(--sys-orange) 14%, transparent);
	color: var(--heading);
	border: 1px solid color-mix(in srgb, var(--sys-orange) 30%, transparent);
}
p.success {
	background: color-mix(in srgb, var(--sys-green) 14%, transparent);
	color: var(--heading);
	border: 1px solid color-mix(in srgb, var(--sys-green) 30%, transparent);
}
.system_message {
	left: 50%;
	right: auto;
	top: 12px;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 12px 20px;
	text-transform: none;
	opacity: 1;
	color: var(--heading);
	background-color: var(--glass-strong);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow-lift);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
}

/* ============================================================ Tables */
.data {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 14px;
	/* clip, not hidden - hidden would stop the sticky All Jobs header. */
	overflow: clip;
	background: var(--glass);
	box-shadow: 0 0 0 1px var(--separator);
}
.data td,
.data th {
	border: 0;
	border-bottom: 1px solid var(--separator);
	padding: 10px 12px;
}
.data tr:last-child td { border-bottom: 0 }
.data tr:nth-child(odd) td,
.data tr:nth-child(even) td {
	background-color: transparent;
}
.data tr:hover td {
	background-color: var(--fill);
}
.data th,
.job_table th {
	background-color: var(--glass-strong);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: left;
}
.job_table th {
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
}
.table_divider {
	background-color: var(--fill-strong) !important;
	color: var(--heading) !important;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .05em;
}
.job_table td.job_overdue,
.job_table .job_over { color: var(--sys-red) }
.job_table td.job_due_soon { color: var(--sys-orange) }
.job_count { color: var(--text-muted); font-size: 14px }

/* ============================================================ Job page */
.box.task_box { border-color: var(--glass-border) }
.box.task_box .box_background { width: 4px; opacity: 1 }
.box.task_box.task_completed { opacity: .55 }
.task_actions {
	background-color: var(--fill);
	border-top: 1px solid var(--separator);
	margin-left: calc(4px - 20px);
	margin-right: -20px;
	margin-bottom: -18px;
	padding-left: 16px;
	padding-right: 20px;
}
.box .material-symbols-outlined,
.box .material-symbols-outlined:visited {
	opacity: .6;
	transition: opacity .15s;
}
.box .material-symbols-outlined:hover { opacity: 1 }

/* ============================================================ Popups */
.loading,
.popup {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* The spinner sits on a small glass tile, like the system activity HUD. */
.loading img {
	width: 88px;
	height: 88px;
	margin-left: -44px;
	margin-top: -44px;
	padding: 22px;
	border-radius: 22px;
	background: var(--glass-strong);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow-lift);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
}
.pop_up_inner {
	background-color: var(--glass-strong);
	background-image: var(--glass-sheen);
	color: var(--text);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-xlarge);
	box-shadow: var(--glass-shine), var(--glass-shadow-lift);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	padding: 22px;
	padding-top: 22px;
	overflow-y: auto;
}
.close_popup,
.close_popup:visited,
.close_popup:hover {
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--text-muted);
	font-size: 18px;
	z-index: 2;
}
.invoice_copybox,
.job_easy_invoice_copy,
.show_note_content {
	background-color: var(--fill);
	color: var(--text);
	border: 1px solid var(--separator);
	border-radius: 12px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 14px;
}
.reminder_box {
	background-color: color-mix(in srgb, var(--sys-red) 12%, var(--glass));
}
.hours_invoiced { color: var(--text) !important }

/* ============================================================ Pipeline */
/* Priority jobs: one glass panel per priority, its colour on a dot and a top
   edge. Four across, two on a tablet, stacked on a phone. */
.pipeline_wrap { margin-bottom: 16px }
.pipeline_heading { margin: 4px 0 12px }
.pipeline_board {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}
.pipe_col {
	position: relative;
	padding: 12px;
	border-radius: var(--border-radius-large);
	background-color: var(--glass);
	background-image: var(--glass-sheen);
	border: 1px solid var(--glass-border);
	/* The colour bar is an inset shadow, so it follows the panel's rounded
	   corners exactly; a separate 3px strip with a 16px radius kinked at the
	   ends and overhung the border. */
	box-shadow: inset 0 3px 0 0 var(--pipe-colour), var(--glass-shine), var(--glass-shadow);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	min-height: 120px;
	/* No overflow clipping - a card dragged out of the panel must stay visible. */
	transition: box-shadow .15s, background-color .15s;
}
/* Each panel is its own layer (the blur makes it one), so the panel a card is
   being dragged from is lifted above its neighbours for the drag. */
.pipe_col:has(.ui-draggable-dragging) { z-index: 5 }
/* Dragging a card over a panel lights it up as a drop target. */
.pipe_col.ui-droppable-hover {
	background-color: color-mix(in srgb, var(--pipe-colour) 10%, var(--glass));
	box-shadow: inset 0 3px 0 0 var(--pipe-colour), 0 0 0 2px var(--pipe-colour), var(--glass-shadow);
}
.pipe_col_head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 2px 12px;
	font-weight: 650;
	font-size: 15px;
	color: var(--heading);
}
.pipe_col_dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pipe-colour);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pipe-colour) 22%, transparent);
	flex: none;
}
.pipe_col_count {
	margin-left: auto;
	min-width: 24px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--fill-strong);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.pipe_empty {
	margin: 0;
	padding: 18px 8px;
	text-align: center;
	color: var(--text-muted);
	font-size: 13px;
	border: 1px dashed var(--separator);
	border-radius: 12px;
}
.pipe_col .pipe_card {
	margin-bottom: 8px;
	text-align: left;
	font-size: 14px;
	padding: 12px;
}
.pipe_col .pipe_card:last-child { margin-bottom: 0 }
.pipe_card p { margin: 0 0 2px }
.pipe_card.ui-draggable-dragging {
	z-index: 50;
	box-shadow: var(--glass-shadow-lift);
	transform: rotate(-1.5deg);
}
@media screen and (max-width: 1100px) {
	.pipeline_board { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media screen and (max-width: 640px) {
	.pipeline_board { grid-template-columns: 1fr; gap: 12px }
	.pipe_col { min-height: 0 }
}
.pipe_card {
	background-color: var(--glass-strong);
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	box-shadow: var(--glass-shine), 0 2px 8px rgba(0, 0, 0, .08);
}
.pipe_card .pipe_status { border-radius: 999px }
.pipe_card .pipe_status_new { background-color: var(--sys-green); color: var(--on-sys) }
.pipe_card .pipe_status_hold { background-color: var(--sys-red); color: var(--on-sys) }
.pipe_card .pipe_hours_ok { color: var(--sys-green) }
.pipe_card .pipe_hours_over { color: var(--sys-red) }

/* ============================================================ Home page */
.stat_bar { opacity: 1 }
.days_remain div { background-color: var(--fill) }
.hl_tiles {
	background: transparent;
	gap: 10px;
	overflow: visible;
}
.hl_tile {
	background: var(--fill);
	border-radius: 14px;
}
.hl_value,
.hl_tile.hl_good .hl_value,
.hl_tile.hl_warn .hl_value { color: var(--heading); letter-spacing: -.02em }
.hl_up { color: var(--sys-green) }
.hl_down,
.hl_tile.hl_bad .hl_value,
.hl_notes.has_warning > summary { color: var(--sys-pink) }
.hl_tile.hl_good { color: var(--sys-green) }
.hl_tile.hl_warn { color: var(--sys-orange) }
.hl_tile.hl_bad { color: var(--sys-pink) }
.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(--text-muted) }
.hl_notes > summary:hover { color: var(--heading) }
.hl_note.warning {
	background: color-mix(in srgb, var(--sys-pink) 10%, transparent);
	border-left-color: var(--sys-pink);
}

/* ============================================================ Charts */
/* Donuts (viz_donut() in functions.php) and meters (viz_meter()). Text keeps
   the text colours; only swatches and slices carry series colour. */
.viz_intro { margin: -4px 0 14px; color: var(--text-muted); font-size: 14px }
.viz_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.viz_grid_single { grid-template-columns: minmax(0, 520px) }
.viz_donut {
	margin: 0;
	padding: 14px;
	border-radius: 14px;
	background: var(--fill);
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	grid-template-areas: "title title" "plot legend";
	gap: 10px 16px;
	align-items: center;
}
.viz_title {
	grid-area: title;
	font-weight: 650;
	font-size: 15px;
	color: var(--heading);
}
.viz_plot { grid-area: plot; position: relative; width: 150px; aspect-ratio: 1 }
.viz_plot svg { width: 100%; height: 100%; display: block; overflow: visible }
.viz_slice {
	transition: opacity .15s, transform .15s;
	transform-origin: 100px 100px;
	cursor: default;
}
.viz_donut.is_active .viz_slice { opacity: .3 }
.viz_donut.is_active .viz_slice.is_on { opacity: 1; transform: scale(1.04) }
.viz_centre {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
	padding: 0 38px;
	line-height: 1.15;
}
.viz_centre strong {
	font-size: 20px;
	font-weight: 700;
	color: var(--heading);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}
.viz_centre_long strong { font-size: 16px }
.viz_centre span {
	font-size: 11px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.viz_legend { grid-area: legend; width: 100%; border-collapse: collapse; font-size: 13px }
.viz_legend td { padding: 4px 4px; border: 0; vertical-align: top }
.viz_legend tr { border-radius: 8px; outline: none }
.viz_legend tr:hover td,
.viz_legend tr:focus-visible td,
.viz_legend tr.is_on td { background: var(--fill-strong) }
.viz_legend tr td:first-child { border-radius: 8px 0 0 8px }
.viz_legend tr td:last-child { border-radius: 0 8px 8px 0 }
.viz_key { width: 14px; padding-top: 7px !important }
.viz_swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	vertical-align: middle;
}
.viz_name { color: var(--text); word-break: break-word }
.viz_value,
.viz_pct {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.viz_value { color: var(--text) }
.viz_pct { color: var(--text-muted); width: 1%; }
.viz_name details summary { cursor: pointer; list-style: revert }
.viz_name details ul {
	margin: 6px 0 2px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--text-muted);
}
.viz_name details li { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0 }
.viz_more { color: var(--text-muted) }
.viz_empty { grid-column: 1 / -1; margin: 0; color: var(--text-muted) }

.viz_section { margin-top: 22px }
.viz_meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
.viz_meter { padding: 14px; border-radius: 14px; background: var(--fill) }
.viz_meter_head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px }
.viz_meter_pct { font-size: 20px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums }
.viz_meter_track {
	height: 12px;
	border-radius: 999px;
	background: var(--fill-strong);
	overflow: hidden;
}
.viz_meter_track span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--series-1);
	min-width: 0;
}
.viz_meter_sub { margin: 8px 0 0; font-size: 13px; color: var(--text-muted) }
.viz_meter_sub .viz_swatch { margin-right: 4px }
.viz_swatch_track { background: var(--fill-strong); box-shadow: inset 0 0 0 1px var(--separator) }

/* A narrow card puts the legend under the ring. */
@media screen and (max-width: 420px) {
	.viz_donut {
		grid-template-columns: 1fr;
		grid-template-areas: "title" "plot" "legend";
		justify-items: center;
	}
	.viz_plot { width: 170px }
}
@media (prefers-reduced-motion: reduce) {
	.viz_slice { transition: none }
}

/* ============================================================ Xero */
.xero_tools { padding-left: 14px; padding-right: 14px }
.xero_status,
.xero_counts span { background: var(--fill) }
.xero_counts .c_matched,
.xero_counts .c_exact { background: color-mix(in srgb, var(--sys-green) 14%, transparent) }
.xero_counts .c_near { background: color-mix(in srgb, var(--sys-orange) 16%, transparent) }
.xero_counts .c_hint { background: color-mix(in srgb, var(--sys-blue) 12%, transparent) }
.xero_counts .c_none { background: color-mix(in srgb, var(--sys-red) 12%, transparent) }
.xero_counts .c_matched,
.xero_counts .c_exact,
table.xero_match .x_exact { color: var(--sys-green) }
.xero_counts .c_near,
table.xero_match .x_near { color: var(--sys-orange) }
.xero_counts .c_hint,
table.xero_match .x_hint { color: var(--sys-blue) }
.xero_counts .c_none,
table.xero_match .x_gone { color: var(--sys-red) }
table.xero_match .x_none { color: var(--text-muted) }

/* ============================================================ Sign-in */
.gw_box {
	background-color: var(--glass-strong);
	box-shadow: var(--glass-shine), var(--glass-shadow-lift);
	border-radius: var(--border-radius-xlarge);
}
.gw_box .gw_lock {
	color: var(--heading);
	background: var(--fill);
	border-color: var(--separator);
}
.gw_box p.success { background: color-mix(in srgb, var(--sys-green) 14%, transparent); color: var(--sys-green) }
.gw_box p.warning { background: color-mix(in srgb, var(--sys-red) 14%, transparent); color: var(--sys-red) }
button.gw_google { border-radius: 999px }

/* ============================================================ jQuery UI */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget button { font-family: var(--font) }
.ui-widget.ui-widget-content {
	background: var(--glass-strong);
	color: var(--text);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius-large);
	box-shadow: var(--glass-shadow-lift);
	-webkit-backdrop-filter: var(--blur);
	backdrop-filter: var(--blur);
	padding: 8px;
}
.ui-widget-header {
	background: transparent;
	border: 0;
	color: var(--heading);
}
.ui-state-default,
.ui-widget-content .ui-state-default {
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--text);
	text-align: center;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover { background: var(--fill-strong) }
.ui-state-active,
.ui-widget-content .ui-state-active {
	background: var(--accent);
	color: var(--accent-text);
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight { box-shadow: inset 0 0 0 1px var(--link) }

/* TinyMCE's frame. Its toolbar skin follows the theme via editor.js. */
.tox.tox-tinymce {
	border: 1px solid var(--separator) !important;
	border-radius: 12px !important;
}

/* ============================================================ Phones */
@media screen and (max-width: 768px) {
	html,
	body { font-size: 16px }
	header { padding-right: 104px; font-size: 16px }
	header img { width: 28px; height: 28px }
	.nav_open,
	.nav_open:visited { top: 7px; right: 12px; font-size: 22px }
	.theme_toggle,
	.theme_toggle:visited { right: 54px }
	body:not(:has(.nav_open)) .theme_toggle { right: 12px }
	.theme_toast { right: 12px }
	/* On a phone the panel spans the width, less a margin, with taller rows
	   for a thumb. */
	nav {
		right: 8px;
		left: 8px;
		width: auto;
		box-shadow: var(--glass-shine), var(--glass-shadow-lift);
	}
	nav a,
	nav a:visited { padding: 12px 14px; font-size: 16px }
	.box { padding: 14px 14px; border-radius: 14px }
	.task_actions {
		margin-left: calc(4px - 14px);
		margin-right: -14px;
		margin-bottom: -14px;
		padding-left: 10px;
		padding-right: 14px;
	}
	/* Blur is the costliest part of the theme on a phone; lighter there. */
	.box,
	.hl_block,
	.log_day {
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
	}
	.pop_up_inner { border-radius: 18px; padding: 18px }
	input[type=submit],
	a.button { padding: 12px 20px }
	.system_message { top: 8px }
}

@media (prefers-reduced-motion: reduce) {
	nav,
	nav.nav_show { transition: opacity .1s, visibility 0s; transform: none }
	.theme_toggle,
	.theme_toast,
	input[type=submit],
	a.button { transition: none }
}