/* BuildWithBNZ client look: Option A, the field thread (the client redesign spec, drop 1).
   The one shared place for the client screens' tokens, type, control sizes and motion.
   Read by index.html, onboard.html and team-invite.html, and through them by every module they load
   (project-actions.js, team-access.js, project-collaboration.js, project-rfi.js, team-invite.js,
   model-route.js and the Customer Value panel). Pages keep their own layout rules and read these tokens.
   No framework, no build step: a plain stylesheet served beside the pages.

   Fonts are served from fonts/ (SIL Open Font License 1.1; see fonts/OFL-*.txt), so the pages make no
   third-party requests and work under their own Content-Security-Policy (font-src 'self'). */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens
   Coast is the light set; Evening is the dark set. Evening follows the device setting, and
   data-theme="light" or "dark" on <html> (the saved switch) overrides it, as before. */
:root {
  /* Coast */
  --ground: #F7F6F2;            /* page background */
  --card: #FFFFFF;              /* cards, inputs */
  --soft: #EFEDE7;              /* quiet fills: segmented tracks, table heads, review boxes */
  --hairline: #E4E2DC;          /* borders, dividers */
  --line-2: #C9C6BE;            /* control borders */
  --ink: #15171A;
  --ink-2: #33373D;             /* body text a step down from ink */
  --muted: #5B6068;
  --navy: #1D3F66;              /* the one main button, Needs you, links */
  --on-navy: #FFFFFF;
  --navy-soft: rgba(29, 63, 102, .07);
  --sara-face: #BCDDEB; --sara-bubble: #E2F1F7;
  --taylor-face: #CBD3F0; --taylor-bubble: #E8ECFA;
  --emma-face: #BFE3DA; --emma-bubble: #E0F3EE;
  --done-bg: #D4EFE7; --done-ink: #0F4A3C;        /* sent, saved, confirmed, connected */
  --waiting-bg: #F6ECCF; --waiting-ink: #6B4E0A;  /* reported, not checked; coming */
  --checked: #2E6B4E;                              /* check marks, the undo countdown */
  --conflict: #B0362A;                             /* errors and conflicts (kept from the 23 Sep system) */
  --tile-drawings: #E8ECFA; --tile-estimate: #E2F1F7; --tile-money: #E0F3EE;
  --tile-permit: #F6ECCF; --tile-punch: #F7E3E8; --tile-papers: #E6F0E2;

  /* Type: Barlow for everything people read, IBM Plex Mono for figures, dates and job numbers */
  --font-ui: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-figures: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-page: 32px;        /* page titles, 700 */
  --fs-card: 19px;        /* card titles, 600 (19-20) */
  --fs-body: 16px;        /* desktop body; 17 on the phone (below) */
  --fs-secondary: 15px;
  --fs-small: 13px;       /* nothing smaller */
  --fs-figure: 24px;      /* amounts 24-44 */
  --fs-figure-lg: 44px;
  --lh-body: 1.5;

  /* Sizes and shape */
  --control: 44px;        /* every control at least this */
  --control-main: 56px;   /* the main button */
  --control-camera: 64px; /* the camera button; check answers */
  --radius-card: 18px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --radius-chip: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;

  /* Motion: confirms an action, shows progress, or shows where something went */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --motion-press: 120ms;
  --motion-move: 300ms;
  --motion-pop: 450ms;
  --motion-row: 500ms;
  --motion-card: 500ms;
  --motion-rise: 550ms;
  --motion-meter: 1.1s;
  --motion-draw: 1.1s;
  --motion-undo: 10s;

  /* The names the existing screens and modules already read, pointed at the tokens above */
  --surface: var(--card);
  --surface-2: var(--soft);
  --line-strong: var(--line-2);
  --line: var(--hairline);
  --accent: var(--navy);
  --accent-soft: var(--navy-soft);
  --on-accent: var(--on-navy);
  --waiting: var(--waiting-ink);
  --sans: var(--font-ui);
  --serif: var(--font-ui);   /* Instrument Serif is retired on client screens (the client redesign spec) */
  --mono: var(--font-figures);
  color-scheme: light;
}
@media (max-width: 860px) {
  :root { --fs-body: 17px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121821; --card: #1B2430; --soft: #232E3B; --hairline: #2C3846; --line-2: #45546A;
    --ink: #EAEEF3; --ink-2: #CBD3DE; --muted: #A3AEBD;
    --navy: #8FB3E0; --on-navy: #0B1726; --navy-soft: rgba(143, 179, 224, .12);
    --sara-face: #BFD7F0; --sara-bubble: #22344A;
    --taylor-face: #D6CCF2; --taylor-bubble: #2E2A48;
    --emma-face: #BFE6CC; --emma-bubble: #203D31;
    --done-bg: #203D31; --done-ink: #CDEFD9;
    --waiting-bg: #3F3417; --waiting-ink: #F2DE9C;
    --checked: #6CC08F; --conflict: #E8877C;
    --tile-drawings: #2E2A48; --tile-estimate: #22344A; --tile-money: #203D31;
    --tile-permit: #3F3417; --tile-punch: #43262D; --tile-papers: #1F3B40;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121821; --card: #1B2430; --soft: #232E3B; --hairline: #2C3846; --line-2: #45546A;
  --ink: #EAEEF3; --ink-2: #CBD3DE; --muted: #A3AEBD;
  --navy: #8FB3E0; --on-navy: #0B1726; --navy-soft: rgba(143, 179, 224, .12);
  --sara-face: #BFD7F0; --sara-bubble: #22344A;
  --taylor-face: #D6CCF2; --taylor-bubble: #2E2A48;
  --emma-face: #BFE6CC; --emma-bubble: #203D31;
  --done-bg: #203D31; --done-ink: #CDEFD9;
  --waiting-bg: #3F3417; --waiting-ink: #F2DE9C;
  --checked: #6CC08F; --conflict: #E8877C;
  --tile-drawings: #2E2A48; --tile-estimate: #22344A; --tile-money: #203D31;
  --tile-permit: #3F3417; --tile-punch: #43262D; --tile-papers: #1F3B40;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base
   Zero-specificity (:where) so every page's own rules still win; these are floors, not overrides. */
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { background: var(--ground); color: var(--ink); font-family: var(--font-ui);
  font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
:where(button, input, select, textarea) { font-family: inherit; }
:where(code, kbd, samp, .figures) { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }

/* Every control at least 44 px. Checkboxes and radios sit inside 44 px labels instead. */
:where(button, select, summary, .btn, a.btn,
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"])) {
  min-height: var(--control);
}
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--navy); }
:where(:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------------------------------------------------------------- motion
   CSS only. Every class answers one question: did it work, how far along is it, or where did it go. */
@keyframes bnz-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bnz-slideup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bnz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnz-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bnz-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes bnz-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bnz-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes bnz-spin { to { transform: rotate(360deg); } }
@keyframes bnz-draw { from { stroke-dashoffset: var(--draw-length, 400); } to { stroke-dashoffset: 0; } }
@keyframes bnz-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Message arrives: rises 14 px and fades in (stagger with --delay, 0.1-0.3 s) */
.m-rise { animation: bnz-rise var(--motion-rise) var(--ease-out) var(--delay, 0s) both; }
/* Tiles and rows: a page opens, children rise in 50 ms apart */
.m-stagger > * { animation: bnz-rise var(--motion-row) var(--ease-out) both; }
.m-stagger > :nth-child(2) { animation-delay: 50ms; }
.m-stagger > :nth-child(3) { animation-delay: 100ms; }
.m-stagger > :nth-child(4) { animation-delay: 150ms; }
.m-stagger > :nth-child(5) { animation-delay: 200ms; }
.m-stagger > :nth-child(6) { animation-delay: 250ms; }
.m-stagger > :nth-child(7) { animation-delay: 300ms; }
.m-stagger > :nth-child(n+8) { animation-delay: 350ms; }
/* Pinned card: slides up from the reply box */
.m-slideup { animation: bnz-slideup var(--motion-card) var(--ease-out) var(--delay, 0s) both; }
/* Sent, Confirmed, Connect: the check mark pops 0.4 -> 1.15 -> 1 */
.m-pop { animation: bnz-pop var(--motion-pop) var(--ease-out) var(--delay, 0s) both; }
/* The undo bar drains over 10 s */
.m-drain { transform-origin: left center; animation: bnz-drain var(--motion-undo) linear forwards; }
/* Meter: the bar fills from the left */
.m-fill { transform-origin: left center; animation: bnz-fill var(--motion-meter) var(--ease-out) var(--delay, .2s) both; }
/* Working: typing dots, 1.2 s loop (three <span>s inside) */
.m-dots { display: inline-flex; gap: 5px; align-items: center; }
.m-dots > span { width: 7px; height: 7px; border-radius: 50%; background: var(--checked); animation: bnz-dot 1.2s infinite; }
.m-dots > span:nth-child(2) { animation-delay: .15s; }
.m-dots > span:nth-child(3) { animation-delay: .3s; }
/* Connect: a spinner while a connection is under way (the only other loop allowed) */
.m-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--navy); animation: bnz-spin .8s linear infinite; }
/* Confirmed: a progress bar slides while the desk acts on the answer */
.m-sweep { position: relative; overflow: hidden; }
.m-sweep::after { content: ""; position: absolute; inset: 0; background: var(--checked); opacity: .35; animation: bnz-sweep 1.4s ease-in-out infinite; }
/* Note highlight: a navy outline draws itself around the number that was read (SVG stroke) */
.m-draw { stroke-dasharray: var(--draw-length, 400); animation: bnz-draw var(--motion-draw) var(--ease-out) .5s both; }
/* Action moves: the chip cross-fades, the row slides to its new group */
.m-xfade { transition: background-color var(--motion-move) ease, color var(--motion-move) ease, border-color var(--motion-move) ease; }
.m-move { transition: transform var(--motion-move) var(--ease-out); }
/* Press: any button scales to 0.97 */
:where(button, .btn, [role="button"]) { transition: transform var(--motion-press) ease; }
:where(button, .btn, [role="button"]):not(:disabled, [aria-disabled="true"]):active { transform: scale(.97); }
/* Shown only with motion, or only without it (the undo countdown becomes "Undo, 10 s" in text) */
.m-reduced-only { display: none !important; }

/* Reduced motion: nothing moves. Things fade in place; loops stop on their still frame. */
@media (prefers-reduced-motion: reduce) {
  .m-rise, .m-stagger > *, .m-slideup, .m-pop { animation-name: bnz-fade; animation-duration: 200ms; }
  .m-drain, .m-fill, .m-draw, .m-dots > span, .m-spin, .m-sweep::after { animation: none; }
  .m-dots > span { opacity: .6; }
  .m-xfade, .m-move, :where(button, .btn, [role="button"]) { transition: none; }
  :where(button, .btn, [role="button"]):active { transform: none; }
  .m-motion-only { display: none !important; }
  .m-reduced-only { display: revert !important; }
  html { scroll-behavior: auto; }
}