/* Plus Jakarta Sans, self-hosted (SIL Open Font License 1.1, see /static/fonts/OFL.txt) */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/static/fonts/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/static/fonts/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* ClearVis on the web (jobfile): the approved 2026-10-16 look (design/mockups/2026-10-16-redesign). Light first:
   a cool grey page, white cards with a hairline edge, navy for the money and the menu, one orange for the one thing
   to do. A dark set follows the device. Phone first, one hand, big targets; a real tool on a laptop.
   One stylesheet, no framework. Tokens first; every rule reads them. Every pair that carries words or marks a control
   was computed (WCAG 2.x relative luminance), not judged by eye: words need 4.5:1 on their surface, UI parts 3:1.
   The full table is in PROGRESS_WEB2.md. Card edges and dividers are decorative. */
:root {
  color-scheme: light dark;
  /* surfaces */
  --page: #f2f4f7;        /* behind everything */
  --card: #ffffff;        /* cards and lists: the hairline edge draws them */
  --soft: #f2f4f7;        /* a tile inside a card (the job's numbers), the quiet days */
  --soft-2: #f7f9fb;      /* a plain button's fill */
  --field: #ffffff;       /* inside a box you type in */
  --hover: #f5f7fa;       /* a row under the pointer */
  --tab: #ffffff;         /* the phone's tab bar */
  /* ink */
  --ink: #0f1b2d;         /* 15.7:1 on the page, 17.3:1 on a card */
  --ink-2: #5b6576;       /* muted words: 5.3:1 on the page, 5.9:1 on a card, 5.2:1 on a quiet tile */
  --ink-3: #3b4658;       /* a quieter dark: 9.5:1 on a card */
  --faint: #8a94a6;       /* chevrons and drawn marks: 3.1:1 on a card (UI) */
  /* lines */
  --edge: #e3e7ed;        /* a card's hairline: decorative */
  --line: #eef1f5;        /* a divider inside a card: decorative */
  --btn-edge: #cfd5de;    /* a plain button's edge: decorative, its words carry it */
  --field-line: #7a8496;  /* a box's border: 3.8:1 on its white fill, 3.4:1 on the page (UI needs 3:1) */
  /* navy: the menu and the money */
  --navy: #13294b;        /* the side menu; white 14.5:1 */
  --navy-card: #13294b;   /* the money card */
  --navy-2: #24406b;      /* the open menu item, a chip on navy: white 10.4:1 */
  --on-navy: #ffffff;
  --on-navy-2: #b9c6dc;   /* 8.4:1 on navy */
  --on-navy-3: #dce6f5;   /* the menu's items: 11.5:1 on navy */
  --on-navy-good: #86efac;/* 10.3:1 on navy */
  --on-navy-warn: #fdba74;/* 8.6:1 on navy */
  --navy-ink: #13294b;    /* navy as words (the open tab): 14.5:1 on white */
  --avatar: #13294b;      /* a square of initials: white 14.5:1 */
  --today: #13294b; --on-today: #ffffff; --on-today-2: #b9c6dc; /* today in the week strip and the calendar: 14.5:1, 8.4:1 */
  --lead-bg: #eef4ff;     /* a new lead's row: ink 15.7:1, muted 5.3:1 */
  --track: #e3e7ed;       /* a two-way switch's track */
  /* accent: the one primary per screen */
  --accent: #c2410c;      /* white on it 5.2:1 */
  --accent-hover: #9a3412;/* white on it 7.3:1 */
  --accent-ink: #ffffff;
  --accent-text: #b23a0a; /* the orange as words: 6.0:1 on a card */
  --link: #1b3a6b;        /* 11.3:1 on a card, 10.2:1 on the page */
  --ring: #13294b;        /* the focus ring: 14.5:1 on a card, 13.2:1 on the page */
  /* status: always a word in a pill, never colour alone */
  --good: #15803d;        /* a done step's fill: 5.0:1 on a card, white 5.0:1 on it */
  --good-ink: #166534; --good-bg: #dcfce7;   /* 6.5:1 */
  --warn-ink: #9a3412; --warn-bg: #ffedd5;   /* 6.4:1 */
  --info: #1d4ed8;        /* the current step's ring: 6.7:1 on a card */
  --info-ink: #1e40af; --info-bg: #dbeafe;   /* 7.2:1 */
  --plain-ink: #3b4658; --plain-bg: #eef1f5; /* 8.4:1 */
  --bad: #b42318;         /* an error in words: 6.6:1 on a card */
  --bad-ink: #991b1b; --bad-bg: #fee2e2;     /* 6.8:1 */
  --violet-ink: #6b21a8; --violet-bg: #f1e9fb; /* 7.4:1 */
  --note-ink: #3b4658; --note-bg: #fff7e6;   /* 8.9:1 */
  --flash-bg: #e7f6ec;    /* the saved band: ink on it 15.5:1 */
  --error-bg: #feeceb;    /* bad on it 5.8:1 */
  --shadow: 0 1px 2px rgba(15, 27, 45, .04);
  --shadow-up: 0 12px 32px rgba(15, 27, 45, .16);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6576' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* type: Plus Jakarta Sans (self-hosted above), the system's sans as the fallback */
  --font: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-16: 16px; --t-18: 18px; --t-22: 22px; --t-24: 24px; --t-30: 30px; --t-40: 40px;
  /* space: a 2 px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px;
  /* shape */
  --r-xl: 22px; --r-lg: 20px; --r-md: 18px; --r: 14px; --r-sm: 12px; --r-xs: 10px; --tap: 48px;
  --r-pill: 999px;        /* a status pill, a count (the office squares it: batch 9) */
  --r-chip: 999px;        /* a chip you tap: a filter, a choice, a tag */
  /* a table's column heads on a laptop (batch 9): muted 5.4:1, ink 15.8:1 on it */
  --th: #f3f5f8;
  /* widths: on a laptop the screens that list things go wide, a record keeps a reading width, a form is narrower */
  --page-w: 1120px; --mid-w: 960px; --read-w: 800px; --form-w: 640px;
  --gutter: 16px;
  --rail-w: 264px;
  font-family: var(--font);
  /* icons: 2 px strokes, drawn with currentColor through a mask */
  --ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --ic-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c1.8.7 3.1 2.5 3.5 5.2'/%3E%3C/svg%3E");
  --ic-jobs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 12h18'/%3E%3C/svg%3E");
  --ic-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ic-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --ic-call: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.5 4-2 1.5a11 11 0 0 0 6.5 6.5l1.5-2 4 1.5V19a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --ic-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --ic-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
  --ic-nav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-8-8 18-2-8z'/%3E%3C/svg%3E");
  --ic-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
  --ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ic-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.5 3.4-5.5 6.5-5.5s5.7 2 6.5 5.5M19 8v6M16 11h6'/%3E%3C/svg%3E");
  --ic-revenue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M16.5 7.5c-.8-1.3-2.5-2-4.5-2-2.5 0-4.5 1.3-4.5 3.3 0 4.7 9.5 2.4 9.5 7 0 2-2 3.4-5 3.4-2.2 0-4-.8-5-2.3'/%3E%3C/svg%3E");
  --ic-expenses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3L6 21z'/%3E%3Cpath d='M12 7v8M14 8.6c-.4-.6-1.1-.9-2-.9-1.1 0-2 .6-2 1.4 0 2 4 1 4 3 0 .9-.9 1.5-2.2 1.5-.9 0-1.7-.3-2-.9'/%3E%3C/svg%3E");
  --ic-estimates: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ic-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ic-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --ic-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E");
  --ic-yard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 12 4l9 4.5-9 4.5z'/%3E%3Cpath d='M3 12.5l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5'/%3E%3C/svg%3E");
  --ic-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E");
}
/* Dark: a deep blue-grey page, never pure black; raised cards; the navy deepens for the menu and lifts for the money;
   the orange fill stays (white on it 5.2:1); words that were orange or navy turn lighter. The same ratios rule. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d141f;
    --card: #172133;      /* ink 14.4:1, muted 7.2:1 */
    --soft: #1e2a3f;      /* muted 6.4:1 on it */
    --soft-2: #1b2638;
    --field: #111a28;     /* ink 15.5:1 */
    --hover: #1e2a3f;
    --tab: #121b2a;       /* muted 7.7:1, white 17.3:1 */
    --ink: #eef2f7;       /* 16.4:1 on the page */
    --ink-2: #a3aec0;     /* 8.2:1 on the page, 7.2:1 on a card */
    --ink-3: #c9d2de;     /* 10.6:1 on a card */
    --faint: #6e7b90;     /* 3.8:1 on a card (UI) */
    --edge: #263247;
    --line: #213045;
    --btn-edge: #2f3d55;
    --field-line: #6e7b90;/* 4.1:1 on its fill, 3.8:1 on a card */
    --navy: #0f1e38;      /* white 16.6:1, the items 13.2:1 */
    --navy-card: #1a3560; /* white 12.2:1, muted 7.1:1, green 8.7:1, orange 7.2:1 */
    --navy-2: #2a4a7a;    /* the items 7.1:1 */
    --navy-ink: #ffffff;
    --avatar: #2a4a7a;    /* white 8.9:1 */
    --today: #6b9bff; --on-today: #0d141f; --on-today-2: #13294b; /* 6.0:1 on a card; the numbers on it 6.8:1, the day names 5.4:1 */
    --lead-bg: #18263d;   /* ink 13.5:1, muted 6.8:1 */
    --track: #243248;
    --accent-text: #fb923c;/* 7.1:1 on a card, 8.2:1 on the page */
    --link: #93b4e8;      /* 7.6:1 on a card, 8.7:1 on the page */
    --ring: #93b4e8;
    --good: #22a55a;      /* 5.1:1 on a card; the page on it 5.8:1 */
    --good-ink: #86efac; --good-bg: #123622;   /* 9.5:1 */
    --warn-ink: #fdba74; --warn-bg: #3f2410;   /* 8.5:1 */
    --info: #6b9bff;      /* 6.0:1 on a card */
    --info-ink: #a5c4fd; --info-bg: #172e57;   /* 7.6:1 */
    --plain-ink: #c9d2de; --plain-bg: #243248; /* 8.5:1 */
    --bad: #fda29b;       /* 8.3:1 on a card */
    --bad-ink: #fca5a5; --bad-bg: #421a1a;     /* 7.9:1 */
    --violet-ink: #d8b4fe; --violet-bg: #311b4a; /* 8.6:1 */
    --note-ink: #e8dcc4; --note-bg: #2f2715;   /* 10.9:1 */
    --flash-bg: #123622;  /* ink 11.8:1 */
    --error-bg: #3a1714;  /* bad 8.2:1 */
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-up: 0 12px 32px rgba(0, 0, 0, .55);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3aec0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --th: #1d293d;        /* muted 6.5:1, ink 13.0:1 */
  }
}
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the script hides with the attribute; no class may show it again */
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font-family: var(--font); font-size: var(--t-16); font-weight: 500; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
h1 { font-size: var(--t-24); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--s4); overflow-wrap: anywhere; }
h2 { font-size: var(--t-18); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: var(--s7) 0 var(--s3); }
h2.first { margin-top: var(--s1); }
h3 { font-size: var(--t-16); font-weight: 800; margin: var(--s4) 0 var(--s2); }
@media (min-width: 960px) { h1 { font-size: var(--t-30); } }
p { margin: 0 0 var(--s2); }
a { color: var(--link); font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong { font-weight: 800; }
button, input, select, textarea { font-family: inherit; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -4px; margin-right: 6px; }
.sr, .enter-saves { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .link:focus-visible, .back:focus-visible, .list a:focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px; }

/* Icons drawn by the stylesheet (2 px strokes), for words whose markup stays plain: a class names the icon. */
[class^="i-"]::before, [class*=" i-"]::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.i-call { --ic: var(--ic-call); } .i-text { --ic: var(--ic-text); } .i-email { --ic: var(--ic-email); } .i-nav { --ic: var(--ic-nav); }
.i-link { --ic: var(--ic-link); } .i-plus { --ic: var(--ic-plus); } .i-person { --ic: var(--ic-person); } .i-search { --ic: var(--ic-search); }
.i-pin { --ic: var(--ic-pin); } .i-check { --ic: var(--ic-check); } .i-download { --ic: var(--ic-download); } .i-camera { --ic: var(--ic-camera); }
.i-print { --ic: var(--ic-print); } .i-calendar { --ic: var(--ic-calendar); }

/* ---- The shell. A phone: a slim bar with the business at the top, the screen, and a tab bar at the bottom
   (Home, Customers, Jobs, Calendar). A laptop: the navy side menu at the left and the screen beside it. ---- */
.rail { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 0; }
.rail nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--tab); border-top: 1px solid var(--edge); }
.rail nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; border-radius: var(--r-sm);
  font-size: var(--t-12); font-weight: 700; color: var(--ink-2); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rail nav a::before, .rail-settings::before { content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.rail nav a[aria-current] { color: var(--navy-ink); font-weight: 800; }
.rail nav a:focus-visible { outline-offset: -3px; }
.n-home { --ic: var(--ic-home); } .n-customers { --ic: var(--ic-people); } .n-jobs { --ic: var(--ic-jobs); } .n-calendar { --ic: var(--ic-calendar); }
.n-estimates { --ic: var(--ic-estimates); }
.n-revenue { --ic: var(--ic-revenue); } .n-expenses { --ic: var(--ic-expenses); }
.rail nav a.n-estimates, .rail nav a.n-revenue, .rail nav a.n-expenses { display: none; } /* side-menu items on a laptop; on a phone Revenue is the Jobs tab's segment and Expenses is in the business menu */
.n-yard { --ic: var(--ic-yard); }
.rail nav a.n-yard { display: none; } /* a side-menu item on a laptop; on a phone Home holds it (Yard, Low in the yard) */
@media (max-width: 959px) { .rail nav a[data-phone-current] { color: var(--navy-ink); font-weight: 800; } }
.rail-settings { --ic: var(--ic-gear); display: none; }
.signed-in main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (hover: hover) { .rail nav a:not([aria-current]):hover { color: var(--ink); background: var(--hover); } }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--avatar); color: var(--on-navy); font-size: var(--t-14); font-weight: 800; letter-spacing: .04em; }

/* The business menu: a plain fold (works with no script); the script closes it on an outside tap or Esc. */
.menu { position: relative; min-width: 0; }
.menu > summary { list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); min-width: 0; padding: 4px 10px 4px 4px;
  margin-left: -4px; border-radius: var(--r); font-size: var(--t-15); font-weight: 800; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; opacity: .7;
  -webkit-mask: var(--ic-down) center / contain no-repeat; mask: var(--ic-down) center / contain no-repeat; }
