/* Centric Movers mobile app.
   Built for one hand, outdoors, on a mid range Android phone. Tap targets are
   at least 44px, the type does not go below 14px, and the maroon carries the
   actions while the gold is kept for highlights on dark ground only. */

:root {
	--primary: #650216;
	--primary-dark: #4a0110;
	--primary-soft: #f6e9ec;
	--accent: #ffe001;
	--dark: #111111;
	--ink: #1c1c1c;
	--muted: #6f6f6f;
	--line: #e8e5e2;
	--line-soft: #f1efed;
	--paper: #ffffff;
	--ground: #f6f5f3;
	--hover: #faf8f7;
	--field: #fbfaf9;
	--field-line: #ddd6cf;
	--ok: #1a7f4b;
	--warn: #b8860b;
	--bad: #b3261e;
	--radius: 12px;
	--pad: 16px;
	--shadow: 0 1px 2px rgba(28, 16, 18, 0.04), 0 1px 3px rgba(28, 16, 18, 0.05);
	--shadow-lg: 0 10px 30px rgba(28, 16, 18, 0.12);
	--side-width: 256px;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);
	--app-width: 480px;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

/* Author rules such as `label.field { display: block }` outrank the user
   agent's [hidden] rule, so conditional fields need this to actually hide. */
[hidden] {
	display: none !important;
}

/* The app holds its own height and only the content scrolls, so the header and
   the menu stay where they are put. `overflow-x: hidden` here used to make the
   body a scroll container, which is what let a sticky header scroll away with
   the page. */
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	max-width: 100%;
	overflow: hidden;
	background: var(--ground);
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	font-size: 15.5px;
	line-height: 1.45;
	overscroll-behavior-y: contain;
	-webkit-font-smoothing: antialiased;
}

button,
a,
label,
.chip {
	touch-action: manipulation;
}

#app {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	overflow: hidden;
	background: var(--ground);
}

.boot {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--primary);
	color: #fff;
}

.boot img {
	width: 92px;
	height: 92px;
	background: #fff;
	border-radius: 18px;
	padding: 8px;
}

.boot .spinner {
	border-color: rgba(255, 255, 255, 0.25);
	border-top-color: var(--accent);
	margin: 0;
}

/* ---------------------------------------------------------------- header */

.topbar {
	flex: none;
	z-index: 20;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	color: var(--ink);
	padding: calc(var(--safe-top) + 10px) var(--pad) 10px;
	min-height: 60px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--line);
	width: 100%;
	max-width: 100%;
}

.topbar .back {
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink);
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-left: -2px;
	cursor: pointer;
}

.topbar .back svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.topbar h1 {
	font-size: 17px;
	font-weight: 650;
	margin: 0;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.01em;
}

.topbar .topbar-action {
	background: var(--primary);
	border: 0;
	color: #fff;
	border-radius: 10px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.topbar .icon-btn {
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink);
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.topbar .icon-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.brandmark {
	height: 32px;
	width: 32px;
	border-radius: 8px;
	background: #fff;
	padding: 3px;
	object-fit: contain;
}

/* ---------------------------------------------------------------- layout */

main {
	flex: 1;
	min-height: 0;
	padding: var(--pad);
	padding-bottom: calc(24px + var(--safe-bottom));
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.stack > * + * {
	margin-top: 12px;
}

.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: var(--shadow);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

.card.tap {
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card.tap:active {
	transform: scale(0.985);
	background: #fbfaf9;
}

.card.hero {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--shadow);
	padding: 20px 20px 22px;
	position: relative;
	overflow: hidden;
}

.card.hero::after {
	content: none;
}

.card.hero .eyebrow {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.72;
	font-weight: 700;
}

.card.hero .hello {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 4px 0 2px;
	position: relative;
	z-index: 1;
}

.card.hero .roles {
	font-size: 13px;
	opacity: 0.82;
	position: relative;
	z-index: 1;
}

.section-title {
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	margin: 22px 0 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.section-title:first-child {
	margin-top: 4px;
}

.section-title a,
.section-title button.link {
	background: none;
	border: 0;
	color: var(--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	padding: 0;
}

.row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
}

.row.between {
	justify-content: space-between;
}

.row.start {
	align-items: flex-start;
}

.grow {
	flex: 1;
	min-width: 0;
}

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

.small {
	font-size: 13.5px;
}

.tiny {
	font-size: 12.5px;
}

.strong {
	font-weight: 680;
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avatar {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--primary-soft);
	color: var(--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex: none;
	letter-spacing: 0.02em;
}

.avatar.lg {
	width: 56px;
	height: 56px;
	font-size: 18px;
	border-radius: 16px;
}

.avatar.dark {
	background: var(--dark);
	color: var(--accent);
}

/* ---------------------------------------------------------------- pieces */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--ground);
	color: var(--muted);
	border: 1px solid var(--line);
	white-space: nowrap;
	flex: none;
	max-width: 48%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chip.blue {
	background: #e8f0fb;
	color: #14508c;
	border-color: #cfe0f5;
}
.chip.purple {
	background: #f0eafb;
	color: #5b2ea6;
	border-color: #e0d3f5;
}
.chip.orange {
	background: #fdf0e2;
	color: #9a5b00;
	border-color: #f7ddc0;
}
.chip.green {
	background: #e6f4ec;
	color: var(--ok);
	border-color: #cbe8d8;
}
.chip.red {
	background: #fbe9e7;
	color: var(--bad);
	border-color: #f5d0cc;
}
.chip.dark {
	background: var(--dark);
	color: var(--accent);
	border-color: var(--dark);
}

.pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0 0 14px;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
}

.pills::-webkit-scrollbar {
	display: none;
}

.pills .chip {
	cursor: pointer;
	font-family: inherit;
	flex: none;
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	max-width: 100%;
}

.stat {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	text-align: left;
	box-shadow: var(--shadow);
	min-width: 0;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 6px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.stat .n {
	font-size: 26px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stat .l {
	font-size: 12px;
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.route {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 0 10px;
	align-items: start;
}

.route .dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--primary);
	margin-top: 5px;
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.route .dot.end {
	background: var(--dark);
	box-shadow: 0 0 0 3px #ececec;
}

.route .line {
	width: 2px;
	background: var(--line);
	margin: 2px 0 2px 4.5px;
	min-height: 16px;
	height: 100%;
}

.route .place {
	padding-bottom: 14px;
}

.route .place:last-child {
	padding-bottom: 0;
}

.map-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	color: var(--primary);
	font-size: 12.5px;
	font-weight: 650;
	text-decoration: none;
}

.map-link svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---------------------------------------------------------------- stepper */

.stepper {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding: 4px 0 2px;
	max-width: 100%;
	overflow: hidden;
}

.stepper .step {
	flex: 1;
	text-align: center;
	min-width: 0;
	position: relative;
}

.stepper .step::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	right: 50%;
	height: 2px;
	background: var(--line);
}

.stepper .step::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	right: 0;
	height: 2px;
	background: var(--line);
}

.stepper .step:first-child::before,
.stepper .step:last-child::after {
	display: none;
}

.stepper .step.done::before,
.stepper .step.done::after,
.stepper .step.now::before {
	background: var(--primary);
}

.stepper .bubble {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin: 0 auto 6px;
	background: var(--paper);
	border: 2px solid var(--line);
	position: relative;
	z-index: 1;
}

.stepper .step.done .bubble {
	background: var(--primary);
	border-color: var(--primary);
}

.stepper .step.now .bubble {
	background: var(--accent);
	border-color: var(--dark);
	box-shadow: 0 0 0 3px rgba(255, 224, 1, 0.35);
}

.stepper .lbl {
	font-size: 8.5px;
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 0 1px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stepper .step.now .lbl {
	color: var(--ink);
}

.stepper .step.done .lbl {
	color: var(--primary);
}

/* ---------------------------------------------------------------- action card */

.action-card {
	background: var(--dark);
	color: #fff;
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow-lg);
}

.action-card .kicker {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
	margin-bottom: 6px;
}

.action-card p {
	margin: 0 0 14px;
	font-size: 13.5px;
	opacity: 0.82;
}

.action-card .btn.primary {
	background: var(--accent);
	color: var(--dark);
	border-color: var(--accent);
}

.job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.time-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 650;
	cursor: pointer;
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
	text-decoration: none;
	width: 100%;
	font-family: inherit;
}

.btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.btn:active {
	transform: translateY(1px);
}

.btn.primary {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.btn.dark {
	background: var(--dark);
	color: var(--accent);
	border-color: var(--dark);
}

.btn.danger {
	background: #fff;
	color: var(--bad);
	border-color: #f0c5c1;
}

.btn.ghost {
	background: transparent;
	border-color: transparent;
	color: var(--primary);
}

.btn:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
}

.btn.inline {
	width: auto;
	min-height: 40px;
	font-size: 13.5px;
	padding: 0 14px;
}

.btn-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	max-width: 100%;
}

.btn-row.three {
	grid-template-columns: 1fr 1fr 1fr;
}

.call-row a {
	min-height: 44px;
}

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

label.field {
	display: block;
	margin-bottom: 14px;
}

/* The label has to survive being read at arm's length in a stairwell, so it
   is set in caps at a weight that holds against the field below it. */
label.field > span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b645f;
	margin-bottom: 6px;
}

label.field > span .req {
	color: var(--bad);
	margin-left: 3px;
}

input:not([type]),
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
	width: 100%;
	min-height: 50px;
	padding: 13px 14px;
	font-size: 16px; /* keeps iOS from zooming on focus */
	font-family: inherit;
	color: var(--ink);
	/* A hairline on white left the fields invisible: the form read as a column
	   of floating words. A faint fill and a real border make each one a box. */
	background: var(--field);
	border: 1.5px solid var(--field-line);
	border-radius: 12px;
	appearance: none;
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236f6f6f' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

textarea {
	min-height: 88px;
	resize: vertical;
}

input:not([type]):focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
	background: var(--paper);
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(101, 2, 22, 0.1);
}

::placeholder {
	color: #a8a29c;
}

input[type="file"] {
	width: 100%;
	padding: 11px 12px;
	font-size: 14px;
	background: var(--paper);
	border: 1px dashed #c9c5c1;
	border-radius: 12px;
}

.check {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	cursor: pointer;
}

.check:last-child {
	border-bottom: 0;
}

.check input {
	width: 22px;
	height: 22px;
	accent-color: var(--primary);
	flex: none;
}

.stars {
	display: flex;
	gap: 6px;
}

.stars button {
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	padding: 2px;
	color: var(--line);
	cursor: pointer;
}

.stars button.on {
	color: var(--accent);
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

canvas.signature {
	width: 100%;
	height: 170px;
	background: #faf9f7;
	border: 1px dashed #c9c5c1;
	border-radius: 12px;
	touch-action: none;
	display: block;
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}

.photo-grid a,
.photo-grid img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	background: var(--ground);
}

/* ---------------------------------------------------------------- shell / sidebar */

.shell {
	display: flex;
	height: 100%;
	min-height: 0;
	align-items: stretch;
}

.stage {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--ground);
}

.sidebar {
	width: var(--side-width);
	flex: none;
	background: var(--paper);
	color: var(--ink);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	padding: calc(var(--safe-top) + 18px) 12px 14px;
	z-index: 50;
	overflow-y: auto;
	position: relative;
}

.sidebar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary) 0 34%, var(--dark) 34% 67%, var(--accent) 67% 100%);
}

.side-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 8px 18px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--line-soft);
}

.side-brand img {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: #fff;
	border: 1px solid var(--line);
	padding: 3px;
	object-fit: contain;
	flex: none;
}

.side-brand .name {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.side-brand .tag {
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 1px;
}

.side-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.side-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9a9794;
	padding: 6px 12px 6px;
}

.side-nav button {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: transparent;
	border: 0;
	color: #45423f;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	min-height: 42px;
	cursor: pointer;
	font-family: inherit;
	position: relative;
	transition: background 0.12s ease, color 0.12s ease;
}

.side-nav button:hover {
	background: var(--ground);
	color: var(--ink);
}

.side-nav button .ico {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #8a8683;
	flex: none;
}

