/* ============================================================================
   Bug Busters — canonical design tokens
   ----------------------------------------------------------------------------
   One source of truth for all four surfaces:
     /index.html            field app
     /admin/index.html      admin console
     /admin/pricing.html    pricing + proposal settings (iframed into admin)
     /office/index.html     office dashboard

   Before this file each surface carried its own :root block, and they had
   drifted (--line and --bg differed between the field app and the dashboards;
   --green/--red existed only on two of the four). Add a token here — never in a
   surface's own <style>.

   NOTE: this file is cached by the service worker. Bump CACHE_VERSION in
   /sw.js after editing, or the field app will keep serving the old copy.
   ========================================================================== */

:root{
  /* ---------- brand ---------- */
  --navy:#123a86;
  --navy-l:#2f8fe0;
  --orange:#FB672C;          /* decorative only — 2.97:1 on white, never text */
  --orange-l:#f7931e;
  --orange-d:#ad4a0d;
  --orange-btn:#bf520b;
  --orange-pale:#fdeee2;
  --orange-br:#f2c6a4;
  --dark:#20262e;

  /* ---------- surface + text ---------- */
  --ink:#1f2733;
  --muted:#656b78;           /* darkened from #6b7280 → 4.5:1 on --bg */
  --line:#dce1ea;
  --bg:#e8ecf3;
  --card:#fff;

  /* ---------- semantic status ----------
     Each pair is a text colour and its tint background. Every combination
     below clears WCAG AA (4.5:1) at the 11.5px the badges actually render at;
     the previous values sat between 3.87 and 4.44. */
  --ok:#0d7e56;            --ok-pale:#e6f5ee;
  --warn:#b54e0a;          --warn-pale:#fdeee2;
  --danger:#d34247;        --danger-pale:#fdecec;
  --neutral:#5f6e84;       --neutral-pale:#eef1f6;

  /* Legacy aliases — existing rules reference these names. Prefer the
     semantic names above in new code. */
  --green:var(--ok);
  --red:var(--danger);
  --amber:var(--orange-l);   /* was a duplicate token: --amber === --orange-l */

  /* ---------- radius scale ----------
     Replaces 16 ad-hoc values in the field app alone. Adoption is incremental:
     these are available now, existing literals can migrate over time. */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:12px;
  --r-xl:16px;
  --r-2xl:20px;
  --r-full:999px;

  /* ---------- type scale ----------
     Replaces 27 distinct sizes (including half-pixel steps like 9.5/10.5/11.5). */
  --t-2xs:10px;
  --t-xs:11px;
  --t-sm:12px;
  --t-base:13px;
  --t-md:14px;
  --t-lg:16px;
  --t-xl:18px;
  --t-2xl:21px;
  --t-3xl:27px;
  --t-4xl:34px;

  /* ---------- spacing scale ---------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;

  /* ---------- elevation ---------- */
  --sh-1:0 2px 6px rgba(0,0,0,.08);
  --sh-2:0 8px 22px rgba(25,40,80,.09);
  --sh-3:0 20px 60px rgba(0,0,0,.30);

  /* ---------- motion ---------- */
  --dur-fast:.12s;
  --dur-base:.18s;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================================
   Badge — the one component that existed twice under the same class name.

   `.badge` is the tinted status pill (dashboards). The field app's solid-fill
   pill is `.badge-solid`; it shares no variants with this one, so keeping both
   under `.badge` meant the two definitions fought wherever the surfaces meet —
   which they do: pricing.html is iframed inside the admin console.
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:var(--r-full);
  white-space:nowrap;
}
.badge.new{    background:var(--warn-pale);    color:var(--warn); }
.badge.signed{ background:var(--ok-pale);      color:var(--ok); }
.badge.draft{  background:var(--neutral-pale); color:var(--neutral); }

.badge-solid{
  display:inline-block;
  font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:var(--r-full);
  color:#fff; white-space:nowrap;
}
.badge-solid.dryseal{     background:var(--navy); }
.badge-solid.termite{     background:var(--orange-btn); }
.badge-solid.sold{        background:#15803d; }
.badge-solid.proposed{    background:#b45309; }   /* was #d97706 — 2.9:1 on white */
.badge-solid.appointment{ background:#2563eb; }

/* ============================================================================
   Rich text — the shared contract for Policies & Training content.

   The office writes this in the Admin console; it renders in the Admin editor,
   in the field app's Policies/Training view, and in the signed acknowledgment
   PDF. These three must agree, so the vocabulary is deliberately small and
   class-based rather than free-form inline styles:

     .tx-brand   brand-orange emphasis (the ONE colour authors can apply)
     .tx-sm      small print
     h2 / h3 / h4  size steps, brand orange, in that order
     ol.spaced / ul.spaced   extra breathing room between items

   Anything outside this vocabulary is stripped on save (see normalizeRich in
   admin/index.html) so a hand-picked near-miss orange can't drift in, and so
   the PDF renderer only has to understand shapes it can actually draw.
   ========================================================================== */
.rich-body h2, .rich-body h3, .rich-body h4{
  color:var(--orange-btn); font-weight:800; line-height:1.25;
  margin:14px 0 6px;
}
.rich-body h2{font-size:1.30em}
.rich-body h3{font-size:1.15em}
.rich-body h4{font-size:1.02em}
.rich-body h2:first-child, .rich-body h3:first-child, .rich-body h4:first-child{margin-top:0}
.rich-body .tx-brand{color:var(--orange-btn); font-weight:700}
.rich-body .tx-sm{font-size:.85em; color:var(--muted)}
.rich-body ol, .rich-body ul{margin:6px 0 6px 22px; padding:0}
.rich-body li{margin:2px 0}
/* Tables survive a paste from Word. A fee schedule is a grid — flattening it
   to a list of cells destroys the only thing the document says. */
/* A fee schedule can be wider than a phone. Let the table scroll inside its own
   container rather than clipping the last column or forcing the page sideways. */
.rich-body .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0}
.rich-body .tbl-scroll table{margin:0; min-width:100%; width:auto}
.rich-body .tbl-scroll th, .rich-body .tbl-scroll td{white-space:normal; min-width:88px}
.rich-body table{border-collapse:collapse; width:100%; margin:10px 0; font-size:.95em}
.rich-body th, .rich-body td{
  border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top;
}
.rich-body th{background:#f5f7fb; font-weight:800; color:var(--ink)}
.rich-body table p{margin:0}
/* "Add space between numbered items" — a per-list toggle, not a manual blank
   line, so the spacing survives editing and is reproducible in the PDF. */
.rich-body ol.spaced > li, .rich-body ul.spaced > li{margin:10px 0}

/* ============================================================================
   Focus visibility — the dashboards had one :focus rule between them and no
   :focus-visible at all, so keyboard users got almost no feedback. This is a
   floor, not a replacement for per-component focus styling.
   ========================================================================== */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--navy-l);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}