.menu[open] > summary::after { transform: rotate(180deg); }
.menu > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 0; }
.menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-list { position: absolute; left: 0; top: calc(100% + var(--s1)); min-width: 240px; padding: var(--s1) 0; background: var(--card); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow-up); z-index: 30; }
.menu-who { margin: 0 var(--s2) var(--s1); padding: var(--s2); color: var(--ink-2); font-size: var(--t-14); font-weight: 700; border-bottom: 1px solid var(--line); }
.menu-list > a, .menu-list button { display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 var(--s4); margin: 0; color: var(--ink);
  background: none; border: 0; font: inherit; font-size: var(--t-15); font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.menu-list > a[aria-current] { background: var(--soft); }
.menu-list > a:focus-visible, .menu-list button:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.menu-list form { margin: 0; }
@media (hover: hover) { .menu-list > a:hover, .menu-list button:hover { background: var(--hover); } .menu > summary:hover { background: var(--hover); } }

@media (min-width: 960px) {
  .shell.signed-in { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .rail { position: sticky; top: 0; height: 100vh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    padding: 22px 16px; background: var(--navy); color: var(--on-navy); overflow-y: auto; }
  .menu { margin-bottom: 16px; }
  .menu > summary { padding: 6px 8px; margin: 0; color: var(--on-navy); gap: 10px; }
  .menu > summary .avatar { background: var(--on-navy); color: #13294b; }
  .rail .menu-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .menu > summary:focus-visible { outline-color: var(--on-navy); }
  .menu-list { right: 0; }
  .rail nav { position: static; display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; }
  .rail nav a, .rail-settings { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: var(--tap); padding: 0 12px;
    font-size: var(--t-15); font-weight: 600; color: var(--on-navy-3); }
  .rail nav a::before, .rail-settings::before { width: 20px; height: 20px; }
  .rail nav a[aria-current], .rail-settings[aria-current] { background: var(--navy-2); color: var(--on-navy); font-weight: 800; }
  .rail nav a:focus-visible, .rail-settings:focus-visible { outline-color: var(--on-navy); outline-offset: -3px; }
  .rail-settings { display: flex; align-items: center; margin-top: auto; border-radius: var(--r-sm); text-decoration: none; }
  .signed-in main { padding-bottom: var(--s10); }
  @media (hover: hover) { .rail nav a:not([aria-current]):hover, .rail-settings:not([aria-current]):hover { background: rgba(255, 255, 255, .08); color: var(--on-navy); }
    .menu > summary:hover { background: rgba(255, 255, 255, .08); } }
}

/* ---- The page: one column on a phone; on a laptop each kind of screen keeps its own width beside the menu. ---- */
main { width: 100%; max-width: calc(var(--read-w) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s4) var(--gutter) calc(var(--s10) + env(safe-area-inset-bottom)); }
main[data-page="home"], main[data-page="customer"], main[data-page="job"] { max-width: calc(var(--page-w) + 2 * var(--gutter)); }
main[data-page="jobs"], main[data-page="customers"], main[data-page="settings"] { max-width: calc(var(--mid-w) + 2 * var(--gutter)); }
main[data-page="new"], main[data-page="edit"], main[data-page="assign"], main[data-page="assign_when"], main[data-page="intake_share"],
main[data-page="doc_send"], main[data-page="prices"], main[data-page="import"], main[data-page^="settings_"], main[data-page="price_edit"],
main[data-page="prices_import"] { max-width: calc(var(--form-w) + 2 * var(--gutter)); }
main[data-page="intake"], main[data-page="intake_done"], main[data-page="doc_gone"] { max-width: calc(560px + 2 * var(--gutter)); }
main[data-page="login"] { max-width: calc(420px + 2 * var(--gutter)); padding-top: max(var(--s10), 12vh); }
main[data-page="doc_gone"], main[data-page="intake_done"] { padding-top: max(var(--s10), 10vh); }
@media (min-width: 960px) { main { padding-top: var(--s7); } }

/* The title row of a screen: where it sits (a back link), what it is, a line about it, and its one action. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); margin: 0 0 var(--s5); }
.page-head > .head-text { flex: 1 1 320px; min-width: 0; }
.page-head h1 { margin: 0; }
.page-head .sub { margin: var(--s2) 0 0; font-size: var(--t-15); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 719px) { .page-actions { flex: 1 1 100%; } .page-actions > .btn { flex: 1 1 100%; } }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: var(--t-15); font-weight: 700; text-decoration: none; color: var(--link); }
.back:hover { text-decoration: underline; }
p:has(> .back) { margin: calc(-1 * var(--s2)) 0 var(--s1); }
h1 .badge { font-size: var(--t-13); margin-left: var(--s2); vertical-align: 5px; letter-spacing: 0; }

/* ---- Buttons: one filled orange primary per screen, plain secondaries, text tertiaries. 48 px (44 at the smallest).
   On a phone the main ones run the width of the thumb's reach; on a laptop they size to their words. ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s5);
  border-radius: var(--r); border: 1px solid var(--btn-edge); background: var(--card); color: var(--ink);
  font: inherit; font-size: var(--t-15); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .12s, border-color .12s; }
.btn:active { transform: translateY(1px); }
.btn .ic { margin-right: 0; }
.card .btn:not(.primary), .panel .btn:not(.primary), .approve .btn:not(.primary), .pay .btn:not(.primary) { background: var(--soft-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; width: 100%; }
.btn.big { min-height: 56px; font-size: var(--t-16); border-radius: var(--r-md); }
.btn.wide { width: 100%; }
.btn.small { min-height: 44px; padding: 0 var(--s4); font-size: var(--t-14); }
.btn.danger { color: var(--bad); }
@media (hover: hover) {
  .btn:hover { background: var(--hover); border-color: var(--faint); }
  .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
}
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: 0; padding: 0 var(--s1); font: inherit; font-weight: 700;
  color: var(--link); text-decoration: none; cursor: pointer; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--bad); }
.quiet-link { color: var(--ink-2); font-weight: 700; }
/* A row of actions: stacked on a phone, side by side on a laptop. */
.actions { display: flex; flex-direction: column; gap: var(--s2); }
@media (min-width: 720px) {
  .btn.primary, .btn.wide { width: auto; min-width: 168px; }
  .stack > .btn, .stack > .actions, .notice > .btn { align-self: flex-start; }
  .actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ---- Forms ---- */
.stack { display: flex; flex-direction: column; gap: var(--s2); }
.stack > .btn, .stack > .actions { margin-top: var(--s2); }
.stack > .btn + .btn { margin-top: 0; }
label { font-weight: 700; font-size: var(--t-14); color: var(--ink); margin: var(--s2) 0 calc(-1 * var(--s1)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { margin: var(--s2) 0 0; }
input, select, textarea { width: 100%; min-height: var(--tap); padding: 11px var(--s3); font: inherit; font-size: var(--t-16); font-weight: 500; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-line); border-radius: var(--r); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ring); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 1; }
input[readonly] { background: var(--soft); }
select { -webkit-appearance: none; appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
input[type="file"] { padding: 4px; color: var(--ink-2); font-size: var(--t-15); }
input[type="file"]::file-selector-button { min-height: 38px; margin-right: var(--s3); padding: 0 var(--s4); border: 1px solid var(--btn-edge); border-radius: var(--r-xs);
  background: var(--soft-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
input[type="date"] { min-width: 0; }
label.check { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); font-size: var(--t-16); font-weight: 600; margin: 0; }
label.check input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--navy); }
label .sub { font-weight: 500; }
.label-note { font-weight: 800; font-size: var(--t-16); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.row-form { margin: 0; }
.addr-row { display: grid; grid-template-columns: 1fr 72px 112px; gap: var(--s2); }
.qty-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); }
.qty-row.two { grid-template-columns: 1fr 1fr; }
.qty-row.two > .field:only-child { grid-column: 1; }
.pair { display: grid; gap: 0 var(--s3); }
@media (min-width: 560px) { .pair { grid-template-columns: 1fr 1fr; } }
.fields { display: grid; gap: 0 var(--s4); }
@media (min-width: 720px) { .fields { grid-template-columns: 1fr 1fr; } }
input.short { max-width: 120px; }
.affix { position: relative; display: block; }
.affix input { padding-right: 40px; }
.affix > span { position: absolute; right: var(--s4); top: 50%; transform: translateY(-50%); color: var(--ink-2); font-weight: 700; pointer-events: none; }
.affix.days { max-width: 200px; }
.affix.days input { padding-right: 64px; }
.search { display: flex; gap: var(--s2); margin: 0; }
.search input { flex: 1; min-width: 0; padding-left: 42px; background-image: none; }
.search { position: relative; }
.search::before { content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; background: var(--ink-2); pointer-events: none;
  -webkit-mask: var(--ic-search) center / contain no-repeat; mask: var(--ic-search) center / contain no-repeat; }
.inline, .inline-form { display: inline; }
form.notice { gap: var(--s2); }
form.notice p { margin: 0; }
.line input[inputmode="decimal"], .pay [data-amount-box], #price, .price-boxes #cost { font-size: var(--t-18); font-weight: 800; }

/* Words that explain or sit beside the main thing */
.sub, .hint, .muted { color: var(--ink-2); font-size: var(--t-14); font-weight: 500; }
.hint { margin: 0; }
.muted { font-size: var(--t-15); }
.gap { margin-top: var(--s4); }

/* ---- Cards: white, a hairline edge, generous corners ---- */
.card, .panel, .list, .details, details.small-form, details.more, .row, .pay, .a2hs, .history, .sum, .approve { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card { padding: var(--s4); margin: 0 0 var(--s4); min-width: 0; }
.card > h2:first-child { margin-top: 0; }
.card h2 { font-size: var(--t-18); margin: 0 0 var(--s3); }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card h3 { margin: var(--s4) 0 var(--s2); }
.card.stack { padding: var(--s5); gap: var(--s2); }
.card h2 + .hint { margin-top: calc(-1 * var(--s2)); }
.panel { padding: var(--s5); }
@media (min-width: 720px) { .panel, .card.stack { padding: var(--s6); } .card { padding: var(--s5); } }
.panel > input[type="hidden"] + label, .panel > label:first-child { margin-top: 0; }

/* ---- Lists: rows you tap, a chevron when the row opens something ---- */
.list { list-style: none; padding: 0; margin: 0; overflow: hidden; }
.list li { position: relative; }
.list li + li { border-top: 1px solid var(--line); }
.list a { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: var(--s3) 44px var(--s3) var(--s4);
  color: var(--ink); font-weight: 500; text-decoration: none; }
.list a strong { font-weight: 700; font-size: var(--t-15); }
.list a::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--faint);
  -webkit-mask: var(--ic-chev) center / contain no-repeat; mask: var(--ic-chev) center / contain no-repeat; }
.list a:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .list a:hover { background: var(--hover); } }
.list a.pending { background: var(--lead-bg); }
.list a.file::after { -webkit-mask-image: var(--ic-download); mask-image: var(--ic-download); background: var(--link); }
.list.plain li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; padding: var(--s2) var(--s4); }
.list.plain li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s1) 0; }
.list.plain li .sub { display: block; }
.list.plain li .badge { margin-top: 2px; align-self: flex-start; }
.list.plain li > form { flex: none; }
.list.plain .link { white-space: nowrap; }
.list.plain .link.danger { color: var(--ink-2); }
@media (hover: hover) { .list.plain .link.danger:hover { color: var(--bad); } }
.list .cell { display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; padding: var(--s3) var(--s4); }
.cols li { flex-direction: column; align-items: stretch; padding: var(--s2) var(--s4) var(--s3); }
.cols label { margin: 0; }
/* A row that leads with a coloured square: the square sits in the row's left padding, the whole row is the link. */
.list.chips-left a, .list.chips-left .cell { padding-left: 68px; }
.chip-ic { position: absolute; left: 14px; top: 50%; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px;
  border-radius: var(--r-sm); pointer-events: none; }
.chip-ic .ic { width: 20px; height: 20px; margin: 0; }
.chip-ic.good { background: var(--good-bg); color: var(--good-ink); }
.chip-ic.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip-ic.info { background: var(--info-bg); color: var(--info-ink); }
.chip-ic.violet { background: var(--violet-bg); color: var(--violet-ink); }
.chip-ic.plain { background: var(--plain-bg); color: var(--plain-ink); }
.chip-ic.avatar-chip { font-size: var(--t-14); font-weight: 800; letter-spacing: .03em; }
.t1 { background: var(--info-bg); color: var(--info-ink); } .t2 { background: var(--good-bg); color: var(--good-ink); } .t3 { background: var(--warn-bg); color: var(--warn-ink); }
.t4 { background: var(--violet-bg); color: var(--violet-ink); } .t5 { background: var(--plain-bg); color: var(--plain-ink); }

/* Folds: a row that opens to show more */
details.small-form, details.more { margin: var(--s3) 0 0; padding: 0 var(--s4); }
details > summary { list-style: none; min-height: var(--tap); display: flex; align-items: center; gap: var(--s2); font-weight: 700; cursor: pointer; color: var(--link); }
details > summary::-webkit-details-marker { display: none; }
details:not(.menu) > summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--faint);
  -webkit-mask: var(--ic-down) center / contain no-repeat; mask: var(--ic-down) center / contain no-repeat; }
details:not(.menu)[open] > summary::after { transform: rotate(180deg); }
details:not(.menu)[open] { padding-bottom: var(--s4); }
details:not(.menu)[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--s2); }

/* A record's facts: label left, value right */
.details { padding: 0 var(--s4); margin: var(--s3) 0 0; }
.details div { display: grid; grid-template-columns: minmax(104px, 32%) minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; }
.details div + div { border-top: 1px solid var(--line); }
.details dt { color: var(--ink-2); font-size: var(--t-15); }
.details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 479px) { .details div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---- Status: a word in a soft pill ---- */
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); background: var(--good-bg); color: var(--good-ink);
  font-size: var(--t-12); font-weight: 800; line-height: 1.3; white-space: nowrap; vertical-align: 2px; letter-spacing: 0; }
.badge.plain, .badge.neutral { background: var(--plain-bg); color: var(--plain-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.info { background: var(--info-bg); color: var(--info-ink); }
.badge.off, .badge.bad { background: var(--bad-bg); color: var(--bad-ink); }
/* Brought in from QuickBooks (batch 8): a quiet outline, never a status colour. */
.badge.src { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--field-line); font-weight: 700; }

/* ---- Messages ---- */
.flash, .error, .notice { border-radius: var(--r); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); border: 1px solid var(--edge); }
.flash { background: var(--flash-bg); color: var(--ink); font-weight: 700; }
.flash::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 8px -3px 0; background: var(--good-ink);
  -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
.error { background: var(--error-bg); color: var(--bad); font-weight: 700; }
.notice { background: var(--note-bg); color: var(--ink); }
.notice.stack { padding: var(--s4); }
.notice.good { background: var(--flash-bg); }
.notice.info { background: var(--info-bg); color: var(--ink); }
.problems { color: var(--bad); margin: var(--s2) 0; padding-left: 20px; }
.problems li { margin-bottom: var(--s1); }
.steps li { margin-bottom: var(--s2); }

/* The one Save that follows the finger, without hiding the page (above the phone's tab bar) */
.sticky-save { position: sticky; bottom: 0; z-index: 4; display: flex; margin: var(--s4) calc(-1 * var(--gutter)) 0; padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--edge); }
.signed-in .sticky-save { bottom: calc(66px + env(safe-area-inset-bottom)); padding-bottom: var(--s3); }
.sticky-save .btn { margin: 0; flex: 1; }
@media (min-width: 960px) { .signed-in .sticky-save { bottom: 0; } }
@media (min-width: 720px) { .sticky-save { margin-left: 0; margin-right: 0; padding-left: var(--s4); padding-right: var(--s4); border: 1px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sticky-save .btn { flex: none; } }

/* Add to Home Screen: one quiet line and two small buttons, never a wall over the page */
.a2hs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); margin: var(--s8) 0 0; font-size: var(--t-14); }
.a2hs p { margin: 0; flex: 1 1 220px; }
.a2hs-actions { display: flex; gap: var(--s2); margin-left: auto; }
.a2hs .btn { min-height: 44px; padding: 0 var(--s4); font-size: var(--t-14); }

/* ---- Home. A phone: hello, the navy money card, the big actions, Needs you, This week. A laptop: hello beside the
   search and the two actions, four money tiles, Needs you beside This week, then the QuickBooks line. ---- */
.home { display: flex; flex-direction: column; gap: var(--s5); }
.home-hello { order: 1; min-width: 0; }
.money { order: 2; }
.home-actions { order: 3; }
.home-grid { order: 4; }
.qb { order: 5; }
.home-date { margin: 0 0 2px; font-size: var(--t-14); font-weight: 600; color: var(--ink-2); }
.home-title { margin: 0; }
.home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-actions .search { grid-column: 1 / -1; order: 2; }
.home-actions .row-form { display: flex; }
.tile-btn { flex: 1; flex-direction: column; gap: 8px; width: 100%; height: 88px; border-radius: var(--r-md); background: var(--card); border-color: var(--edge);
  font-size: var(--t-14); font-weight: 800; }
.tile-btn.primary { min-width: 0; }
.tile-btn.primary::before { width: 26px; height: 26px; }
.tile-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); }
.tile-ic .ic { margin: 0; }
.tile-ic.info { background: var(--info-bg); color: var(--info-ink); }
@media (min-width: 960px) {
  .home { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hello actions" "money money" "grid grid" "qb qb"; gap: 22px 16px; align-items: center; }
  .home-hello { grid-area: hello; }
  .money { grid-area: money; }
  .home-actions { grid-area: actions; display: flex; align-items: center; gap: 10px; }
  .home-actions .search { order: -1; width: 300px; }
  .home-actions .row-form { order: 0; }
  .home-actions .tile-btn.primary { order: 1; }
  .tile-btn.primary::before { display: none; }
  .home-actions .search .btn { display: none; }
  .home-grid { grid-area: grid; }
  .qb { grid-area: qb; }
  .tile-btn { flex-direction: row; height: 48px; width: auto; padding: 0 var(--s4); border-radius: var(--r); background: var(--card); border-color: var(--btn-edge); font-size: var(--t-14); }
  .tile-btn.primary { padding: 0 var(--s5); }
  .tile-btn.primary::before { width: 18px; height: 18px; }
  .tile-ic { width: auto; height: auto; background: none !important; color: inherit !important; }
  .tile-ic .ic { width: 18px; height: 18px; }
}

/* The money. On a phone one navy card: what's not paid big, a bar of what came in and what's late, then Paid, Late
   and Waiting on a yes. On a laptop four tiles, the first navy. Whole dollars when there are no cents. */
.money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px 8px; padding: var(--s5); border-radius: var(--r-xl); background: var(--navy-card); color: var(--on-navy); }
.money p { margin: 0; }
.m-main { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.m-main .m-title { font-size: var(--t-13); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-2); }
.m-chip { flex: none; padding: 5px 10px; border-radius: var(--r-pill); background: var(--navy-2); color: var(--on-navy-3); font-size: var(--t-12); font-weight: 700; }
.m-big { font-size: var(--t-40); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
.m-main .m-note { color: var(--on-navy-2); font-size: var(--t-14); font-weight: 600; }
.m-main .m-note.late { color: var(--on-navy-warn); }
.m-bar { display: block; height: 8px; margin-top: 8px; border-radius: 4px; overflow: hidden; }
.m-bar svg { display: block; width: 100%; height: 8px; }
.m-track { fill: var(--navy-2); } .m-in { fill: #4ade80; } .m-late-bar { fill: #fdba74; }
.m-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 3px; min-width: 0; }
.m-tile .m-title { font-size: var(--t-12); font-weight: 600; color: var(--on-navy-2); }
.m-tile .m-num { font-size: var(--t-18); font-weight: 800; overflow-wrap: anywhere; }
.m-paid .m-num { color: var(--on-navy-good); } .m-late .m-num { color: var(--on-navy-warn); }
.m-tile .m-note { display: none; }
@media (min-width: 960px) {
  .money { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; background: none; color: var(--ink); border-radius: 0; }
  .m-main, .m-tile { grid-column: auto; gap: 8px; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--edge); }
  .m-main { background: var(--navy-card); border-color: var(--navy-card); color: var(--on-navy); }
  .m-main .m-title { text-transform: none; letter-spacing: 0; font-weight: 700; }
  .m-chip { display: none; }
  .m-big, .m-tile .m-num { font-size: 32px; letter-spacing: -0.025em; line-height: 1.1; }
  .m-tile .m-title { font-size: var(--t-13); font-weight: 700; color: var(--ink-2); }
  .m-paid .m-num, .m-late .m-num { color: var(--ink); }
  .m-tile { justify-content: flex-start; }
  .m-tile .m-note { display: block; color: var(--ink-2); font-size: var(--t-13); font-weight: 600; }
  .m-tile .m-note.late { color: var(--warn-ink); }
}

/* Needs you and This week: cards with short groups inside. */
.home-grid { display: flex; flex-direction: column; gap: var(--s5); }
.home-grid > .card { margin: 0; }
@media (min-width: 960px) { .home-grid { flex-direction: row; align-items: flex-start; gap: 14px; } .home-grid > .card { flex: 1 1 0; min-width: 0; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0 0 var(--s2); }
.card-title { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-18); font-weight: 800; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--card);
  font-size: var(--t-12); font-weight: 800; }
.needs, .week-card { padding: var(--s4) var(--s4) var(--s2); }
.tile { margin: var(--s2) 0 0; }
.tile + .tile, .quiet + .tile, .tile + .quiet { margin-top: var(--s3); }
.tile-head { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: 8px 0; font-size: var(--t-13); font-weight: 800; line-height: 1.2;
  color: var(--ink-2); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.tile-head > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); }
.tile-head .sub { font-size: var(--t-12); font-weight: 700; text-transform: none; letter-spacing: 0; }
.tile-head strong { padding: 2px 8px; border-radius: var(--r-pill); background: var(--soft); color: var(--ink); font-size: var(--t-12); font-weight: 800; letter-spacing: 0; white-space: nowrap; }
a.tile-head { position: relative; padding-right: 28px; border-radius: var(--r-xs); }
a.tile-head::after { content: ""; position: absolute; right: 2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--faint);
  -webkit-mask: var(--ic-chev) center / contain no-repeat; mask: var(--ic-chev) center / contain no-repeat; }
a.tile-head:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
a.tile-head:focus-visible, .tile-more:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.card .list { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.card .list li { border-top: 1px solid var(--line); }
.card .list a { padding-left: 0; min-height: 60px; }
.card .list.chips-left a { padding-left: 54px; }
.card .chip-ic { left: 0; }
.card .list a::after { right: 0; }
.card .list a.pending { background: none; } /* inside Needs you the blue square and the New pill say it */
.card .list a { padding-right: 28px; }
.tile-more { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 44px; font-weight: 700; font-size: var(--t-14); text-decoration: none; border-top: 1px solid var(--line); }
.tile-more::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic-chev) center / contain no-repeat; mask: var(--ic-chev) center / contain no-repeat; }
.quiet { margin: 0; color: var(--ink-2); font-size: var(--t-14); font-weight: 600; }
.needs > .quiet, .week-card > .quiet { display: flex; align-items: center; gap: var(--s2); min-height: 40px; }
.needs > .quiet::before, .week-card > .quiet::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.all-clear { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; font-weight: 700; }
/* To do: the row opens the customer, Done sits beside it */
.list.todos li { display: flex; align-items: stretch; }
.list.todos a { flex: 1; min-width: 0; padding-right: var(--s3); }
.list.todos a::after { content: none; }
.todo-text { font-weight: 700; color: var(--ink); }
.todo-done { display: flex; align-items: center; padding: var(--s2) 0 var(--s2) var(--s2); }
.todo-done .btn { min-width: 88px; min-height: 44px; padding: 0 var(--s3); font-size: var(--t-14); }
@media (max-width: 479px) {
  .todo-done .btn { min-width: 44px; width: 44px; padding: 0; }
  .todo-done .done-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The week strip: Monday to Sunday, today in navy, a dot on a day with work. */
.strip { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: var(--s1) 0 var(--s3); padding: 0; }
.strip li > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 60px; border-radius: var(--r); background: var(--card);
  border: 1px solid var(--edge); color: var(--ink); text-decoration: none; }
.strip .d-name { font-size: var(--t-11); font-weight: 700; color: var(--ink-2); }
.strip .d-num { font-size: var(--t-16); font-weight: 800; }
.strip .d-dot { width: 6px; height: 6px; border-radius: 3px; }
.strip .d-dot.good { background: var(--good); } .strip .d-dot.warn { background: var(--accent); } .strip .d-dot.bad { background: var(--bad); } .strip .d-dot.neutral { background: var(--info); }
.strip li.weekend > * { background: var(--soft); border-color: var(--soft); }
.strip li.weekend .d-num { color: var(--ink-2); }
.strip li.today > * { background: var(--today); border-color: var(--today); color: var(--on-today); }
.strip li.today .d-name { color: var(--on-today-2); }
.strip li.today .d-num { color: var(--on-today); }
.strip li.today .d-dot { background: var(--on-today); }
.strip a:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .strip a:hover { border-color: var(--faint); } }
.week-card .list a strong { font-size: var(--t-15); }
#week > .tile-head, .week-empty { font-size: var(--t-18); color: var(--ink); text-transform: none; letter-spacing: -0.01em; padding-top: 0; }
#week > .tile-head strong { background: var(--ink); color: var(--card); }
.tile-row { margin-top: var(--s2); border-top: 1px solid var(--line); }
.tile-row .tile-head { min-height: 48px; }

/* QuickBooks: a quiet promise, words only, no button until the connection exists. */
.qb { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border: 1px dashed var(--faint); border-radius: var(--r-lg); background: var(--card); }
.qb p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.qb strong { font-size: var(--t-16); }
.qb .chip-ic { position: static; margin: 0; flex: none; width: 44px; height: 44px; }

/* ---- Two columns for a record on a laptop: what you act on at the left, what hangs off it at the right ---- */
.split { display: grid; gap: 0 var(--s6); }
.split > * { min-width: 0; }
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "a b" "c b"; grid-template-rows: auto 1fr; align-items: start; }
  .split > .col-a { grid-area: a; }
  .split > .col-b { grid-area: b; }
  .split > .col-c { grid-area: c; }
  .split > .col-b > :first-child, .split > .col-b > section:first-child > h2:first-child { margin-top: 0; }
}

/* ---- Customers: a square of initials, the name, a status pill, the phone and the address ---- */
.row-top { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex-wrap: wrap; }
.row-top strong { min-width: 0; overflow-wrap: anywhere; }
.list-title { margin-top: var(--s6); }
.search + .list-title, .search + h2 { margin-top: var(--s6); }

/* ---- A customer: a card with the square of initials, the name, the phone and email, Call, Text and Email ---- */
.who-card { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); border-radius: var(--r-xl); }
.who-top { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.who-avatar { width: 56px; height: 56px; border-radius: var(--r); font-size: var(--t-18); }
.who-text { min-width: 0; }
.who-text h1 { margin: 0 0 2px; }
.who-text .sub { margin: 0; }
.who-card .contact { margin: 0; }
.who-card .details { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
.who-card + .notice { margin-top: 0; }
.who-card .details div:last-child { padding-bottom: 0; }
@media (min-width: 1100px) { .split { grid-template-areas: "c b"; grid-template-rows: auto; } }
.who-card { display: flex; flex-direction: column; gap: var(--s3); }
.contact { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); margin: 0 0 var(--s2); }
.contact .btn { min-height: 48px; padding: 0 var(--s2); background: var(--soft-2); }
.contact .btn::before { width: 18px; height: 18px; }
@media (min-width: 720px) { .contact { grid-auto-columns: minmax(0, 160px); } }
.contact-line { margin: 0; }
.group { margin-top: var(--s2); }
.log-it { margin: 0; padding: 10px var(--s3); background: var(--note-bg); border-radius: var(--r-sm); font-weight: 700; }
/* Chips: one picked, obviously */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.chip { position: relative; cursor: pointer; margin: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4) 0 var(--s3); border: 1px solid var(--field-line); border-radius: var(--r-chip);
  background: var(--card); color: var(--ink); font-size: var(--t-15); font-weight: 700; }
.chip input:checked + span { border-color: var(--info); background: var(--info-bg); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--info); font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.chip .ic { width: 18px; height: 18px; vertical-align: -3px; }
/* History: one card, a line per thing that happened, newest first */
.history { list-style: none; padding: 0; margin: var(--s4) 0 0; overflow: hidden; }
.history li { padding: var(--s3) var(--s4); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-15); }
.history li + li { border-top: 1px solid var(--line); }
.history .line { display: block; }
.history .line .ic { color: var(--link); width: 18px; height: 18px; }
.history li.k-note .line .ic, .history li.k-called .line .ic, .history li.k-texted .line .ic, .history li.k-emailed .line .ic, .history li.k-visited .line .ic { color: var(--accent-text); }
.history .when { display: block; font-size: var(--t-13); color: var(--ink-2); margin-bottom: 2px; font-weight: 600; }

/* ---- A site: the address, the pack's fields, the repeating rows, photos ---- */
.site-title { font-size: var(--t-24); margin: 0 0 var(--s4); word-break: break-word; }
@media (min-width: 960px) { .site-title { font-size: var(--t-30); } }
.row { padding: var(--s3) var(--s4) var(--s4); margin: 0 0 var(--s3); min-width: 0; }
.row legend { float: left; width: 100%; margin: 0 0 var(--s1); padding: 0; font-weight: 800; font-size: var(--t-13); color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.row legend + *, .row > .fields { clear: both; }
.line textarea { min-height: 104px; }
.photos { margin: var(--s8) 0 0; }
.photos h2 .count, .cal-day-list h2 .count, .cal-day-list h2 .sub { font-size: var(--t-14); font-weight: 700; color: var(--ink-2); margin-left: var(--s2); }
.photo-grid { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (min-width: 720px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.photo-pic { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); }
.photo-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-caption { gap: var(--s1); }
.photo-caption input { padding: 10px var(--s2); font-size: var(--t-15); }
.photo-caption .btn.small { margin: 0; align-self: stretch; }
.photo-remove { margin: 0; padding: 0; }
.photo-remove > summary { min-height: 44px; font-size: var(--t-14); color: var(--bad); }
.photo-remove > summary::after, .photo-remove[open] > summary::after { content: none !important; }
.photo-remove[open] { padding-bottom: 0; }
.photo-remove[open] > summary { border-bottom: 0; margin-bottom: 0; }
.photo-remove p { margin: 0; font-size: var(--t-14); }
.photo-remove .btn { margin: 0; }
.photo-add label.file { position: relative; cursor: pointer; margin: 0; }
.photo-add .link.file { align-self: flex-start; font-size: var(--t-15); }
.photo-add input[type="file"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; overflow: hidden; }
.photo-add label.file:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (min-width: 720px) { .photo-add > .btn.file { align-self: flex-start; } }
.photo-full { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--edge); }
.photo-one { margin: var(--s3) 0 0; }

/* ---- Quotes and bills ---- */
.line .words { white-space: pre-wrap; margin: var(--s1) 0; font-weight: 700; }
.line p.sub { margin: var(--s1) 0 var(--s2); }
.line.fee { border-style: dashed; }
.pay { margin: 0 0 var(--s5); padding: var(--s2) var(--s4) var(--s4); }
.pay h2 { margin: var(--s2) 0 var(--s1); }
/* The money: one card, the total big, what's paid and what's left under it */
.sum { margin: var(--s2) 0 0; overflow: hidden; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); min-height: 64px; margin: 0; padding: var(--s3) var(--s4); font-weight: 700; }
.total + .total, .deposit + .total { border-top: 1px solid var(--line); }
.total strong { font-size: var(--t-30); font-weight: 800; letter-spacing: -0.02em; }
.deposit { text-align: right; margin: 0; padding: 0 var(--s4) var(--s3); }
.add-row { display: flex; gap: var(--s2); }
.approve { margin-top: var(--s6); padding: var(--s4) var(--s5) var(--s5); }
.approve h2 { margin: var(--s1) 0 var(--s2); }
.decline { margin-top: var(--s2); }
.decline .link { color: var(--ink-2); padding-left: 0; text-decoration: underline; text-underline-offset: 3px; }
/* The jobs on a customer or a site: each job, then its quotes and bills */
.jobs { margin: var(--s2) 0 var(--s4); }
.list.jobs li.job { padding: var(--s3) 0 0; }
.list.jobs .job-head { margin: 0 var(--s4) var(--s2); display: flex; flex-direction: column; gap: 2px; }
.list.jobs .job-head a { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-self: flex-start; gap: 0 6px; padding: 0; min-height: 44px; border: 0; }
.list.jobs .job-head a::after { content: none; }
.list.jobs .job-head .sub { font-weight: 500; }
.list.jobs a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s3); row-gap: 2px; align-items: center;
  min-height: 64px; padding: var(--s3) 40px var(--s3) var(--s4); border-top: 1px solid var(--line); }
.list.jobs a > .ic { grid-row: 1 / span 2; grid-column: 1; width: 36px; height: 36px; padding: 8px; margin: 0; border-radius: var(--r-xs); background: var(--soft); color: var(--link); }
.list.jobs a > strong { grid-column: 2; }
.list.jobs a > .sub { grid-column: 2; }
.list.jobs a > .row-pill { grid-column: 3; grid-row: 1 / span 2; }
/* A payment under its bill (the customer's History, batch 8): a quieter row, indented under the bill. */
.list.jobs a.pay-row { min-height: 52px; padding-left: calc(var(--s4) + 24px); grid-template-columns: 28px minmax(0, 1fr) auto; }
.list.jobs a.pay-row > .ic { width: 28px; height: 28px; padding: 5px; color: var(--good); }
.list.jobs a.pay-row > strong { font-weight: 600; }
.badge.mini { padding: 1px 6px; font-size: var(--t-11); vertical-align: middle; margin-inline: 4px 0; }