.side-nav button .ico svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.side-nav button.on {
	background: var(--primary-soft);
	color: var(--primary);
}

.side-nav button.on::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--primary);
}

.side-nav button.on .ico {
	color: var(--primary);
}

.nav-mask {
	display: none;
}

.menu-btn {
	display: none;
}

/* ---------------------------------------------------------------- states */

.empty {
	text-align: center;
	padding: 44px 20px;
	color: var(--muted);
}

.empty .ico {
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	border-radius: 16px;
	background: var(--primary-soft);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.empty .ico svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.empty p {
	margin: 0 0 6px;
}

.banner {
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
}

.banner.offline {
	background: var(--dark);
	color: var(--accent);
}

.banner.queued {
	background: #fdf0e2;
	color: #7a4a00;
	border: 1px solid #f7ddc0;
}

.banner.error {
	background: #fbe9e7;
	color: var(--bad);
	border: 1px solid #f5d0cc;
}

.banner.ok {
	background: #e6f4ec;
	color: var(--ok);
	border: 1px solid #cbe8d8;
}

.toast {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(92px + var(--safe-bottom));
	z-index: 60;
	background: var(--dark);
	color: #fff;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	max-width: 88vw;
	text-align: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.toast.bad {
	background: var(--bad);
}

.spinner {
	width: 26px;
	height: 26px;
	border: 3px solid var(--line);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
	margin: 40px auto;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.skel {
	background: linear-gradient(90deg, #ece9e6 25%, #f7f5f3 50%, #ece9e6 75%);
	background-size: 200% 100%;
	animation: skel 1.2s ease infinite;
	border-radius: 10px;
	height: 14px;
}

@keyframes skel {
	to {
		background-position: -200% 0;
	}
}

/* ---------------------------------------------------------------- sheet */

.sheet-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.5);
	z-index: 40;
	display: flex;
	align-items: flex-end;
	animation: fade 0.18s ease;
}

@keyframes fade {
	from {
		opacity: 0;
	}
}

.sheet {
	background: var(--paper);
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	border-radius: 22px 22px 0 0;
	padding: 18px var(--pad) calc(22px + var(--safe-bottom));
	animation: up 0.22s ease;
}

@keyframes up {
	from {
		transform: translateY(24px);
	}
}

.sheet h2 {
	margin: 0 0 14px;
	font-size: 18px;
	letter-spacing: -0.02em;
}

.sheet .grab {
	width: 38px;
	height: 4px;
	border-radius: 2px;
	background: var(--line);
	margin: -6px auto 14px;
}

.choice {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 14px 0;
	text-align: left;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.choice:last-child {
	border-bottom: 0;
}

.choice .strong {
	display: block;
}

.choice .tiny {
	display: block;
	margin-top: 2px;
}

/* ---------------------------------------------------------------- login */

.login {
	height: 100%;
	min-height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background: var(--primary);
	color: #fff;
}

.login .mast {
	padding: calc(var(--safe-top) + 36px) 28px 28px;
	text-align: center;
}

.login .logo {
	width: 118px;
	margin: 0 auto 14px;
	display: block;
	background: #fff;
	border-radius: 18px;
	padding: 10px;
}

.login .mast h1 {
	font-size: 22px;
	margin: 0 0 4px;
	letter-spacing: -0.02em;
}

.login .mast .tag {
	margin: 0;
	opacity: 0.78;
	font-size: 13.5px;
}

.login .rule {
	height: 4px;
	width: 100%;
	background: linear-gradient(
		90deg,
		var(--primary) 0 33%,
		var(--dark) 33% 66%,
		var(--accent) 66% 100%
	);
}

.login .panel {
	flex: 1;
	background: var(--paper);
	color: var(--ink);
	border-radius: 24px 24px 0 0;
	padding: 26px 22px calc(28px + var(--safe-bottom));
}

.login .panel h2 {
	margin-top: 0;
	margin-bottom: 4px;
	font-size: 18px;
}

.login .tiny.muted {
	text-align: center;
	margin-top: 22px;
}

/* ---------------------------------------------------------------- history */

.timeline {
	position: relative;
	padding-left: 18px;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--line);
}

.timeline .item {
	position: relative;
	padding: 0 0 14px;
}

.timeline .item:last-child {
	padding-bottom: 0;
}

.timeline .item::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 0 0 3px var(--paper);
}

.stat.tap {
	cursor: pointer;
}

.stat.tap:active {
	transform: scale(0.98);
}

.dash-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.chart-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 14px 14px;
	box-shadow: var(--shadow);
}

.chart-title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 12px;
}

.bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 132px;
}

.bar-col {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
}

.bar-col .bar {
	width: 100%;
	max-width: 32px;
	background: var(--primary);
	border-radius: 7px 7px 3px 3px;
	min-height: 4px;
}

.bar-col .bar.gold {
	background: var(--accent);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.bar-col .n {
	font-size: 11px;
	font-weight: 700;
	color: var(--primary);
	line-height: 1;
}

.bar-col .d {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hbar-row {
	display: grid;
	grid-template-columns: 92px 1fr 28px;
	gap: 8px;
	align-items: center;
	margin: 10px 0;
}

.hbar-row .lbl {
	font-size: 12px;
	font-weight: 650;
}

.hbar-row .n {
	font-size: 12px;
	font-weight: 700;
	text-align: right;
}

.hbar {
	height: 9px;
	background: var(--line);
	border-radius: 99px;
	overflow: hidden;
}

.hbar i {
	display: block;
	height: 100%;
	background: var(--primary);
	border-radius: 99px;
}

.hbar i.green { background: var(--ok); }
.hbar i.orange { background: #c47a1a; }
.hbar i.red { background: var(--bad); }
.hbar i.blue { background: #14508c; }
.hbar i.purple { background: #5b2ea6; }
.hbar i.dark { background: var(--dark); }

.activity-card {
	padding: 4px 14px;
}

.activity-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}

.activity-item:last-child {
	border-bottom: 0;
}

.activity-item .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	margin-top: 6px;
	flex: none;
	box-shadow: none;
}

.activity-item .dot.green { background: var(--ok); }
.activity-item .dot.orange { background: #c47a1a; }
.activity-item .dot.red { background: var(--bad); }
.activity-item .dot.blue { background: #14508c; }
.activity-item .dot.purple { background: #5b2ea6; }

@media (max-width: 767px) {
	.sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		box-shadow: none;
		width: min(280px, 86vw);
		padding-bottom: calc(20px + var(--safe-bottom));
	}

	.nav-open .sidebar {
		transform: translateX(0);
		box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
	}

	.nav-mask {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(17, 17, 17, 0.45);
		z-index: 40;
	}

	.nav-open .nav-mask {
		display: block;
	}

	.menu-btn {
		display: inline-flex;
	}

	/* Four tiles in a row of three left the fourth stranded on its own line. */
	.stat-grid.kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	html,
	body,
	#app {
		max-width: none;
		background: var(--ground);
	}

	.topbar {
		padding-left: 22px;
		padding-right: 22px;
	}

	/* main is the only thing that scrolls, so it spans the whole stage and the
	   scrollbar sits at the edge of the window where people look for it. The
	   reading width is held by the padding instead of a max-width, which would
	   have put the scrollbar in the middle of the screen. */
	main {
		padding: 28px max(32px, calc((100% - 1180px) / 2)) 48px;
		max-width: none;
		width: 100%;
		margin: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.stat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.stat-grid.kpis {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.dash-grid {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		gap: 16px;
	}

	.dash-grid .wide {
		grid-column: 1 / -1;
	}

	/* The hamburger only opens the phone drawer; on a desk the sidebar is
	   always there. `.topbar .icon-btn` outranks a bare `.menu-btn`. */
	.topbar .menu-btn {
		display: none;
	}

	.topbar {
		min-height: 64px;
	}

	.topbar h1 {
		font-size: 18px;
	}

	.topbar .icon-btn:hover,
	.topbar .back:hover {
		background: var(--ground);
	}

	.card.tap:hover,
	.stat.tap:hover {
		border-color: #d9d4d0;
		box-shadow: 0 4px 14px rgba(28, 16, 18, 0.07);
	}

	.card.tap:active,
	.stat.tap:active {
		transform: none;
	}

	.stat {
		padding: 18px 20px;
	}

	.stat .n {
		font-size: 30px;
	}

	.card.hero {
		padding: 26px 28px 28px;
	}

	.card.hero .hello {
		font-size: 26px;
	}

	/* Lists read as one table-like panel on a monitor rather than a column of
	   phone cards. */
	.stack.list {
		background: var(--paper);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		overflow: hidden;
	}

	.stack.list > * + * {
		margin-top: 0;
	}

	.stack.list > .card {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid var(--line-soft);
		padding: 14px 20px;
	}

	.stack.list > .card:last-child {
		border-bottom: 0;
	}

	.stack.list > .card.tap:hover {
		background: var(--hover);
		box-shadow: inset 3px 0 0 var(--primary);
	}

	.btn {
		min-height: 42px;
		font-size: 14.5px;
	}

	main > .btn,
	.stack > .btn,
	form .btn.primary {
		width: auto;
		min-width: 180px;
		padding: 0 22px;
	}

	/* Data entry forms: two fields a row, notes, lines and buttons full
	   width, and never wider than a person reads. */
	main > form.card {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
		max-width: 860px;
		padding: 24px;
	}

	main > form.card > * {
		grid-column: 1 / -1;
	}

	main > form.card > label.field:not(:has(textarea)) {
		grid-column: auto;
	}

	main > form.card > .btn.primary {
		justify-self: start;
		margin-top: 4px;
	}

	.pills .chip {
		padding: 6px 14px;
		font-size: 12.5px;
	}

	.toast {
		left: calc(var(--side-width) + 24px);
		right: auto;
		transform: none;
		bottom: 28px;
	}

	/* Dialogs sit in the middle of the screen instead of rising from the
	   bottom edge. */
	.sheet-backdrop {
		align-items: center;
		justify-content: center;
		padding: 24px;
	}

	.sheet {
		max-width: 560px;
		margin: 0 auto;
		border-radius: 16px;
		padding: 24px 24px 22px;
		box-shadow: var(--shadow-lg);
	}

	.sheet .grab {
		display: none;
	}
}

@media (min-width: 900px) {
	/* Sign in: brand panel on the left, the form on the right. */
	.login {
		flex-direction: row;
		background: var(--paper);
	}

	.login .mast {
		width: 44%;
		max-width: 620px;
		background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 48px;
	}

	.login .mast::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 4px;
		background: linear-gradient(90deg, var(--primary) 0 33%, var(--dark) 33% 66%, var(--accent) 66% 100%);
	}

	.login .logo {
		width: 150px;
	}

	.login .mast h1 {
		font-size: 28px;
	}

	.login .rule {
		display: none;
	}

	.login .panel {
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 48px;
	}

	.login .panel > * {
		width: 100%;
		max-width: 380px;
		margin-left: auto;
		margin-right: auto;
	}

	.login .panel h2 {
		font-size: 24px;
	}

	.login .panel form .btn.primary {
		width: 100%;
	}
}

@media (prefers-color-scheme: dark) {
	/* The app is used in daylight far more than at night and the brand is a
	   light mark on white, so it stays light in both. Only the ground is
	   softened so it is not glaring in a dark room. */
	:root {
		--ground: #f0eeec;
	}
}

.chart-empty {
	min-height: 132px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--muted);
	font-size: 13px;
	border: 1px dashed var(--line);
	border-radius: 10px;
}

.chart-empty .ico {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--primary-soft);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.chart-empty .ico svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ---------------------------------------------------------------- survey inventory */

/* The inventory reads as the table it is: the same columns the grid shows on
   the desk, grouped by room, and a line opens in the dialog when you tap it. */

.card.inv {
	padding: 2px 12px;
}

.inv-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32px 44px 48px;
	align-items: center;
	gap: 8px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line-soft);
}

.inv-row:has(.inv-del) {
	grid-template-columns: minmax(0, 1fr) 32px 44px 48px 30px;
}

.inv-row.head {
	padding: 9px 0 7px;
	border-bottom: 1px solid var(--line);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8d8783;
}

.inv-row.tap {
	cursor: pointer;
}

.inv-row.tap:active {
	background: var(--hover);
}

.inv-room {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--primary);
	padding: 12px 0 2px;
}

.inv-item {
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
}

.inv-tags {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--muted);
	margin-top: 1px;
}

