/* Ezra Sales, the office app. One stylesheet, no build step.
   The look is Ezra's (Rob's design system, Figma "EZRA Design System" Vg1PmYLgoRGNBMtkg9UlvH;
   tokens as generated into Ezra's clients/packages/design_system): Inter, a left rail, neutral
   surfaces, gold only for the main action and brand moments, blue for links and the active
   item, semantic colours for states. Light by default, Ezra's dark profile when the device is. */
@font-face {  /* "Sales" beside the Ezra logo (Vic, 2026-10-26): Yellowtail, Apache 2.0, only S a l e s */
  font-family: "Ezra Script"; src: url("fonts/Yellowtail-sales.woff2") format("woff2"); font-display: block;
}
@font-face {
  font-family: "Inter"; src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #f7f8fc;        /* surface/background */
  --panel: #ffffff;     /* surface/page */
  --soft: #e8ecf8;      /* surface/raised, inset */
  --rail: #eceff6;      /* surface/rail */
  --ink: #11161c;       /* text/primary */
  --ink-2: #3a4351;     /* text/secondary */
  --muted: #59606f;     /* text/muted */
  --line: #e1e6f4;      /* border/muted */
  --line-2: #cbd2e8;    /* border/strong */
  --gold: #d4a037;      /* semantic/brand: the main action */
  --gold-ink: #8f6a1f;  /* semantic/brandText */
  --on-gold: #11161c;   /* text/onBrand */
  --script-top: #b98a3e; --script-bottom: #85622f;  /* "Sales" beside the logo */
  --blue: #1d4ed8;      /* semantic/operational: links, the active item */
  --ok: #15803d;        /* semantic/positive */
  --warn: #b45309;      /* semantic/warning */
  --bad: #b91c1c;       /* semantic/critical */
  --warn-ink: var(--warn);
  --warn-bg: color-mix(in srgb, var(--warn) 10%, var(--panel));
  --bad-bg: color-mix(in srgb, var(--bad) 9%, var(--panel));
  --ok-bg: color-mix(in srgb, var(--ok) 10%, var(--panel));
  --blue-bg: color-mix(in srgb, var(--blue) 7%, var(--panel));
  --lane: #eef1f9;      /* a pipeline lane, between background and raised */
  --focus: var(--blue);
  --radius: 8px;        /* radius/md */
  --radius-sm: 6px;
  --shadow: none;       /* Ezra draws edges with borders, not shadows */
  --rail-w: 196px;      /* control/rail */
  /* the old names, for screens written before the Ezra look (the Photos tab): same roles */
  --navy: #11161c; --navy-2: var(--blue); --red: var(--bad);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
  color: var(--ink);
  background: var(--bg);
  color-scheme: light;
}
/* Ezra's dark profile: the default (Ezra is dark first), or when the device is dark on "Match
   device". <html data-theme> is set before the page draws (index.html) from the rail's switch. */
:root[data-theme="dark"] {
  --bg: #11161c; --panel: #1a212a; --soft: #232b36; --rail: #0d131a;
  --ink: #eaeef5; --ink-2: #b4bfcd; --muted: #98a6b8; --line: #2d3642; --line-2: #59606f;
  --gold-ink: #d4a037; --blue: #3082f6;
  --script-top: #e3b566; --script-bottom: #b8873f;
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444;
  --warn-bg: color-mix(in srgb, var(--warn) 14%, var(--panel));
  --bad-bg: color-mix(in srgb, var(--bad) 14%, var(--panel));
  --ok-bg: color-mix(in srgb, var(--ok) 14%, var(--panel));
  --blue-bg: color-mix(in srgb, var(--blue) 12%, var(--panel));
  --lane: #161c24;  /* surface/inspector */
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #11161c; --panel: #1a212a; --soft: #232b36; --rail: #0d131a;
    --ink: #eaeef5; --ink-2: #b4bfcd; --muted: #98a6b8; --line: #2d3642; --line-2: #59606f;
    --gold-ink: #d4a037; --blue: #3082f6;
  --script-top: #e3b566; --script-bottom: #b8873f;
    --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444;
    --warn-bg: color-mix(in srgb, var(--warn) 14%, var(--panel));
    --bad-bg: color-mix(in srgb, var(--bad) 14%, var(--panel));
    --ok-bg: color-mix(in srgb, var(--ok) 14%, var(--panel));
    --blue-bg: color-mix(in srgb, var(--blue) 12%, var(--panel));
    --lane: #161c24;  /* surface/inspector */
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
/* Text sizes are for reading, not fitting (Vic, 2026-10-28: designed for focus): body 16 px,
   secondary text 14, nothing under 12; explanations in a grey that still reads in the dark. */
body { margin: 0; font-size: 16px; line-height: 1.5; background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the shell: Ezra's left rail (brand, menu, who is signed in) beside the page */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 10; width: var(--rail-w);
  display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  padding-top: max(16px, env(safe-area-inset-top));
  background: var(--rail); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: flex-end; padding: 4px 8px 18px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 28px; width: auto; }  /* Ezra's logo: the mark and the EZRA lettering */
/* "Sales" in script on the logo's right, tilted up, in the logo's gold (Vic, 2026-10-26) */
.sales { display: inline-block; font-family: "Ezra Script", "Snell Roundhand", cursive; font-weight: 400;
  font-size: 1.85em; line-height: 1; letter-spacing: 0; text-transform: none; padding: 0 .12em .06em .04em;
  transform: rotate(-9deg) translateY(.2em); transform-origin: left bottom;
  background: linear-gradient(175deg, var(--script-top) 10%, var(--script-bottom) 90%); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.brand .sales { font-size: 24px; margin-left: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu { display: grid; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--radius);
  color: var(--ink); font-weight: 400; border: 1px solid transparent;
}
.menu a svg { color: var(--muted); }
.menu a.on svg { color: var(--ink); }
.menu hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--line); }
.menu a svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.menu a:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.menu a.on { color: var(--ink); background: var(--blue-bg); border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  box-shadow: inset 3px 0 0 var(--blue); }
/* who is signed in: Ezra's account chip at the foot of the rail, its menu opening above it */
#who { margin-top: auto; position: relative; padding-top: 10px; border-top: 1px solid var(--line); }
#who:empty { display: none; }
.acct-chip { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0;
  border-radius: var(--radius); background: none; color: var(--ink); text-align: left; }
