:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2430;
  --muted: #5d6b7c;
  --border: #d9dee5;
  --accent: #1f6feb;
  --accent-contrast: #ffffff;
  --danger: #c4312b;
  --ok-bg: #e5f5ea;
  --ok-text: #1d6b37;
  --error-bg: #fdecea;
  --error-text: #8c1d18;
  --notice-bg: #eaf2ff;
  --radius: 8px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c;
    --surface: #1b2129;
    --text: #e6ebf1;
    --muted: #9aa7b6;
    --border: #2e3742;
    --accent: #5b9dff;
    --accent-contrast: #0b1220;
    --danger: #ff7a73;
    --ok-bg: #173323;
    --ok-text: #8fe0a9;
    --error-bg: #3a1a18;
    --error-text: #ffb4ad;
    --notice-bg: #1a2a44;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
code { font-size: 0.85em; color: var(--muted); }
h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; }
.nav a { color: var(--muted); text-decoration: none; padding: 0.25rem 0; }
.nav a.active { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent); }
.signout { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.who { color: var(--muted); font-size: 0.9rem; }

.page { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}
.card.narrow { max-width: 520px; margin: 2rem auto; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--muted); margin: 0 0 0.25rem; }
.muted, .hint, .optional { color: var(--muted); }
.hint { font-size: 0.875rem; margin: 0.25rem 0 0; }

label { display: block; font-weight: 600; margin: 1rem 0 0.35rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
select { width: auto; }
input:disabled, select:disabled { opacity: 0.6; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 1rem 0; padding: 0.5rem 1rem 1rem; }
legend { font-weight: 600; padding: 0 0.35rem; }
label.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin: 0.6rem 0 0; }
label.check input { margin-top: 0.3rem; }
label.check.locked { opacity: 0.6; }

button, .button {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.page-head .button { margin-top: 0; }
button.danger { background: var(--danger); color: var(--accent-contrast); }
button.linkish { margin: 0; padding: 0; background: none; color: var(--accent); font-weight: 400; }

.notice { background: var(--notice-bg); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.sample-strip { border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.4rem 0.75rem; margin: 0 0 1rem; font-size: 0.875rem; color: var(--muted); }
.sample-choice { display: grid; gap: 0.5rem; }
.danger-zone { border: 1px solid var(--error-text); }
.errors { background: var(--error-bg); color: var(--error-text); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 1rem 0; }
.errors ul { margin: 0; padding-left: 1.2rem; }
.errors p { margin: 0; }

.badge { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.badge.on { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.off { background: var(--error-bg); color: var(--error-text); border-color: transparent; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
.perm-table td code { display: block; }

.steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.steps li { font-size: 0.85rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.steps li.current { border-color: var(--accent); color: var(--text); font-weight: 600; }
.steps li.done { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile { display: block; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-weight: 600; text-decoration: none; }
.tile:hover { border-color: var(--accent); }

@media (max-width: 720px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
  td { border: 0; padding: 0.2rem 0.75rem; }
  .signout { margin-left: 0; }
}

/* Settings, locations, audit */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.logo-preview { max-height: 80px; max-width: 240px; object-fit: contain; background: var(--bg); padding: 0.5rem; border-radius: var(--radius); }
.button.secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
textarea { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"] {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit;
}
input.stacked { margin-top: 0.5rem; }
fieldset[disabled] { opacity: 0.85; }
.card > fieldset { border: 0; padding: 0; margin: 0; }
.card h2 + .grid-2, .card h2 + label { margin-top: 0; }
.card fieldset h2 { margin-top: 1.5rem; }
.card fieldset h2:first-child { margin-top: 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 0 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: 2fr 1fr 1fr; }
.grid-4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
select { max-width: 100%; }
.pager { display: flex; gap: 1.5rem; }
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Fieldsets default to min-width: min-content and overflow narrow screens. */
fieldset { min-width: 0; }

@media (max-width: 720px) {
  /* Nav gets its own scrollable row under the brand and account. */
  .nav { flex-basis: 100%; order: 3; gap: 0.25rem 1rem; padding-bottom: 0.25rem; }
  .nav a, .nav-label { white-space: nowrap; }
  .signout { margin-left: auto; }
}

/* Account, two-factor, notifications */
.signout a.who { color: var(--muted); text-decoration: none; }
.signout a.who:hover { color: var(--text); }
.bell { position: relative; display: inline-flex; color: var(--muted); }
.bell:hover { color: var(--text); }
.bell .count { position: absolute; top: -6px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: var(--accent-contrast); font-size: 0.7rem; font-weight: 700; line-height: 17px; text-align: center; }
button.secondary-button { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.actions form, .actions button { margin: 0; }
.qr { background: #fff; display: inline-block; padding: 0.5rem; border-radius: var(--radius); margin: 0.5rem 0; }
.qr svg { display: block; max-width: 100%; height: auto; }
code.secret { font-size: 1rem; letter-spacing: 0.05em; color: var(--text); word-break: break-all; }
.steps-list { padding-left: 1.2rem; }
.steps-list li { margin: 0.35rem 0; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; list-style: none; padding: 0; }
.codes code { font-size: 1.05rem; color: var(--text); }
.notifications { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.notifications form { margin: 0; }
button.notification { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 0.2rem; width: 100%; padding: 0.85rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
button.notification:focus-visible { outline: 2px solid var(--accent); }
.notifications li.unread button.notification { border-left: 4px solid var(--accent); }

/* Customers */
.grid-2.top { align-items: start; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.prewrap { white-space: pre-wrap; }
ul.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
ul.timeline { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
ul.timeline li { border-left: 3px solid var(--border); padding-left: 0.75rem; }
ul.timeline p { margin: 0 0 0.2rem; }
details summary { cursor: pointer; color: var(--accent); }
details.add { margin-top: 1rem; }
details.inline { position: relative; }
details.inline summary { list-style: none; }
details.inline summary::-webkit-details-marker { display: none; }
.type-picker { position: absolute; right: 0; z-index: 5; min-width: 240px; max-height: 360px; overflow-y: auto; list-style: none; margin: 0.25rem 0 0; padding: 0.5rem 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.2); }
.type-picker a { display: block; padding: 0.4rem 1rem; text-decoration: none; color: var(--text); }
.type-picker a:hover { background: var(--bg); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inline-form input[type="text"] { width: auto; flex: 1; min-width: 10rem; }
.inline-form button, .inline-form .check { margin: 0; }
label.check.archived-toggle { margin-top: 2.4rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
  label.check.archived-toggle { margin-top: 0.75rem; }
  .type-picker { position: static; box-shadow: none; }
}

/* Catalog */
table + .card, table + form.card { margin-top: 1.25rem; }
.card > fieldset + fieldset > h2:first-child { margin-top: 1.5rem; }

/* Tickets */
.badge.status-new, .badge.status-scheduled, .badge.status-dispatched { background: var(--notice-bg); color: var(--text); border-color: transparent; }
.badge.status-en_route, .badge.status-in_progress { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.badge.status-on_hold { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
.badge.status-completed, .badge.status-invoiced, .badge.status-closed { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
.board-column { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; min-height: 8rem; }
.board-column h2 { font-size: 0.95rem; }
.ticket-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; }
.ticket-card p { margin: 0.25rem 0; }
.ticket-card form { margin-top: 0.4rem; }
.ticket-card select { flex: 1; min-width: 0; }
.ticket-card.urgent, .job-card.urgent { border-left: 4px solid var(--danger); }
.job-cards { display: grid; gap: 1rem; }
.job-card h2 { margin: 0.25rem 0 0.5rem; }
.job-card p { margin: 0.35rem 0; }
.job-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.job-actions form { margin: 0; }
.job-actions .button, .job-actions button { min-height: 44px; margin: 0; }
.status-bar .job-actions { margin-top: 0; }
.status-bar .inline-form { margin-top: 0.75rem; }
.status-bar .inline-form label { margin: 0; }
details.cancel { align-self: center; }
dl.totals { margin-top: 1rem; max-width: 320px; margin-left: auto; }
dl.totals dd { text-align: right; }
ul.timeline li.comment { border-left-color: var(--accent); }
ul.sub-statuses { margin: 0.5rem 0 0 1.5rem; }
form.inline-form.add { margin-top: 1rem; }
@media (max-width: 720px) {
  .board { grid-auto-flow: row; grid-auto-columns: auto; }
  .board-column { min-height: 0; }
  .job-actions .button, .job-actions button { flex: 1 1 40%; text-align: center; }
  dl.totals { max-width: none; }
}

/* Tickets: checklists and sign-off */
.checklist { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.75rem; }
.checklist:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.checklist h3 { margin-top: 0; }
.checklist-item { margin-bottom: 0.5rem; }
.checklist-item.flagged { border-left: 3px solid var(--danger); padding-left: 0.6rem; }
.checklist-item .choices { display: flex; gap: 1.25rem; }
.checklist-item .choices label.check { margin-top: 0; }
input.reading { max-width: 9rem; }
.flag-note { color: var(--danger); font-weight: 600; }
.checklist-photo { max-width: 220px; max-height: 165px; border-radius: var(--radius); border: 1px solid var(--border); display: block; margin-bottom: 0.4rem; }
.signature-pad { display: block; width: 100%; max-width: 600px; height: 200px; background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); touch-action: none; margin-top: 0.75rem; }
.signature-image { display: block; max-width: 320px; max-height: 120px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); padding: 0.25rem; }
.checklist fieldset { border: 0; padding: 0; margin: 0.5rem 0 0; }
@media (max-width: 720px) {
  td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .signature-pad { height: 180px; }
  input.reading { max-width: none; flex: 1; }
}

/* Tickets: trade extras */
.small-link { font-size: 0.85rem; margin-left: 0.4rem; }
.permit { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.75rem; }
.permit h3 { margin-top: 0; }
.badge.permit-issued { background: var(--notice-bg); color: var(--text); border-color: transparent; }
.badge.permit-finaled { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.permit-expired, .badge.permit-canceled { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
form.add h3 { margin-top: 1rem; }

/* Scheduling */
.hours-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.4rem 0; }
.hours-row label.check { margin: 0; min-width: 8rem; }
.hours-row input[type="time"] { width: auto; }
.tech-choice { justify-content: space-between; }
.tech-choice label.check { margin: 0.2rem 0; }
.dispatch { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.dispatch-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dispatch-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--border); min-height: 4.2rem; }
.dispatch-row:last-child { border-bottom: 0; }
.dispatch-row.is-off .dispatch-track { background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--bg) 8px, var(--bg) 16px); }
.dispatch-head { min-height: 2rem; }
.dispatch-name { padding: 0.5rem 0.75rem; border-right: 1px solid var(--border); }
.dispatch-track { position: relative; }
.dispatch-tick { position: absolute; top: 0.4rem; font-size: 0.72rem; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.dispatch-tick:first-child { transform: none; }
.dispatch-tick:last-child { transform: translateX(-100%); }
.dispatch-block { position: absolute; top: 0.35rem; bottom: 0.35rem; overflow: hidden; padding: 0.25rem 0.4rem; border-radius: 6px;
  background: var(--notice-bg); color: var(--text); text-decoration: none; font-size: 0.8rem; line-height: 1.25; border-left: 3px solid var(--accent); }
.dispatch-block.urgent { border-left-color: var(--danger); }
.dispatch-block.visit-completed { background: var(--ok-bg); border-left-color: var(--ok-text); }
.dispatch-block.visit-en_route, .dispatch-block.visit-on_site { background: var(--accent); color: var(--accent-contrast); }
.dispatch-block.visit-no_show { background: var(--error-bg); color: var(--error-text); }
.dispatch-empty { position: absolute; top: 50%; left: 0.75rem; transform: translateY(-50%); font-size: 0.85rem; }
.dispatch-queue li.urgent { border-left: 3px solid var(--danger); padding-left: 0.5rem; }
.dispatch-queue .button { margin-top: 0.35rem; }
.badge.visit-en_route, .badge.visit-on_site { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.badge.visit-completed, .badge.timeoff-approved { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.visit-canceled, .badge.visit-no_show, .badge.timeoff-declined { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
@media (max-width: 900px) {
  .dispatch { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dispatch-head { display: none; }
  .dispatch-row { grid-template-columns: 1fr; }
  .dispatch-name { border-right: 0; }
  .dispatch-track { display: grid; gap: 0.4rem; padding: 0 0.75rem 0.75rem; }
  .dispatch-block { position: static; width: auto !important; }
  .dispatch-empty { position: static; transform: none; }
}

/* Scheduling: skills, week view, drag and drop */
.tech-choice.suits label.check span { font-weight: 600; }
ul.list.licenses { margin: 0.4rem 0 0 1rem; gap: 0.4rem; }
.badge.license-current { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.license-expired { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
.badge.license-soon { background: var(--notice-bg); color: var(--text); border-color: transparent; }
label.check.inline-check { display: inline-flex; margin: 0.2rem 1rem 0.2rem 0; }
.week-scroll { overflow-x: auto; }
table.week { min-width: 760px; table-layout: fixed; }
table.week th:first-child { width: 140px; }
table.week th.today { color: var(--accent); }
table.week td { height: 4rem; padding: 0.3rem; }
table.week td.is-off { background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--bg) 8px, var(--bg) 16px); }
.week-visit { display: block; margin-bottom: 0.25rem; padding: 0.15rem 0.35rem; border-radius: 4px; font-size: 0.78rem; text-decoration: none;
  color: var(--text); background: var(--notice-bg); border-left: 3px solid var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-visit.urgent { border-left-color: var(--danger); }
.week-visit.visit-completed { background: var(--ok-bg); }
.dispatch [draggable="true"] { cursor: grab; }
.dispatch .dragging { opacity: 0.5; }
.dispatch-track.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
@media (max-width: 720px) {
  .drag-hint { display: none; }
  table.week, table.week thead, table.week tbody, table.week tr, table.week th, table.week td { display: revert; }
  table.week td { border-bottom: 1px solid var(--border); }
}

/* Time tracking */
.clock h2 { font-size: 1.4rem; margin: 0.2rem 0 0.5rem; }
.clock-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.clock-buttons form { margin: 0; flex: 1 1 10rem; }
.clock-button { width: 100%; min-height: 56px; font-size: 1.1rem; margin: 0; }
.clock-offer { margin-top: 0.75rem; }
.clock.clock-job, .clock.clock-shop, .clock.clock-travel, .clock.clock-training { border-left: 6px solid var(--ok-text); }
.clock.clock-break { border-left: 6px solid var(--muted); }
.time-entries li { border-left: 3px solid var(--accent); padding-left: 0.6rem; }
.time-entries li.time-break { border-left-color: var(--border); }
.time-entries li.time-job { border-left-color: var(--ok-text); }
.card.today { border-color: var(--accent); }
.badge.time-badge-job, .badge.time-badge-shop, .badge.time-badge-travel, .badge.time-badge-training { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.sheet-submitted { background: var(--notice-bg); color: var(--text); border-color: transparent; }
.badge.sheet-approved, .badge.sheet-locked { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.policy-text { white-space: pre-line; }
.badge.quote-sent, .badge.quote-viewed { background: var(--notice-bg); color: var(--text); border-color: transparent; }
.badge.quote-approved { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.quote-declined, .badge.quote-expired { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
/* Scheduling: map */
.map-card { padding: 0; overflow: hidden; }
.map { position: relative; height: 480px; overflow: hidden; background: #e8ecef; touch-action: none; cursor: grab; user-select: none; }
.map-tiles img { position: absolute; width: 256px; height: 256px; }
.map-pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); color: #fff; font: 700 11px/18px sans-serif; text-align: center; text-decoration: none; }
.map-origin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #111; border: 3px solid #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.map-controls { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; }
.map-controls button { width: 34px; height: 34px; padding: 0; font-size: 1.2rem; }
.map-credit { position: absolute; right: 0; bottom: 0; padding: 1px 6px; font-size: 0.7rem; background: rgba(255,255,255,.8); color: #333; }
.map-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
@media (max-width: 720px) { .map { height: 360px; } }

/* Top bar menus: open on hover, or pinned open by a click until the label,
   another label or anything outside the menus is clicked (nav.js). */
.nav { align-items: center; }
.nav-group { position: relative; }
.nav .nav-label { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font: inherit;
  padding: 0.25rem 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 0; }
.nav .nav-label:hover, .nav-group.open > .nav-label { color: var(--text); }
.nav-group.active > .nav-label { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: 100%; left: -0.75rem; z-index: 50; min-width: 12rem; list-style: none; margin: 0;
  padding: 0.35rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.nav-group.open > .nav-menu { display: block; }
@media (hover: hover) {
  .nav-group:hover > .nav-menu { display: block; }
  /* Hovering another menu hides the pinned one while the pointer is there. */
  .nav:has(.nav-group:hover) .nav-group.open:not(:hover) > .nav-menu { display: none; }
}
.nav .nav-menu a { display: block; padding: 0.45rem 0.9rem; color: var(--text); border: 0; white-space: nowrap; }
.nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { background: var(--bg); }
.nav .nav-menu a.active { color: var(--accent); font-weight: 600; border: 0; }
@media (max-width: 720px) {
  /* Phones: a menu opens full width under the nav, so it never runs off the screen. */
  .nav { position: relative; }
  .nav-group { position: static; }
  .nav-menu { left: 0; right: 0; min-width: 0; }
}
.badge.invoice-open { background: var(--notice-bg); color: var(--text); border-color: transparent; }
.badge.invoice-paid { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.invoice-written_off { color: var(--muted); }
.badge.invoice-overdue, .badge.invoice-void { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
.badge.invoice-partial { background: var(--notice-bg); color: var(--text); border-color: transparent; }
.inline-form.inline { display: inline-flex; vertical-align: middle; }

/* Saved cards */
.save-card { border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0; }
.square-card-container { min-height: 96px; margin: 0.5rem 0; }
.saved-card + .saved-card { border-top: 1px solid var(--border, #ddd); margin-top: 1rem; padding-top: 1rem; }
.saved-card h2 { font-size: 1.05rem; }
form.inline { display: inline; }

/* Inventory scanning and labels */
.scan-video { width: 100%; max-width: 480px; border-radius: 8px; background: #000; }
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6in, 1fr)); gap: 0.15in; }
.label { display: flex; gap: 0.1in; align-items: center; border: 1px dashed var(--border, #ccc); padding: 0.08in; break-inside: avoid; }
.label svg { width: 0.9in; height: 0.9in; flex: none; }
.label-text { font-size: 10pt; line-height: 1.25; overflow: hidden; }
@media print {
  .topbar, .no-print, .notice { display: none !important; }
  .page { padding: 0; max-width: none; }
  .label { border-color: #bbb; }
}

/* Settings → Updates */
.update-version code { font-size: 1rem; color: var(--text); }
.release-list { list-style: none; margin: 0; padding: 0; }
.release { padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.release:last-child { border-bottom: 0; }
.release-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.release-head form, .release-head button { margin: 0; }
.release-head code { color: var(--text); }
.release-notes { margin: 0.6rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.release.latest .release-notes { background: var(--bg); border-radius: var(--radius); padding: 0.75rem 1rem 0.75rem 2rem; }
.release-note-body { color: var(--muted); font-size: 0.875rem; white-space: pre-line; overflow-wrap: anywhere; margin-top: 0.2rem; }
.update-progress { max-width: 560px; text-align: center; }
.update-step { font-weight: 600; margin: 0 0 0.35rem; }
.update-progress.failed .update-step { color: var(--error-text); }
.update-progress.succeeded .update-step { color: var(--ok-text); }
.spinner { width: 40px; height: 40px; margin: 0.5rem auto 1.25rem; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
.update-progress.failed .spinner, .update-progress.succeeded .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.update-bar { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 0.75rem 0 0.5rem; }
.update-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.update-activity { font-size: 0.875rem; margin: 0.25rem 0; overflow-wrap: anywhere; }
.update-warning { color: var(--error-text); font-size: 0.875rem; }
.update-log-box { text-align: left; margin-top: 0.75rem; }
.update-log-box summary { cursor: pointer; font-size: 0.875rem; color: var(--muted); }
.update-log { margin-top: 0.5rem; text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; max-height: 260px; overflow: auto; font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) { .release-head > div:last-child, .release-head form, .release-head button { width: 100%; } }

/* Anything hidden stays hidden, whatever its class sets display to. */
[hidden] { display: none !important; }

/* Search-as-you-type boxes (js/lookup.js) */
.lookup { position: relative; }
.inline-form .lookup { flex: 2; min-width: 14rem; }
.inline-form .lookup input[type="text"] { width: 100%; }
.lookup-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; list-style: none; margin: 2px 0 0; padding: 0.25rem 0;
  max-height: 18rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.lookup-list li { padding: 0.45rem 0.75rem; cursor: pointer; line-height: 1.3; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.lookup-list .lookup-text { min-width: 0; overflow-wrap: anywhere; }
.lookup-list .lookup-amounts { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.lookup-list .lookup-price { display: block; }
.lookup-list .lookup-cost { display: block; font-size: 0.85em; color: var(--muted); }
.lookup-list li.active { background: var(--notice-bg); }
.lookup-list .lookup-label { display: block; }
.lookup-list .lookup-detail { display: block; font-size: 0.85em; color: var(--muted); }
.lookup-list li.lookup-empty { color: var(--muted); cursor: default; }

/* Dashboard widgets (docs/DASHBOARD_PLAN.md) */
:root { --warn-bg: #fff4dc; --warn-text: #7a4d00; }
@media (prefers-color-scheme: dark) { :root { --warn-bg: #3a2c10; --warn-text: #ffd27a; } }
.dash-head h1 { margin-bottom: 0; }
.dash-date { margin: 0; }
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(9.5rem, auto); grid-auto-flow: dense; gap: 1rem; }
.widget { display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.widget.size-small { grid-column: span 1; }
.widget.size-medium { grid-column: span 2; }
.widget.size-large { grid-column: span 2; grid-row: span 2; }
.widget.size-wide { grid-column: span 4; }
.widget-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.widget-head h2 { flex: 1; font-size: 0.95rem; margin: 0; color: var(--muted); font-weight: 600; }
.widget-more { font-size: 0.85rem; white-space: nowrap; }
.widget-body { flex: 1; min-height: 0; }
.widget-metric { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.metric-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric-label { color: var(--muted); }
.widget-metric.tone-good .metric-value { color: var(--ok-text); }
.widget-metric.tone-warn .metric-value { color: var(--warn-text); }
.widget-metric.tone-bad .metric-value { color: var(--danger); }
.widget-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem 1rem; margin: 0.75rem 0 0; }
.widget-stats div { min-width: 0; }
.widget-stats dt { font-size: 0.8rem; color: var(--muted); }
.widget-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.widget-stats .tone-warn dd, .widget-stats .tone-warn dd a { color: var(--warn-text); }
.widget-stats .tone-bad dd, .widget-stats .tone-bad dd a { color: var(--danger); }
.widget-stats .tone-good dd { color: var(--ok-text); }
.widget-rows { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.widget-rows li { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--border); }
.widget-rows li:first-child { border-top: 0; }
.widget-metric + .widget-rows li:first-child, .widget-stats + .widget-rows li:first-child { border-top: 1px solid var(--border); }
.widget-rows .row-text { display: flex; flex-direction: column; min-width: 0; }
.widget-rows .row-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-rows .row-text .muted { font-size: 0.85rem; }
.widget-rows li.tone-bad .badge { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
.widget-rows li.tone-warn .badge { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.widget-rows li.tone-good .badge { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.widget.size-wide .widget-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: 1.5rem; }
.widget.size-wide .widget-rows li { border-top: 0; border-bottom: 1px solid var(--border); }
.widget-bars { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.widget-bars li { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 0.6rem; background: var(--bg); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 999px; }
.bar-fill.tone-warn { background: var(--warn-text); }
.bar-fill.tone-bad { background: var(--danger); }
.bar-fill.tone-good { background: var(--ok-text); }
.bar-value { font-variant-numeric: tabular-nums; }
.widget-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.shortcut { display: block; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut:hover { border-color: var(--accent); }
.shortcut.new { color: var(--accent); }
.shortcut.new::before { content: "+ "; }
.widget-empty { margin: 0.5rem 0 0; }
/* Edit mode */
.dash-grid.editing .widget { border-style: dashed; }
.dash-grid.editing .widget[draggable="true"] { cursor: grab; }
.widget.dragging { opacity: 0.45; }
.drag-handle { width: 0.6rem; height: 1rem; align-self: center; background-image: radial-gradient(currentColor 1.2px, transparent 1.4px); background-size: 5px 5px; color: var(--muted); }
.widget-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.widget-tools form { display: flex; gap: 0.25rem; align-items: center; margin: 0; }
.widget-tools button, .widget-tools select { margin: 0; padding: 0.25rem 0.55rem; font-size: 0.85rem; }
.icon-button { background: var(--surface); color: var(--text); border: 1px solid var(--border); min-width: 2rem; }
.icon-button:disabled { opacity: 0.4; cursor: default; }
.js .js-hide { display: none; }
.dash-add-title { margin-top: 2rem; }
.dash-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.dash-add-item { display: flex; flex-direction: column; margin: 0; }
.dash-add-item p { flex: 1; margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }
.dash-add-item .actions button { margin: 0; }
@media (max-width: 960px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget.size-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .dash-grid { gap: 0.75rem; grid-auto-rows: minmax(7rem, auto); }
  .widget.size-medium, .widget.size-large { grid-column: span 2; }
  .widget.size-large { grid-row: span 1; }
  .metric-value { font-size: 1.7rem; }
}

/* Top bar tools: quick search, New, notifications, account (docs/DASHBOARD_PLAN.md) */
.quick-search { margin-left: auto; width: min(18rem, 100%); }
.quick-search input { width: 100%; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; }
.quick-search .lookup-list { min-width: 22rem; left: auto; right: 0; }
.topbar-tools { display: flex; align-items: center; gap: 0.9rem; }
.quick-search + .topbar-tools { margin-left: 0; }
.topbar > .brand + .topbar-tools, .nav + .topbar-tools { margin-left: auto; }
.topbar-tools .nav-label { background: none; border: 0; border-radius: 0; color: var(--muted); font: inherit; padding: 0.25rem 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem; }
.topbar-tools .nav-label:hover, .topbar-tools .nav-group.open > .nav-label { color: var(--text); }
.topbar-tools .new-button { color: var(--accent); font-weight: 600; }
.topbar-tools .new-button::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.nav-menu.menu-right { left: auto; right: -0.5rem; }
.topbar-tools .nav-menu a { display: block; padding: 0.45rem 0.9rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.topbar-tools .nav-menu a:hover, .topbar-tools .nav-menu a:focus-visible { background: var(--bg); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--notice-bg);
  color: var(--text); font-weight: 700; font-size: 0.85rem; }
.menu-note { padding: 0.35rem 0.9rem 0.5rem; color: var(--muted); font-size: 0.85rem; border-bottom: 1px solid var(--border); margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-split { border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0.25rem; }
.menu-split form { margin: 0; }
.menu-button { display: block; width: 100%; margin: 0; padding: 0.45rem 0.9rem; background: none; color: var(--text); font-weight: 400; text-align: left; border-radius: 0; }
.menu-button:hover { background: var(--bg); }
@media (hover: hover) {
  .topbar:has(.nav-group:hover) .nav-group.open:not(:hover) > .nav-menu { display: none; }
}
.nav-toggle { display: none; }
.search-page-form { display: flex; gap: 0.5rem; max-width: 36rem; margin-bottom: 1.25rem; }
.search-page-form input { flex: 1; }
.search-page-form button { margin: 0; }
@media (max-width: 960px) {
  .account-name { display: none; }
}
@media (max-width: 720px) {
  .topbar { gap: 0.5rem 0.75rem; }
  .topbar-tools { margin-left: auto; gap: 0.75rem; }
  .quick-search { order: 4; flex-basis: 100%; width: 100%; margin-left: 0; }
  .quick-search .lookup-list { min-width: 0; left: 0; }
  .topbar-tools .nav-group { position: static; }
  .topbar-tools .nav-menu.menu-right { left: 0.5rem; right: 0.5rem; top: auto; margin-top: 0.5rem; }
  .topbar { position: relative; }
  /* With JavaScript, the links and search become a panel behind the menu button. */
  .js-nav .nav-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; order: -1; width: 2.25rem; height: 2.25rem; margin: 0;
    padding: 0; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 1px; position: relative; content: ""; }
  .nav-toggle-bars::before { position: absolute; top: -6px; }
  .nav-toggle-bars::after { position: absolute; top: 6px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
  .js-nav .topbar:not(.nav-open) > .nav, .js-nav .topbar:has(.nav-toggle:not([hidden])):not(.nav-open) > .quick-search { display: none; }
  .js-nav .topbar.nav-open > .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 5; flex-basis: 100%; padding: 0.25rem 0 0.5rem;
    border-top: 1px solid var(--border); }
  .js-nav .topbar.nav-open > .nav > a, .js-nav .topbar.nav-open .nav .nav-label { padding: 0.6rem 0.25rem; border-bottom: 0; }
  .js-nav .topbar.nav-open > .nav > a.active { border-bottom: 0; border-left: 3px solid var(--accent); padding-left: 0.5rem; }
  .js-nav .topbar.nav-open .nav .nav-label { width: 100%; justify-content: space-between; font-weight: 600; color: var(--text); }
  .js-nav .topbar.nav-open .nav .nav-caret { display: none; }
  .js-nav .topbar.nav-open .nav .nav-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0.25rem 0.75rem; background: none; }
  .js-nav .topbar.nav-open .nav .nav-menu a { padding: 0.5rem 0.25rem; }
}

/* Job flow on tickets: on the way, arrived, the work, sign-off, wrap up */
.job-flow { border-left: 4px solid var(--accent); }
.job-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.job-flow-head h2 { margin: 0; }
.job-flow-head p { margin: 0; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; counter-reset: none; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.flow-step::before { content: ""; position: absolute; top: 0.95rem; left: 2.1rem; right: -0.75rem; height: 2px; background: var(--border); }
.flow-step:last-child::before { display: none; }
.flow-step.done::before { background: var(--ok-text); }
.flow-marker { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 0.9rem; flex: none; }
.flow-step.done .flow-marker { background: var(--ok-text); border-color: var(--ok-text); color: var(--surface); }
.flow-step.current .flow-marker { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 0 4px var(--notice-bg); }
.flow-step.skipped .flow-marker { border-style: dashed; }
.flow-label { margin: 0; font-weight: 600; }
.flow-step.todo .flow-label, .flow-step.skipped .flow-label { color: var(--muted); }
.flow-detail { margin: 0; font-size: 0.88rem; color: var(--muted); }
.flow-items { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; display: grid; gap: 0.2rem; }
.flow-items li { padding-left: 1.3rem; position: relative; }
.flow-items li::before { position: absolute; left: 0; width: 1rem; text-align: center; font-weight: 700; }
.flow-items li.done::before { content: "\2713"; color: var(--ok-text); }
.flow-items li.todo::before { content: "\25CB"; color: var(--muted); }
.flow-items li.warn::before { content: "!"; color: var(--warn-text); }
.flow-items li.warn, .flow-items li.warn a { color: var(--warn-text); }
.flow-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.flow-actions form, .flow-actions button, .flow-actions .button { margin: 0; }
.flow-actions select { margin: 0; padding: 0.45rem; }
.flow-actions details.cancel { margin: 0; }
.flow-actions details.cancel input { margin: 0.25rem 0; }
/* Phones and the work step: a vertical list, the current step open */
@media (max-width: 960px) {
  .flow-steps { grid-template-columns: 1fr; gap: 0; }
  .flow-step { flex-direction: row; align-items: flex-start; gap: 0.75rem; padding-bottom: 1rem; }
  .flow-step::before { top: 1.9rem; bottom: 0; left: 0.9rem; right: auto; width: 2px; height: auto; }
  .flow-body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; padding-top: 0.25rem; }
  .flow-step.done .flow-items, .flow-step.todo .flow-items { display: none; }
  .flow-step.todo .flow-detail { display: none; }
}
@media (min-width: 961px) { .flow-body { display: flex; flex-direction: column; gap: 0.4rem; } }
/* The short strip on job cards */
.flow-strip { list-style: none; display: flex; gap: 0.25rem; margin: 0.5rem 0 0.25rem; padding: 0; }
.flow-strip li { flex: 1; font-size: 0.72rem; color: var(--muted); }
.flow-strip li::before { content: ""; display: block; height: 0.35rem; border-radius: 999px; background: var(--border); margin-bottom: 0.2rem; }
.flow-strip li.done::before { background: var(--ok-text); }
.flow-strip li.current::before { background: var(--accent); }
.flow-strip li.current { color: var(--text); font-weight: 600; }

/* Invoices: moving work orders between drafts, billing together or separately */
.work-order { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.2rem 0; min-width: 0; }
.work-order a { overflow-wrap: anywhere; }
.work-move { margin: 0; gap: 0.35rem; display: flex; flex-wrap: wrap; max-width: 100%; }
.work-move select { min-width: 0; max-width: 100%; width: auto; flex: 1 1 12rem; }
.work-move select, .work-move button { margin: 0; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.billing-choice { margin-top: 0.75rem; }

/* Reports (docs/REPORTS_PLAN.md) */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.report-card { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; color: var(--text); text-decoration: none; }
.report-card:hover { border-color: var(--accent); }
.report-card .muted { font-size: 0.9rem; }
.report-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; }
.report-filters > div { min-width: 10rem; }
.report-filters label { margin-top: 0; }
.report-filters button { margin: 0; }
.report-period { margin: 0.75rem 0; }
.report-live { color: var(--ok-text); margin-left: 0.5rem; }
.report-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.report-bars li { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr auto; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.report-table th.num, .report-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table tfoot th { border-top: 2px solid var(--border); color: var(--text); font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
@media (max-width: 720px) {
  .report-bars li { grid-template-columns: 1fr auto; }
  .report-bars .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .report-table td.num { text-align: left; }
}

/* Expenses (docs/EXPENSES_PLAN.md) */
.badge.expense-approved { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.expense-rejected { background: var(--error-bg); color: var(--error-text); border-color: transparent; }
.badge.expense-submitted { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.receipts { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.receipt { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.receipt img { width: 100%; height: 9rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); }
.expense-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.expense-filters input[type="search"] { flex: 1 1 14rem; width: auto; }
.expense-filters select, .expense-filters button { margin: 0; }

/* Accounting statements */
.statement table { width: 100%; }
.statement .statement-heading th { text-align: left; padding-top: 1rem; font-size: 0.95rem; }
.statement .statement-total td { font-weight: 700; border-top: 1px solid var(--border); }
.entry-lines input { width: 100%; }
@media (max-width: 720px) {
  .statement table thead { display: none; }
  .statement tr.statement-heading th { display: block; }
}

/* Website booking page */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.book-services { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.book-services h2 { margin-top: 0; }
.book-windows { display: flex; flex-wrap: wrap; gap: .5rem; }
.request-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.request-photos img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 6px; }
.key-once { word-break: break-all; font-size: 1rem; }