.inv-tags.short {
	color: var(--bad);
}

.inv-n {
	text-align: right;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.inv-n.total {
	font-weight: 700;
	color: var(--ink);
}

.inv-row.head .inv-n {
	color: inherit;
}

.inv-del {
	background: none;
	border: 1px solid var(--line);
	color: var(--muted);
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.inv-del.ghost {
	border-color: transparent;
}

.inv-total {
	display: flex;
	justify-content: space-between;
	padding: 12px 0 10px;
	font-weight: 700;
	color: var(--primary);
	border-top: 1px solid var(--line);
	margin-top: 2px;
}

/* ---------------------------------------------------------------- the bell */

.topbar .bell {
	position: relative;
	margin-left: auto;
}

.topbar .bell .badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* An unread notification is marked by weight and a chip, not a tinted panel. */
.card.unread .strong {
	font-weight: 700;
}

/* Every form is a two column grid. A field takes the whole row unless it is
   marked .half, which is for the short answers: a phone number, a town, a
   date. Pairing those is what stops a long form being a mile of scrolling. */
main > form.card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}

main > form.card > * {
	grid-column: 1 / -1;
}

/* Two fields side by side get the same height, and the label takes up the
   slack, so a label that wraps to two lines does not shunt its own box down
   out of line with the one beside it. */
main > form.card > label.field {
	display: flex;
	flex-direction: column;
}

main > form.card > label.field > span {
	flex: 1;
	display: flex;
	align-items: flex-end;
}

main > form.card > label.field.half {
	grid-column: auto;
}

/* A small phone has no room for two of anything. */
@media (max-width: 379px) {
	main > form.card > label.field.half {
		grid-column: 1 / -1;
	}
}

/* A heading inside a form. It has to outrank the field labels under it, so it
   is bigger, darker and in sentence case where they are small caps. Type and a
   hairline, no tinted panel. */
.form-sep {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 22px 0 12px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.form-sep:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.field[hidden] {
	display: none;
}

/* ------------------------------------------------- the phone layout, forced

   `html.compact` is set by the app shell from the narrowest honest reading of
   the screen. It repeats the phone rules so they also win on a handset that
   claims a 980px viewport, which is what "desktop site" mode does. These come
   last in the file deliberately: they must outrank the `min-width: 768px`
   block above. */

html.compact .sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	transform: translateX(-105%);
	transition: transform 0.22s ease;
	box-shadow: none;
	width: min(290px, 84vw);
	padding-bottom: calc(20px + var(--safe-bottom));
	z-index: 60;
}

html.compact.nav-open .sidebar {
	transform: translateX(0);
	box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
}

html.compact .nav-mask {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.45);
	z-index: 55;
}

html.compact.nav-open .nav-mask {
	display: block;
}

html.compact .topbar {
	padding-left: var(--pad);
	padding-right: var(--pad);
	min-height: 56px;
	gap: 10px;
}

html.compact .topbar h1 {
	font-size: 17px;
}

html.compact main {
	padding: 14px var(--pad) calc(32px + var(--safe-bottom));
	max-width: none;
	margin: 0;
}

html.compact .stat-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

html.compact .stat-grid.kpis {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.compact .dash-grid {
	display: block;
}

html.compact .dash-grid > * + * {
	margin-top: 12px;
}

html.compact .stat {
	padding: 13px 14px;
}

html.compact .stat .n {
	font-size: 22px;
}

html.compact .card.hero {
	padding: 18px 18px 20px;
}

html.compact .card.hero .hello {
	font-size: 21px;
}

/* One field a row on a phone: two columns of a Nairobi street name is
   unreadable on a 360px screen. */
html.compact main > form.card {
	max-width: none;
	padding: 16px;
	column-gap: 10px;
}

/* The wide layout pairs every short field. On a phone only the ones marked
   .half pair, so a name or an email still gets the full width. */
html.compact main > form.card > label.field {
	grid-column: 1 / -1;
}

html.compact main > form.card > label.field.half {
	grid-column: auto;
}

html.compact main > .btn,
html.compact .stack > .btn,
html.compact form .btn.primary {
	width: 100%;
	min-width: 0;
	padding: 0 18px;
}

html.compact .stack.list {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

html.compact .stack.list > * + * {
	margin-top: 10px;
}

html.compact .stack.list > .card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 13px 14px;
}

html.compact .toast {
	left: 12px;
	right: 12px;
	transform: none;
	bottom: calc(16px + var(--safe-bottom));
}

html.compact .sheet-backdrop {
	align-items: flex-end;
	justify-content: stretch;
	padding: 0;
}

html.compact .sheet {
	max-width: none;
	margin: 0;
	border-radius: 18px 18px 0 0;
	padding: 14px 16px calc(18px + var(--safe-bottom));
}

html.compact .sheet .grab {
	display: block;
}

/* --------------------------------------------- closing it on a wide screen

   The hamburger is there at every width now. On a monitor it does not slide a
   drawer over the page, it simply takes the rail away and gives the width
   back to the work. The choice is remembered per device. */

html:not(.compact).nav-hidden .sidebar {
	display: none;
}

.topbar .menu-btn {
	display: inline-flex;
}

/* A labelled line in a card. */
.kv {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 3px 0;
}

.kv .k {
	flex: none;
	width: 92px;
	font-size: 12px;
	color: var(--muted);
}

.kv .v {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	overflow-wrap: anywhere;
}

html.compact .kv .k {
	width: 78px;
}

/* ------------------------------------------ who is signed in, and the way out

   In the header rather than the menu. It is the one thing on every screen that
   is about the person using it, and the top right is where people look. */

.user-wrap {
	position: relative;
	flex: none;
}

.topbar .user-btn {
	padding: 0;
	overflow: hidden;
}

.topbar .user-btn .avatar {
	width: 100%;
	height: 100%;
	border-radius: 0;
	font-size: 12.5px;
}

.user-pop {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	min-width: 208px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	padding: 6px;
	overflow: hidden;
}

.user-pop[hidden] {
	display: none;
}

.user-head {
	padding: 8px 10px 10px;
	border-bottom: 1px solid var(--line-soft);
	margin-bottom: 6px;
}

.user-head .who {
	font-size: 14px;
	font-weight: 700;
}

.user-head .role {
	font-size: 12px;
	color: var(--muted);
	margin-top: 1px;
}

.user-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 8px;
	padding: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.user-item:hover {
	background: var(--ground);
}

.user-item.out {
	color: var(--bad);
}

/* ---------------------------------------------------------------- themes

   The maroon is the brand and is set inline from Movers CRM Settings, so it
   has no block here: leaving the attribute off leaves the brand alone. The
   rest are chosen per device on the Settings screen, which matters for a
   shared tablet in the yard. */

html[data-theme="ink"] {
	--primary: #1f2933;
	--primary-dark: #111a21;
	--primary-soft: #eceff2;
}

html[data-theme="forest"] {
	--primary: #1f5c45;
	--primary-dark: #14402f;
	--primary-soft: #e8f1ed;
}

html[data-theme="ocean"] {
	--primary: #15506e;
	--primary-dark: #0d3850;
	--primary-soft: #e8f0f5;
}

html[data-theme="clay"] {
	--primary: #8a4218;
	--primary-dark: #672f0f;
	--primary-soft: #f6ece5;
}

.theme-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
}