.acct-chip:hover, .acct-chip[aria-expanded="true"] { background: var(--soft); }
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #6f5430; color: #f4e2bd; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.acct-name { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.acct-name b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-name small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.presence { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.presence.off { background: var(--muted); }
.acct-pop { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; width: 260px; padding: 4px 0;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(8, 15, 20, .35); }
.acct-pop[hidden] { display: none; }
.acct-pop section { padding: 6px 0; }
.acct-pop section + section { border-top: 1px solid var(--line); }
.acct-pop h4 { margin: 4px 14px 2px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acct-pop .sub { margin: 0 14px 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.acct-row { position: relative; display: block; width: 100%; padding: 7px 14px 7px 24px; border: 0; border-radius: 0;
  background: none; color: var(--ink-2); text-align: left; font-weight: 500; }
.acct-row:hover { background: var(--soft); color: var(--ink); }
.acct-row.on { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--soft) 60%, transparent); }
.acct-row.on::before { content: ""; position: absolute; left: 12px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--gold); }
body.signed-out .rail { display: none; }
body.signed-out .page { margin-left: 0; }

.page { margin-left: var(--rail-w); min-height: 100vh; }
#crumbs {
  position: sticky; top: 0; z-index: 5; padding: 10px 24px; padding-top: max(10px, env(safe-area-inset-top));
  color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#crumbs:empty { display: none; }
#crumbs a { color: var(--ink-2); }
main { max-width: 1280px; margin: 0 auto; padding: 8px 24px 24px; }

/* iPad portrait and phones: the rail becomes a bar across the top */
@media (max-width: 900px) {
  .rail { position: sticky; inset: auto; width: auto; flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 8px 0 0; }
  .brand img { height: 18px; }
  .brand .sales { font-size: 17px; margin-left: 2px; }
  .menu { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
  .menu a { padding: 6px 10px; white-space: nowrap; }
  .menu hr { width: 1px; height: 20px; margin: 0 6px; border: 0; border-left: 1px solid var(--line); align-self: center; }
  .menu a.on { box-shadow: inset 0 -3px 0 var(--blue); }
  #who { margin: 0; padding: 0; border: 0; }
  .acct-chip { width: auto; padding: 4px 6px; }
  .acct-name { max-width: 150px; }
  .acct-pop { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); }
  .page { margin-left: 0; }
  #crumbs { top: 0; position: static; padding: 10px 12px 0; }
}
@media (max-width: 600px) {
  .acct-name, .presence { display: none; }
  .menu a span { display: none; }  /* icons only on a phone */
}

/* building blocks */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel > h2, .panel > header { margin: 0; padding: 14px 16px 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.panel .body { padding: 0 16px 16px; }
button, .button {
  font: inherit; font-weight: 500; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink); cursor: pointer;
}
button:hover, .button:hover { border-color: var(--muted); text-decoration: none; }
button.primary, a.button.primary, label.button.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
button.primary:hover, a.button.primary:hover, label.button.primary:hover { background: color-mix(in srgb, var(--gold) 88%, #000); }
button.primary:disabled { opacity: .5; cursor: not-allowed; }
button.link { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 400; }
button.danger { color: var(--bad); }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 5px 8px; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input.num { text-align: right; }
.notice { padding: 10px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.bad { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* sign in */
.signin { max-width: 380px; margin: 12vh auto; text-align: center; padding: 32px; }
.signin h1.lockup { display: flex; justify-content: center; align-items: flex-end; margin: 0 0 14px; font-size: 26px; }
.signin h1.lockup img { height: 48px; width: auto; }
.signin p { color: var(--muted); }
.signin button { width: 100%; margin-top: 16px; padding: 10px; }

/* jobs */
.jobs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.jobs-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; flex: 1; white-space: nowrap; }
.jobs-head input { max-width: 280px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 14px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--soft); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 14px; }
.pill.due { background: var(--blue-bg); color: var(--blue); }
.pill.due.soon { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); color: var(--gold-ink); }
.pill.due.late { background: var(--bad-bg); color: var(--bad); }
.pill.edit { background: var(--warn-bg); color: var(--warn-ink); }

/* estimate */
.job-head { margin-bottom: 16px; }
.job-head h1 { margin: 0 0 2px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.est { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .est { grid-template-columns: minmax(0, 1fr); }
  .side { position: static !important; order: -1; max-height: none !important; }  /* the price first on a phone */
  .questions-first > .side { order: 0; }  /* the Intake tab: the questions first */
  main { padding: 12px; }
  .savebar { margin: 16px -12px -12px; }
}
.side { position: sticky; top: 48px; display: grid; gap: 16px; }
/* taller than the window (the Intake's scan, files and energy panels), it scrolls by itself:
   a sticky column's foot is otherwise out of reach until the page ends */
.est > .side { max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.price { padding: 16px; }
.price .big { font-size: 32px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.price .big.none { color: var(--muted); font-size: 22px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 10px; }
.kv .k { color: var(--muted); }
.kv .num.wrap { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.kv .total { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; }
.price ul.tests { margin: 10px 0 0; padding-left: 18px; font-size: 15px; }
.price ul.tests li.bad { color: var(--bad); }
.field { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 8px; margin: 6px 0; }
.field label { color: var(--ink); }
.field small { grid-column: 1 / -1; color: var(--muted); margin-top: -4px; }
.field .changed { border-color: var(--blue); background: var(--soft); }
.section { margin-bottom: 16px; }
.section > header { display: flex; align-items: baseline; gap: 10px; cursor: pointer; user-select: none; }
.section > header .t { flex: 1; color: var(--ink); font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.section > header .caret { color: var(--muted); width: 12px; }
.lines td { font-size: 15px; }
.lines .src { display: block; color: var(--muted); font-size: 14px; }
.lines .unpriced td { background: var(--warn-bg); }
.lines tr.mine td { background: var(--blue-bg); }
.lines input, .lines select { padding: 3px 6px; font-size: 15px; }
.lines .w-qty { width: 70px; }
.lines .w-unit { width: 64px; }
.lines .w-cost { width: 96px; }
.add { padding: 0 16px 14px; }
.pkg { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pkg small { display: block; font-size: 13px; }
.pkg-supplied { margin-top: 8px; font-size: 14px; line-height: 1.8; }
.pkg-supplied input { width: auto; margin: 0 2px 0 6px; }
.pkg-notes { margin: 6px 0 0; padding-left: 16px; font-size: 14px; color: var(--muted); }
/* what the customer sees: the estimate's checklist and each line's wording */
#customer h3 { margin: 12px 0 4px; font-size: 14px; letter-spacing: .04em; color: var(--ink-2); }
#customer h3:first-child { margin-top: 0; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 2px 0 2px 22px; position: relative; font-size: 15px; }
.checklist li::before { content: "✓"; position: absolute; left: 4px; color: var(--gold-ink); font-weight: 700; }
#wording { margin-top: 14px; }
#wording summary { cursor: pointer; color: var(--ink); font-weight: 600; font-size: 15px; }
.lines.wording { width: 100%; table-layout: fixed; }
.lines.wording td:first-child { width: 40%; color: var(--ink-2); }
.lines.wording td:last-child { width: 104px; }
.lines.wording input[data-cwt] { width: 100%; box-sizing: border-box; }
.lines.wording input[type="checkbox"] { width: auto; padding: 0; margin: 0 4px 0 0; }
.lines.wording small { display: block; color: var(--muted); font-size: 14px; }
.nowrap { white-space: nowrap; }
.options td, .options th { padding: 5px 4px; }
.options tr.current td { font-weight: 700; }

/* save bar */
.savebar {
  position: sticky; bottom: 0; margin: 16px -24px -24px; padding: 12px 24px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center; background: var(--panel); border-top: 1px solid var(--line);
}
.savebar input { flex: 1; }
.busy { opacity: .6; transition: opacity .15s; }

/* job page tabs, documents */
.tabs { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--blue); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
label.check { display: flex; gap: 8px; align-items: center; padding: 5px 0; cursor: pointer; }
label.check input { width: auto; }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.row { display: flex; gap: 6px; margin-top: 4px; }
.row input { flex: 1; }
.stloc { padding: 8px 0; border-top: 1px solid var(--line); margin-top: 8px; }
#stfiles .src { display: block; color: var(--muted); font-size: 12px; }
#stfiles label.check { align-items: flex-start; overflow-wrap: anywhere; }
#stfiles label.check input { margin-top: 3px; }
.add button + button { margin-left: 6px; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* jobs board, new job, intake (O4) */
.jobs-head .button { text-decoration: none; }
/* the board takes the whole window and its stages share it: no sideways scrolling; a narrow
   window wraps the later stages onto a second row instead */
main:has(> .board, > .jobs-head) { max-width: none; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; padding-bottom: 8px; align-items: start; }
/* a stage is one of Ezra's pipeline lanes: a tinted column, its name and count on top */
.col { min-width: 0; padding: 8px; border-radius: var(--radius); background: var(--lane); min-height: 64px; }
.col h2 { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 2px 4px 8px; }
.card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.card:hover { text-decoration: none; border-color: var(--blue); }
.card strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.card .muted { font-size: 14px; }
.newjob { max-width: 520px; margin: 0 auto; }
.newjob label { display: block; margin: 10px 0; color: var(--muted); }
.newjob label input { margin-top: 4px; }
.kind-pick { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 14px 0; padding: 6px 12px 10px; }
.kind-pick legend { color: var(--muted); padding: 0 4px; }
.kind-pick label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 6px 0; color: var(--ink); }
.kind-pick label input { margin-top: 0; width: auto; }
.kind-pick small { display: block; color: var(--muted); }
.kind-box { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.kind-box.open { border-left: 3px solid var(--gold); padding-left: 10px; }
.kind-box label { display: block; color: var(--muted); margin-bottom: 4px; }
.kind-box .row { display: flex; gap: 6px; }
.kind-box select { flex: 1; min-width: 0; }
.kind-box .src { display: block; margin-top: 4px; }
.kind-line .body { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.kind-line .src { flex-basis: 100%; }
select.status { width: auto; padding: 1px 6px; font-size: 15px; }
.intake td { vertical-align: top; }
code.id { display: block; font-size: 13px; background: var(--soft); padding: 8px; border-radius: 6px; word-break: break-all; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }

/* drafts: the saved state, kept drafts on tabs, compare/reapply, dialogs */
.draftstate { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 14px; background: var(--soft); color: var(--muted); }
.draftstate.unsaved, .draftstate.saving { background: var(--warn-bg); color: var(--warn-ink); }
.draftstate.error, .draftstate.conflict { background: var(--bad-bg); color: var(--bad); }
.draftstate.saved { background: var(--ok-bg); color: var(--ok); }
.tabs a.has-draft::after { content: " •"; color: var(--warn-ink); font-weight: 700; }
.conflict-panel { margin-bottom: 16px; border-color: var(--bad); }
.conflict-panel .compare td { vertical-align: middle; }
.lines tr.resolved td { background: var(--ok-bg); }
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(8, 15, 20, .55); display: grid; place-items: center; padding: 16px; }
.modal { width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.modal h3 { font-size: 15px; margin: 16px 0 6px; }
.modal .row { flex-wrap: wrap; }
label.stack { display: block; margin: 8px 0; color: var(--muted); }
label.stack input { margin-top: 4px; }

/* intake prefill: answers filled from what Ezra Sales knows, until a person changes or saves them */
.intake .filled input { border-color: var(--blue); background: var(--soft); }
.intake .src.known { color: var(--warn-ink); }

/* overview (Checkpoint B): next action, to-do list with roles, facts, readiness */
.ov { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ov > div, .ov .side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
@media (max-width: 900px) { .ov { grid-template-columns: minmax(0, 1fr); } }
.next { padding: 16px; box-shadow: inset 3px 0 0 var(--gold); }  /* Ezra's accent stroke: the one thing to do */
.next .next-title { margin: 2px 0 4px; font-size: 24px; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 0; }
.issues { list-style: none; margin: 0; padding: 0; }
.issue { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.issue:last-child { border-bottom: 0; }
.issue .role { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--blue); font-weight: 700; font-size: 14px; }
.issue.info { opacity: .8; }
.issue .src { display: block; color: var(--muted); font-size: 14px; }
.issue details { margin-top: 4px; font-size: 15px; }
.issue details ul { margin: 4px 0 0; padding-left: 18px; }
a.button { display: inline-block; text-decoration: none; text-align: center; }
a.button.disabled { opacity: .5; cursor: not-allowed; }
.facts td:first-child { width: 34%; color: var(--muted); }
.facts .src { display: block; color: var(--muted); font-size: 14px; }
.facts tr.inferred td:nth-child(2) { font-style: italic; }
.facts td.num { white-space: normal; }  /* the pill and its link wrap on a phone */
.facts td.num .pill { white-space: nowrap; }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.muted { background: var(--soft); color: var(--muted); }
.blender-box { margin-top: 12px; }
.blender-box .button { width: 100%; }
.howto { margin-top: 8px; font-size: 15px; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.skel { height: 72px; border-radius: var(--radius); background: linear-gradient(90deg, var(--soft), var(--panel), var(--soft)); margin: 12px 0; }
.skel.short { height: 36px; width: 60%; }
.ov-error { max-width: 640px; margin: 40px auto; }
tr.flash td { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--warn-bg); } to { background: transparent; } }
@media (max-width: 600px) {
  .job-head h1 { font-size: 19px; }
  .tabs { overflow-x: auto; }
  .issue { grid-template-columns: 28px minmax(0, 1fr); }
  .issue > a.button { grid-column: 2; justify-self: start; }
}
.tabs .blender-tab { margin-left: auto; color: var(--blue); }
@media (max-width: 900px) { .ov .side { order: 0; } }  /* the next action first, on a phone too */
.tabs a { white-space: nowrap; }
@media (max-width: 600px) { .tabs .blender-tab { display: none; } }  /* it's on the Overview */

/* Open in Blender: what happened after the click */
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(460px, calc(100vw - 32px));
  display: flex; gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(8, 15, 20, .28); }
.toast.ok { border-color: var(--ok); }
.toast.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.toast code { font-size: 14px; }

/* photos: add row, grid of thumbnails by tag, full-size viewer, the "waiting to upload" badge */
.photo-add { margin-bottom: 16px; }
.photo-add-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.photo-add-row label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; }
.photo-add-row label.grow { flex: 1 1 220px; }
.photo-add-row label.pick { flex-direction: row; align-items: center; color: #fff; font-size: 16px;
  background: var(--navy-2); border-color: var(--navy-2); font-weight: 600; padding: 9px 16px; }
.small { font-size: 14px; margin: 8px 0 0; }
.photo-group h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ph { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.ph-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: var(--soft); }
.ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--soft); }
.ph figcaption { padding: 6px 8px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph.waiting img { opacity: .55; }
.ph.failed { border-color: var(--red); }
.ph .bad { color: var(--red); white-space: normal; }
.photo-view { position: fixed; inset: 0; z-index: 50; background: rgba(8, 12, 18, .82);
  display: flex; align-items: center; justify-content: center; padding: 12px; }
.photo-frame { background: var(--panel); border-radius: var(--radius); max-width: min(1200px, 100%);
  max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.photo-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px;
  font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.photo-full { display: block; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain;
  background: #000; margin: 0 auto; }
.photo-edit { display: flex; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.photo-edit input { flex: 1 1 180px; }
.photo-msg { padding: 0 10px 8px; font-size: 14px; color: var(--muted); min-height: 1em; }
#photoqueue { position: fixed; right: 16px; bottom: 16px; z-index: 40; background: var(--navy); color: #fff;
  padding: 8px 14px; border-radius: 999px; font-size: 15px; box-shadow: var(--shadow); }
#photoqueue[hidden] { display: none; }

/* shop list */
.shop-order { margin-bottom: 14px; }
.shop-order .shop-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-transform: none;
  letter-spacing: 0; color: var(--ink); font-size: 16px; padding: 14px 16px 10px; }
.shop-head > div { flex: 1; min-width: 220px; }
.shop-head .needed { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.shop-head .needed input { width: auto; }
.shop-pieces th, .shop-diff th { text-align: left; font-size: 14px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.shop-pieces td, .shop-diff td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.shop-pieces td:first-child { width: 70px; }
.shop-pieces input[type=checkbox] { width: 22px; height: 22px; }
.shop-pieces td.size { font-weight: 600; white-space: nowrap; }
.shop-pieces tr.built td { opacity: .6; }
.shop-diff { margin: 8px 0 10px; background: var(--panel); color: var(--ink); border-radius: 6px; }
.shop-diff td.old { text-decoration: line-through; color: var(--muted); }
.shop-diff td.new { font-weight: 600; }
.small { font-size: 13px; }
.shop-more { margin: 14px 0; }
.shop-more summary { cursor: pointer; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
@media (max-width: 700px) {  /* a phone in the shop: each piece stacks, box on the left */
  .shop-pieces thead { display: none; }
  .shop-pieces tr { display: grid; grid-template-columns: 48px 1fr; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .shop-pieces td { border: 0; padding: 2px 6px; }
  .shop-pieces td:first-child { width: auto; grid-row: span 3; }
  .shop-pieces td.size { white-space: normal; }
  .shop-pieces td:last-child { font-size: 14px; }
}

/* calendar: sales visits from ServiceTitan, Ezra's list rows with a coloured left edge */
.cal-day { margin-bottom: 18px; }
.cal-day > h2 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.visit { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; margin-bottom: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 3px 0 0 var(--blue); }
.visit .vtime { display: grid; line-height: 1.3; }
.visit .vtime .muted { font-size: 14px; }
.visit .vbody { min-width: 0; display: grid; gap: 2px; }
.visit.cancelled { box-shadow: inset 3px 0 0 var(--bad); opacity: .7; }
.visit.cancelled .vbody strong { text-decoration: line-through; }
@media (max-width: 700px) { .visit { grid-template-columns: 1fr; } }
.card .sale { color: var(--ink-2); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--soft); }
.seg button { border: 0; background: none; padding: 4px 10px; color: var(--muted); font-size: 15px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.panel h3.sub { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.bad-text { color: var(--bad); }
ul.sent { margin-top: 8px; font-size: 15px; }
ul.sent .src { display: block; color: var(--muted); font-size: 14px; }
.jobs-head select { width: auto; max-width: 240px; }
.jobs-head .button { white-space: nowrap; }

/* settings: the person's own (profile photo, look, calendar link) */
.settings { display: grid; gap: 16px; max-width: 720px; }
.profile { display: flex; gap: 16px; align-items: flex-start; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.big { width: 72px; height: 72px; font-size: 24px; }
.settings label.button { display: inline-block; cursor: pointer; }
.integrations .next { margin: 12px 0; }
.integrations details { margin-top: 8px; }
.integration-facts { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.settings-menu { max-width: 720px; padding: 4px 0; }
.settings-menu a { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
  color: var(--ink); text-decoration: none; font-weight: 500; border-top: 1px solid var(--line); }
.settings-menu a:first-child { border-top: 0; }
.settings-menu a:hover, .settings-menu a:focus-visible { background: var(--soft); }
.settings-menu .chev { color: var(--muted); font-size: 18px; }
.settings-menu.flush { max-width: none; padding: 0; margin: -4px -4px 8px; }
.settings-menu.flush a { padding: 12px 6px; }
.settings-menu .src { display: block; font-weight: 400; }
textarea.terms-text { width: 100%; min-height: 26rem; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical; }
.jobs-head .back { color: var(--muted); text-decoration: none; white-space: nowrap; }
.jobs-head .back:hover { color: var(--ink); }
.users td.who .whobox { display: flex; gap: 10px; align-items: center; }
.users td { vertical-align: middle; }
.users td.num select { width: auto; }
.users td.num .src { display: block; }
.adduser { display: flex; flex-wrap: wrap; gap: 8px; }
.adduser input { flex: 1 1 200px; }
.adduser select { width: auto; }
.roles { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.roles dt { font-weight: 600; }
.roles dd { margin: 0; color: var(--muted); }
@media (max-width: 600px) { .roles { grid-template-columns: 1fr; } .roles dd { margin-bottom: 6px; } }

/* Settings › Connect Claude (app.js connectHtml) */
.connect .copyrow { display: flex; gap: 6px; margin: 4px 0 10px; }
.connect .copyrow input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.connect ol.steps { margin: 4px 0 12px; padding-left: 20px; } .connect ol.steps li { margin: 3px 0; }
.connect .connect-state { margin: 8px 0 12px; font-weight: 600; } .connect .connect-state.ok { color: var(--ok); }
.discovery ul.plain li { margin: 0 0 10px; font-size: 15px; }
.discovery ul.plain li strong { font-weight: 600; }
.discovery .copyrow { display: flex; gap: 6px; margin: 4px 0 0; }
.discovery .copyrow input { flex: 1; min-width: 0; font-size: 14px; }
.discovery .src { display: block; color: var(--muted); font-size: 14px; }
/* Settings › Users: invitations (who waits, the company directory) */
.waiting { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); margin-bottom: 16px; }
.users td.num .row { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.users tr[hidden] { display: none; }
#dir-q { width: 100%; max-width: 420px; }
details.byemail { margin: 14px 0 4px; } details.byemail summary { cursor: pointer; color: var(--blue); }
details.byemail .adduser { margin-top: 10px; }
/* customer signing (docs/SIGNING.md): the signed bar on Documents */
.signedbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.signedbar > span { flex: 1; min-width: 240px; }
/* change orders (docs/SIGNING.md): the open one on Documents */
.co-open { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); }
.co-open h3 { margin: 0 0 6px; font-size: 16px; }
.co-open p { margin: 0 0 8px; }
/* Settings › Pricebook: wide tables, the change list before Save */
.settings:has(.body.pricebook) { max-width: 980px; }
.pricebook .pbcheck { margin-top: 12px; }
.pricebook .pbgroup { margin: 10px 0; }
.pricebook .pbgroup summary { cursor: pointer; padding: 4px 0; }
.pricebook .pbbig { color: var(--warn-ink); font-weight: 600; }
.pricebook ul.pbaudit { margin: 6px 0; padding-left: 0; list-style: none; }
.pricebook ul.pbaudit li { padding: 3px 0; }
.pricebook .pbpreview h3 { margin-top: 0; }

/* how a retrofit gets sized: scan the house, or enter the kind and tons (Vic, 2026-10-26) */
.sizer .body { padding-top: 4px; }
.size-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.size-way { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px; border: 1.5px solid var(--line-2);
  border-radius: var(--radius); background: var(--panel); color: var(--ink); font-weight: 400; }
.size-way.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); }
.size-way strong { display: block; font-size: 17px; }
.size-way small { display: block; color: var(--muted); margin-top: 2px; }
.size-way .ico, .size-kind .ico, .sized .ico { width: 44px; height: 44px; flex: none; color: var(--ink-2); }
.size-way .ico svg, .size-kind .ico svg, .sized .ico svg { width: 100%; height: 100%; }
#sizebody:not(:empty) { margin-top: 14px; }
#sizebody .inset { border: 1px solid var(--line); border-radius: var(--radius); }
.enter-size .step { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-weight: 600; }
.enter-size .step:first-child { margin-top: 0; }
.enter-size .step .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--soft); color: var(--ink-2); font-size: 14px; }
.size-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.size-kind { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line-2);
  border-radius: var(--radius); background: var(--panel); color: var(--ink); font-weight: 600; text-align: left; }
.size-kind.on, .chip.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 54px; padding: 6px 12px; border: 1.5px solid var(--line-2);
  border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 600; line-height: 1.15; }
.chip small { font-weight: 400; color: var(--muted); font-size: 13px; }
/* the intake answered by tapping on an iPad (Vic, 2026-10-27): 44 px targets */
.answer-chips .chip { min-height: 44px; justify-content: center; padding: 6px 14px; }
input.touch { min-height: 44px; font-size: 16px; }
.src-line { margin-top: 4px; }
table.intake .answer { margin-top: 10px; padding: 8px 0 2px; }
table.intake .answer.filled { padding: 8px 10px; border-radius: var(--radius); }
.src-line .src { display: inline; }
#sizereason { margin-top: 8px; }
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.match { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--panel); }
.match.best { border-color: var(--gold); }
.match .tag { position: absolute; top: -9px; right: 10px; background: var(--gold); color: var(--on-gold); font-size: 13px;
  font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.match .mk { font-weight: 700; }
.match .models { font-size: 14px; color: var(--ink-2); word-break: break-word; }
.match .cost strong { font-size: 16px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sized { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--ok);
  border-radius: var(--radius); background: var(--ok-bg); }
.sized .big { font-size: 20px; font-weight: 700; }
.sized .acts { margin-left: auto; display: grid; gap: 6px; }
.sized .src { display: block; margin-top: 6px; }
p.small { font-size: 14px; }
@media (max-width: 700px) { .sized { flex-wrap: wrap; } .sized .acts { margin-left: 0; grid-auto-flow: column; } }

/* practice jobs (loadstar_office.practice): marked wherever they show */
.pill.practice { background: var(--bad-bg); color: var(--bad); }
.notice.practice-note { background: var(--bad-bg); color: var(--ink); border: 1px dashed color-mix(in srgb, var(--bad) 45%, transparent); }
label.check { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); margin: 10px 0; }
label.check input { width: auto; margin-top: 3px; }

/* the energy code form on the Intake tab (energy.py) */
.panel.energy .lines td.num { white-space: nowrap; }
.energy-findings li { margin: 4px 0; }
.energy-findings .pill { margin-right: 4px; }
textarea.est-notes { width: 100%; min-height: 7rem; resize: vertical; font: inherit; }
/* a commercial job's takeoff on the Intake tab (takeoff.py) */
.lines.takeoff td { vertical-align: top; }
.lines.takeoff td.num { white-space: nowrap; }
.lines.takeoff select { min-width: 9em; }
.lines.takeoff select[data-f="unit"], #tnewunit { min-width: 0; width: 4.5em; }
.lines.takeoff input.tag, #tnewtag { width: 6em; }
.panel.takeoff .body { overflow-x: auto; }
.lines.takeoff input:not([type="number"]):not(.tag) { width: 100%; min-width: 10em; }
.lines.takeoff .src { display: block; }
.lines.takeoff .src.warn { color: var(--warn-ink); }
.lines.takeoff tfoot td { padding-top: 10px; border-top: 1px solid var(--line, #ddd); }
/* Documents not ready yet: folded, each with what holds it back (designed for focus) */
details.later { margin-top: 10px; }
details.later summary { cursor: pointer; color: var(--ink-2); margin-bottom: 6px; }
details.later .check .src { display: block; color: var(--muted); font-size: 14px; }

/* the Leads screen (speed to lead) */
.lead .lead-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.lead .lead-contact { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.lead .lead-topic { margin: 4px 0 8px; }
.lead .lead-actions { flex-wrap: wrap; }
.lead-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.lead-form .row { flex-wrap: wrap; }
.lead-raw { max-height: 240px; overflow: auto; font-size: 14px; white-space: pre-wrap; }
.menu a[hidden], .lead-more[hidden], .lead-form[hidden], .lead-callback[hidden] { display: none; }
/* The Overview, designed for focus (Vic, 2026-10-28): the job's stage, the next step big, three
   more after it, the rest of the job folded under "More about this job". */
.stagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.stage-text { display: flex; gap: 8px; align-items: baseline; }
.stage-steps { display: flex; gap: 4px; flex: 1; min-width: 160px; max-width: 420px; }
.stage-steps span { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); }
.stage-steps span.done { background: var(--ok); }
.stage-steps span.now { background: var(--gold); }
details.more-todo { margin-top: 6px; }
details.more-todo summary, details.ov-more > summary { cursor: pointer; }
details.more-todo summary { color: var(--ink-2); padding: 6px 0; }
details.ov-more { margin-top: 16px; }
details.ov-more > summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 14px 16px; }
details.ov-more > summary .t { font-weight: 600; color: var(--ink); }
.ov-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px; padding: 0 16px 16px; align-items: start; }
.ov-more-grid .panel { background: var(--bg); }
/* Intake one section at a time (designed for focus): the sections as chips, a check on each one
   done, Previous / Next under the section being answered */
.steps { margin: 0 0 12px; scroll-margin-top: 12px; }
.steps-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.steps-head .link { margin-left: auto; }
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stepchip { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); border-radius: 999px;
  padding: 6px 12px; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepchip.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); }
.stepchip.on { background: var(--blue-bg); border-color: var(--blue); color: var(--ink); font-weight: 600; }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 0 4px; }
.step-nav .muted { flex: 1; text-align: center; min-width: 12em; }
.step-nav button, .step-nav .button { min-height: 44px; }
/* The estimate, designed for focus: what's left on top, the rest folded until it's needed */
.left-on-bid { margin-bottom: 16px; border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.left-on-bid.ready { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.left-on-bid.ready .body { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.left-on-bid.ready .button { margin-left: auto; }
.left-on-bid ul { margin: 0; padding-left: 18px; }
.left-on-bid li { margin: 4px 0; }
details.more-left summary { cursor: pointer; color: var(--ink-2); padding: 6px 0; }
details.fold > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 14px 16px;
  cursor: pointer; }
details.fold > summary .t { font-weight: 600; color: var(--ink); }
details.fold[open] > summary { padding-bottom: 6px; }
/* My Work's Today view (designed for focus): what needs you now, in groups, nearest first */
.today-view { display: grid; gap: 18px; max-width: 1100px; }
.today-group > h2, .today-group > summary { margin: 0 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); }
.today-group.overdue > h2 { color: var(--bad); }
.today-group.today > h2 { color: var(--gold-ink); }
.today-group > summary { cursor: pointer; }
.today-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.today-empty .body { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.today-empty button { margin-left: auto; }

/* remote signing (docs/SIGNING.md "Remote signing"): each emailed link and what the customer viewed */
.rlink { padding: 4px 0 14px; }
.rlink + .rlink { border-top: 1px solid var(--line); padding-top: 14px; }
.rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rhead .src { flex-basis: 100%; }
.pill.live { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.pill.live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: currentColor; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before, .viewing .dot { animation: none; } }
.rfacts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 10px 0; font-size: 15px; }
.rfacts dt { color: var(--muted); }
.rfacts dd { margin: 0; }
.rtime { margin: 4px 0 8px; }
.rtime td.bar { width: 45%; }
.rtime td.bar span { display: block; height: 8px; border-radius: 4px; background: var(--blue); opacity: .7; }
.kept { margin: 8px 0; }
.kept summary { cursor: pointer; color: var(--muted); }
.kept li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; }
.kept .src { flex-basis: 100%; }
.kept .code strong { font-size: 18px; letter-spacing: .15em; }
.viewing { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 32px)); display: grid; gap: 8px; }
.viewing[hidden] { display: none; }
.viewing .vrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--ok); box-shadow: 0 6px 24px rgba(8, 15, 20, .18); }
.viewing .vrow > span:nth-child(2) { flex: 1; }
.viewing .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; animation: livepulse 1.6s ease-in-out infinite; }
/* a document's buttons wrap in their cell instead of running under the side panel */
[data-version] .lines td.num { white-space: normal; }
[data-version] .lines td.num > :is(button, .pill) { white-space: nowrap; margin: 2px 0 2px 4px; }

/* Help: the first-day sheet (docs/FIRST_DAY.md), easy to read on an iPad. */
.help { max-width: 760px; }
.help .body { font-size: 16px; line-height: 1.55; }
.help h1 { font-size: 24px; margin: 4px 0 8px; }
.help h2 { font-size: 18px; margin: 22px 0 6px; }
.help ol, .help ul { padding-left: 22px; }
.help li { margin: 4px 0; }
.help ul.ticks { list-style: none; padding-left: 0; }
.help ul.ticks input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }