/* YardQuote master stylesheet.
   Owns tokens, reset/base typography, accessibility primitives, public
   navigation, footer, cookies, forms, shared cards/tables/states/dialogs,
   portal/dashboard shells, long-form content, and small public utilities.
   Route-family bundles may extend these foundations without redefining them. */

:root {
  --brand-primary: #1a6b4a;
  --brand-primary-dark: #145539;
  --brand-primary-light: #1d7652;
  --brand-bg: #f8faf9;
  --brand-card: #ffffff;
  --brand-text: #111a15;
  --brand-text-muted: #5b6a63;
  --brand-border: #dce5e0;
  --brand-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand-error: #b91c1c;
  --brand-success: #166534;
  --shadow-card: 0 1px 2px rgba(17,26,21,0.06), 0 8px 24px rgba(17,26,21,0.05);
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-dark);
  --primary-light: var(--brand-primary-light);
  --primary-pale: #e8f5ef;
  --primary-mid: #c5e6d4;
  --bg: var(--brand-bg);
  --bg2: #f0f3f1;
  --bg3: var(--brand-card);
  --text: var(--brand-text);
  --muted: #4a5a50;
  --faint: #68776f;
  --border: #d4ddd8;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 2px 12px rgba(26,107,74,0.10);
  --shadow-lg: 0 8px 32px rgba(26,107,74,0.14);
  --font: var(--brand-font);
  --accent: #0e4a7c;
  --accent-pale: #e6f0f8;
}

#yq-staging-banner {
  align-items: center;
  background: #facc15;
  color: #1c1917;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 16px;
  gap: 8px 16px;
  justify-content: center;
  line-height: 1.4;
  min-height: 44px;
  padding: 8px 16px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 10000;
}

#yq-staging-banner strong {
  background: #1c1917;
  border-radius: 4px;
  color: #fefce8;
  letter-spacing: 0.08em;
  padding: 2px 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--brand-font);
  background: var(--brand-bg);
  color: var(--brand-text);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
/* The hidden attribute must win over component display declarations. */
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--brand-border);
  background: var(--brand-card);
}
.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-text);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.portal-brand svg { color: var(--brand-primary); width: 26px; height: 26px; flex: 0 0 auto; }
.portal-brand svg + * { margin-left: 7px; }
.portal-brand-accent { color: var(--brand-primary); font-weight: 600; }
.portal-header-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-text-muted);
}

.portal-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1180px;
  width: 100%;
  margin: 32px auto;
  padding: 0 24px;
}
@media (min-width: 960px) {
  .portal-shell { grid-template-columns: 1fr 1.1fr; gap: 56px; }
}

.portal-pitch h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
}
.portal-pitch p { font-size: 1.05rem; color: var(--brand-text-muted); }
.portal-pitch code {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 1em;
  color: var(--brand-text);
}
.portal-pitch-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.portal-pitch-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; }
.portal-pitch-list .bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  margin-top: 8px;
}

.portal-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.portal-card h2 { margin: 0 0 6px; font-size: 1.4rem; }
.portal-card .muted { color: var(--brand-text-muted); margin: 0 0 24px; font-size: 1rem; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-text);
  margin-bottom: 6px;
}
.field .req { color: var(--brand-error); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--brand-text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(26,107,74,0.15);
}
.field input[aria-invalid="true"] { border-color: var(--brand-error); }
.field .hint { color: var(--brand-text-muted); font-size: 1rem; margin: 6px 0 0; }
.field .error { color: var(--brand-error); font-size: 1rem; margin: 6px 0 0; min-height: 1.2em; }

/* Checkbox row: keep the box small and inline with its label rather than the
   full-width text-input layout the default .field input rule applies. */
.field-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.field-check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--brand-primary); }
.field-check label { margin: 0; }
.field-check .hint { flex-basis: 100%; }

.row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .row { grid-template-columns: 1fr 1fr; gap: 16px; } }

/* Checkbox fields (treatment license confirmation + offer toggles). */
.field-check { margin-bottom: 16px; }
.check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; color: var(--brand-text); }
.check-label input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; accent-color: var(--brand-primary); cursor: pointer; }
.check-label span { line-height: 1.4; }

/* Lawn treatment compliance gate (license confirmation block). */
.treatment-compliance {
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  background: var(--brand-bg);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.treatment-compliance-title { font-weight: 700; color: var(--brand-text); margin: 0 0 4px; }

/* Pricing fieldset disabled until the license is confirmed. */
.treatment-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.treatment-fields[disabled] { opacity: 0.5; }

.error.global { margin: 8px 0 16px; }

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { filter: brightness(0.92); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary {
  background: #fff;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--brand-bg); }

.terms-note { color: var(--brand-text-muted); font-size: 1rem; margin: 16px 0 0; text-align: center; }

.success-card {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
}
.success-card h3 { margin: 0 0 8px; color: var(--brand-success); }
.success-card p { margin: 0 0 12px; color: var(--brand-text); }

/* Dashboard layout */
.dash {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 900px) {
  .dash { grid-template-columns: 240px 1fr; min-height: calc(100vh - 65px); }
}
.dash-side {
  background: var(--brand-card);
  border-right: 1px solid var(--brand-border);
  padding: 24px 16px;
}
.dash-side nav { display: flex; flex-direction: column; gap: 4px; }
.dash-side a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--brand-text);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.dash-side a:hover { background: var(--brand-bg); text-decoration: none; }
.dash-side a.active { background: var(--brand-primary); color: #fff; }

/* Mobile (below the 900px two-column breakpoint): the dashboard nav becomes a
   horizontal, scrollable tab strip pinned to the top instead of a full-width
   12-item vertical list that pushes the page content a whole screen down. */
@media (max-width: 899px) {
  /* min-width:0 lets the grid column stay at the viewport width instead of
     stretching to the nav's intrinsic (nowrap) content width, which otherwise
     pushes the whole page into horizontal scroll. The nav then scrolls itself. */
  .dash { min-width: 0; }
  .dash-side {
    border-right: none;
    border-bottom: 1px solid var(--brand-border);
    padding: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
    min-width: 0;
    max-width: 100%;
  }
  .dash-side nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    min-width: 0;
  }
  .dash-side a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 14px; /* >= 44px touch target height */
  }
}

.dash-main {
  padding: 32px 24px;
  min-width: 0;
}
.dash-main h1 { margin: 0 0 24px; font-size: 1.8rem; font-weight: 800; }
.dash-main h2 { margin: 32px 0 12px; font-size: 1.2rem; font-weight: 700; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.stat-label { color: var(--brand-text-muted); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--brand-text); margin-top: 8px; }

.table-wrap {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  /* Let a wide data table scroll horizontally on mobile instead of clipping
     columns out of reach; overflow-y stays hidden so the rounded corners clip. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-card);
}
table { width: 100%; border-collapse: collapse; }
table select { min-height: 44px; padding: 8px 10px; }
th, td {
  padding: 12px 16px;
  text-align: left;
  font-size: 1rem;
  border-bottom: 1px solid var(--brand-border);
}
th { background: var(--brand-bg); font-weight: 600; color: var(--brand-text-muted); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--brand-text-muted);
}
.empty-state h3 { color: var(--brand-text); margin: 0 0 8px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-new { background: #dbeafe; color: #1e40af; }
.badge-contacted { background: #fef3c7; color: #92400e; }
.badge-converted { background: #d1fae5; color: #065f46; }
.badge-lost { background: #fee2e2; color: #991b1b; }
.badge-active { background: #d1fae5; color: #065f46; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-qualified { background: #e0e7ff; color: #3730a3; }
.badge-won { background: #d1fae5; color: #065f46; }
.badge-draft { background: #e5e7eb; color: #374151; }
.badge-sent { background: #dbeafe; color: #1e40af; }
.badge-acknowledged { background: #d1fae5; color: #065f46; }
.badge-paused { background: #fef3c7; color: #92400e; }
.badge-ended { background: #e5e7eb; color: #374151; }
.badge-email { background: #e0e7ff; color: #3730a3; }
.badge-sms { background: #cffafe; color: #155e75; }
.badge-service { background: #dbeafe; color: #1e40af; }

/* Small inline tag marking a lead's service vertical (seasonal cleanups, etc.)
   in the leads table. Lower-key than a status badge so the name stays primary. */
.lead-svc-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  background: #e8f3ee;
  color: #1a6b4a;
  vertical-align: middle;
}
.badge-recurring { background: #d1fae5; color: #065f46; }
.badge-snow { background: #e0f2fe; color: #075985; }
.badge-other { background: #e5e7eb; color: #374151; }

.embed-snippet {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  overflow-x: auto;
  white-space: pre;
  position: relative;
}
.embed-snippet button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.1);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--brand-font);
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
}

.flash {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 1rem;
}
.flash.error { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar select, .toolbar input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.color-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.color-input input[type="color"] {
  width: 44px;
  min-width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  cursor: pointer;
}

/* ── Billing ───────────────────────────────────────────────────────── */
.billing-status { margin: 8px 0 4px; }

.plan-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  margin: 8px 0 20px;
}
.plan-interval {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--brand-text-muted);
  font: 600 1rem var(--brand-font);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.plan-interval.active {
  background: var(--brand-primary);
  color: #fff;
}
.plan-interval:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.plan-save {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-success);
  margin-left: 4px;
}
.plan-interval.active .plan-save { color: #d7f5e3; }

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.plan-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.plan-card.plan-current { border-color: var(--brand-primary); border-width: 2px; }
.plan-card h3 { margin: 0 0 4px; }
.plan-price { font-size: 2rem; font-weight: 800; color: var(--brand-text); }
.plan-per { font-size: 1rem; font-weight: 500; color: var(--brand-text-muted); }
.plan-features {
  list-style: none;
  padding: 0;
  margin: 14px 0 20px;
  flex: 1;
}
.plan-features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--brand-text);
  font-size: 1rem;
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(-45deg);
}
.plan-card .btn-primary, .plan-card .btn-secondary { width: 100%; }
.billing-note { font-size: 1rem; margin: 4px 0 20px; }

.connect-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
  max-width: 520px;
}
.connect-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }

/* ── Branding form: section titles + logo upload ── */
.card-section-title { font-size: 1.15rem; margin: 0 0 16px; }
.portal-card + .portal-card { margin-top: 20px; }
.logo-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-preview {
  max-height: 56px; max-width: 200px; width: auto; border-radius: 8px;
  border: 1px solid var(--brand-border); background: var(--brand-card); padding: 6px;
}
.logo-upload-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-upload-controls input[type="file"] { font-size: 1rem; max-width: 240px; }

/* ── Phase C: schedule board + team ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.sched-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.sched-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-controls input[type="date"] { padding: 8px 10px; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-card); color: var(--brand-text); }
.sched-board { margin-top: 16px; }
.sched-cols { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.sched-col { min-width: 240px; max-width: 280px; flex: 0 0 auto; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 12px; padding: 12px; }
.sched-col-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.sched-count { margin-left: auto; font-size: 1rem; color: var(--brand-text-muted); background: var(--brand-card); border-radius: 999px; padding: 1px 8px; }
.sched-empty { color: var(--brand-text-muted); font-size: 1rem; padding: 8px 4px; }
.crew-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--brand-text-muted); }
.muted-sm { font-size: 1rem; }
a.is-locked { opacity: 0.55; }
.job-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: var(--brand-card); border: 1px solid var(--brand-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.job-card:hover { border-color: var(--brand-primary); }
.job-card-title { font-weight: 600; font-size: 1rem; color: var(--brand-text); }
.job-card-meta { font-size: 1rem; color: var(--brand-text-muted); }

.card-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.org-list { display: flex; flex-direction: column; }
.org-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--brand-border); }
.org-row:last-child { border-bottom: none; }
.org-name { font-weight: 600; }
.org-meta { color: var(--brand-text-muted); font-size: 1rem; }
.org-row .btn-link { margin-left: auto; }
.btn-link { min-height: 44px; background: none; border: none; color: var(--brand-primary); font-weight: 600; cursor: pointer; font-size: 1rem; padding: 10px 8px; }
.btn-danger { min-height: 44px; background: #c0392b; color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-weight: 600; cursor: pointer; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 400; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Modal */
.yq-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.yq-modal[hidden] { display: none; }
.yq-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.yq-modal-card { position: relative; background: var(--brand-card); border-radius: 14px; padding: 22px 24px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.yq-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.yq-modal-head h2 { margin: 0; font-size: 1.25rem; }
.yq-modal-close { width: 44px; height: 44px; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--brand-text-muted); }

/* ── Phase D1: job photos + reviews ── */
.ph-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ph-thumb { position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; border: 1px solid var(--brand-border); }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-kind { position: absolute; bottom: 0; left: 0; right: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(0,0,0,0.55); color: #fff; text-align: center; padding: 1px 0; }
.ph-del { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border-radius: 0 0 0 12px; border: none; background: rgba(0,0,0,0.7); color: #fff; cursor: pointer; line-height: 1; font-size: 1rem; }
.ph-empty { font-size: 1rem; }
.ph-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.ph-controls input[type="file"] { font-size: 1rem; max-width: 200px; }
.ph-sent { color: var(--brand-primary); font-weight: 600; font-size: 1rem; margin-left: 8px; }

.reviews-summary { margin: 8px 0 18px; }
.rev-avg { font-size: 1.05rem; }
.rev-avg strong { font-size: 1.2rem; }
.rev-star, .rev-head .rev-star { color: #d4ddd8; }
.rev-star.on { color: #f5a623; }
.rev-live { color: var(--brand-primary); font-weight: 600; font-size: 1rem; }
.rev-list { display: flex; flex-direction: column; gap: 14px; }
.rev-row { border: 1px solid var(--brand-border); border-radius: 10px; padding: 12px 14px; }
.rev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-name { font-weight: 600; }
.rev-date { color: var(--brand-text-muted); font-size: 1rem; }
.rev-comment { margin: 6px 0 0; color: var(--brand-text); }

/* GPS tracking setup URL (crew editor) + live map spacing */
.track-url { display: block; word-break: break-all; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 8px; padding: 8px 10px; font-size: 1rem; }
.ws-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; margin-right: 4px; }
.ws-thumb-lg { width: 100%; max-width: 220px; border-radius: 10px; margin-bottom: 8px; display: block; }
.maint-row { font-size: 1rem; padding: 4px 0; color: var(--brand-text-muted); border-bottom: 1px solid var(--brand-border); }
.maint-row:last-child { border-bottom: none; }
.ops-exports { display: flex; gap: 10px; flex-wrap: wrap; }
.ops-exports .btn-secondary { width: auto; text-decoration: none; display: inline-block; }
/* Phase F-b/F-c ops sub-sections (prospects, ads, outreach, contracts, resources) */
.ops-subhead { font-size: 1rem; font-weight: 700; margin: 18px 0 10px; color: var(--brand-text); }
.card-head-row--sub { margin-top: 18px; }
.ops-static-note { font-size: 1rem; }
.org-row .org-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.org-sub { display: block; color: var(--brand-text-muted); font-size: 1rem; margin-top: 2px; }
.org-metric { color: var(--brand-text-muted); font-size: 1rem; }
.org-metric strong { color: var(--brand-text); }
.org-col { display: flex; flex-direction: column; min-width: 0; }
.resource-block { margin: 0 0 18px; }
.resource-block h3 { font-size: 1rem; margin: 0 0 6px; color: var(--brand-text); }
.resource-block p { margin: 0 0 8px; color: var(--brand-text-muted); font-size: 1rem; }
.resource-block ul { margin: 0 0 8px; padding-left: 20px; color: var(--brand-text-muted); font-size: 1rem; }
.resource-block li { margin: 4px 0; }
.resource-block a { color: var(--brand-primary); }
.resource-partner { background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 10px; padding: 14px; }
.share-link-box { display: block; word-break: break-all; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 8px; padding: 8px 10px; font-size: 1rem; margin-top: 6px; }
.merge-token-hint { font-size: 1rem; color: var(--brand-text-muted); margin: 4px 0 0; }
#livemap-wrap { margin: 12px 0; }
#livemap { height: 340px; }

/* Shared public shell ---------------------------------------------------- */
.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
/* Only top-level marketing sections receive landing-page rhythm. Nested
   dashboard, auth, changelog, and admin sections own their local spacing. */
body > section { padding: 4rem 0; }
body > section + section { border-top: 1px solid var(--border); }

body > nav {
  position: sticky;
  top: 0;
  z-index: 100;
  flex: 0 0 auto;
  background: rgba(248,250,249,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 960px;
  height: 60px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a { color: var(--muted); font-size: 1rem; font-weight: 500; }
.nav-links a:hover, .nav-links a:focus { color: var(--primary); text-decoration: none; }

/* Single source of truth for the YardQuote sprout wordmark. */
.yq-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--primary-dark);
  text-decoration: none;
}
.yq-logo:hover, .yq-logo:focus { text-decoration: none; }
.yq-logo svg { width: 28px; height: 28px; margin-right: 6px; flex: 0 0 auto; color: var(--primary); }
.yq-logo-accent { color: var(--primary-light); font-weight: 600; }
.yq-brand-logo { display: block; width: auto; max-width: 180px; max-height: 44px; object-fit: contain; }

/* Public mobile navigation. Markup remains JS-built, presentation lives here. */
.yq-hamburger,
.yq-mobile-close {
  width: 44px;
  height: 44px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}
.yq-hamburger { display: none; }
.yq-mobile-close { display: inline-flex; }
.yq-hamburger:hover, .yq-mobile-close:hover { background: var(--bg2); }
.yq-hamburger svg, .yq-mobile-close svg { width: 24px; height: 24px; }
.yq-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.4);
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.yq-mobile-overlay.yq-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.yq-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 280px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  background: var(--bg3);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.yq-mobile-panel.yq-open {
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
.yq-mobile-header {
  min-height: 60px;
  padding: 8px 12px 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.yq-mobile-brand { display: flex; align-items: center; gap: 0; font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); }
.yq-mobile-brand svg { width: 20px; height: 20px; margin-right: 0.4rem; color: var(--primary); }
.yq-mobile-brand .yq-accent { color: var(--primary-light); font-weight: 600; }
.yq-mobile-nav { flex: 1; margin: 0; padding: 8px 0; overflow-y: auto; list-style: none; }
.yq-mobile-nav li { margin: 0; }
.yq-mobile-nav a {
  min-height: 48px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.yq-mobile-nav a:hover, .yq-mobile-nav a:focus { background: var(--bg2); color: var(--primary); text-decoration: none; }
.yq-mobile-nav a.yq-active { background: var(--primary-pale); color: var(--primary); font-weight: 700; }
body.yq-nav-locked { overflow: hidden; }
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .yq-hamburger { display: inline-flex; }
}
@media (min-width: 1024px) {
  .yq-mobile-overlay, .yq-mobile-panel { display: none; }
}

/* Shared footer ---------------------------------------------------------- */
.yq-footer { margin-top: auto; padding: 2.5rem 0 1.5rem; border-top: 1px solid var(--border); background: var(--bg); }
.yq-footer-inner { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.yq-footer-top { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.yq-footer-brand { display: flex; align-items: center; gap: 0; font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); }
.yq-footer-brand svg { width: 18px; height: 18px; margin-right: 0.4rem; color: var(--primary); }
.yq-footer-accent { color: var(--primary-light); font-weight: 600; }
.yq-footer-byline, .yq-footer-contact, .yq-footer-meta { color: var(--muted); font-size: 1rem; }
.yq-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-bottom: 0.5rem; }
.yq-footer-links a, .yq-footer-contact a {
  min-height: 44px;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.yq-footer-links a:hover, .yq-footer-links a:focus, .yq-footer-contact a:hover, .yq-footer-contact a:focus { color: var(--primary); text-decoration: underline; }
.yq-footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; color: var(--muted); }
.yq-footer-meta a { color: inherit; text-decoration: underline; }
.yq-footer-sep { opacity: 0.6; }

/* Cookie consent --------------------------------------------------------- */
#yq-cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg3);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  font-family: var(--font);
}
#yq-cookie-banner .yq-cb-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#yq-cookie-banner .yq-cb-text { flex: 1; min-width: 200px; color: var(--muted); font-size: 1rem; }
#yq-cookie-banner .yq-cb-buttons { display: flex; gap: 0.75rem; flex-shrink: 0; }
#yq-cookie-banner .yq-cb-btn { min-width: 88px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--radius); font-size: 1rem; font-weight: 700; cursor: pointer; }
#yq-cookie-banner .yq-cb-accept { background: var(--primary); color: #fff; }
#yq-cookie-banner .yq-cb-decline { background: var(--bg2); color: var(--muted); }
#yq-cookie-banner .yq-cb-accept:hover { background: var(--primary-dark); }
#yq-cookie-banner .yq-cb-decline:hover { background: var(--border); }
@media (max-width: 640px) {
  #yq-cookie-banner .yq-cb-inner { flex-direction: column; text-align: center; }
  #yq-cookie-banner .yq-cb-buttons { width: 100%; justify-content: center; }
}

/* Shared forms, targets, and semantic utilities ------------------------- */
.btn-primary, .btn-secondary, .contact-submit, .quote-btn, .btn-danger,
.toolbar button, .sched-controls button, .modal-actions button {
  min-height: 44px;
}
.field input, .field select, .field textarea,
.form-group input, .form-group select, .form-group textarea,
.toolbar input, .toolbar select, .sched-controls input { min-height: 44px; }
.field input:focus, .field select:focus, .field textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 3px solid transparent; }
.btn--inline { display: inline-flex; width: auto; }
.full-width { width: 100%; }
.text-decoration-none { text-decoration: none; }
.bg-card-warm { background: #fdfdfb; }
.fw-600, .fw-600--brand { font-weight: 600; }
.fw-600--brand { color: var(--text); }
.text-1-25-600 { font-size: 1.25rem; font-weight: 600; }
.text-1-1-600 { font-size: 1.1rem; font-weight: 600; }
.text-95, .text-85-muted, .text-80-faint, .section-eyebrow, .note-small { font-size: 1rem; }
.text-85-muted { margin-top: 0.25rem; color: var(--muted); }
.text-80-faint { margin-top: 0.25rem; color: var(--faint); }
.section-eyebrow { margin-bottom: 0.15rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mt-6 { margin-top: 6px; }
.mt-12 { margin-top: 12px; }
.mt-1rem { margin-top: 1rem; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin: 0 0 8px; }
.mb-12 { margin: 0 0 12px; }
.mt-quarter { margin-top: 0.25rem; }
.mono-block { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 1rem; line-height: 1.6; }
.grid-cards-220, .grid-cards-220--gap12 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.grid-cards-220--gap12 { gap: 12px; }
.stack-list { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.yq-embed-iframe { width: 100%; max-width: 560px; height: 560px; border: 0; }

/* Long-form content ------------------------------------------------------ */
.content-shell { width: 100%; max-width: 880px; min-width: 0; margin: 0 auto; padding: 16px 24px 64px; overflow-wrap: anywhere; }
.content-shell h1 { margin: 0 0 12px; font-size: clamp(2rem,6vw,2.4rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.content-shell h2 { margin: 36px 0 12px; font-size: 1.4rem; }
.content-shell h3 { margin: 24px 0 8px; font-size: 1.1rem; }
.content-shell p, .content-shell li { font-size: 1.0625rem; line-height: 1.65; }
.content-shell .lede { margin-bottom: 24px; color: var(--brand-text-muted); font-size: 1.15rem; }
.content-shell ul, .content-shell ol { padding-left: 24px; }
.content-shell li { margin-bottom: 8px; }
.content-shell code { overflow-wrap: anywhere; }
.content-shell .table-wrap, .content-table, .legal-table-wrap { width: 100%; max-width: 100%; margin: 16px 0; overflow-x: auto; }
.content-shell table, .content-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.content-shell table th, .content-shell table td, .content-table th, .content-table td { padding: 10px 12px; border-bottom: 1px solid var(--brand-border); text-align: left; vertical-align: top; font-size: 1rem; }
.content-shell table th, .content-table thead th { background: var(--brand-bg); font-weight: 700; }
.content-shell blockquote { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--brand-primary); border-radius: 0 8px 8px 0; background: var(--brand-bg); }
.content-cta, .content-callout { margin: 32px 0; padding: 22px 24px; border: 1px solid var(--brand-border); border-left: 4px solid var(--brand-primary); border-radius: 12px; background: var(--brand-bg); }
.content-cta h2, .content-cta h3 { margin: 0 0 8px; font-size: 1.15rem; }
.content-cta p { margin: 0 0 14px; }
.content-callout { margin: 18px 0; font-size: 1rem; }
.content-breadcrumb { max-width: 100%; margin: 0 0 6px; padding-bottom: 2px; overflow-x: auto; color: var(--brand-text-muted); font-size: 1rem; line-height: 1.3; white-space: nowrap; }
.content-breadcrumb a { color: inherit; }
.callout-yes { color: var(--brand-success); }
.callout-no { color: var(--brand-error); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 16px; margin: 24px 0; padding: 0; list-style: none; }
.guide-card { overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; }
.guide-card a { display: block; height: 100%; padding: 18px 20px; color: inherit; text-decoration: none; }
.guide-card a:hover { background: var(--brand-bg); }
.guide-card h3 { margin: 0 0 6px; color: var(--brand-primary); font-size: 1.05rem; }
.guide-card p { margin: 0; color: var(--brand-text-muted); font-size: 1rem; }

/* Public information, legal, FAQ, contact, and changelog ---------------- */
.page-header { padding: 3rem 0 2rem; }
.page-header h1 { margin: 0 0 0.5rem; font-size: clamp(1.8rem,4vw,2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.page-header p, .page-header .effective { max-width: 620px; color: var(--muted); font-size: 1rem; }
.legal-content { padding-bottom: 3rem; }
.legal-content h2 { margin: 2rem 0 0.75rem; color: var(--text); font-size: 1.2rem; }
.legal-content h3 { margin: 1.5rem 0 0.5rem; color: var(--text); font-size: 1.05rem; }
.legal-content p, .legal-content ul, .legal-content ol { margin-bottom: 0.9rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }
.legal-content ul, .legal-content ol { padding-left: 1.5rem; }
.legal-content li { margin-bottom: 0.45rem; }
.legal-content table { display: block; width: 100%; max-width: 100%; margin-bottom: 1rem; overflow-x: auto; border-collapse: collapse; font-size: 1rem; }
.legal-content th, .legal-content td { min-width: 150px; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--muted); text-align: left; }
.legal-content th { background: var(--bg2); color: var(--text); }
.faq-list { padding-bottom: 3rem; }
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-question { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 1.05rem; font-weight: 700; }
.faq-question svg { width: 20px; height: 20px; margin-top: 0.15rem; flex: 0 0 auto; color: var(--primary); }
.faq-answer { padding-left: 2.5rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.7; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 3rem; }
.contact-form-wrap { padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg3); box-shadow: var(--shadow); }
.contact-form-wrap h2, .contact-info h2 { margin-bottom: 1.25rem; font-size: 1.1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.3rem; color: var(--text); font-size: 1rem; font-weight: 600; }
.form-group label .required { color: #b91c1c; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 1rem; }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group .field-error { margin-top: 0.25rem; color: #b91c1c; font-size: 1rem; }
.form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select { border-color: #b91c1c; }
.contact-submit { width: 100%; padding: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; }
.contact-submit:hover { background: var(--primary-dark); transform: translateY(-1px); }
.contact-success, .contact-error { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--primary-mid); border-radius: var(--radius); text-align: center; }
.contact-success { background: var(--primary-pale); }
.contact-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.contact-success-title, .contact-success-sub, .contact-error { font-size: 1rem; }
.contact-success-title { color: var(--primary-dark); font-weight: 700; }
.contact-info { padding-top: 0.5rem; }
.info-card { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.info-icon { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--primary-mid); border-radius: 10px; background: var(--primary-pale); color: var(--primary); }
.info-label, .info-value { color: var(--text); font-size: 1rem; }
.info-label { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.log { padding-bottom: 3.5rem; }
.log-entry { display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--border); }
.log-date { padding-top: 0.2rem; color: var(--primary); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.log-body h2 { margin-bottom: 0.85rem; font-size: 1.15rem; }
.log-body ul { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.log-body li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.log-body li::before { content: ""; position: absolute; top: 0.65rem; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-mid); }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .faq-answer { margin-top: 0.25rem; padding-left: 0; }
  .log-entry { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
  .log-date { padding-top: 0; }
}

/* Login, token, review, contract, and tracking surfaces ----------------- */
.login-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login-card { width: 100%; max-width: 420px; }
.login-card h1 { margin: 0 0 8px; font-size: 1.6rem; }
.star-row { display: flex; gap: 4px; }
.star { min-width: 44px; min-height: 44px; padding: 2px 4px; border: 0; background: none; color: var(--brand-border); font-size: 2rem; line-height: 1; cursor: pointer; transition: color 0.1s, transform 0.1s; }
.star:hover { transform: scale(1.1); }
.star.on { color: #b76d00; }
.contract-card { max-width: 720px; }
.contract-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid #fed7aa; border-radius: 10px; background: #fff7ed; color: #7c2d12; font-size: 1rem; line-height: 1.5; }
.contract-disclaimer svg { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; color: #c2410c; }
.contract-meta { margin: 0 0 16px; color: var(--brand-text-muted); font-size: 1rem; }
.contract-body { max-height: 46vh; margin: 0 0 20px; padding: 18px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-bg); color: var(--brand-text); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 1rem; line-height: 1.6; }
.ack-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; }
.ack-checkbox-row input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; flex: 0 0 auto; accent-color: var(--brand-primary); }
.ack-checkbox-row label, .contract-ack-note { color: var(--brand-text); font-size: 1rem; line-height: 1.5; }
.contract-ack-note { margin: 14px 0 0; color: var(--brand-text-muted); }
.track-shell { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; }
.track-card { width: 100%; max-width: 520px; }
.track-card h1 { margin: 0 0 12px; font-size: 1.5rem; }
.track-status { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--brand-bg); color: var(--brand-text); font-size: 1rem; font-weight: 700; }
.track-status.status-in_route { background: #e8f5ef; color: #145539; }
.track-status.status-completed { background: #e6f0f8; color: #0e4a7c; }
.track-eta { margin: 16px 0 8px; color: var(--brand-primary); font-size: 1.3rem; font-weight: 800; }
.track-map { height: 320px; margin: 12px 0; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; }
.track-crew { margin: 8px 0 0; font-size: 1rem; }

/* 404 and inactive-contractor status pages ------------------------------ */
body.page-404, body.status-page { min-height: 100vh; padding: 2rem; align-items: center; justify-content: center; text-align: center; }
.page-404 .wrap, .status-card { width: 100%; max-width: 480px; }
.page-404 .yq-logo { margin-bottom: 1.5rem; }
.brand-404 { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 1.5rem; color: var(--text); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.brand-404 svg { width: 26px; height: 26px; color: var(--primary); }
.brand-404 .accent { color: var(--primary); }
.page-404 h1 { margin: 0; color: var(--primary); font-size: 4rem; line-height: 1; letter-spacing: -0.04em; }
.page-404 p, .status-card p { margin-top: 0.75rem; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.page-404 .cta { min-height: 44px; margin-top: 1.5rem; padding: 0.75rem 1.5rem; display: inline-flex; align-items: center; border-radius: 10px; background: var(--primary); color: #fff; font-size: 1rem; font-weight: 700; }
.status-logo { margin-bottom: 22px; color: var(--text); font-size: 1.35rem; font-weight: 800; }
.status-logo span { color: var(--primary); }
.status-card h1 { margin: 0 0 12px; font-size: 1.45rem; }
.status-card .status-muted { margin-top: 26px; color: var(--muted); font-size: 1rem; }

/* Contractor-theme additions emitted by the external theme endpoint. */
.yq-powered { position: fixed; right: 10px; bottom: 10px; z-index: 900; min-height: 44px; padding: 11px 14px; display: inline-flex; align-items: center; border-radius: 999px; background: #111a15; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: 1rem; font-weight: 600; text-decoration: none; }

/* Finite accessible palette for crew dots; JS maps arbitrary saved colors to
   the closest class without writing element styles. */
.crew-color-0 { background: #166534; }
.crew-color-1 { background: #1d4ed8; }
.crew-color-2 { background: #6d28d9; }
.crew-color-3 { background: #a21caf; }
.crew-color-4 { background: #be123c; }
.crew-color-5 { background: #b45309; }
.crew-color-6 { background: #4d7c0f; }
.crew-color-7 { background: #0f766e; }
.crew-color-8 { background: #0e7490; }
.crew-color-9 { background: #4338ca; }
.crew-color-10 { background: #7c2d12; }
.crew-color-11 { background: #475569; }