.theme-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border: 1.5px solid var(--field-line);
	border-radius: 12px;
	background: var(--field);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}

.theme-chip .swatch {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	flex: none;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.theme-chip.on {
	border-color: var(--primary);
	background: var(--paper);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* A row of the team builder: who, what they do, and a way to drop them. */
.team-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 118px 30px;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.team-row select {
	min-height: 44px;
	padding: 9px 10px;
	font-size: 14px;
}

/* A role is a checkbox with an explanation under it, because "Operations"
   means nothing on its own to whoever is granting it. */
.role-check {
	align-items: flex-start;
	padding: 11px 0;
}

.role-check input {
	margin-top: 3px;
}

.role-check > span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.role-check .tiny {
	font-weight: 400;
}

/* ------------------------------------------------------ the password field

   Typing a password blind, outdoors, one handed, is how people end up locked
   out of the app on the morning of a move. */

.pw-wrap {
	display: block;
	position: relative;
}

.pw-wrap input {
	padding-right: 48px;
}

.pw-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	border-radius: 9px;
	color: var(--muted);
	cursor: pointer;
	padding: 0;
}

.pw-eye svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.pw-eye:hover {
	color: var(--ink);
}

.pw-forgot {
	align-self: flex-end;
	background: none;
	border: 0;
	padding: 0 2px 4px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
	cursor: pointer;
}

.login .stack > .pw-forgot {
	margin-top: -4px;
}

/* ------------------------------------------------------- settings and charts */

/* A row of tabs inside a screen. Reuses the chip look so it reads as the same
   control people already use on the job and lead lists. */
.pills.tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: 14px;
	scrollbar-width: none;
}

.pills.tabs::-webkit-scrollbar {
	display: none;
}

.pills.tabs .chip {
	flex: none;
	cursor: pointer;
	border: 1px solid var(--line);
	font-size: 13px;
	padding: 8px 14px;
}

.bars.tall {
	height: 150px;
}

/* A share of the whole, read as a row rather than a pie: easier on a phone
   and honest about small slices. */
.shares {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.share .track {
	margin-top: 5px;
	height: 7px;
	border-radius: 999px;
	background: var(--ground);
	overflow: hidden;
}

.share .track span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--primary);
}

.share:nth-child(2n) .track span {
	background: var(--primary-dark);
}

.share:nth-child(3n) .track span {
	background: #14508c;
}

.stat-grid.kpis.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.stat-grid.kpis.three .stat .n {
	font-size: 22px;
}
@media (min-width: 768px) {
	.stat-grid.kpis.three .stat .n {
		font-size: 28px;
	}
}
.section-title + .stat-grid {
	margin-top: 0;
}

.chat { padding: 10px; }
.chat-log { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 10px; }
.chat .msg { max-width: 86%; align-self: flex-start; }
.chat .msg.mine { align-self: flex-end; text-align: right; }
.chat .bubble { background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; font-size: 14px; white-space: pre-wrap; text-align: left; display: inline-block; }
.chat .msg.mine .bubble { background: var(--primary); border-color: var(--primary); color: #fff; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-form .btn { width: auto; }
.tpl-part { margin-top: 12px; }
.tpl-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-ed { margin-top: 10px; min-height: 56px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 14px; line-height: 1.5; background: var(--paper); }
.tpl-ed:focus { outline: 2px solid var(--primary); }
.tpl-ed:empty::before { content: attr(data-empty); color: var(--muted); }
.tpl-ed ul, .tpl-ed ol { margin: 4px 0 4px 20px; padding: 0; }

.donut { display: flex; align-items: center; gap: 14px; }
.donut svg { width: 118px; height: 118px; flex: none; }
.legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.legend .lg { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend .lg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.lines { width: 100%; height: 130px; display: block; }
.lines .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lines .area { fill: var(--primary); opacity: 0.08; }
.lines .stroke { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; border-bottom: 1px solid var(--line); }
.mini-bars span { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; }

.field:has(:required) > span::after { content: " *"; color: #b42318; }

.known-card { margin: 6px 0 12px; border: 1px solid var(--border, #e3e0dd); }
.known-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	padding: 12px 14px; margin-top: 8px; background: #fff; text-align: left; cursor: pointer;
	border: 1.5px solid var(--brand, #650216); border-radius: 12px; font: inherit; color: inherit;
}
.known-row:hover { background: #fbf3f5; }
.known-row:active { transform: scale(.99); }
.known-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.known-use {
	flex: none; padding: 7px 14px; border-radius: 999px; background: var(--brand, #650216);
	color: #fff; font-size: 13px; font-weight: 600;
}

.seg { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; background: #f1eeec; border-radius: 12px; }
.seg-btn { flex: 1; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 600; color: #6b6663; cursor: pointer; }
.seg-btn.on { background: #fff; color: var(--brand, #650216); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

.money { position: relative; }
.money-cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: #8a8480; pointer-events: none; }
.money input { padding-left: 48px; text-align: right; }

.action-bar{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto}
.action-bar .act{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#e5e7eb);background:#fff;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}
.action-bar .act.primary{background:var(--brand,#7a0f1f);color:#fff;border-color:transparent}
.action-bar .act:active{transform:scale(.97)}

details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"\25B8";transition:transform .15s}
details.fold[open]>summary::before{transform:rotate(90deg)}

label.combo{position:relative}
.combo-menu{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:50;max-height:240px;overflow-y:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:4px}
.combo-menu[hidden]{display:none}
.combo-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer}
.combo-item:hover,.combo-item:active{background:#f6eef0}
.combo-av{flex:none;width:30px;height:30px;border-radius:50%;background:#f3dfe3;color:var(--brand,#650216);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.combo-tx{display:flex;flex-direction:column;min-width:0}
.combo-l{font-size:14px;font-weight:600;color:#111}
.combo-s{font-size:12px;color:#6b7280}

details.fold{margin:14px 0 0}
details.fold>summary{justify-content:flex-start;padding:12px 14px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:14px;font-weight:700;color:#111;text-transform:none;letter-spacing:0;margin:0}
details.fold>summary::before{color:var(--brand,#650216);font-size:14px}
details.fold>summary .fold-t{flex:1;text-align:left}
details.fold>summary .fold-n{background:#f3dfe3;color:var(--brand,#650216);border-radius:999px;padding:1px 9px;font-size:12px}
details.fold[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
details.fold[open]>.card{border-top-left-radius:0;border-top-right-radius:0;margin-top:0}

.combo-menu{position:fixed;right:auto;margin-top:0;z-index:2000}
.combo-add{border-top:1px solid #eee;margin-top:4px;color:var(--brand,#650216)}
.combo-add .combo-l{color:var(--brand,#650216)}

/* sidebar sign out, far below the menu */
.side-foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line-soft)}
.side-out{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--primary);font:inherit;font-weight:600;cursor:pointer}
.side-out .ico{width:20px;height:20px;display:inline-flex}
.side-out .ico svg{width:20px;height:20px;fill:currentColor}
.side-out:hover{background:#fbeef0}
.side-nav{flex:none;margin-bottom:28px}

/* dashboard tiles */
.stat.tile{flex-direction:column;justify-content:flex-start;gap:4px;padding:16px 18px;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.04);transition:transform .12s ease,box-shadow .12s ease}
.stat.tile.tap:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.10)}
.tile-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tile-ico{flex:none;width:34px;height:34px;border-radius:10px;background:#f6e6e9;color:var(--primary);display:inline-flex;align-items:center;justify-content:center}
.tile-ico svg{width:18px;height:18px;fill:currentColor}
.tile-l{font-size:13px;font-weight:600;color:var(--muted)}
.stat.tile .n{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tile-sub{font-size:12px;color:var(--muted);min-height:16px}
.card.hero{border-radius:18px;box-shadow:0 10px 28px rgba(101,2,22,.22)}
.dash-actions .act{padding:12px 14px}

.team-table{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.tt-head,.tt-row{display:grid;grid-template-columns:minmax(0,1fr) 86px 104px 34px;gap:8px;align-items:center;padding:8px 10px}
.tt-head{background:#f6f3f3;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tt-row{border-top:1px solid var(--line-soft,#eee)}
.tt-in{width:100%;min-width:0;box-sizing:border-box;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:14px;color:inherit}
.tt-in:focus{outline:none;border-color:var(--primary)}
.tt-x{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.tt-x:hover{background:#fbeef0;color:var(--primary)}
.tt-total{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:9px 12px;border-top:1px solid var(--line);background:#fafafa;font-size:13px}
.tt-total:empty{display:none}
.tt-total.bad b,.tt-total em{color:var(--primary)}
.tt-total em{font-style:normal;font-size:12px}

.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:14px}
.rp-item{padding:14px}
.rp-item .tiny{margin-top:4px}
.rp-dates{display:flex;align-items:center;gap:8px;margin:10px 0}
.rp-dates input,.rp-dates select{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:14px}
.rp-sum,.rp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.rp-kpis .n.bad{color:var(--primary)}
.rp-chart{padding:12px 14px;margin-bottom:14px}
.rp-bar{display:grid;grid-template-columns:minmax(80px,140px) 1fr minmax(70px,auto);gap:10px;align-items:center;padding:5px 0;font-size:13px}
.rp-bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.rp-track{height:10px;background:#f1eeec;border-radius:6px;overflow:hidden}
.rp-track i{display:block;height:100%;background:var(--primary);border-radius:6px}
.rp-bar b{text-align:right;font-weight:600}
.rp-wrap{overflow-x:auto;padding:0}
.rp-table{width:100%;border-collapse:collapse;font-size:13px}
.rp-table th{background:#f6f3f3;text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:9px 12px;white-space:nowrap}
.rp-table td{padding:9px 12px;border-top:1px solid #eee;white-space:nowrap}
.rp-table .r{text-align:right}
@media print{.sidebar,.topbar,header,.action-bar,.pills,.rp-dates,.nav-mask{display:none!important}}

.rp-table tr.tap{cursor:pointer}
.rp-table tr.tap:hover td{background:#faf7f7}
.rp-index td{white-space:normal}
.rp-index td:nth-child(2){color:var(--muted)}
.rp-index td.r{color:var(--primary);white-space:nowrap}

/* Chat box: the field takes the row, Send stays as small as its label. */
.chat-form { display: flex; align-items: center; gap: 8px; }
.chat-form input { flex: 1 1 0; width: auto; min-width: 0; }
.chat-form .btn { flex: 0 0 auto; width: auto; min-width: 0; padding: 0 16px; margin: 0; }

.progress { display: flex; gap: 4px; margin: 12px 0 4px; }
.pstep { flex: 1; min-width: 0; }
.pbar { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.pstep.done .pbar { background: var(--accent); }
.pstep.now .pbar { background: var(--ink); }
.plabel { display: block; margin-top: 4px; font-size: 10px; text-align: center; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstep.now .plabel { color: var(--ink); font-weight: 600; }

.card.filter-row, form.card.filter-row { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 !important; margin: 0 0 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
.filter-row input, .filter-row select { flex: 1 1 150px; width: auto; max-width: 220px; min-width: 120px; height: 32px; margin: 0; padding: 0 10px; font-size: 13px; background: #f3f3f3; border: 1px solid transparent; border-radius: 8px; box-sizing: border-box; }
.filter-row input:focus, .filter-row select:focus { background: #fff; border-color: var(--line); outline: none; }
.filter-row .btn { flex: 0 0 auto; width: auto; height: 32px; margin: 0; padding: 0 10px; font-size: 13px; background: transparent; border: 0; box-shadow: none; color: #777; font-weight: 500; }
.rp-wrap { overflow-x: auto; max-width: 100%; }
.rp-wrap .rp-table { width: 100%; table-layout: auto; }
.rp-table th { white-space: nowrap; }
.rp-table td { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; vertical-align: top; }
.rp-table td.strong { font-weight: 600; min-width: 110px; }
.rp-table td:nth-child(5), .rp-table td:nth-child(6) { white-space: nowrap; }
.rp-table .chip { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; width: auto; display: inline-block; }

/* Lists: larger type and less dead space */
@media (min-width: 768px) {
	main { padding: 18px max(20px, calc((100% - 1560px) / 2)) 32px; }
}
.filter-row input, .filter-row select { height: 38px; font-size: 14.5px; max-width: 260px; }
.filter-row .btn { height: 38px; font-size: 14.5px; }
.rp-table { font-size: 15px; }
.rp-table th { font-size: 12.5px; padding: 10px 14px; }
.rp-table td { padding: 10px 14px; line-height: 1.35; }
.rp-table .chip { font-size: 13px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 4px; font-size: 14.5px; color: var(--muted); }
.pager .btn { width: auto; min-width: 0; height: 36px; padding: 0 16px; margin: 0; }
.pager .btn[disabled] { opacity: .4; pointer-events: none; }

/* Invoice detail */
.inv-grid { display: block; }
.inv-sum { padding: 20px 22px; }
.inv-title { font-size: 19px; font-weight: 700; }
.inv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 14px; }
.inv-stat { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.inv-stat span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.inv-stat b { font-size: 17px; }
.inv-stat.ok b { color: var(--ok); }
.inv-stat.bad b { color: var(--bad); }
.inv-metas { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 12px; border-top: 1px solid var(--line); }
.inv-meta span { display: block; font-size: 12px; color: var(--muted); }
.inv-meta b { font-size: 14.5px; font-weight: 600; }
.inv-items tfoot td { border-top: 2px solid var(--line); background: var(--field); font-size: 15px; }
.inv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.inv-actions .btn { width: 100%; margin: 0; }
@media (min-width: 1000px) {
	.inv-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
}
@media (max-width: 520px) { .inv-stats { grid-template-columns: 1fr; } }

/* quotation page */
.qd-head { padding: 18px 20px; }
.qd-ref { font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.qd-name { font-size: 22px; font-weight: 700; margin-top: 10px; line-height: 1.2; }
.qd-route { color: var(--muted); font-size: 14px; margin-top: 4px; }
.qd-route i { font-style: normal; color: var(--primary); padding: 0 4px; }
.qd-total { display: flex; align-items: baseline; justify-content: space-between;
	margin-top: 16px; padding: 14px 16px; background: var(--primary-soft); border-radius: 12px; }
.qd-total span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.qd-total b { font-size: 26px; color: var(--primary); }
.qd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.qd-cell span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qd-cell b { display: block; font-size: 14px; margin-top: 3px; font-weight: 600; }
.qd-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.qd-actions .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.qd-actions .btn { flex: 1 1 0; min-height: 42px; font-size: 14px; width: auto !important; }
.qd-docs .btn { min-height: 42px; font-size: 14px; }
.qd-link { background: none; border: 0; color: var(--primary); font: inherit; font-size: 14px;
	font-weight: 600; margin-top: 12px; padding: 0; cursor: pointer; }
.qd-items { padding: 6px 20px; }
.qd-line { display: flex; gap: 12px; padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.qd-line:last-child { border-bottom: 0; }
.qd-line em { font-style: normal; color: var(--muted); }
.qd-line.sub { color: var(--muted); }
.qd-line.total { border-top: 2px solid var(--ink); border-bottom: 0; font-size: 16px; font-weight: 700; margin-top: 4px; }
.qd-bar { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.qd-bar .btn { flex: 1 1 0; min-width: 150px; }
.qd-bar .btn.primary { flex: 2 1 220px; }
@media (max-width: 520px) { .qd-grid { grid-template-columns: 1fr 1fr; } .qd-name { font-size: 20px; } }

/* list pages */
.ls-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ls-count { font-size: 13px; color: var(--muted); }
.ls-count b { font-size: 20px; color: var(--ink); margin-right: 4px; }
.ls-search { flex: 1 1 220px; max-width: 340px; min-height: 40px; padding: 0 14px; border-radius: 10px;
	border: 1px solid var(--field-line); background: var(--field); font: inherit; font-size: 14px; }
.ls { padding: 0; }
.ls-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; cursor: pointer;
	border-bottom: 1px solid var(--line-soft); }
.ls-row:last-child { border-bottom: 0; }
.ls-row:hover { background: var(--hover); }
.ls-main { flex: 1; min-width: 0; }
.ls-title { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ls-end b { font-size: 14px; }
.ls-chev { color: var(--muted); font-size: 22px; }

/* client page */
.avatar.xl { width: 56px; height: 56px; font-size: 20px; }
.cl-head { padding: 18px 20px; }
.cl-name { font-size: 22px; font-weight: 700; line-height: 1.2; }
.cl-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cl-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border: 1px solid var(--line-soft);
	border-radius: 12px; background: var(--field); }
.cl-stat { padding: 12px 14px; text-align: center; }
.cl-stat + .cl-stat { border-left: 1px solid var(--line-soft); }
.cl-stat b { display: block; font-size: 18px; color: var(--primary); }
.cl-stat span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; padding: 18px 20px; }
.cl-kv span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-kv b { display: block; font-size: 14px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }