@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --navy: #082d4d;
  --navy-2: #0e416e;
  --blue: #0068b7;
  --ice: #eaf7ff;
  --red: #d62831;
  --red-2: #a6121a;
  --ink: #172532;
  --muted: #5d6d79;
  --line: #d9e3ea;
  --paper: #f7fafc;
  --white: #fff;
  --ok: #17693f;
  --ok-bg: #e7f6ee;
  --warn: #8a5a10;
  --warn-bg: #fff3dc;
  --danger: #9f1239;
  --danger-bg: #fde8ee;
  --shadow: 0 12px 30px rgba(8, 45, 77, 0.08);
  --radius: 18px;
  font-family: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(900px 420px at 50% -8%, #d7ebf8, transparent 55%),
    #e4eef5;
  color: var(--ink);
}
button, input, select, textarea, label { touch-action: manipulation; font: inherit; }
button, .btn, .choice, .outcome, .pill, .test-pill, h1, h2, .kicker, .platform, .wordmark, .progress {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}
button, input, select, textarea { font-size: 16px; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.app {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(8, 45, 77, 0.08);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px 12px;
  background: var(--navy);
  color: var(--white);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark {
  width: 44px;
  height: 44px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
}
.platform {
  font-size: 15px;
  letter-spacing: 0.14em;
  font-weight: 700;
  line-height: 1;
}
.company { font-size: 13px; opacity: 0.86; font-family: Inter, Arial, sans-serif; }
.top-actions { display: flex; align-items: center; gap: 2px; }
.test-pill {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  line-height: 1;
}
.text-btn, .ghost {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 600;
}
.screen { padding: 16px 16px 128px; }
h1 {
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  font-weight: 700;
  margin: 4px 0 8px;
  text-transform: uppercase;
}
h2 {
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lede, .muted { color: var(--muted); }
.lede { margin: 0 0 16px; line-height: 1.45; }
.kicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}
.wordmark {
  margin: 8px 0 0;
  font-size: 42px;
  line-height: 0.9;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
}
.wordmark-sub {
  margin: 0 0 12px;
  color: var(--navy-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}
.login-logo {
  width: min(220px, 72%);
  height: auto;
  margin: 0 auto 4px;
  object-fit: contain;
}

.banner {
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
  line-height: 1.35;
}
.banner.warn { background: var(--warn-bg); color: #6d470c; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.danger { background: var(--danger-bg); color: var(--danger); }
.banner strong { display: block; margin-bottom: 2px; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.stack-gap { height: 10px; }
.spaced { margin-top: 16px; }
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
label.field span { font-weight: 700; }
input, select, textarea {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  padding: 12px 14px;
  font-family: Inter, Arial, sans-serif;
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid #7eb6e2;
  outline-offset: 2px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.btn {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
}
.btn:active { transform: translateY(1px); }
.btn.secondary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--line);
}
.btn.danger {
  background: var(--white);
  color: var(--danger);
  border-color: #e4b3c0;
}
.btn:disabled { opacity: 0.55; }

.role-btn {
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-height: 84px;
  box-shadow: var(--shadow);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.role-btn strong {
  display: block;
  font-size: 22px;
  margin-bottom: 2px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
}
.role-btn span { color: var(--muted); font-size: 14px; font-family: Inter, Arial, sans-serif; font-weight: 500; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  padding: 10px 12px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.choice[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.outcome {
  width: 100%;
  text-align: left;
  min-height: 84px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 12px 14px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.outcome strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
}
.outcome span { color: var(--muted); font-size: 14px; font-weight: 500; font-family: Inter, Arial, sans-serif; }
.outcome[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.outcome[aria-pressed="true"] strong { color: var(--white); }
.outcome[aria-pressed="true"] span { color: #d6e6f2; }

.card, .result, .line, .receipt {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.result, .card-btn {
  width: 100%;
  text-align: left;
  padding: 14px;
  min-height: 72px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.result strong, .card-btn strong { display: block; color: var(--navy); font-size: 18px; letter-spacing: 0.03em; }
.card { padding: 14px; }
.row-between, .receipt div, .line-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--warn-bg);
  color: var(--warn);
}
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.danger { background: var(--danger-bg); color: var(--danger); }
.pill.neutral { background: var(--ice); color: var(--navy); }

.line { padding: 12px; margin-bottom: 8px; }
.stepper { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.stepper button {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-size: 28px;
  font-weight: 700;
}
.qty {
  min-width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-family: Inter, Arial, sans-serif;
}
.money { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; font-family: Inter, Arial, sans-serif; }
.total-lg { font-size: 34px; font-weight: 700; margin: 0; font-family: "Barlow Condensed", Arial, sans-serif; letter-spacing: 0.02em; }
.receipt { padding: 14px 16px; }
.receipt .grand { font-size: 18px; font-weight: 700; margin-top: 6px; }
.hairline { height: 1px; background: var(--line); margin: 8px 0; }

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-tile { margin: 0; }
.photo-tile img, .hero-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--ice);
}
.hero-photo { height: 168px; }
.file-btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  min-height: 100%;
  cursor: pointer;
}

.dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 70%, rgba(247, 250, 252, 0.94));
}
.dock .grow { flex: 1; }
.dock .back { flex: 0 0 96px; }

.progress { margin: 0 0 12px; font-size: 14px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
details.extra { margin-top: 8px; }
details.extra summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--navy); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }

.sheet {
  width: min(100% - 24px, 400px);
  border: 0;
  border-radius: 20px;
  padding: 18px;
  background: var(--paper);
  color: var(--ink);
}
.sheet::backdrop { background: rgba(8, 45, 77, 0.5); }
.check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 32px;
  margin-bottom: 8px;
}
.fine {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.plate-card h2 { margin-bottom: 8px; }
.plate-open {
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--navy);
  border-radius: 14px;
  min-height: 180px;
}
.plate-open img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #041e33;
}
.plate-viewer {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #041e33;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.plate-viewer .btn { align-self: flex-start; margin-bottom: 8px; }
.plate-frame {
  flex: 1;
  overflow: auto;
  display: grid;
  place-items: center;
  touch-action: none;
}
.plate-frame img {
  width: min(100%, 900px);
  max-width: none;
  height: auto;
  transform-origin: center center;
  touch-action: none;
}
#saved-equipment,
#equipment-picker,
#customer-equipment { scroll-margin-top: 76px; }
.equip-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}
.equip-card.is-inactive { opacity: 0.78; }
.equip-photo {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.equip-photo img { width: 100%; height: 100%; object-fit: cover; }
.equip-photo.empty {
  display: grid;
  place-items: center;
  background: var(--ice);
  color: var(--navy);
}
.equip-copy { min-width: 0; flex: 1; }
.equip-copy strong { display: block; color: var(--navy); font-size: 18px; line-height: 1.15; }
.equip-copy .btn, .equip-copy .btn.secondary { min-height: 44px; margin-top: 8px; }
.equip-actions { display: flex; gap: 8px; margin-top: 10px; }
.equip-actions .btn { flex: 1; }
.status-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

@media (max-width: 389px) {
  h1 { font-size: 30px; }
  .choice { font-size: 15px; }
  .wordmark { font-size: 38px; }
}

/* Vortex field system: 4/8px rhythm, calm surfaces and clear actions. */
:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --radius:16px; --shadow:0 3px 14px rgba(8,45,77,.045); }
body { background:#e9eef2; line-height:1.5; }
.app { background:#f4f7fa; width:min(100%,480px); }
.screen { padding:24px 20px 176px; }
.screen > * + * { margin-top:16px; }
.screen > section > .field, .screen > section > .grid-2 { margin-top:16px; }
.topbar { min-height:76px; padding:calc(12px + env(safe-area-inset-top)) 20px 12px; box-shadow:0 2px 12px #082d4d1a; }
.topbar .mark { width:42px;height:42px; }
.platform { font-size:13px;letter-spacing:.16em;opacity:.75; }
.company { font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:700; opacity:1; }
h1 { font-size:38px; line-height:1.05; letter-spacing:0; text-transform:none; margin:4px 0 12px; }
h2 { font-size:25px; text-transform:none; letter-spacing:0; line-height:1.2; display:flex;gap:8px;align-items:center; }
.kicker { font:600 11px/1.5 Inter,sans-serif;letter-spacing:.12em; }
.lede { font-size:13px; line-height:1.6; }
.btn, .choice, .outcome, .text-btn, .role-btn { font-family:Inter,sans-serif;letter-spacing:0; text-transform:none; }
.btn { font-size:14px; font-weight:600; min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--blue);border-radius:12px; }
.btn.secondary { background:white; }
.btn.danger { color:var(--red-2); }
button, a.btn { transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
button:hover, a.btn:hover { box-shadow:0 3px 12px #082d4d12; }
button:active { transform:translateY(1px); }
input,textarea,select { border-radius:10px; border-color:#cdd9e2; font-size:16px; min-height:50px; }
label.field { font-size:12px; gap:8px; }
textarea { min-height:110px;line-height:1.5; }
.stack { gap:12px; }
.card, .receipt, .line, .card-btn { padding:20px; border-color:#e1e7ed; box-shadow:var(--shadow); }
.card-btn { border-left:3px solid var(--blue); display:flex;flex-direction:column;gap:8px; margin-top:12px; }
.card-btn .row-between { width:100%; }
.card-btn strong { font-family:Inter,sans-serif;font-size:14px;letter-spacing:0; }
.card-btn .muted { font-family:Inter,sans-serif;font-size:12px; }
.card-btn .row-between:last-child { padding-top:8px; border-top:1px solid #eff2f5; }
.pill,.status-pill { font:600 10px/1.4 Inter,sans-serif;letter-spacing:0; padding:5px 9px; }
.card-btn .pill { max-width:165px; text-align:right; }
.role-btn { padding:20px;border-radius:14px; min-height:88px;border-left:3px solid var(--blue); }
.role-btn strong { font-family:Inter,sans-serif;text-transform:none;letter-spacing:0;font-size:16px; }
.role-btn span { font-size:12px; }
.job-hero { position:relative; overflow:hidden;border-radius:18px;background:var(--navy);height:244px; margin-bottom:24px; }
.job-hero > img { width:100%;height:100%;object-fit:cover;object-position:center 42%; }
.job-hero:after { content:'';position:absolute;inset:0;background:linear-gradient(0deg,#082d4df5 0%,#082d4d75 55%,#082d4d15 100%); }
.hero-copy { position:absolute;inset:auto 20px 20px;z-index:1;color:white; }
.hero-copy .eyebrow { font:600 9px/1.5 Inter,sans-serif;letter-spacing:.2em; }
.hero-copy h1 { font-size:34px;max-width:260px;margin:8px 0; }
.hero-copy p { margin:0;color:#dce8f3;font-size:11px; }
.home-hero { height:185px; }
.home-hero .hero-copy h1 { font-size:29px; max-width:225px; }
.stats-row { display:grid;grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 0;border-bottom:1px solid var(--line); margin-bottom:24px; }
.stats-row > div { color:var(--muted);font-size:9px; }
.stats-row strong { display:block;color:var(--navy);font-size:24px;line-height:1.3;font-weight:600; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%);width:min(100%,480px); z-index:8; background:white; border-top:1px solid var(--line); display:flex; padding:8px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px #082d4d06; }
.bottom-nav button { display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#627583;background:white;border:0;border-radius:10px;min-height:48px;font:600 10px Inter,sans-serif; }
.bottom-nav button.active { color:var(--blue);background:#edf5fc; }
.dock { position:fixed;bottom:calc(65px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(100%,480px); padding:12px 20px; z-index:6; border-top:1px solid var(--line); background:#f4f7faf5;backdrop-filter:blur(10px); }
.dock .back { flex-basis:88px; }
.pdf-link { width:100%; text-decoration:none; margin-bottom:16px; }
.progress { font:600 11px Inter,sans-serif;letter-spacing:.03em; padding-bottom:12px; border-bottom:3px solid var(--blue); }
.choice { min-height:64px;font-size:12px;line-height:1.4;font-weight:600; }
.choice-grid { gap:10px; }
.outcome strong { font:600 14px/1.5 Inter,sans-serif;text-transform:none;letter-spacing:0; }
.outcome span { font-size:12px; }
.banner { padding:14px 16px;font-size:12px;border:1px solid #dfb85920; border-radius:12px; }
.fine { font-size:10px;line-height:1.6; }
.empty-state { text-align:center;padding:32px 24px;font-size:13px;line-height:1.6;color:var(--muted); }
.empty-state svg { width:44px;height:44px;color:var(--blue);margin-bottom:12px; }
.empty-state h2 { justify-content:center;color:var(--navy);font-size:23px; }
.visit-editor { display:flex;flex-direction:column;gap:12px; }
.visit-card { padding:14px 0 14px 16px;border-left:2px solid var(--blue);border-bottom:1px solid #e7edf2;font-size:12px;overflow-wrap:anywhere; }
.visit-card strong { font-size:12px; }
.visit-card p { margin:6px 0;white-space:pre-wrap; }
.visit-log .kicker { margin-bottom:16px; }
details.extra summary { gap:8px;font-size:13px; }
.line-top { font-size:13px;align-items:center; }
.line-top strong { flex:1;overflow-wrap:anywhere; }
.line-top .money { flex:none;font-size:12px; }
.line .field { margin-top:12px; }
.receipt { margin:16px 0; }
.receipt div { font-size:13px; }
.receipt .grand { padding-top:4px;font-size:18px;color:var(--navy); }
.timeline { font-size:12px; }
.timeline li { padding:16px 0; }
.equip-card { margin-top:12px; }
.equip-copy strong { font:600 14px/1.5 Inter,sans-serif; }
.equip-copy .muted { font-size:11px; }
.equip-actions { flex-wrap:wrap; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion:reduce) { *, *:before, *:after { transition:none !important;scroll-behavior:auto !important; } }
@media (min-width:700px) { .app { box-shadow:0 0 50px #082d4d12; } }
.rate-choice { display:flex;flex-direction:column;gap:16px; }
.rate-choice .kicker { margin:0 0 8px; }
.rate-choice .banner { margin:0; }
.markup-editor { display:flex;flex-direction:column;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line); }
.purchase-cost { color:var(--navy);background:#edf4fa;padding:12px;border-radius:10px;font-size:12px;margin-top:12px; }
.markup-editor > .pill { align-self:flex-start; }
/* Private field workspace & time ledger */
.start-job{width:100%;margin:20px 0 28px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.job-card{display:block;width:100%;text-align:left;cursor:pointer;border:1px solid #dbe4eb;color:var(--ink,#172532)}.job-card p{margin:8px 0}.job-card small{color:#657685}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h1,.section-head h2{margin:0}.section-head{margin:18px 0 12px}.status-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:24px;background:#e8f1f9;color:#0e416e;font-size:12px;font-weight:700;white-space:nowrap}.status-approved{background:#e2f2e9;color:#17593e}.status-sent_back{background:#fff0e0;color:#895016}.status-draft{background:#edf0f3;color:#53616d}.time-home{display:block;text-align:left;width:100%;margin-top:24px;color:#082d4d}.time-home strong{font:700 32px 'Barlow Condensed',sans-serif;display:flex;justify-content:space-between;margin-top:8px}.private-label{font-size:12px;font-weight:700;color:#39728f}.time-controls{display:grid;gap:16px}.week-switch{display:flex;align-items:center;justify-content:space-between;gap:8px}.week-switch strong{font-size:13px}.week-switch .btn{min-width:44px;padding:10px}.time-summary{background:#082d4d;border-radius:18px;color:white;padding:24px;margin:20px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.time-summary>strong{font:700 44px 'Barlow Condensed',sans-serif;white-space:nowrap}.time-summary small{display:block;font:600 12px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}.time-summary>span{font-size:13px;line-height:1.5;max-width:130px;color:#c3d8e7}.time-total{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid #edf1f4}.time-total:last-child{border:0}.time-day{margin-top:28px}.empty-time{border-left:3px solid #dbe4eb;padding:6px 12px;color:#71808b;font-size:13px}.time-entry p{margin:10px 0}.time-entry .row{display:flex;gap:8px;flex-wrap:wrap}.time-entry .text-btn{min-height:44px}.time-entry .correction{margin-top:12px;border-top:1px solid #dbe4eb;padding-top:16px}.field-dock{bottom:calc(70px + env(safe-area-inset-bottom));gap:10px}.field-dock .btn{font-size:13px;padding:12px}.field{min-width:0}.visit-card legend{font-weight:700;font-size:13px}.visit-card{min-width:0}.time-day h2{font-size:23px}.empty-state{padding:28px;text-align:center}.empty-state h3{font:700 27px 'Barlow Condensed',sans-serif}.bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.screen{padding-bottom:190px}.segmented{display:flex;gap:8px}.segmented button{flex:1;min-height:44px;border:1px solid #d7e2e9;background:#f0f5f9;border-radius:10px;color:#082d4d;font-weight:700}.segmented button.selected{background:#0068b7;color:white;border-color:#0068b7}.job-card:hover{border-color:#0068b7;transform:translateY(-1px)}.job-card:active{transform:translateY(0)}.field-grid input{width:100%}
.week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:20px 0 12px}.week-strip button{border:1px solid #dce6ed;border-radius:12px;min-height:84px;padding:8px 2px;background:white;color:#526675;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.week-strip strong{font-size:17px;color:#172532}.week-strip span,.week-strip small{font-size:10px}.week-strip .is-today{background:#e5f2fc;border-color:#0068b7}.week-strip .is-today strong{color:#0068b7}
/* Build 8: reserve real rows for field actions and navigation; never overlay content. */
.tech-app{height:100dvh;max-height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.tech-app .topbar{position:static;min-height:76px}
.tech-app .screen{min-height:0;overflow-y:auto;overscroll-behavior:contain;width:100%;padding-bottom:calc(28px + env(safe-area-inset-bottom));scroll-padding:24px 0;box-sizing:border-box}
.tech-app .bottom-nav{position:static;inset:auto;transform:none;width:100%;max-width:none;margin:0;box-sizing:border-box}
.tech-app .field-dock{position:static;inset:auto;transform:none;width:100%;max-width:none;margin:0;padding:12px 20px;background:white;box-sizing:border-box;border-top:1px solid #dbe5ed}
.tech-app #tech-actions:empty{display:none}
.own-time-summary{display:flex;flex-direction:column;gap:8px;margin:20px 0}.job-contacts{display:flex;flex-direction:column;gap:12px;overflow-wrap:anywhere}.job-contacts a{min-height:28px;display:inline-flex;align-items:center}select[multiple]{min-height:108px}
html{scroll-padding-bottom:calc(180px + env(safe-area-inset-bottom))}

/* Run 10 long-visit check */
.lv-modal{position:fixed;inset:0;background:rgba(4,22,40,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.lv-sheet{width:100%;max-width:480px;margin:0;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.lv-sheet h2{margin:.25rem 0 .5rem}
.lv-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lv-badge{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:#e6f0fa;color:#0b4f8a;font-size:.8rem;font-weight:700}
.lv-badge.due{background:#fde8e1;color:#a33a12}
.lv-flag{background:#fff6e5;border-left:4px solid #d98a00}
/* Run 11: narrow phones (360px): let the three detail actions wrap instead of squeezing text into 3 lines. */
@media (max-width:380px){.tech-app .field-dock{flex-wrap:wrap}.tech-app .field-dock .btn{flex:1 1 calc(50% - 10px);min-width:0;white-space:normal}.tech-app .field-dock .btn:last-child:nth-child(odd){flex-basis:100%}}

/* ==========================================================================
   Run 12 design layer, matched to vortexmechanical.ca.
   Palette: --navy #082d4d, --blue #0068b7, --red #d62831, --ink #172532, --muted #5d6d79,
   --line #d9e3ea, --paper #f7fafc, --ice #eaf7ff. Header #000 like the site. Barlow Condensed + Inter (OFL, self-hosted).
   Spacing scale 4/8/12/16/20/24/32. Type scale 12/13/15/17/20/26/34. Radii: 8 (controls, as site buttons), 16 (cards), 999 (chips).
   ========================================================================== */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/barlow-condensed-800.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--r-ctl:8px;--r-card:16px;--shadow-1:0 1px 2px rgba(8,45,77,.06),0 4px 14px rgba(8,45,77,.06);--shadow-2:0 2px 4px rgba(8,45,77,.06),0 12px 28px rgba(8,45,77,.10);--ok:#17693f;--ok-bg:#e5f5ec;--warn:#8a5a10;--warn-bg:#fff3dc}
body{background:var(--paper);color:var(--ink);font:400 15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Barlow Condensed",Inter,sans-serif;letter-spacing:.005em;color:var(--navy);line-height:1.05}
h1{font-size:34px;font-weight:800;margin:var(--s2) 0 var(--s3)}h2{font-size:22px;font-weight:700;margin:var(--s6) 0 var(--s3)}h3{font-size:20px;font-weight:700}
.lede{color:var(--muted);font-size:15px}.fine{color:var(--muted);font-size:12.5px;line-height:1.5}.kicker{font:700 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
/* Dark header like the site: black bar, real logo, white title */
.topbar,.tech-app .topbar{background:#000;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);min-height:64px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:none}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{height:44px;width:auto;aspect-ratio:936/711;display:block;object-fit:contain;flex:none}
.brand-title{border-left:1px solid rgba(255,255,255,.18);padding-left:12px;min-width:0}
.brand .platform{font:600 10.5px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9bb0bf}
.brand .company{font:700 21px/1.1 "Barlow Condensed",sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.topbar .text-btn,.topbar .signout{color:#e8eef3;min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;background:transparent;border:0;padding:0 4px}
.top-actions{display:flex;align-items:center;gap:8px}.test-pill{background:var(--red);color:#fff;border-radius:999px;font:700 11px Inter,sans-serif;letter-spacing:.08em;padding:5px 10px}
/* Buttons: site style, 8px radius, 48px tall */
.btn{min-height:48px;border-radius:var(--r-ctl);font:600 15px Inter,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;box-shadow:0 6px 16px rgba(0,104,183,.18);transition:transform .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.btn.danger,.btn.reject{box-shadow:none}
.start-job{background:var(--red);box-shadow:0 9px 22px rgba(214,40,49,.25)}
/* Cards: soft shadow, no heavy borders */
.card{background:#fff;border:0;border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--s5)}
.card + .card{margin-top:var(--s3)}
.time-total{border-bottom:1px solid #eef2f5}
/* Job cards: clear hierarchy */
.job-card{position:relative;display:grid;gap:6px;padding:16px 44px 16px 16px;border:0;box-shadow:var(--shadow-1);text-align:left;min-height:96px}
.job-card:hover{transform:none;box-shadow:var(--shadow-2)}
.job-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.job-no{font:600 12px Inter,sans-serif;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.job-customer{font:700 21px/1.15 "Barlow Condensed",sans-serif;color:var(--navy)}
.job-meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;flex-wrap:wrap}.job-meta .ico{color:var(--blue)}.job-meta .dot{opacity:.5}
.job-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#9fb0bd}
.stack{display:grid;gap:12px}.stack>.card+.card{margin-top:0}
/* Status chips with colour coding */
.status-chip,.pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:999px;font:700 12px Inter,sans-serif;white-space:nowrap}
.status-chip::before,.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.status-draft{background:#eef2f5;color:#4c5b67}.status-submitted{background:#e6f1fb;color:#0b5592}.status-approved,.pill.ok{background:var(--ok-bg);color:var(--ok)}.status-sent_back,.pill.danger{background:#fdeaea;color:#a8202a}.pill{background:#e6f1fb;color:#0b5592}
/* Forms: grouped sections, clear labels and helper text */
.field{display:grid;gap:6px;font:600 13px Inter,sans-serif;color:var(--ink)}
.field input,.field select,.field textarea{min-height:48px;border:1px solid #cfdbe4;border-radius:var(--r-ctl);padding:12px 14px;font:400 16px Inter,sans-serif;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,104,183,.15)}
.field small,.field .fine{font-weight:400}
form .card h2{margin-top:0;padding-bottom:var(--s2);border-bottom:1px solid #eef2f5}
/* Sticky action bar + bottom nav: reserved rows (run 8 grid), no overlap */
.tech-app .field-dock,.dock{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid #e6edf2;box-shadow:0 -6px 18px rgba(8,45,77,.06)}
.bottom-nav{background:#fff;border-top:1px solid #e6edf2;box-shadow:none}
.bottom-nav button{min-height:56px;font:600 11.5px Inter,sans-serif;color:#6b7b87;border-radius:12px}
.bottom-nav button.active{color:var(--blue);background:var(--ice)}
/* Hero */
.job-hero{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-2)}
.job-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72))}
/* Banners */
.banner{border-radius:12px;border:0;padding:12px 14px}
/* Empty + loading states */
.empty-state{text-align:center;padding:32px 20px;color:var(--muted)}.empty-state h3,.empty-state h2{margin:8px 0}
.skeleton{display:grid;gap:12px;padding:8px 0}
.skeleton i{display:block;height:96px;border-radius:var(--r-card);background:linear-gradient(90deg,#edf2f6 0%,#f6f9fb 40%,#edf2f6 80%);background-size:200% 100%;animation:vx-shimmer 1.2s linear infinite}
.skeleton i:first-child{height:140px}
@keyframes vx-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton i{animation:none}}
/* Owner list cards */
.card-btn{background:#fff;border:0;border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:16px;min-height:88px;text-align:left;display:grid;gap:6px;width:100%}
.card-btn strong{font:700 18px "Barlow Condensed",sans-serif;color:var(--navy)}
/* Sign-in */
.signin-app{background:#000}
.signin{min-height:100dvh;display:flex;flex-direction:column;background:#000}
.signin-hero{display:flex;flex-direction:column;align-items:center;padding:max(28px,env(safe-area-inset-top)) 24px 20px;text-align:center}
.signin-logo{width:min(78vw,360px);height:auto;aspect-ratio:936/711;display:block}
.signin-tag{margin:4px 0 0;color:#9bb0bf;font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.signin-panel{flex:1;background:var(--paper);border-radius:24px 24px 0 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom))}
.signin-panel h1{margin-top:0}
.signin-list{display:grid;gap:10px;margin-top:16px}
.role-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px;background:#fff;border:0;border-radius:14px;box-shadow:var(--shadow-1);text-align:left;color:var(--ink)}
.role-btn .avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:700 15px "Barlow Condensed",sans-serif;letter-spacing:.04em}
.role-btn[data-user=jordan] .avatar{background:var(--red)}
.role-copy{flex:1;display:grid;gap:2px}.role-copy strong{font:700 18px "Barlow Condensed",sans-serif;color:var(--navy)}.role-copy span{font-size:13px;color:var(--muted)}
.role-btn .ico{color:#9fb0bd}
.brand-logo{height:52px}
.card>.section-head:first-child,.card>h2:first-child{margin-top:0}
.tech-app .field-dock{flex-wrap:wrap;gap:10px}.tech-app .field-dock .btn{flex:1 1 40%;min-width:0;white-space:normal}.tech-app .field-dock .btn:last-child:nth-child(odd){flex-basis:100%}
.text-btn{min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--blue)}
.lv-clock{margin:var(--s3) 0}
/* Run 13 per-tech billed hours */
.per-tech-row{padding:var(--s3,12px) 0;border-top:1px solid var(--line,#d9e3ea)}.per-tech-row:first-of-type{border-top:0}
.per-tech-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.per-tech-nums{display:flex;justify-content:space-between;margin-top:6px;color:var(--ink,#172532)}.per-tech-nums span{color:var(--muted,#5d6d79)}
.per-tech-row.unconfirmed .per-tech-head strong::after{content:''}
.per-tech-edit{display:flex;gap:8px;margin-top:8px}.per-tech-edit input{flex:1;min-height:48px;border:1px solid var(--line,#d9e3ea);border-radius:8px;padding:0 12px;font:inherit}.per-tech-edit .btn{flex:0 0 auto}
.per-tech-total{margin-top:var(--s3,12px);padding-top:var(--s3,12px);border-top:2px solid var(--navy,#082d4d)}
.my-hours input{font-size:1.25rem;font-weight:600}
.per-tech-total{display:block}.per-tech-total strong{display:block;font-size:1.15rem;margin-bottom:4px}.per-tech-total span{color:var(--muted,#5d6d79)}
/* Run 14 QuickBooks time sync */
.sync-row{padding:12px 0;border-top:1px solid var(--line,#d9e3ea)}.sync-row:first-of-type{border-top:0}
.sync-flag{color:var(--red,#d62831);font-weight:600}
.sync-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.sync-summary div{background:var(--paper,#f7fafc);border-radius:8px;padding:8px;text-align:center}.sync-summary strong{display:block;font-size:1.25rem;color:var(--navy,#082d4d)}.sync-summary span{font-size:.75rem;color:var(--muted,#5d6d79)}
.sync-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.sync-actions .btn{flex:1 1 100%}
.sync-row .btn{margin-top:8px;min-height:44px}
.per-tech-edit select{flex:1;min-height:48px;border:1px solid var(--line,#d9e3ea);border-radius:8px;padding:0 10px;font:inherit;min-width:0}
/* Run 15 production sign-in + user admin */
.signin-form{display:flex;flex-direction:column;gap:12px}.signin-form .btn{min-height:52px}.signin-form .text-btn{align-self:center}
.signin-form input{min-height:52px;font-size:1.05rem;border:1px solid var(--line,#d9e3ea);border-radius:8px;padding:0 14px;font:inherit}
.check-row{display:flex;gap:10px;align-items:center;min-height:44px}
.code-box{font:700 1.6rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.12em;background:var(--ice,#eaf7ff);color:var(--navy,#082d4d);border-radius:12px;padding:16px;text-align:center;margin:8px 0;user-select:all}
.user-row{padding:12px 0;border-top:1px solid var(--line,#d9e3ea)}.user-row:first-of-type{border-top:0}.user-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.user-actions .btn{flex:1 1 40%;min-height:44px}
.danger-text{color:var(--red,#d62831)}
/* Run 16: QuickBooks connection */
.plain-list{margin:8px 0 14px;padding-left:18px}.plain-list li{margin:4px 0}
.notice{background:#eef5fc;border-radius:12px;padding:12px 14px;font-size:14px;color:#0b2a4a}
.qbo-banner{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px}.qbo-banner strong{display:inline;margin:0}
.btn.small{min-height:40px;padding:8px 14px;font-size:14px;width:auto}
.landing{max-width:520px;margin:40px auto;padding:0 20px;font-family:system-ui,sans-serif}