/* ---- A customer's History (batch 8): billed, paid and open over every job ---- */
.ledger > h2 { margin-bottom: var(--s3); }
.ledger-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s2); }
.ledger-totals div { padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--edge); min-width: 0; }
.ledger-totals dt { font-size: var(--t-13); font-weight: 700; color: var(--ink-2); }
.ledger-totals dd { margin: 2px 0 0; font-size: var(--t-22); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ledger-totals .open dd { color: var(--accent-text); }
.ledger-count { margin: 0 0 var(--s2); font-size: var(--t-14); }
@media (max-width: 379px) { .ledger-totals dd { font-size: var(--t-18); } }

/* ---- Jobs: the toolbar (find, List or Calendar, All or Mine), the rows, the month ---- */
.toolbar { display: grid; gap: var(--s3); margin: 0 0 var(--s5); }
@media (min-width: 960px) { .toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.jobs-all a { gap: 3px; }
.job-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.job-top strong { min-width: 0; overflow-wrap: anywhere; }
.job-money { flex: none; font-weight: 800; font-size: var(--t-15); }
.job-plan .ic { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--link); }
.segs { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Two plain buttons joined as one control; the one in use is white on the soft track, never a primary. */
.seg { display: flex; flex: 1 1 auto; gap: 0; margin: 0; padding: 4px; background: var(--track); border: 0; border-radius: var(--r); }
.seg .btn { flex: 1; min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-2); font-weight: 700; }
.seg .btn.on { background: var(--card); color: var(--ink); font-weight: 800; box-shadow: 0 1px 3px rgba(15, 27, 45, .14); }
@media (min-width: 960px) { .seg { flex: none; } .seg .btn { min-width: 96px; } }
@media (hover: hover) { .seg .btn:not(.on):hover { background: rgba(255, 255, 255, .5); color: var(--ink); } }

/* The calendar: a month grid, Monday to Sunday. Each planned job is a chip in its status's tone; on a phone the chips
   fold into a dot and a count and a tap on the day lists its jobs under the grid. */
.cal { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) var(--s2); }
.cal-head h2 { margin: 0; font-size: var(--t-16); text-align: center; flex: 1; }
.cal-turn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s3); font-weight: 700; text-decoration: none; white-space: nowrap; border-radius: var(--r-xs); }
@media (hover: hover) { .cal-turn:hover { background: var(--hover); } }
.cal-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cal-grid th { padding: var(--s2) 0; font-size: var(--t-12); font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-cell { vertical-align: top; height: 104px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-cell:last-child { border-right: 0; }
.cal-grid tr:last-child .cal-cell { border-bottom: 0; }
.cal-cell.out { color: var(--ink-2); background: var(--soft); }
.cal-cell.out .cal-num { font-weight: 600; }
.cal-cell.open { background: var(--info-bg); }
.cal-day { display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 2px; color: inherit; text-decoration: none; border-radius: var(--r-xs); font-weight: 700; }
a.cal-day:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50%; font-size: var(--t-14); font-weight: 800; }
.cal-cell.today .cal-num { background: var(--today); color: var(--on-today); }
.cal-count { display: none; align-items: center; gap: 3px; font-size: var(--t-13); font-weight: 800; }
.cal-count::before, .chip-job::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.cal-count.warn::before, .chip-job.warn::before { background: var(--accent); }
.cal-count.bad::before, .chip-job.bad::before { background: var(--bad); }
.cal-count.neutral::before, .chip-job.neutral::before { background: var(--faint); }
.cal-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.chip-job { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; min-height: 26px; padding: 3px 6px; border-radius: 8px; background: var(--plain-bg); font-size: var(--t-12); font-weight: 700; color: var(--ink); text-decoration: none; overflow: hidden; }
.chip-job > span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; overflow-wrap: anywhere; }
.chip-job.good { background: var(--good-bg); color: var(--good-ink); }
.chip-job.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip-job.bad { background: var(--bad-bg); color: var(--bad-ink); }
.chip-job:focus-visible { outline: 3px solid var(--ring); outline-offset: -2px; }
@media (max-width: 600px) {
  .cal-cell { height: 56px; padding: 0; }
  .cal-chips { display: none; }
  .cal-day { flex-direction: column; justify-content: center; gap: 0; min-height: 56px; padding: 0; border-radius: 0; }
  .cal-num { min-width: 26px; height: 26px; }
  .cal-count { display: inline-flex; }
}
.cal-day-list { margin: var(--s5) 0 0; }
.cal-cell.clash .cal-num { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.today.clash .cal-num { box-shadow: none; }
.chip-job.clash::after { content: "!"; margin-left: auto; padding-left: 4px; font-weight: 800; color: var(--warn-ink); }

/* ---- The Job page: the site's photo across the top, the job and the customer with Call, Text and Directions, the six
   steps, the job at a glance in big numbers, the money with pills, the history; one primary pinned at the bottom. ---- */
.hero { position: relative; margin: calc(-1 * var(--s4)) calc(-1 * var(--gutter)) calc(-1 * var(--s7)); height: 220px; background: var(--soft); overflow: hidden; }
.hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .back { position: absolute; top: 12px; left: 12px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-up); }
.hero-count { position: absolute; right: 12px; bottom: 40px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(15, 27, 45, .86); color: #fff; font-size: var(--t-12); font-weight: 800; text-decoration: none; }
.hero + .job-cols { position: relative; z-index: 1; }
@media (min-width: 960px) { .hero { margin: 0 0 var(--s4); height: 260px; border-radius: var(--r-xl); } .hero-count { bottom: 14px; } }
.job-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border-radius: var(--r-xl); }
.job-card h1 { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0; font-size: var(--t-13); font-weight: 800; color: var(--ink-2); letter-spacing: 0; }
.job-card h1 .badge { margin: 0; vertical-align: 0; }
.job-card h2 { margin: 0; font-size: var(--t-24); font-weight: 800; letter-spacing: -0.02em; }
.job-card .sub { margin: 0; }
.job-card .contact { margin: 0; grid-auto-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .job-card .contact { grid-auto-columns: minmax(0, 160px); justify-content: start; } }
.tracker { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; margin: 0 0 var(--s4); padding: 16px 10px; }
.tracker li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 700; color: var(--ink-2); text-align: center; }
.tracker li::before { content: ""; position: absolute; top: 12px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--edge); }
.tracker li:first-child::before { content: none; }
.tracker li.is-done::before, .tracker li.is-now::before { background: var(--good); }
.step { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--edge); color: #fff; }
.step .ic { width: 14px; height: 14px; margin: 0; stroke-width: 3; }
.tracker li.is-done { color: var(--ink-3); }
.tracker li.is-done .step { background: var(--good); color: var(--card); }
.tracker li.is-now { color: var(--info-ink); font-weight: 800; }
.tracker li.is-now .step { background: var(--card); box-shadow: inset 0 0 0 3px var(--info); }
.tracker li.is-no { color: var(--bad-ink); font-weight: 800; }
.tracker li.is-no .step { background: var(--bad-bg); box-shadow: inset 0 0 0 2px var(--bad); color: var(--bad); }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); margin: 0 0 var(--s3); }
.glance div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r); background: var(--soft); min-width: 0; }
.glance strong { font-size: var(--t-22); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; overflow-wrap: anywhere; }
.glance span { color: var(--ink-2); font-size: var(--t-13); font-weight: 600; overflow-wrap: anywhere; }
.site-note { margin: 0 0 var(--s3); padding: 10px 12px; border-radius: var(--r-sm); background: var(--note-bg); color: var(--note-ink); font-size: var(--t-14); font-weight: 600; white-space: pre-wrap; }
.site-note b { font-weight: 800; }
.site-card h2 { display: flex; align-items: flex-start; gap: 6px; }
.site-card h2::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--ink-2); -webkit-mask: var(--ic-pin) center / contain no-repeat; mask: var(--ic-pin) center / contain no-repeat; }
.site-more { margin: var(--s2) 0 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
.site-card > .link { width: 100%; border-top: 1px solid var(--line); }
.site-card > .thumbs { margin-top: var(--s3); }
.site-more > summary { min-height: 44px; }
.money-list { padding: var(--s4) var(--s4) var(--s1); }
.money-list h2 { margin: 0 0 var(--s1); }
@media (min-width: 720px) { .money-list { padding: var(--s5) var(--s5) var(--s1); } }
.money-list .list.jobs { margin: 0; }
.money-list .list.jobs li.job { padding: 0; }
.money-list .list.jobs a { padding-left: 0; padding-right: 28px; }
.money-list .list.jobs a::after { right: 0; }
@media (max-width: 479px) { .money-list .list.jobs a { grid-template-columns: minmax(0, 1fr) auto; } .money-list .list.jobs a > .ic { display: none; }
  .money-list .list.jobs a > strong, .money-list .list.jobs a > .sub { grid-column: 1; } .money-list .list.jobs a > .row-pill { grid-column: 2; } }
.money-left { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: 0; padding: 14px 0; border-top: 1px solid var(--line); font-weight: 800; }
.money-left strong { font-size: var(--t-18); }
.reads { display: grid; gap: var(--s3) var(--s4); margin: 0 0 var(--s3); }
@media (min-width: 560px) { .reads { grid-template-columns: 1fr 1fr; } }
.read { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.read-label { color: var(--ink-2); font-size: var(--t-13); font-weight: 600; }
.read-value { font-weight: 700; overflow-wrap: anywhere; }
.row-read { padding: var(--s3); border-radius: var(--r-sm); background: var(--soft); }
.read-head { grid-column: 1 / -1; font-weight: 800; font-size: var(--t-12); color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.thumbs { list-style: none; padding: 0; margin: 0 0 var(--s2); display: flex; gap: var(--s2); overflow-x: auto; }
.thumbs li { flex: none; }
.thumbs img { display: block; width: 112px; height: 84px; object-fit: cover; border-radius: var(--r-sm); background: var(--soft); }
.thumbs a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm); }
.plan-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0 0 var(--s4); padding: var(--s1) var(--s2) var(--s1) var(--s4);
  background: var(--info-bg); border-radius: var(--r); color: var(--ink); }
.plan-line p { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; margin: 0; flex: 1; min-width: 0; line-height: 1.4; padding: 10px 0; }
.plan-line p > .ic { grid-row: 1 / span 2; margin: 1px 0 0; color: var(--info-ink); }
.plan-line p > strong, .plan-line p > .sub { grid-column: 2; }
.plan-line .quiet-link { flex: none; color: var(--link); }
.plan-line.warn { background: var(--warn-bg); }
.plan-line.warn .ic { color: var(--warn-ink); }
.plan-line .sub.clash { display: block; font-weight: 700; color: var(--warn-ink); }
.plan-line .sub.clash a { color: inherit; }
/* The one primary, pinned at the bottom of the screen (above the phone's tab bar). */
.action-bar { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5; margin: var(--s2) calc(-1 * var(--gutter)) 0; padding: var(--s3) var(--gutter);
  background: var(--card); border-top: 1px solid var(--edge); }
.action-bar form { margin: 0; }
.action-bar .btn { width: 100%; margin: 0; }
.action-bar .btn::before { width: 20px; height: 20px; }
#assign::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ic-calendar) center / contain no-repeat; mask: var(--ic-calendar) center / contain no-repeat; }
.action-note { margin: 0; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 960px) {
  .action-bar { bottom: var(--s5); display: flex; justify-content: flex-end; margin: var(--s2) 0 0; padding: 0; background: none; border: 0; pointer-events: none; }
  .action-bar > * { pointer-events: auto; }
  .action-bar .btn { width: auto; min-width: 240px; box-shadow: 0 10px 28px rgba(194, 65, 12, .32); }
  .action-note { padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--edge); }
}
.job-cols { display: grid; gap: 0 var(--s4); }
.job-cols > * { min-width: 0; }
.job-left > .card, .job-right > .card, .job-cols .tracker { margin-bottom: var(--s4); }
@media (min-width: 1100px) { .job-cols { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); align-items: start; } }

.job-history .history { margin: 0; border: 0; box-shadow: none; border-radius: 0; background: none; }
.job-history .history li { padding-left: 0; padding-right: 0; }
.job-history { padding-bottom: var(--s2); }
.job-history details.more { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
.job-history details.more[open] > summary { border-bottom: 0; margin-bottom: 0; }
/* A lead's New is blue, so it never reads as money's green */
.pending .badge, .who-text h1 .badge { background: var(--info-bg); color: var(--info-ink); }
/* A to-do reads the person, then the task, then where and from whom */
.list.todos a > * { order: 2; }
.list.todos a > strong { order: 0; }
.list.todos a > .todo-text { order: 1; font-weight: 600; }
.list.todos a > .sub:not(:last-child) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .contact { margin: 0; }
.card .link { display: inline-flex; align-items: center; min-height: 44px; padding-left: 0; }
@media (max-width: 479px) {
  .contact .btn { flex-direction: column; gap: 3px; min-height: 58px; padding: 6px 4px; font-size: var(--t-13); }
}

/* Assign: big rows to pick a person, then a day box with two quick picks; the one in use is outlined. */
.pick-rows { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.pick { position: relative; cursor: pointer; margin: 0; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick span { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: 0 var(--s4); background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
  font-weight: 700; font-size: var(--t-16); }
.pick span::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--field-line); background: var(--field); }
.pick input:checked + span { border-color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info); }
.pick input:checked + span::before { border-color: var(--info); background: var(--info); box-shadow: inset 0 0 0 4px var(--field); }
.pick input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.clash { color: var(--warn-ink); font-weight: 800; }
.notice.clash { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s2) 0 0; }
.notice.clash p { margin: 0; }
.notice.clash .btn { margin: 0; }
.parts legend { font-weight: 700; font-size: var(--t-14); margin: var(--s3) 0 var(--s2); padding: 0; }
.quick { display: flex; gap: var(--s2); }
.quick .btn { flex: 1; text-decoration: none; }
.quick .btn.on { background: var(--info-bg); border-color: var(--info); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--info); font-weight: 800; }
#when .quiet-link { align-self: flex-start; }

/* ---- Settings: groups of short lists, each row one tap one level down; two columns on a laptop ---- */
.groups { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .groups { grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s5); align-items: start; } }
.group-title { font-size: var(--t-13); font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--s2); }
.logo-now { margin: 0; }
.logo-now img { display: block; max-height: 96px; max-width: 260px; padding: var(--s2) var(--s3); background: #fff; border: 1px solid var(--edge); border-radius: var(--r-sm); }

/* ---- Pages a customer sees without signing in: their business's name and logo on top, one thing to do ---- */
.top { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: calc(env(safe-area-inset-top) + 8px) var(--gutter) 8px; background: var(--card); border-bottom: 1px solid var(--edge); }
.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; font-weight: 800; font-size: var(--t-16); color: var(--ink); }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand img { height: 36px; width: auto; max-width: 150px; object-fit: contain; padding: 3px 6px; border-radius: 8px; background: #fff; }
.brand .avatar { width: 36px; height: 36px; font-size: var(--t-13); }
.done { text-align: center; padding: var(--s8) var(--s5); }
.done-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 0 var(--s4); border-radius: 50%; background: var(--good-bg); color: var(--good-ink); }
.done .done-mark { color: var(--good-ink); }
.done-mark .ic { width: 34px; height: 34px; margin: 0; stroke-width: 2.5; }
.done h1 { margin-bottom: var(--s2); }
.done p { color: var(--ink-2); font-size: var(--t-16); margin: 0; }
.intro { margin: calc(-1 * var(--s2)) 0 var(--s5); color: var(--ink-2); }
main[data-page="intake"] h1, main[data-page="login"] h1 { text-align: left; }
main[data-page="login"] .login-brand { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s6); font-size: var(--t-18); font-weight: 800; }
main[data-page="login"] .login-brand .avatar { width: 44px; height: 44px; border-radius: var(--r); }

/* The printed document (a quote or a bill): white paper with the business's letterhead, on any screen and in print. */
main.paper { max-width: calc(860px + 2 * var(--gutter)); }
.doc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s4); }
.doc-bar .doc-from { margin: 0; font-weight: 700; color: var(--ink-2); font-size: var(--t-15); }
.doc-bar .btn .ic { width: 18px; height: 18px; }
@media (max-width: 560px) { .doc-bar > .no-print { width: 100%; } .doc-bar > .no-print > .btn { flex: 1 1 0; padding: 0 var(--s2); white-space: nowrap; } .doc-bar .btn .ic { display: none; } }
.no-print { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.doc { background: #fff; color: #0f1b2d; font-size: 15px; line-height: 1.45; padding: var(--s6) var(--s5); border-radius: var(--r-lg); border: 1px solid #e3e7ed;
  box-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 12px 36px rgba(15, 27, 45, .10); color-scheme: light; }
@media (min-width: 720px) { .doc { padding: 52px 60px 60px; } }
.doc p { margin: 0; }
.doc h1 { font-size: 30px; margin: 0; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; color: #13294b; }
.doc h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #5b6576; margin: 0 0 6px; font-weight: 800; }
.doc-head { display: flex; justify-content: space-between; gap: var(--s6); padding-bottom: var(--s5); border-bottom: 3px solid #13294b; }
.letterhead { display: flex; gap: var(--s4); align-items: flex-start; min-width: 0; color: #3b4658; }
.letterhead img { max-height: 72px; max-width: 168px; object-fit: contain; }
.doc .biz-name { font-size: 19px; font-weight: 800; color: #0f1b2d; margin-bottom: 2px; }
.doc-title { text-align: right; flex: none; color: #3b4658; }
.doc .doc-number { font-weight: 800; font-size: 16px; color: #0f1b2d; margin: 4px 0 2px; }
.doc .doc-status { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase;
  background: #eef1f5; color: #3b4658; }
.doc .doc-status.good { background: #dcfce7; color: #166534; font-size: 18px; padding: 6px 18px; }
.doc .doc-status.warn { background: #ffedd5; color: #9a3412; }
.parties { display: flex; gap: var(--s6); margin: var(--s6) 0; }
.parties > div { flex: 1; min-width: 0; }
.doc-lines { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
.doc-lines th, .doc-lines td { padding: 11px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3e7ed; }
.doc-lines th { background: #f2f4f7; color: #3b4658; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid #dce1e8; }
.doc-lines th:first-child { border-radius: 8px 0 0 8px; } .doc-lines th:last-child { border-radius: 0 8px 8px 0; }
.doc-lines .num { text-align: right; white-space: nowrap; }
.doc-lines .detail { white-space: pre-wrap; color: #3b4658; }
.doc-lines tfoot td { border-bottom: 0; padding-top: 6px; padding-bottom: 4px; }
.doc-lines tfoot tr:first-child td { border-top: 2px solid #13294b; padding-top: 12px; }
.doc-lines .grand td { font-weight: 800; font-size: 19px; color: #0f1b2d; }
.doc .doc-deposit { text-align: right; font-weight: 700; margin-top: 10px; }
.doc-note { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid #e3e7ed; }
.doc-note + .doc-note { margin-top: var(--s4); }
.doc-save { margin-top: var(--s4); }
/* Batch 8: one address when the work is where it's going, the quote's notes, the signature lines, the footer */
.doc .same-addr { margin-top: 6px; color: #5b6576; font-size: 13px; }
.doc-sign { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid #e3e7ed; }
.doc-sign .sig-lines { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s6); margin-top: 40px; }
.doc-sign .sig { display: flex; flex-direction: column; gap: 6px; }
.doc-sign .sig-line { display: block; border-bottom: 1px solid #3b4658; height: 0; }
.doc-sign .sig-label { color: #5b6576; font-size: 12px; }
.doc-foot { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid #e3e7ed; color: #5b6576; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .doc-sign .sig-lines { grid-template-columns: minmax(0, 1fr); gap: var(--s7); margin-top: 32px; } }
/* On a phone the letterhead stacks and each line reads as a block: the words, then how many, each and the amount. */
@media (max-width: 560px) {
  .doc-head, .parties, .letterhead { flex-direction: column; }
  .doc-head { gap: var(--s4); }
  .parties { gap: var(--s4); }
  .doc-title { text-align: left; }
  .doc { font-size: 14px; }
  .doc-lines, .doc-lines tbody, .doc-lines tfoot { display: block; }
  .doc-lines thead { display: none; }
  .doc-lines tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding: 10px 0; border-bottom: 1px solid #e3e7ed; }
  .doc-lines tbody td { display: block; padding: 0; border: 0; }
  .doc-lines tbody td:first-child { flex: 1 1 100%; margin-bottom: 4px; }
  .doc-lines tbody td.num:empty { display: none; }
  .doc-lines:not(.lump) tbody td:nth-child(2):not(:empty)::after { content: " ×"; }
  .doc-lines:not(.lump) tbody td:nth-child(2), .doc-lines:not(.lump) tbody td:nth-child(3) { color: #3b4658; }
  .doc-lines tbody td:last-child { margin-left: auto; font-weight: 800; }
  .doc-lines tfoot tr { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 0 4px; }
  .doc-lines tfoot tr:first-child { border-top: 2px solid #13294b; margin-top: -1px; padding-top: 12px; }
  .doc-lines tfoot td { display: block; padding: 0; }
  .doc-lines tfoot tr:first-child td { border-top: 0; padding-top: 0; }
}
@page { size: letter; margin: 0.6in; }
@media print {
  html, body { background: #fff; font-size: 12pt; }
  main, main.paper { max-width: none; padding: 0; margin: 0; }
  .no-print, .top, .a2hs, .doc-bar, .rail { display: none !important; }
  .doc { font-size: 11pt; padding: 0; box-shadow: none; border: 0; border-radius: 0; }
}

/* ---- Small joins between the parts above ---- */
h1 + .sub { margin: calc(-1 * var(--s2)) 0 var(--s5); font-size: var(--t-15); }
h1 + .sub:has(+ .sub) { margin-bottom: var(--s1); }
h1 + .sub + .sub { margin: 0 0 var(--s5); font-size: var(--t-15); }
/* A fold inside a card is a plain row, not a card in a card */
.card details.more, .card details.small-form, .panel details.more, .panel details.small-form { margin: var(--s3) calc(-1 * var(--s1)) 0; padding: 0 var(--s1); background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.site-form { margin-bottom: var(--s6); }
.site-form .addr-row { margin-bottom: var(--s1); }
.card.gap, .panel.gap { margin-top: var(--s4); }

/* ---- Customers: one row of chips (filters and the sort) under the search; it scrolls sideways on a phone, with a fade at the
   right edge that says there is more, and wraps on a laptop ---- */
.filters { margin: var(--s3) 0 0; }
.filter-row { display: flex; gap: var(--s2); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
  margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s1); scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.filter-row::-webkit-scrollbar { display: none; }
.fchip { flex: none; position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 var(--s4); border: 1px solid var(--field-line); border-radius: var(--r-chip);
  background: var(--card); color: var(--ink); font-size: var(--t-16); font-weight: 700; text-decoration: none; white-space: nowrap; scroll-snap-align: start; }
.fchip.on { border-color: var(--info); background: var(--info-bg); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--info); font-weight: 800; }
.fchip:focus-visible, .fchip.pick:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
@media (hover: hover) { a.fchip:not(.on):hover { background: var(--hover); } }
.fchip.pick { padding: 0; }
.fchip.pick select { width: auto; field-sizing: content; min-height: 42px; padding: 0 34px 0 var(--s4); border: 0; border-radius: var(--r-chip); background-color: transparent; color: inherit;
  font: inherit; font-size: var(--t-16); font-weight: inherit; background-position: right 12px center; }
.fchip.pick select:focus-visible { outline: none; }
.fchip.sort { background: var(--soft-2); border-color: var(--btn-edge); }
.filters .btn.small[data-filters-go] { flex: none; min-height: 44px; }
@media (min-width: 960px) {
  .filter-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 0; -webkit-mask-image: none; mask-image: none; }
  .filter-row { gap: 6px; }
  .fchip { padding: 0 10px; font-size: var(--t-14); }
  .fchip.pick select { padding: 0 30px 0 10px; font-size: var(--t-14); background-position: right 10px center; }
}
.list-count { margin: var(--s4) 0 var(--s3); color: var(--ink); font-size: var(--t-15); font-weight: 600; }
.list-count strong { font-weight: 800; }
.filters + .list-title { margin-top: var(--s4); }
.sub.extra { margin-top: 2px; font-weight: 600; color: var(--ink-2); }
.sub.extra.late { font-weight: 700; color: var(--warn-ink); }
/* The edit page's Archive fold: a quiet action under the form, aligned with it, never mistaken for a help fold */
details.archive { margin-top: var(--s5); padding: 0 var(--s5); }
details.archive > summary { color: var(--ink-2); }
/* After a job is deleted: the saved band with Undo (and its seconds) at its end, for ten seconds */
.flash.undo { display: flex; align-items: center; gap: var(--s2); min-height: 56px; }
.flash.undo::before { margin: 0; flex: none; }
.flash.undo span { flex: 1; min-width: 0; }
.flash.undo .btn { flex: none; margin: 0 0 0 auto; background: var(--card); }
.flash.undo [data-undo-left] { flex: none; font-weight: 600; color: var(--ink-2); }
/* The Job page's Delete or Cancel fold: last, quiet, under the history, clear of the pinned button */
details.job-end { margin: var(--s4) 0 var(--s5); padding: 0 var(--s4); }
details.job-end > summary { color: var(--ink-2); }
details.job-end > summary .sub { display: block; font-weight: 500; font-size: var(--t-14); }
details.job-end .btn.danger { border-color: var(--bad); width: auto; align-self: flex-start; }
@media (min-width: 960px) { .job-right { padding-bottom: 72px; } }
.action-note { text-wrap: balance; gap: var(--s2); }
/* A void bill: its money reads as history, not as owed */
.lines.void .total strong, .lines.void .line .sub strong { color: var(--ink-2); text-decoration: line-through; }

/* ---- Estimates: every quote in one list (CZ-53). A phone: the customer and amount, then the number, date and state,
   the one action at the end. A laptop: a row per quote in columns, like her QuickBooks list ---- */
.est-segs { margin: 0 0 var(--s3); }
.est-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: var(--s3) 0 0; align-items: end; }
.est-dates .field label { margin: 0; }
.est-dates .btn { grid-column: 1 / -1; }
@media (min-width: 720px) { .est-dates { grid-template-columns: 180px 180px auto; justify-content: start; } .est-dates .btn { grid-column: auto; } }
.list.estimates li.est { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
.list.estimates .est-main { grid-column: 1 / -1; grid-row: 1 / -1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who amt" "num num" "state state"; column-gap: var(--s3); row-gap: 2px; padding-right: var(--s4); }
.list.estimates .est-main::after { content: none; }
.est-who { grid-area: who; min-width: 0; overflow-wrap: anywhere; }
.est-amt { grid-area: amt; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.est-num { grid-area: num; color: var(--ink-2); font-size: var(--t-14); }
.est-date { display: none; }
.est-state { grid-area: state; }
.est-state .badge { margin-top: 2px; }
/* The one action sits in the row's bottom right corner, over the empty side of the state line */
.est-act { grid-column: 2; grid-row: 2; align-self: end; z-index: 1; margin: 0 var(--s4) var(--s3) 0; }
.est-act.btn, .est-act .btn { min-height: 44px; margin: 0; white-space: nowrap; }
.est-num-date { white-space: nowrap; }
@media (max-width: 959px) { .list.estimates li.est:has(.est-act) .est-num, .list.estimates li.est:has(.est-act) .est-state { padding-right: 132px; } }
.list.estimates li.est-head { display: none; }
.badge.violet { background: var(--violet-bg); color: var(--violet-ink); }
.est-amt { font-weight: 700; }
.est-dates { margin-top: var(--s4); }
.est-dates label { font-size: var(--t-13); }
@media (min-width: 960px) { .phone-only { display: none !important; } }
@media (min-width: 960px) {
  .list.estimates li.est { grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto; align-items: center; min-height: 64px; }
  .list.estimates .est-main { grid-column: 1 / -1; grid-row: 1; grid-template-columns: 96px 128px minmax(0, 1fr) 108px; grid-template-areas: "date num who amt" "date num state amt";
    align-items: center; padding-right: 166px; }
  .est-date { display: block; grid-area: date; color: var(--ink-2); font-size: var(--t-14); }
  .est-act { grid-column: 2; grid-row: 1; align-self: center; justify-self: stretch; margin: 0 var(--s4) 0 0; }
  .est-act .btn, .est-act.btn { width: 100%; }
  .list.estimates li.est-head { display: grid; grid-template-columns: 96px 128px minmax(0, 1fr) 108px; column-gap: var(--s3); padding: var(--s2) 166px var(--s2) var(--s4);
    font-size: var(--t-12); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
  .list.estimates li.est-head span:nth-child(4) { text-align: right; }
}
/* The quote page: when the customer opened it */
.viewed { display: flex; align-items: center; gap: 6px; margin: var(--s2) 0 var(--s3); font-size: var(--t-14); font-weight: 700; color: var(--violet-ink); }
.viewed .ic { width: 18px; height: 18px; margin: 0; }
.viewed.quiet { color: var(--ink-2); font-weight: 500; }
.lede { font-size: var(--t-16); margin: 0 0 var(--s4); }
.est-sites { margin: 0 0 var(--s3); }
@media (min-width: 960px) { .rail nav a.n-estimates, .rail nav a.n-revenue, .rail nav a.n-expenses, .rail nav a.n-yard { display: flex; } .est-num-date { display: none; } }
/* $ Revenue (batch 8): the three tabs, the totals of what's listed, a bill's balance and due day */
.rev-tabs { margin: 0 0 var(--s3); }
.rev-tabs .seg { flex: 1 1 auto; }
@media (min-width: 960px) { .rev-tabs .seg { flex: none; } }
.rev-totals { margin-top: var(--s4); }
.rev-totals.one { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
.rev-totals.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .rev-totals.two { max-width: 560px; } }
.rev-totals .late-of { margin: 2px 0 0; font-size: var(--t-13); font-weight: 700; color: var(--warn-ink); }
.est-state .sub { margin-left: 6px; font-size: var(--t-14); }
.est-state .sub.late-due { color: var(--warn-ink); font-weight: 700; }
.est-num .badge.mini { margin-left: 4px; }
/* Invoices and Payments rows have no action column: the row uses the whole width */
@media (min-width: 960px) {
  .list.rev-list li.est { grid-template-columns: minmax(0, 1fr); }
  .list.rev-list .est-main { grid-template-columns: 110px 150px minmax(0, 1fr) 128px; padding-right: var(--s5); }
  .list.rev-list li.est-head { grid-template-columns: 110px 150px minmax(0, 1fr) 128px; padding-right: var(--s5); }
}
/* Home's waiting rows: whether the customer has viewed the quote, on a line of its own */
.sub.seen { white-space: nowrap; }
.sub.seen.yes { color: var(--violet-ink); font-weight: 700; }

/* ---- Quoting from the price list (CZ-55) ---- */
/* The quote's Add buttons: one per shelf with items, then the free-text line; they wrap two to a row on a phone. */
.add-row.adds { flex-wrap: wrap; }
.add-btn { flex: 1 1 calc(50% - var(--s2)); justify-content: flex-start; text-align: left; min-height: 52px; padding: 0 var(--s3) 0 var(--s4); }
.add-btn .ic { width: 20px; height: 20px; color: var(--navy-ink); flex: none; }
.add-btn.quiet-add { justify-content: center; }
@media (min-width: 720px) { .add-btn { flex: 0 1 auto; } }
/* What the site suggests: a card at the top of the quote's lines */
.suggest { border-color: var(--info-bg); }
.suggest h2 { display: flex; align-items: center; gap: var(--s2); }
.sg-lines { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.sg-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px var(--s3); padding: var(--s3) 0; }
.sg-name { display: contents; }
.sg-name > strong { grid-column: 1; grid-row: 1; }
.sg-name > .sub { grid-column: 1; grid-row: 2; }
.sg-name > select { grid-column: 1 / -1; grid-row: 1; }
.sg-amt { grid-column: 2; grid-row: 1; font-size: var(--t-15); }
.sg-lines li:has(select) .sg-amt { grid-row: 2; }
.sg-name strong { font-size: var(--t-15); overflow-wrap: anywhere; }
.sg-name select { font-weight: 700; font-size: var(--t-15); }
.sg-amt { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 2px; }
.btn.strong { border-color: var(--navy-ink); color: var(--navy-ink); font-weight: 800; }
.btn.strong .ic { width: 20px; height: 20px; }
.sg-missing-head { margin: var(--s4) 0 var(--s1); font-weight: 700; font-size: var(--t-14); color: var(--ink-2); }
.sg-missing { list-style: none; margin: 0; padding: 0; }
.sg-missing li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s1) 0; }
.sg-missing li > span { min-width: 0; overflow-wrap: anywhere; }
.suggest .hint { margin-top: var(--s2); }
/* Show cost: the office's look at what's left, folded away under the total */
details.cost { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 0 var(--s4); background: transparent; }
details.cost > summary { color: var(--ink-2); font-size: var(--t-14); }
details.cost[open] > summary { color: var(--ink); }
.cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s2) 0; }
.cost-grid div { background: var(--soft); border-radius: var(--r-sm); padding: var(--s3); min-width: 0; }
.cost-grid dt { font-size: var(--t-13); color: var(--ink-2); font-weight: 700; }
.cost-grid dd { margin: 2px 0 0; font-weight: 800; font-size: var(--t-16); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-grid dd span { display: block; font-size: var(--t-13); color: var(--good-ink); }
.cost-grid .left { background: var(--good-bg); }
.cost-grid .left dt, .cost-grid .left dd { color: var(--good-ink); }
.cost-grid .left.under { background: var(--bad-bg); }
.cost-grid .left.under dt, .cost-grid .left.under dd, .cost-grid .left.under dd span { color: var(--bad-ink); }
details.cost .hint + .hint { margin-top: var(--s1); }
@media (max-width: 374px) { .cost-grid { grid-template-columns: 1fr; } }
/* The picker: the shelf's items, one big row each; type to find; a quantity with its unit, then Add */
main[data-page="quote_add"] .filters { margin: var(--s3) 0; }
.shelf-chips .filter-row { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.pick-search { margin: 0 0 var(--s3); }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pick-list > li { min-width: 0; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pick-item { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); margin: 0; }
.pick-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); margin: 0; }
.pick-name strong { font-size: var(--t-16); overflow-wrap: anywhere; }
.pick-name .sub { flex-basis: 100%; }
.pick-do { display: flex; align-items: center; gap: var(--s2); }
.stepper { display: flex; align-items: center; gap: var(--s1); flex: 1; min-width: 0; }
.stepper input { width: 76px; flex: 0 1 auto; min-width: 56px; text-align: center; font-size: var(--t-18); font-weight: 800; padding: 10px var(--s2); }
.step { flex: none; width: var(--tap); height: var(--tap); border-radius: var(--r); border: 1px solid var(--btn-edge); background: var(--soft-2); color: var(--ink);
  font: inherit; font-size: var(--t-22); font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.step:active { transform: translateY(1px); }
@media (hover: hover) { .step:hover { background: var(--hover); border-color: var(--faint); } }
.step-unit { color: var(--ink-2); font-weight: 700; padding-left: var(--s1); white-space: nowrap; }
.btn.pick-add { flex: none; min-width: 80px; padding: 0 var(--s4); border-color: var(--navy-ink); color: var(--navy-ink); font-weight: 800; }
@media (min-width: 720px) {
  .stepper input { width: 96px; }
  .pick-item { flex-direction: row; align-items: center; justify-content: space-between; }
  .pick-name { flex: 1; min-width: 0; }
  .pick-do { flex: none; }
  .stepper { flex: none; }
}
/* The materials list: the amount in a column, then the thing; the order to paste below */
.mat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.mat-head h2 { margin: 0; overflow-wrap: anywhere; }
.mat-head .btn.primary { margin: 0; }
.mat-card > .hint { margin: var(--s2) 0 var(--s2); }
.mat-lines { list-style: none; margin: 0; padding: 0; }
.mat-lines li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s3) 0; }
@media (min-width: 720px) { .mat-lines li { grid-template-columns: 104px minmax(0, 1fr); } }
.mat-lines li + li { border-top: 1px solid var(--line); }
.mat-qty { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mat-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mat-card details.cost { margin-top: var(--s2); padding: 0; }
.cost-lines { list-style: none; margin: 0; padding: 0; }
.cost-lines li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; font-size: var(--t-14); }
.cost-lines li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.mat-card details.cost .total { padding: var(--s2) 0; min-height: 0; }
.mat-card details.cost .total strong { font-size: var(--t-22); }
details.order-text { margin: var(--s2) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 0; background: transparent; }
details.order-text > summary { color: var(--ink-2); font-size: var(--t-14); }
details.order-text textarea { font-variant-numeric: tabular-nums; min-height: 160px; background: var(--soft); }
/* The price list: a shelf a section, its count beside the name; the add form folded at the foot */
.price-find { margin: var(--s3) 0 var(--s2); }
.shelf .list-title { display: flex; align-items: baseline; gap: var(--s2); }
.shelf .count { color: var(--ink-2); font-size: var(--t-14); font-weight: 700; }
details.add-item { margin: var(--s5) 0 var(--s4); }
details.add-item > summary { font-size: var(--t-16); }
.price-boxes { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 420px) { .price-boxes { grid-template-columns: 1fr 1fr; } .price-boxes .field:first-child { grid-column: 1 / -1; } }

/* ---- Yard stock (CZ-56) ---- */
.yard-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.yard-actions .btn { flex: 1 1 auto; }
.yard-list a { gap: 4px; }
.yard-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.yard-nums { display: flex; flex-direction: column; gap: 0; }
.yard-big { font-size: var(--t-18); font-weight: 800; font-variant-numeric: tabular-nums; }
.low-word { color: var(--warn-ink); }
.count-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 72px; }
.count-list label { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.count-list label strong { font-size: var(--t-15); }
.count-box { display: flex; align-items: center; gap: 6px; }
.count-box input { width: 92px; text-align: right; font-size: var(--t-18); font-weight: 800; font-variant-numeric: tabular-nums; padding: 10px var(--s3); }
.count-box .unit { min-width: 34px; color: var(--ink-2); font-weight: 700; font-size: var(--t-14); }
.card .count-list { border: 0; box-shadow: none; border-radius: 0; margin: 0 calc(-1 * var(--s4)); }
.count-list li.is-short { background: var(--bad-bg); }
.short-note { color: var(--bad-ink); font-size: var(--t-13); font-weight: 700; }
.paste-order textarea { margin-top: var(--s2); }
.paste-order .btn { margin-top: var(--s2); }
.quiet-list { color: var(--ink-2); }
.yard-card .glance { margin-bottom: var(--s2); }
.moves .line { display: block; }
.done-line .ic { color: var(--good-ink); }
@media (min-width: 720px) { .count-box input { width: 120px; } .card .count-list { margin: 0 calc(-1 * var(--s5)); } .card .count-list li { padding: var(--s3) var(--s5); } }
.nw { white-space: nowrap; }
.yard-fields { border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--soft); padding: var(--s2) var(--s4) var(--s4); margin: var(--s3) 0; min-width: 0; }
.yard-fields .qty-row { gap: var(--s3); }
.yard-fields .hint { margin-top: var(--s2); }
.card .moves { border: 0; box-shadow: none; border-radius: 0; margin: 0 calc(-1 * var(--s4)); }
.moves .line .sub { display: block; }
.card > .hint + .count-list, .card > .hint + .list { margin-top: var(--s3); }
.done-ask { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); }
.done-ask p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.done-ask .btn { width: 100%; }
@media (min-width: 720px) { .done-ask { flex-direction: row; align-items: center; justify-content: space-between; } .done-ask .btn { width: auto; } }

/* ---- Customer tags (CZ-51): the business's own words, a soft pill on the file and the list ---- */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 2px; margin: 0; border-radius: var(--r-chip); background: var(--violet-bg); color: var(--violet-ink); }
.tag-chip a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s1) 0 var(--s4); color: inherit; font-weight: 700; font-size: var(--t-15); text-decoration: none; }
.tag-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; border: 0; border-left: 1px solid rgba(107, 33, 168, .18);
  border-radius: 0 var(--r-chip) var(--r-chip) 0; background: transparent; color: var(--violet-ink); font: inherit; font-size: var(--t-22); font-weight: 800; line-height: 1; cursor: pointer; }
@media (hover: hover) { .tag-x:hover { background: rgba(107, 33, 168, .10); } }
details.tag-add { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
details.tag-add > summary { min-height: 44px; padding: 0 var(--s4); border: 1px dashed var(--btn-edge); border-radius: var(--r-chip); font-size: var(--t-15); color: var(--link); display: inline-flex; }
details.tag-add > summary::after { content: none; }
details.tag-add[open] { flex-basis: 100%; padding: 0; }
details.tag-add[open] > summary { border-bottom: 1px dashed var(--btn-edge); margin-bottom: 0; }
.tag-form { display: flex; gap: var(--s2); align-items: center; margin: var(--s3) 0 0; }
.tag-form input { flex: 1; min-width: 0; }
.tag-suggests { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
.tag-suggest { min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--btn-edge); border-radius: var(--r-chip); background: var(--soft-2); color: var(--ink); font: inherit; font-size: var(--t-14); font-weight: 700; cursor: pointer; }
.row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag-pill { display: inline-flex; padding: 2px 8px; border-radius: var(--r-pill); background: var(--violet-bg); color: var(--violet-ink); font-size: var(--t-12); font-weight: 700; }
.tag-pill.more { background: var(--plain-bg); color: var(--plain-ink); }
.tag-list li { display: block; padding: var(--s3) var(--s4) var(--s2); min-height: 0; }
.tag-head { margin: 0; font-size: var(--t-16); }
.list .tag-head a { display: inline; min-height: 0; padding: 0; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px; }
.list .tag-head a::after { content: none; }
.tag-actions { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.tag-list .tag-edit { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.tag-list .tag-edit[open] { flex-basis: 100%; }
.tag-list .tag-edit > summary { font-size: var(--t-14); min-height: 44px; }
.tag-list .tag-edit > summary::after { margin-left: 6px; }
.tag-delete > summary { color: var(--bad); }
.tag-head { display: flex; flex-direction: column; gap: 2px; }

/* ---- People and their roles (CZ-38) ---- */
.people-list li { flex-wrap: wrap; }
.role-form { display: flex; align-items: center; gap: var(--s2); margin: 0; flex: 1 1 260px; max-width: 420px; }
.role-form select { min-width: 0; font-size: var(--t-15); }

/* ---- $ Expenses (batch 8): filters, the twelve months, the breakdowns, the list ---- */
.exp-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); margin: var(--s3) 0 0; }
.exp-picks .field label { margin: 0; font-size: var(--t-13); }
@media (min-width: 720px) { .exp-picks { grid-template-columns: repeat(3, minmax(0, 220px)); } }
.exp-chart { margin: var(--s4) 0; padding: var(--s4) var(--s4) var(--s3); }
.exp-chart h2 { margin: 0 0 var(--s3); font-size: var(--t-15); }
.exp-chart .bars { display: block; width: 100%; height: 140px; overflow: visible; }
.exp-chart .bar { fill: var(--link); }
.exp-chart .bar.on { fill: var(--accent); }
.exp-chart a:focus-visible .bar, .exp-chart .bar:hover { opacity: .78; }
.exp-chart .base { stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bar-tops, .bar-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.bar-tops { min-height: 20px; font-size: var(--t-13); font-weight: 800; color: var(--ink); white-space: nowrap; }
.bar-labels { margin-top: 6px; font-size: var(--t-12); color: var(--ink-2); }
.bar-labels .on { color: var(--accent-text); font-weight: 800; }
.exp-breaks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin: 0 0 var(--s4); }
@media (min-width: 1100px) { .exp-breaks { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.exp-break { padding: 0 var(--s4); }
.exp-break > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none; }
.exp-break > summary::-webkit-details-marker { display: none; }
.exp-break > summary::after { content: ""; width: 18px; height: 18px; background: var(--faint); -webkit-mask: var(--ic-down) center / contain no-repeat; mask: var(--ic-down) center / contain no-repeat; }
.exp-break[open] > summary::after { transform: rotate(180deg); }
.exp-break > summary h2 { margin: 0; font-size: var(--t-15); }
.exp-break[open] { padding-bottom: var(--s2); }
.exp-more { margin-top: var(--s3); }
.exp-dates { border: 0; padding: 0; margin: var(--s2) 0 0; }
.exp-dates legend { padding: 0; font-size: var(--t-13); font-weight: 700; color: var(--ink-2); }
.exp-break .list { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.list.plain.shares li { display: block; min-height: 0; padding: 0; }
.list.plain.shares li a::after { content: none; }
.list.plain.shares li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "sub sub"; column-gap: var(--s3); padding: var(--s2) 0; min-height: 44px;
  padding: var(--s2) 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.shares li:first-child a { border-top: 0; }
.share-name { grid-area: name; min-width: 0; font-weight: 700; overflow-wrap: break-word; }
.share-amt { grid-area: amt; font-weight: 800; font-variant-numeric: tabular-nums; }
.share-sub { grid-area: sub; font-size: var(--t-13); color: var(--ink-2); }
@media (hover: hover) { .shares li a:hover .share-name { text-decoration: underline; } }
.exp-list .est-main { cursor: default; }
.est-amt.credit { color: var(--good-ink); }
.empty-card { margin-top: var(--s4); }
.list.exp-list .est-main { padding: var(--s3) var(--s4); min-height: 64px; }
.exp-list .est-state .sub { margin-left: 0; }

/* Batch 8 critic fixes: the History's rows on a phone keep their words on few lines; the import preview's rows line up with its folds. */
@media (max-width: 479px) { .ledger .list.jobs a { grid-template-columns: minmax(0, 1fr) auto; } .ledger .list.jobs a > .ic { display: none; } .ledger .list.jobs a.pay-row { padding-left: var(--s6); } }
.hist-card .list.plain li { padding-left: 0; padding-right: 0; }
.hist-card { padding-top: var(--s4); padding-bottom: var(--s2); }
.hist-lede { font-size: var(--t-16); margin: 0 0 var(--s3); }

/* ==== Batch 9: the office reads like a business tool (2026-10-17) ====
   The founder: "everything requires scrolling forever. the info can be a little more dense, and more professional
   appearing the so rounded off and spread out." Every rule here is scoped to .signed-in, the shell around the office's
   own screens, so what a customer sees (/i/, /v/, the print view) and the PDFs stay exactly as they were.
   Tokens first: square corners (4 to 6 px, pills 4 px), a tighter rhythm, a compact type scale (14 px body on a laptop),
   wider pages. Then, on a laptop (900 px and up), the lists become tables: one line a record, sticky column heads, money
   right-aligned in tabular figures, the status pill in a column of its own, the QuickBooks tag small and quiet, every
   other row tinted; the record pages go two columns; the filters sit on one line. A phone keeps compact rows, and every
   target stays 44 px. A touch screen 900 px wide or more keeps 44 px targets too (pointer: coarse). */
.signed-in {
  --r-xl: 6px; --r-lg: 6px; --r-md: 6px; --r: 5px; --r-sm: 4px; --r-xs: 4px; --r-pill: 4px; --r-chip: 4px;
  --shadow: none;
  --tap: 44px;
  --s3: 10px; --s4: 12px; --s5: 14px; --s6: 16px; --s7: 20px; --s8: 24px; --s10: 28px;
  --t-13: 12px; --t-14: 13px; --t-18: 17px; --t-22: 20px; --t-24: 22px; --t-30: 24px; --t-40: 32px;
  font-size: var(--t-15); line-height: 1.38;
}
@media (min-width: 900px) {
  .signed-in {
    --tap: 34px;
    --s2: 6px; --s3: 8px; --s4: 10px; --s5: 12px; --s6: 14px; --s7: 16px; --s8: 18px; --s10: 24px;
    --t-13: 12px; --t-14: 13px; --t-15: 14px; --t-16: 14px; --t-18: 15px; --t-22: 18px; --t-24: 20px; --t-30: 22px; --t-40: 26px;
    --page-w: 1240px; --mid-w: 1240px; --read-w: 1120px; --form-w: 720px;
    --gutter: 24px; --rail-w: 216px;
    font-size: 14px; line-height: 1.38;
  }
}
@media (min-width: 900px) and (pointer: coarse) { .signed-in { --tap: 44px; } }

/* The side menu: narrower, quieter rows. */
@media (min-width: 960px) {
  .signed-in .rail { padding: 14px 10px; gap: 2px; }
  .signed-in .menu { margin-bottom: 8px; }
  .signed-in .menu > summary { min-height: 40px; padding: 4px 6px; gap: 8px; font-size: 14px; }
  .signed-in .rail .menu .avatar { width: 30px; height: 30px; font-size: 12px; }
  .signed-in .rail nav { gap: 2px; }
  .signed-in .rail nav a, .signed-in .rail-settings { min-height: var(--tap); padding: 0 10px; gap: 10px; font-size: 14px; }
  .signed-in .rail nav a::before, .signed-in .rail-settings::before { width: 18px; height: 18px; }
}

/* Type, buttons, boxes */
.signed-in h2 { letter-spacing: 0; }
.signed-in .btn.big { min-height: 48px; }
.signed-in .search::before { top: calc(50% - 9px); }
.signed-in .badge { padding: 0 6px; font-size: 11.5px; font-weight: 700; line-height: 19px; }
.signed-in .badge.mini { padding: 0 5px; font-size: 11px; line-height: 17px; }
.signed-in .badge.src { font-weight: 600; box-shadow: inset 0 0 0 1px var(--btn-edge); }
.signed-in .seg { padding: 2px; }
.signed-in .seg .btn.on { box-shadow: 0 0 0 1px var(--edge); }
.signed-in .chip-ic { width: 32px; height: 32px; margin-top: -16px; left: 12px; }
.signed-in .chip-ic .ic { width: 18px; height: 18px; }
.signed-in .list.chips-left a, .signed-in .list.chips-left .cell { padding-left: 56px; }
.signed-in .card .list.chips-left a { padding-left: 44px; }
.signed-in .card .chip-ic { left: 0; }
.signed-in .list a, .signed-in .list .cell, .signed-in .list.plain li { min-height: 48px; }
.signed-in .list a { gap: 1px; padding: 6px 36px 6px var(--s4); line-height: 1.3; }
.signed-in .list .cell, .signed-in .list.plain li { padding-top: 6px; padding-bottom: 6px; }
.signed-in .card .list a { min-height: 46px; padding-left: 0; padding-right: 26px; }
.signed-in .list a::after { right: 12px; }
.signed-in .card .list a::after { right: 0; }
.signed-in .avatar { width: 36px; height: 36px; font-size: 13px; }
.signed-in .who-avatar { width: 48px; height: 48px; font-size: var(--t-18); }
.signed-in .strip li > * { height: 52px; }
.signed-in .hero { height: 180px; }
.signed-in .ledger-totals dd { font-size: 18px; overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 479px) { .signed-in .ledger-totals { gap: 6px; } .signed-in .ledger-totals div { padding: 6px 8px; } .signed-in .ledger-totals dd { font-size: 15px; } }
@media (min-width: 900px) {
  .signed-in .btn { padding: 0 12px; gap: 6px; font-weight: 600; }
  .signed-in .btn.primary { font-weight: 700; }
  .signed-in .btn.primary, .signed-in .btn.wide { min-width: 120px; }
  .signed-in .btn.big { min-height: calc(var(--tap) + 2px); font-size: var(--t-15); }
  .signed-in .btn.small { min-height: calc(var(--tap) - 4px); padding: 0 10px; font-size: 13px; }
  .signed-in .btn .ic { width: 16px; height: 16px; }
  .signed-in .link, .signed-in .card .link { min-height: calc(var(--tap) - 4px); }
  .signed-in .back { min-height: calc(var(--tap) - 6px); font-size: 13px; }
  .signed-in input, .signed-in select, .signed-in textarea { padding: 6px 10px; }
  .signed-in select { padding-right: 32px; background-position: right 10px center; }
  .signed-in textarea { min-height: 64px; }
  .signed-in .line textarea { min-height: 64px; }
  .signed-in label { font-size: 13px; }
  .signed-in .search input { padding-left: 32px; }
  .signed-in .search::before { left: 10px; top: calc(50% - 8px); width: 16px; height: 16px; }
  .signed-in label.check { font-size: 14px; }
  .signed-in label.check input { width: 18px; height: 18px; }
  .signed-in input[type="file"] { font-size: 13px; }
  .signed-in input[type="file"]::file-selector-button { min-height: 28px; }
  .signed-in .seg .btn { min-height: calc(var(--tap) - 6px); min-width: 0; padding: 0 12px; font-size: 13px; }
  .signed-in .fchip { min-height: calc(var(--tap) - 6px); padding: 0 10px; font-size: 13px; font-weight: 600; }
  .signed-in .fchip.on { font-weight: 700; }
  .signed-in .fchip.pick { padding: 0; }
  .signed-in .fchip.pick select { min-height: calc(var(--tap) - 8px); padding: 0 28px 0 10px; font-size: 13px; }
  .signed-in .chip span { min-height: calc(var(--tap) - 4px); padding: 0 10px; font-size: 13px; }
  .signed-in .chip .ic { width: 16px; height: 16px; }
  .signed-in .tag-chip a, .signed-in details.tag-add > summary, .signed-in .tag-suggest { min-height: calc(var(--tap) - 6px); font-size: 13px; }
  .signed-in .tag-x { width: calc(var(--tap) - 6px); height: calc(var(--tap) - 6px); font-size: 18px; }
  .signed-in .list a, .signed-in .list .cell, .signed-in .list.plain li, .signed-in .card .list a { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .signed-in .list a { padding-right: 32px; }
  .signed-in .card .list a { padding-right: 24px; }
  .signed-in .list a::after { right: 10px; width: 16px; height: 16px; margin-top: -8px; }
  .signed-in .card .list a::after { right: 0; }
  .signed-in .list a strong { font-size: var(--t-15); font-weight: 600; }
  .signed-in .chip-ic { width: 26px; height: 26px; margin-top: -13px; }
  .signed-in .chip-ic .ic { width: 15px; height: 15px; }
  .signed-in .chip-ic.avatar-chip { font-size: 10.5px; }
  .signed-in .list.chips-left a, .signed-in .list.chips-left .cell { padding-left: 48px; }
  .signed-in .card .list.chips-left a { padding-left: 36px; }
  .signed-in details > summary { min-height: var(--tap); }
  .signed-in .avatar { width: 32px; height: 32px; font-size: 12px; }
  .signed-in .who-avatar { width: 40px; height: 40px; font-size: 14px; }
  .signed-in .details div { padding: 6px 0; gap: 12px; }
  .signed-in .details dt { font-size: 13px; }
  .signed-in .a2hs { margin-top: var(--s6); }
  .signed-in .sticky-save { padding-top: 8px; padding-bottom: 8px; }
}

/* The title row: what it is, the Revenue tabs beside it on a laptop, its one action at the right. */
.signed-in .page-head > .head-text { order: 0; }
.signed-in .page-head > .page-actions { order: 1; }
.signed-in .page-head > .rev-tabs { order: 2; flex: 1 1 100%; margin: 0; }
@media (min-width: 900px) {
  .signed-in .page-head { align-items: center; justify-content: flex-start; column-gap: 20px; }
  .signed-in .page-head > .head-text { flex: 0 1 auto; }
  .signed-in .page-head > .rev-tabs { order: 1; flex: 0 1 auto; }
  .signed-in .page-head > .page-actions { order: 2; margin-left: auto; }
}

/* Stat tiles: one compact row of small tiles, the label over the number. */
.signed-in .ledger-totals div { padding: 8px 10px; }
@media (min-width: 900px) {
  .signed-in .ledger-totals { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: 0 0 var(--s3); }
  .signed-in .ledger-totals div { flex: 0 1 184px; padding: 6px 12px; }
  .signed-in .ledger-totals dt { font-size: 12px; font-weight: 600; }
  .signed-in .ledger-totals dd { margin: 0; font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; }
  .signed-in .rev-totals { margin-top: 0; }
  .signed-in .rev-totals .late-of { margin: 0; font-size: 12px; }
  .signed-in .list-count { margin: var(--s3) 0 var(--s2); font-size: 13px; }
}

/* The filters on one line: the chips, then the dates (the script sends them on a change; without it, Show does). */
@media (min-width: 900px) {
  .signed-in .filters.est-filters, .signed-in .filters.exp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 var(--s4); }
  .signed-in .filter-row { flex-wrap: wrap; gap: 6px; overflow: visible; margin: 0; padding: 2px 0 0; -webkit-mask-image: none; mask-image: none; }
  .signed-in .est-filters .filter-row, .signed-in .exp-filters .filter-row { flex: 0 1 auto; padding: 0; }
  .signed-in .est-filters .est-dates { display: flex; align-items: center; gap: 6px; margin: 0; }
  .signed-in .est-dates .field { flex-direction: row; align-items: center; gap: 6px; }
  .signed-in .est-dates .field label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  .signed-in .est-dates input[type="date"] { width: 150px; min-height: calc(var(--tap) - 4px); padding: 3px 8px; }
  .signed-in .est-dates .btn { min-height: calc(var(--tap) - 4px); }
  .signed-in .exp-filters .exp-more { flex: 0 1 auto; margin: 0; }
  .signed-in .exp-filters .exp-more[open] { flex-basis: 100%; }
  .signed-in .exp-dates { margin-top: var(--s2); }
  .signed-in .list-tools { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 var(--s3); }
  .signed-in .list-tools > .search { flex: 0 1 280px; }
  .signed-in .list-tools > .filters { flex: 1 1 360px; margin: 0; }
  .signed-in .list-tools .search .btn { display: none; }
}

/* ---- The lists as tables on a laptop ---- */
@media (min-width: 900px) {
  .signed-in .list.estimates, .signed-in main[data-page="customers"] .list.chips-left, .signed-in .list.jobs-all, .signed-in .list.price-rows,
  .signed-in .ledger .list.jobs { overflow: clip; }
  /* The column heads: they stay at the top while the rows scroll under them. */
  .signed-in .list.estimates li.est-head, .signed-in .list-head { position: sticky; top: 0; z-index: 3; display: grid; align-items: center; column-gap: 12px;
    min-height: 30px; padding: 0 12px; background: var(--th); border-bottom: 1px solid var(--edge); color: var(--ink-2);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  .signed-in .list.estimates li.est-head + li, .signed-in .list-head + li { border-top: 0; }
  .signed-in .list-head > span, .signed-in .list.estimates li.est-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .signed-in .list-head > .h-amt, .signed-in .list.estimates li.est-head > .h-amt, .signed-in .list.estimates li.est-head > .h-bal, .signed-in .list-head > .h-money, .signed-in .list-head > .h-price,
  .signed-in .list-head > .h-cost { text-align: right; }
  /* Hairlines between the rows; the row under the pointer is tinted and marked at its left edge, its name underlined. */
  .signed-in .list.estimates a.est-main:hover, .signed-in main[data-page="customers"] .list.chips-left a:hover, .signed-in .list.jobs-all a:hover,
  .signed-in .list.price-rows a:hover, .signed-in .ledger .list.jobs li.job > a:hover { background: var(--hover); box-shadow: inset 3px 0 0 var(--link); }
  .signed-in .list.estimates a.est-main:hover .est-who, .signed-in main[data-page="customers"] .list.chips-left a:hover .row-top > strong,
  .signed-in .list.jobs-all a:hover .job-top > strong, .signed-in .list.price-rows a:hover > strong, .signed-in .ledger .list.jobs li.job > a:hover > strong {
    text-decoration: underline; text-underline-offset: 3px; }
  .signed-in .list.estimates a.est-main::after, .signed-in main[data-page="customers"] .list.chips-left a::after, .signed-in .list.jobs-all a::after,
  .signed-in .list.price-rows a::after, .signed-in .ledger .list.jobs a::after { content: none; }

  /* Estimates, Invoices, Payments, Expenses: the cells name their columns. */
  .signed-in .list.estimates li.est { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-items: center; min-height: 0; }
  .signed-in .list.estimates .est-main { grid-column: 1; grid-row: 1; display: grid; align-items: center; column-gap: 12px; row-gap: 0; min-height: 34px; padding: 5px 12px; }
  .signed-in .list.estimates .est-state { display: contents; }
  .signed-in .list.estimates .est-num-date { display: none; }
  .signed-in .list.estimates .est-date, .signed-in .h-date { grid-area: date; }
  .signed-in .list.estimates .est-num, .signed-in .h-num { grid-area: num; }
  .signed-in .list.estimates .est-who, .signed-in .h-who { grid-area: who; }
  .signed-in .list.estimates .est-amt, .signed-in .est-head .h-amt { grid-area: amt; }
  .signed-in .list.estimates .est-state > .badge:not(.src), .signed-in .est-head .h-pill { grid-area: pill; }
  .signed-in .list.estimates .est-state > .sub, .signed-in .est-head .h-detail { grid-area: detail; }
  .signed-in .list.estimates .est-state > .badge.src, .signed-in .est-head .h-src { grid-area: src; }
  .signed-in .list.pay-list .est-state > .badge.src { grid-area: detail; }
  .signed-in .list.estimates .est-date { display: block; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
  .signed-in .list.estimates .est-num { color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signed-in .list.estimates .est-who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signed-in .list.estimates .est-amt { text-align: right; font-weight: 700; white-space: nowrap; }
  .signed-in .list.estimates .est-state > .badge { justify-self: start; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; }
  .signed-in .list.estimates .est-state > .sub { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signed-in .list.est-list .est-main, .signed-in .list.est-list li.est-head { grid-template-columns: 84px 120px minmax(0, 1fr) 132px 84px 104px; grid-template-areas: "date num who pill src amt"; }
  .signed-in .list.inv-list .est-main, .signed-in .list.inv-list li.est-head { grid-template-columns: 80px 72px minmax(0, 1fr) 88px 60px 92px 80px 96px; grid-template-areas: "date num who pill due bal src amt"; }
  .signed-in .list.inv-list .est-state > .sub.owed { display: contents; }
  .signed-in .list.inv-list .owed-bal, .signed-in .est-head .h-bal { grid-area: bal; text-align: right; }
  .signed-in .list.inv-list .owed-due, .signed-in .est-head .h-due { grid-area: due; }
  .signed-in .list.inv-list .owed-bal, .signed-in .list.inv-list .owed-due { font-size: 13px; white-space: nowrap; }
  .signed-in .list.inv-list .owed-bal { font-weight: 600; }
  .signed-in .list.inv-list .owed-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .signed-in .list.pay-list .est-main, .signed-in .list.pay-list li.est-head { grid-template-columns: 84px 76px minmax(0, 1fr) minmax(0, 1fr) 104px; grid-template-areas: "date num who detail amt"; }
  .signed-in .list.exp-list .est-main, .signed-in .list.exp-list li.est-head { grid-template-columns: 84px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 100px; grid-template-areas: "date who num detail amt"; }
  .signed-in .list.estimates li.est-head { padding: 0 12px; }
  /* Estimates keep their one action (Send, Make a bill) in a narrow last column. */
  .signed-in .list.est-list li.est { grid-template-columns: minmax(0, 1fr) 108px; }
  .signed-in .list.est-list li.est-head { padding-right: 120px; }
  .signed-in .list.est-list .est-act { grid-column: 2; grid-row: 1; align-self: center; justify-self: stretch; margin: 0 12px 0 0; }
  /* The phone's room for the action button (an older rule up to 959 px) has no place in a table row. */
  .signed-in .list.estimates li.est:has(.est-act) .est-num, .signed-in .list.estimates li.est:has(.est-act) .est-state { padding-right: 0; }
  .signed-in .list.est-list .est-act .btn, .signed-in .list.est-list .est-act.btn { width: 100%; min-height: calc(var(--tap) - 8px); padding: 0 8px; font-size: 12.5px; }

  /* Customers */
  .signed-in .cust-head, .signed-in main[data-page="customers"] .list.chips-left a {
    grid-template-columns: minmax(0, 1.3fr) 112px 120px minmax(0, 2fr) minmax(0, .9fr) minmax(0, 1fr); grid-template-areas: "name pill phone addr tags extra"; }
  .signed-in .cust-head { padding-left: 48px; }
  .signed-in .cust-head .h-name { grid-area: name; } .signed-in .cust-head .h-pill { grid-area: pill; } .signed-in .cust-head .h-phone { grid-area: phone; }
  .signed-in .cust-head .h-addr { grid-area: addr; } .signed-in .cust-head .h-tags { grid-area: tags; } .signed-in .cust-head .h-extra { grid-area: extra; }
  .signed-in main[data-page="customers"] .list.chips-left a { display: grid; align-items: center; column-gap: 12px; row-gap: 0; min-height: 36px; padding: 5px 12px 5px 48px; }
  .signed-in main[data-page="customers"] .row-top, .signed-in main[data-page="customers"] .row-contact { display: contents; }
  .signed-in main[data-page="customers"] .row-top > strong { grid-area: name; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signed-in main[data-page="customers"] .row-top > .badge { grid-area: pill; justify-self: start; }
  .signed-in main[data-page="customers"] .row-phone { grid-area: phone; white-space: nowrap; }
  .signed-in main[data-page="customers"] .row-addr { grid-area: addr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signed-in main[data-page="customers"] .row-phone, .signed-in main[data-page="customers"] .row-addr { color: var(--ink-2); font-size: 13px; }
  .signed-in main[data-page="customers"] .row-addr::before { content: none; }
  .signed-in main[data-page="customers"] .row-tags { grid-area: tags; flex-wrap: nowrap; overflow: hidden; margin: 0; }
  .signed-in main[data-page="customers"] .sub.extra { grid-area: extra; margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Jobs (and the calendar's day lists) */
  .signed-in .jobs-head, .signed-in .list.jobs-all a {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr) 120px minmax(0, 1.1fr) 120px; grid-template-areas: "who addr num pill plan money"; }
  .signed-in .jobs-head .h-who { grid-area: who; } .signed-in .jobs-head .h-addr { grid-area: addr; } .signed-in .jobs-head .h-num { grid-area: num; }
  .signed-in .jobs-head .h-pill { grid-area: pill; } .signed-in .jobs-head .h-plan { grid-area: plan; } .signed-in .jobs-head .h-money { grid-area: money; }
  .signed-in .list.jobs-all a { display: grid; align-items: center; column-gap: 12px; row-gap: 0; min-height: 36px; padding: 5px 12px; }
  .signed-in .list.jobs-all .job-top, .signed-in .list.jobs-all .job-line { display: contents; }
  .signed-in .list.jobs-all .job-top > strong { grid-area: who; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .signed-in .list.jobs-all .job-money { grid-area: money; text-align: right; font-weight: 700; font-size: 14px; white-space: nowrap; }
  .signed-in .list.jobs-all .job-addr { grid-area: addr; }
  .signed-in .list.jobs-all .job-num { grid-area: num; color: var(--ink); }
  .signed-in .list.jobs-all .job-line > .badge { grid-area: pill; justify-self: start; }
  .signed-in .list.jobs-all .job-plan { grid-area: plan; }
  .signed-in .list.jobs-all .job-addr, .signed-in .list.jobs-all .job-num, .signed-in .list.jobs-all .job-plan { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The price list */
  .signed-in .price-head, .signed-in .list.price-rows a { grid-template-columns: minmax(0, 1fr) 104px 80px 104px; grid-template-areas: "name price per cost"; }
  .signed-in .price-head .h-name { grid-area: name; } .signed-in .price-head .h-price { grid-area: price; } .signed-in .price-head .h-per { grid-area: per; } .signed-in .price-head .h-cost { grid-area: cost; }
  .signed-in .list.price-rows a { display: grid; align-items: center; column-gap: 12px; row-gap: 0; min-height: 34px; padding: 5px 12px; }
  .signed-in .list.price-rows a > strong { grid-area: name; }
  .signed-in .list.price-rows .pr-words { display: none; }
  .signed-in .pr-price { grid-area: price; text-align: right; font-weight: 700; }
  .signed-in .pr-per { grid-area: per; color: var(--ink-2); font-size: 13px; }
  .signed-in .pr-cost { grid-area: cost; text-align: right; color: var(--ink-2); }
}
/* A phone reads the price list's one line of words. */
@media (max-width: 899px) { .signed-in .pr-price, .signed-in .pr-per, .signed-in .pr-cost { display: none; } }
/* The heads are for the laptop's columns. */
@media (max-width: 899px) { .signed-in .list-head { display: none; } }

/* ---- The same lists on a phone: compact rows, two lines where they fit, the whole row still the link (44 px and up) ---- */
.signed-in .row-phone + .row-addr::before { content: " · "; }
@media (max-width: 899px) {
  .signed-in .list.estimates .est-main { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: 8px; row-gap: 2px; min-height: 48px; padding: 6px var(--s4); line-height: 1.3; }
  .signed-in .list.estimates .est-main::before { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  .signed-in .list.estimates .est-who { order: 0; flex: 1 1 0; min-width: 0; font-weight: 700; }
  .signed-in .list.estimates .est-amt { order: 1; flex: none; }
  .signed-in .list.estimates .est-num { order: 3; font-size: 13px; }
  .signed-in .list.estimates .est-state { order: 4; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
  .signed-in .list.estimates .est-state .badge { margin: 0; }
  .signed-in .list.estimates .est-state .sub { margin: 0; font-size: 13px; }
  /* A row with its one action (Send, Make the bill): the button sits under the amount, beside the second line. */
  .signed-in .list.estimates li.est:has(.est-act) .est-main { min-height: 82px; }
  .signed-in .list.estimates li.est:has(.est-act) .est-num, .signed-in .list.estimates li.est:has(.est-act) .est-state { padding-right: 0; }
  .signed-in .list.estimates li.est:has(.est-act) .est-state { flex: 1 1 0; padding-right: 112px; }
  .signed-in .est-act { margin: 0 var(--s4) 6px 0; }
  .signed-in .list.jobs-all a { gap: 1px; }
  .signed-in .job-top { align-items: baseline; }
  .signed-in .job-line .badge { vertical-align: 1px; }
}

/* ---- A record's quotes, bills and payments (the customer's History, the Job page): the amount in its own place ---- */
.signed-in .list.jobs li.job { padding: 2px 0 0; }
.signed-in .list.jobs .job-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 var(--s4); line-height: 1.3; }
.signed-in .list.jobs .job-head .sub { padding-bottom: 6px; }
.signed-in .list.jobs li.job > a { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "ic title amt" "ic sub pill";
  column-gap: 10px; row-gap: 1px; min-height: 48px; padding: 5px 34px 5px var(--s4); }
.signed-in .list.jobs li.job > a > .ic { grid-area: ic; width: 28px; height: 28px; padding: 6px; }
.signed-in .list.jobs li.job > a > strong { grid-area: title; }
.signed-in .list.jobs li.job > a > .sub { grid-area: sub; }
.signed-in .list.jobs li.job > a > .row-pill { grid-area: pill; justify-self: end; }
.signed-in .row-amt { grid-area: amt; justify-self: end; font-weight: 700; white-space: nowrap; }
.signed-in .list.jobs li.job > a.pay-row { min-height: 44px; padding-left: calc(var(--s4) + 20px); grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic title amt" "ic sub sub"; }
.signed-in .list.jobs li.job > a.pay-row > .ic { width: 22px; height: 22px; padding: 4px; color: var(--good); }
.signed-in .list.jobs li.job > a.pay-row > strong { font-weight: 600; }
.signed-in .money-list .list.jobs li.job > a { padding-left: 0; padding-right: 24px; }
.signed-in .money-list .list.jobs li.job > a:first-child { border-top: 0; }
.signed-in .job-history .history li { padding-left: 0; padding-right: 0; }
@media (max-width: 479px) {
  .signed-in .list.jobs li.job > a, .signed-in .list.jobs li.job > a.pay-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title amt" "sub pill"; }
  .signed-in .list.jobs li.job > a > .ic { display: none; }
  .signed-in .list.jobs li.job > a.pay-row { padding-left: var(--s6); }
}
@media (min-width: 900px) {
  /* The History as a table: a band per job, then a line per quote, bill and payment. */
  .signed-in .hist-head { grid-template-columns: 20px 112px minmax(0, 1fr) 112px 104px; grid-template-areas: "ic title detail pill amt";
    border: 1px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .signed-in .hist-head .h-ic { grid-area: ic; } .signed-in .hist-head .h-title { grid-area: title; } .signed-in .hist-head .h-detail { grid-area: detail; }
  .signed-in .hist-head .h-pill { grid-area: pill; } .signed-in .hist-head .h-amt { grid-area: amt; }
  .signed-in .ledger .hist-head + .list.jobs { border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .signed-in .ledger .list.jobs { margin-top: 0; }
  .signed-in .ledger .list.jobs li.job { padding: 0; }
  .signed-in .ledger .list.jobs .job-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 3px 12px; background: var(--th); border-bottom: 1px solid var(--line); }
  .signed-in .ledger .list.jobs .job-head a { min-height: 26px; font-size: 13px; }
  .signed-in .ledger .list.jobs .job-head .sub { padding-bottom: 0; font-size: 12px; }
  .signed-in .ledger .list.jobs li.job > a { grid-template-columns: 20px 112px minmax(0, 1fr) 112px 104px; grid-template-rows: auto; grid-template-areas: "ic title sub pill amt";
    align-items: center; column-gap: 12px; min-height: 32px; padding: 3px 12px; border-top: 1px solid var(--line); }
  .signed-in .ledger .list.jobs li.job > a > .ic { width: 20px; height: 20px; padding: 3px; }
  .signed-in .ledger .list.jobs li.job > a > strong { font-size: 13px; font-weight: 600; }
  .signed-in .ledger .list.jobs li.job > a > .sub { font-size: 13px; }
  .signed-in .ledger .list.jobs li.job > a > .row-pill { justify-self: start; }
  .signed-in .ledger .list.jobs li.job > a.pay-row { grid-template-columns: 20px 98px minmax(0, 1fr) 112px 104px; grid-template-areas: "ic title sub pill amt"; padding-left: 26px; }
  .signed-in .ledger .list.jobs li.job > a.pay-row > .ic { width: 20px; height: 20px; padding: 3px; }
  .signed-in .ledger .list.jobs li.job > a.pay-row > strong { font-weight: 500; color: var(--ink-3); }
  .signed-in .ledger .list.jobs li.job > a.pay-row > .row-amt { font-weight: 600; }

  .signed-in .money-list .list.jobs li.job > a { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
}

/* ---- The customer's file: on a wide screen the facts and the Activity at the left, the History wide at the right ---- */
@media (min-width: 1100px) {
  .signed-in .cust-split { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-template-areas: "a b" "c b"; grid-template-rows: auto 1fr; column-gap: 16px; }
  .signed-in .cust-split > .col-a { grid-area: a; }
  .signed-in .cust-split > .col-b { grid-area: b; }
  .signed-in .cust-split > .col-c { grid-area: c; }
  .signed-in .cust-split > .col-b > :first-child, .signed-in .cust-split > .col-b > section:first-child > h2:first-child { margin-top: 0; }
  .signed-in .cust-split .who-card { margin-bottom: var(--s4); }
}
.signed-in .who-card { gap: var(--s3); padding: var(--s4); }
.signed-in .who-top { gap: var(--s3); }
.signed-in .contact .btn { min-height: var(--tap); }
.signed-in .history li { padding: 8px var(--s4); }
@media (min-width: 900px) {
  /* Activity: it sits in a narrow column beside the record, so when and who stay over what happened, tightly. */
  .signed-in .history li { padding: 5px 10px; font-size: 13px; line-height: 1.35; }
  .signed-in .history .when { font-size: 12px; margin-bottom: 0; }
  .signed-in .history .line .ic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
  .signed-in .contact .btn { font-size: 13px; }
  .signed-in h1 .badge { vertical-align: 3px; }
  /* Home's to-dos: who and what on one line, then where, then from whom. */
  .signed-in .list.todos a { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0; }
  .signed-in .list.todos a > strong { order: 0; }
  .signed-in .list.todos a > .todo-text { order: 1; }
  .signed-in .list.todos a > .todo-text::before { content: "\00a0·\00a0"; color: var(--ink-2); font-weight: 500; }
  .signed-in .list.todos a > .sub { order: 3; flex: 0 0 100%; min-width: 0; }
}
/* Dark: the side menu keeps an edge against the page. */
@media (min-width: 960px) and (prefers-color-scheme: dark) { .signed-in .rail { box-shadow: inset -1px 0 0 var(--edge); } }

/* ---- Home: smaller money tiles, tighter Needs you and This week ---- */
.signed-in .home { gap: var(--s4); }
.signed-in .money { padding: var(--s4); gap: 12px 8px; }
.signed-in .m-tile .m-num { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 479px) { .signed-in .m-tile .m-num { font-size: 15px; } .signed-in .m-tile .m-title { font-size: 11.5px; } }
.signed-in .tile-btn { height: 72px; }
.signed-in .qb .chip-ic { width: 36px; height: 36px; }
.signed-in .todo-done .btn { min-height: 44px; }
@media (min-width: 960px) {
  .signed-in .home { gap: 12px; }
  .signed-in .money { gap: 10px; padding: 0; }
  .signed-in .m-main, .signed-in .m-tile { gap: 2px; padding: 10px 14px; }
  .signed-in .m-main .m-title, .signed-in .m-tile .m-title { font-size: 12px; font-weight: 600; }
  .signed-in .m-big, .signed-in .m-tile .m-num { font-size: 22px; letter-spacing: -0.01em; }
  .signed-in .m-main .m-note, .signed-in .m-tile .m-note { font-size: 12px; }
  .signed-in .m-bar { margin-top: 4px; }
  .signed-in .home-grid { gap: 12px; }
  .signed-in .tile-btn { height: calc(var(--tap) + 2px); font-size: 13px; }
  .signed-in .home-actions { gap: 8px; }
  .signed-in .home-actions .search { width: 260px; }
  .signed-in .home-date { font-size: 12px; }
  .signed-in .card-title { font-size: 16px; }
  .signed-in .needs, .signed-in .week-card { padding: 10px 12px 4px; }
  .signed-in .tile-head { padding: 5px 0; font-size: 11px; }
  .signed-in .tile + .tile, .signed-in .quiet + .tile, .signed-in .tile + .quiet { margin-top: 6px; }
  .signed-in .tile-more { min-height: 30px; font-size: 13px; }
  .signed-in .todo-done { padding: 4px 0 4px 8px; }
  .signed-in .todo-done .btn { min-width: 64px; min-height: calc(var(--tap) - 6px); font-size: 13px; }
  .signed-in .strip { gap: 4px; margin: 2px 0 8px; }
  .signed-in .strip li > * { height: 42px; }
  .signed-in .strip .d-num { font-size: 14px; }
  .signed-in .tile-row .tile-head { min-height: 34px; }
  .signed-in .qb { padding: 8px 12px; gap: 10px; }
  .signed-in .qb strong { font-size: 14px; }
  .signed-in .qb .chip-ic { width: 28px; height: 28px; }
  .signed-in .needs > .quiet, .signed-in .week-card > .quiet { min-height: 28px; }
}

/* ---- The Job page: the same two columns, tighter ---- */
.signed-in .job-card { gap: var(--s2); padding: var(--s4); }
.signed-in .tracker { padding: 10px 8px 8px; }
/* The six steps: small squares on the line (the quantity stepper's .step rule had made them 48 px buttons). */
.signed-in .tracker .step { width: 26px; height: 26px; border: 0; border-radius: var(--r-sm); font-size: inherit; }
.signed-in .tracker li::before { top: 12px; left: calc(-50% + 14px); right: calc(50% + 14px); }
.signed-in .tracker li { gap: 4px; }
.signed-in .chip span { padding: 0 10px; font-size: var(--t-14); }
.signed-in .history li { font-size: var(--t-14); }
@media (max-width: 479px) { .signed-in .contact .btn { min-height: 48px; gap: 1px; padding: 4px; } }
.signed-in .glance div { padding: 6px 10px; }
.signed-in .plan-line p { padding: 7px 0; }
.signed-in .money-list { padding: var(--s4) var(--s4) var(--s1); }
.signed-in .money-left { padding: 10px 0; }
@media (min-width: 900px) {
  .signed-in .job-card h2 { font-size: 20px; }
  .signed-in .tracker li { font-size: 11.5px; gap: 4px; }
  .signed-in .tracker li::before { top: 10px; left: calc(-50% + 12px); right: calc(50% + 12px); }
  .signed-in .tracker .step { width: 22px; height: 22px; }
  .signed-in .glance { gap: 6px; }
  .signed-in .glance strong { font-size: 18px; }
  .signed-in .glance span { font-size: 12px; }
  .signed-in .site-note { padding: 6px 10px; font-size: 13px; }
  .signed-in .thumbs img { width: 96px; height: 72px; }
  .signed-in .money-left strong { font-size: 16px; }
  .signed-in .done-ask p { font-size: 13px; }
}
@media (min-width: 960px) {
  .signed-in .hero { height: 200px; }
  .signed-in .action-bar { bottom: var(--s4); }
  .signed-in .action-bar .btn { min-width: 200px; box-shadow: 0 1px 3px rgba(15, 27, 45, .28); }
  .signed-in .job-right { padding-bottom: 56px; }
}

/* ---- A quote and a bill: the lines at the left; the total, the buttons and the yes (or the payment) at the right ---- */
.signed-in .doc-main { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
/* A phone: the quote's or bill's two buttons side by side (each still 44 px tall), and the four ways they said yes on one line. */
.signed-in .lines > .actions { flex-direction: row; flex-wrap: wrap; }
.signed-in .lines > .actions > .btn { flex: 1 1 0; min-width: 132px; }
@media (max-width: 899px) { .signed-in .approve .chips, .signed-in .pay .chips { gap: 6px; } .signed-in .approve .chip span, .signed-in .pay .chip span { padding: 0 8px; font-size: 13px; } }
.signed-in .total { min-height: 52px; }
.signed-in .add-btn { min-height: var(--tap); }
@media (min-width: 900px) {
  .signed-in .total { min-height: 40px; padding: 8px 12px; }
  .signed-in .total strong { font-size: 22px; }
  .signed-in .deposit { padding: 0 12px 8px; font-size: 13px; }
  .signed-in .row { padding: 6px 12px 10px; margin-bottom: 0; }
  .signed-in .row legend { font-size: 11px; }
  .signed-in .line .words { margin: 2px 0; }
  .signed-in .line input[inputmode="decimal"], .signed-in .pay [data-amount-box], .signed-in #price { font-size: 15px; }
  .signed-in .viewed { margin: 4px 0 6px; font-size: 13px; }
  .signed-in .sg-lines li { padding: 6px 0; }
  .signed-in .approve { margin-top: var(--s4); }
  .signed-in .pay { padding: var(--s2) var(--s4) var(--s4); }
}
@media (min-width: 1100px) {
  .signed-in .doc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto auto auto 1fr; column-gap: 16px; align-items: start; }
  .signed-in .doc-cols > form.lines { display: contents; }
  .signed-in .doc-cols .doc-main { grid-column: 1; grid-row: 1 / -1; }
  .signed-in .doc-cols .lines > .sum { grid-column: 2; grid-row: 1; margin: 0; }
  .signed-in .doc-cols .lines > .actions { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; margin: 8px 0 0; }
  .signed-in .doc-cols .lines > .actions > .btn { flex: 1 1 auto; min-width: 0; }
  .signed-in .doc-cols > .approve { grid-column: 2; grid-row: 3; margin: 12px 0 0; }
  .signed-in .doc-cols > .decline { grid-column: 2; grid-row: 4; margin: 4px 0 0; }
  .signed-in .bill-cols > .pay { grid-column: 2; grid-row: 2; margin: 12px 0 0; }
  .signed-in .bill-cols .lines > .actions { grid-row: 3; }
  .signed-in .bill-cols > .pay-hist { grid-column: 2; grid-row: 4; margin-top: 4px; }
  .signed-in .bill-cols > .pay-hist > h2 { margin-top: var(--s4); }
}

/* ---- Settings: the groups flow in columns on a wide screen ---- */
@media (min-width: 900px) {
  .signed-in .groups { display: block; columns: 300px 3; column-gap: 12px; }
  .signed-in .groups > .group { break-inside: avoid; margin: 0 0 var(--s6); }
  .signed-in .group-title { font-size: 11px; margin-bottom: 6px; }
  .signed-in .logo-now img { max-height: 72px; }
}

/* ---- Expenses: a shorter chart, tighter breakdowns ---- */
@media (min-width: 900px) {
  .signed-in .exp-chart { margin: var(--s3) 0; padding: 8px 12px 6px; }
  .signed-in .exp-chart h2 { font-size: 13px; margin-bottom: 4px; }
  .signed-in .exp-chart .bars { height: 96px; }
  .signed-in .bar-tops { min-height: 16px; font-size: 11px; }
  .signed-in .bar-labels { margin-top: 2px; font-size: 11px; }
  .signed-in .exp-breaks { gap: 8px; margin-bottom: var(--s3); }
  .signed-in .exp-break { padding: 0 12px; }
  .signed-in .exp-break > summary { min-height: 34px; }
  .signed-in .exp-break > summary h2 { font-size: 13px; }
  .signed-in .list.plain.shares li a { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name sub amt"; align-items: baseline; min-height: 28px; padding: 4px 0; font-size: 13px; }
  .signed-in .share-name { font-weight: 600; }
  .signed-in .share-sub { font-size: 12px; white-space: nowrap; }
  .signed-in .exp-break .list.plain.shares { border-top: 0; }
  .signed-in .exp-break[open] > summary { margin-bottom: 0; }
}

@media (min-width: 1100px) { .signed-in .exp-breaks { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- The calendar: smaller days, squarer marks ---- */
@media (min-width: 900px) {
  .signed-in .cal-head { padding: 2px 6px; }
  .signed-in .cal-grid th { padding: 4px 0; font-size: 11px; }
  .signed-in .cal-cell { height: 84px; padding: 3px; }
  .signed-in .cal-day { min-height: 24px; }
  .signed-in .cal-num { min-width: 24px; height: 24px; border-radius: var(--r-sm); font-size: 13px; }
  .signed-in .chip-job { min-height: 22px; padding: 2px 6px; border-radius: 3px; font-size: 11.5px; }
  .signed-in .cal-turn { min-height: var(--tap); }
}
.signed-in .cal-num { border-radius: var(--r-sm); }
.signed-in .list-tools + .list-title, .signed-in .list-tools + .list-count { margin-top: var(--s4); }
/* Assign: the people to pick from, shorter rows (each still the whole label to tap). */
.signed-in .pick span { min-height: 52px; }
@media (min-width: 900px) { .signed-in .pick span { min-height: 40px; font-size: 14px; } .signed-in .pick span::before { width: 18px; height: 18px; } }

/* ---- Batch 10 (CZ-54): Email it on the send page. Office only, so still scoped to .signed-in ---- */
.signed-in .send-cols { display: flex; flex-direction: column; }
.signed-in .send-cols > .card { margin-bottom: var(--s3); }
.signed-in .email-it h2 { margin: 0 0 var(--s2); }
.signed-in .email-it .email-form { gap: var(--s2); }
.signed-in .email-it label { margin: 0; }
.signed-in .email-it .opt { font-weight: 500; color: var(--ink-2); }
.signed-in .email-it textarea { min-height: 72px; }
.signed-in .email-it textarea::placeholder, .signed-in .email-it input::placeholder { color: var(--ink-2); opacity: 0.75; }
.signed-in .email-it .email-form > .btn { margin-top: var(--s1); }
.signed-in .email-from, .signed-in .email-noreply { font-size: 13px; overflow-wrap: anywhere; }
.signed-in details.email-fold { padding: 0 var(--s4); }
.signed-in details.email-fold[open] { padding-bottom: var(--s4); }
.signed-in .notice.warn { display: flex; align-items: flex-start; gap: var(--s2); margin: 0 0 var(--s1); background: var(--warn-bg); color: var(--warn-ink); font-weight: 500; }
.signed-in .notice.warn .ic { flex: none; margin-top: 2px; }
.signed-in .email-log-head { margin: var(--s4) 0 var(--s1); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.signed-in .email-log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.signed-in .email-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.signed-in .email-log .em-to { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.signed-in .email-log .sub { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.signed-in .email-log .em-why { flex-basis: 100%; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.signed-in .email-log-note { margin-top: var(--s1); font-size: 12px; }
.signed-in .email-why a { font-weight: 700; }
.signed-in .ways-head { margin: 0 0 var(--s1); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.signed-in .send-cols.mail-first .ways > .actions { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; gap: var(--s2); }
.signed-in .send-cols.mail-first .ways > .btn, .signed-in .send-cols.mail-first .ways > .actions > .btn { align-self: stretch; width: 100%; justify-content: center; margin: 0; }
.signed-in .tool-note { display: block; margin-top: 2px; font-size: 13px; }
.signed-in .email-bad { cursor: help; }
.signed-in .contact-email { white-space: nowrap; }
@media (min-width: 1100px) {
  .signed-in .send-cols { max-width: 1000px; }
  .signed-in .send-cols.mail-first { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s3); align-items: stretch; }
  .signed-in .send-cols.mail-first > .card { margin: 0; }
  .signed-in .send-cols + details.small-form { max-width: 1000px; }
}