/* ============================================================
   HAL — Design tokens & app styles (V3 theme)
   Warm, friendly, icon-driven "phone home screen" for trades
   contractors. Safety-orange accent on a warm cream base, deep
   slate-navy for structure. Ported from the HAL design package.
   ============================================================ */

:root, [data-theme='light'] {
  --color-bg: #FBF6EF;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFFDFB;
  --color-surface-offset: #F3EBDD;
  --color-surface-offset-2: #ECE1CE;
  --color-surface-dynamic: #E6D9C3;
  --color-divider: #E7DCC8;
  --color-border: #DECBA9;

  --color-text: #24211C;
  --color-text-muted: #6E6656;
  --color-text-faint: #A79C82;
  --color-text-inverse: #FFF9F0;

  --color-primary: #E85D25;
  --color-primary-hover: #C64A19;
  --color-primary-active: #A63C13;
  --color-primary-highlight: #FBDCC8;
  --color-primary-soft: #FDEEE3;

  --color-navy: #1F3547;
  --color-navy-hover: #16283A;
  --color-navy-soft: #E4EBEF;

  --color-success: #3E7D3B;
  --color-success-hover: #2E5F2C;
  --color-success-highlight: #DCEBD8;
  --color-warning: #B5790A;
  --color-warning-hover: #93630A;
  --color-warning-highlight: #F7E4C0;
  --color-error: #B23B3B;
  --color-error-hover: #942F2F;
  --color-error-highlight: #F5D9D9;
  --color-blue: #2E6C9E;
  --color-blue-highlight: #DCE7F0;
  --color-gold: #C99A2E;
  --color-gold-highlight: #F2E5C4;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  --transition-interactive: 160ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(70, 50, 20, 0.07);
  --shadow-md: 0 6px 20px rgba(70, 50, 20, 0.10);
  --shadow-lg: 0 16px 40px rgba(70, 50, 20, 0.16);

  --content-narrow: 640px;
  --content-default: 1000px;
  --content-wide: 1280px;

  --font-display: 'Cabinet Grotesk', 'General Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --scrim: rgba(20,15,8,0.42);
}

[data-theme='dark'] {
  --color-bg: #191510;
  --color-surface: #201B14;
  --color-surface-2: #241F17;
  --color-surface-offset: #2A2419;
  --color-surface-offset-2: #332C1E;
  --color-surface-dynamic: #3D3423;
  --color-divider: #3A3222;
  --color-border: #473E29;
  --color-text: #F1E9DA;
  --color-text-muted: #B7AB90;
  --color-text-faint: #7D7460;
  --color-text-inverse: #221D15;
  --color-primary: #FF8A4C;
  --color-primary-hover: #FFA06C;
  --color-primary-active: #FFB489;
  --color-primary-highlight: #4A2E1C;
  --color-primary-soft: #3A2718;
  --color-navy: #A9C2D6;
  --color-navy-hover: #C3D6E4;
  --color-navy-soft: #23303B;
  --color-success: #7FBC79;
  --color-success-hover: #98CC93;
  --color-success-highlight: #22301F;
  --color-warning: #E3AC4E;
  --color-warning-hover: #EEC06D;
  --color-warning-highlight: #3B2F19;
  --color-error: #E28080;
  --color-error-hover: #EA9797;
  --color-error-highlight: #3A2222;
  --color-blue: #7EAAD1;
  --color-blue-highlight: #202C36;
  --color-gold: #E0BD6B;
  --color-gold-highlight: #362C18;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.45);
  --scrim: rgba(0,0,0,0.55);
}

:root {
  --text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   Reset & foundations
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { min-height: 100dvh; line-height: 1.55; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; }
p, li { text-wrap: pretty; }
a { color: inherit; }
::selection { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
a, button, [role='button'], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: var(--space-4); background: var(--color-primary); color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 1000; transition: top .2s ease; }
.skip-link:focus { top: var(--space-4); }
[hidden] { display: none !important; }

/* Icons */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Layout shell
   ============================================================ */
.app-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--space-2); }
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); position: relative; flex-shrink: 0; }
.brand-mark::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--color-surface); }
.brand-mark::after { content: ""; position: absolute; inset: 11.5px; border-radius: 50%; background: var(--color-primary); }
.brand-mark.lg { width: 84px; height: 84px; box-shadow: var(--shadow-md); }
.brand-mark.lg::before { inset: 20px; }
.brand-mark.lg::after { inset: 32px; }
.brand-mark.md { width: 52px; height: 52px; }
.brand-mark.md::before { inset: 12.5px; }
.brand-mark.md::after { inset: 20px; }
.brand-mark.thinking::after { animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-full); color: var(--color-text); background: transparent; text-decoration: none; position: relative; }
.icon-btn:hover { background: var(--color-surface-offset); }
.icon-btn .ic { width: 21px; height: 21px; }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm .ic { width: 17px; height: 17px; }

.avatar-btn { display: inline-flex; }
.avatar-circle { width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--color-navy); color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.02em; overflow: hidden; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

.nav-toggle { display: none; }
.topbar-nav { display: flex; align-items: center; gap: var(--space-1); }
.topbar-link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  color: var(--color-text-muted); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.topbar-link .ic { width: 18px; height: 18px; }
.topbar-link:hover { background: var(--color-surface-offset); color: var(--color-text); }
.topbar-link.active { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.lang-pill { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full); border: 1.5px solid var(--color-border); color: var(--color-text-muted); }
.lang-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }

main { min-height: 70dvh; }
#view-root { max-width: var(--content-wide); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-24); }
#view-root { padding-right: calc(var(--space-5) + 64px); }
#view-root.narrow { max-width: var(--content-default); }
#view-root.flush { padding-bottom: var(--space-8); padding-right: var(--space-5); }

/* Profile popover */
.popover { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 70; }
.popover-head { padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-2); }
.popover-head strong { display: block; font-size: var(--text-sm); }
.popover-head span { font-size: var(--text-xs); color: var(--color-text-muted); word-break: break-all; }
.popover a, .popover button { display: flex; width: 100%; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; text-decoration: none; text-align: left; color: var(--color-text); }
.popover a:hover, .popover button:hover { background: var(--color-surface-offset); }
.popover .ic { width: 17px; height: 17px; color: var(--color-text-muted); }
.topbar-right { position: relative; }

/* Side drawer */
.drawer-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 80; }
.side-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 84vw); background: var(--color-surface); z-index: 90;
  box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform 220ms cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column; padding: var(--space-4); overflow-y: auto; }
.side-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-4); }
.drawer-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.drawer-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--text-sm); color: var(--color-text); text-align: left; text-decoration: none; width: 100%; }
.drawer-link .ic { width: 19px; height: 19px; color: var(--color-text-muted); }
.drawer-link:hover { background: var(--color-surface-offset); }
.drawer-link.active { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.drawer-link.active .ic { color: var(--color-primary-hover); }
.drawer-divider { height: 1px; background: var(--color-divider); margin: var(--space-3) var(--space-2); }

/* Bottom nav (mobile) */
.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: color-mix(in oklab, var(--color-surface) 96%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-divider); padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--safe-bottom));
  align-items: center; justify-content: space-between; }
.bottom-link { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-text-muted); font-size: var(--text-xs);
  font-weight: 600; flex: 1; padding: var(--space-1); text-decoration: none; }
.bottom-link .ic { width: 22px; height: 22px; }
.bottom-link.active { color: var(--color-primary); }
.bottom-link-fab { background: var(--color-primary); color: var(--color-text-inverse); width: 52px; height: 52px; border-radius: var(--radius-full);
  flex: 0 0 auto; margin-top: -26px; box-shadow: var(--shadow-md); justify-content: center; }
.bottom-link-fab .ic { width: 24px; height: 24px; }
.bottom-link-fab:hover { background: var(--color-primary-hover); }

/* Floating quick access */
.fab-stack { position: fixed; right: var(--space-5); bottom: calc(var(--space-8) + 64px); display: flex; flex-direction: column; gap: var(--space-3); z-index: 65; }
.fab { width: 52px; height: 52px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); text-decoration: none; }
.fab .ic { width: 22px; height: 22px; }
.fab-secondary { background: var(--color-navy); color: var(--color-text-inverse); }
.fab-secondary:hover { background: var(--color-navy-hover); transform: translateY(-2px); }
@media (min-width: 900px) { .fab-stack { bottom: var(--space-8); } }

/* ============================================================
   Buttons & primitives
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; min-height: 44px; text-decoration: none; }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-navy); color: var(--color-text-inverse); }
.btn-secondary:hover { background: var(--color-navy-hover); }
.btn-ghost { background: var(--color-surface-offset); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface-offset-2); }
.btn-outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-danger { background: var(--color-error-highlight); color: var(--color-error); }
.btn-danger:hover { background: var(--color-error); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-4); min-height: 36px; font-size: var(--text-xs); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.busy .ic { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); }
.card-pad { padding: var(--space-5); }

.pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.pill .ic { width: 13px; height: 13px; }
.pill-blue { background: var(--color-blue-highlight); color: var(--color-blue); }
.pill-gold { background: var(--color-gold-highlight); color: var(--color-gold); }
.pill-orange { background: var(--color-primary-highlight); color: var(--color-primary-hover); }
.pill-warn { background: var(--color-warning-highlight); color: var(--color-warning); }
.pill-ok { background: var(--color-success-highlight); color: var(--color-success); }
.pill-err { background: var(--color-error-highlight); color: var(--color-error); }
.pill-muted { background: var(--color-surface-offset); color: var(--color-text-muted); }

.progress-track { width: 100%; height: 8px; border-radius: var(--radius-full); background: var(--color-surface-offset-2); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 500ms cubic-bezier(0.16,1,0.3,1); }

.section-heading { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.section-heading.h2 { font-size: var(--text-lg); }
.section-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.section-block { margin-bottom: var(--space-10); }
.section-block:last-child { margin-bottom: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.small { font-size: var(--text-xs); }
.mono { font-family: var(--font-mono); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); }

.input-field { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--color-border);
  background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text); outline: none; }
.input-field:focus { border-color: var(--color-primary); }
.input-field::placeholder { color: var(--color-text-faint); }
select.input-field { appearance: none; -webkit-appearance: none; padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6656' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center; }
select.input-field.auto { width: auto; }
textarea.input-field { resize: vertical; min-height: 84px; line-height: 1.5; }
.form-field { margin-bottom: var(--space-4); }
.form-label { display: block; font-weight: 700; font-size: var(--text-xs); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.form-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); }

.banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; }
.banner .ic { width: 18px; height: 18px; margin-top: 2px; }
.banner-ok { background: var(--color-success-highlight); color: var(--color-success); }
.banner-warn { background: var(--color-warning-highlight); color: var(--color-warning); }
.banner-err { background: var(--color-error-highlight); color: var(--color-error); }
.banner-info { background: var(--color-blue-highlight); color: var(--color-blue); }

/* List rows */
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-divider); text-decoration: none; color: inherit; }
.list-row:last-child { border-bottom: none; }
a.list-row:hover { background: var(--color-surface-2); }
.list-row-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.list-row-icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.list-row-icon .ic { width: 18px; height: 18px; }
.list-row-title { font-weight: 700; font-size: var(--text-sm); overflow-wrap: anywhere; }
.list-row-sub { color: var(--color-text-muted); font-size: var(--text-xs); }
.list-row-right { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

/* ============================================================
   Home
   ============================================================ */
.home-hero { margin-bottom: var(--space-8); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.home-greeting { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.home-greeting-sub { color: var(--color-text-muted); font-size: var(--text-base); margin-top: var(--space-1); }

.brief-card { padding: var(--space-5); background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface)); border-color: var(--color-primary-highlight); margin-bottom: var(--space-8); }
.brief-card .brief-text { font-size: var(--text-sm); line-height: 1.7; white-space: pre-wrap; margin-top: var(--space-3); }
.brief-card .brief-text strong { font-weight: 700; }

.tile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-10); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 0.82; position: relative; text-decoration: none; color: inherit; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border); }
.tile-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.tile-icon-wrap .ic { width: 26px; height: 26px; }
.tile-label { font-weight: 700; font-size: var(--text-sm); text-align: center; line-height: 1.25; }
.tile-badge { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--color-error); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.tile-primary { background: var(--color-primary); border-color: var(--color-primary); }
.tile-primary .tile-icon-wrap { background: rgba(255,255,255,0.22); color: #fff; }
.tile-primary .tile-label { color: var(--color-text-inverse); }
.tile-primary:hover { background: var(--color-primary-hover); }
.tile-icon-jobs { background: var(--color-blue-highlight); color: var(--color-blue); }
.tile-icon-estimator { background: var(--color-gold-highlight); color: var(--color-gold); }
.tile-icon-accounting { background: var(--color-success-highlight); color: var(--color-success); }
.tile-icon-admin { background: var(--color-navy-soft); color: var(--color-navy); }
.tile-icon-camera { background: var(--color-primary-highlight); color: var(--color-primary-hover); }
.tile-icon-calc { background: var(--color-surface-offset-2); color: var(--color-text); }
.tile-icon-voice { background: var(--color-error-highlight); color: var(--color-error); }
.tile-icon-subs { background: var(--color-gold-highlight); color: var(--color-gold); }
.tile-icon-timecards { background: var(--color-blue-highlight); color: var(--color-blue); }
.tile-icon-tasks { background: var(--color-success-highlight); color: var(--color-success); }

/* Job cards / carousel */
.carousel-wrap { position: relative; margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5); }
.carousel-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-3); scrollbar-width: thin; }
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
.job-card { scroll-snap-align: start; flex: 0 0 auto; width: 258px; background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; text-align: left;
  text-decoration: none; color: inherit; position: relative; }
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job-card.grid { width: auto; }
.job-thumb { height: 92px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.job-thumb .ic { width: 36px; height: 36px; opacity: 0.85; }
.job-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.job-card-title { font-weight: 700; font-size: var(--text-sm); line-height: 1.3; overflow-wrap: anywhere; padding-right: var(--space-6); }
.job-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: var(--space-2); flex-wrap: wrap; }
.job-card-note { font-size: var(--text-xs); color: var(--color-text-faint); }
.job-card-tools { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; gap: 2px; }
.job-card-tools .icon-btn { width: 30px; height: 30px; background: rgba(255,255,255,0.75); color: #3a2a1a; }
.job-card-tools .icon-btn:hover { background: #fff; color: var(--color-primary-hover); }
.job-card-tools .icon-btn .ic { width: 14px; height: 14px; }
.thumb-0 { background: linear-gradient(135deg, #F3D9B3, #E8B47A); color: #8A5A22; }
.thumb-1 { background: linear-gradient(135deg, #CFE3EA, #9DC4D3); color: #2E6C82; }
.thumb-2 { background: linear-gradient(135deg, #DCE8CB, #B7D19A); color: #4C6B2F; }
.thumb-3 { background: linear-gradient(135deg, #E3D3C8, #C7A78F); color: #6B4A31; }
.thumb-4 { background: linear-gradient(135deg, #E0DCE8, #B7ADCB); color: #55467A; }
.thumb-5 { background: linear-gradient(135deg, #EAD9C2, #D2B48C); color: #7A5A2E; }
.thumb-6 { background: linear-gradient(135deg, #D3E6E4, #A3CCC8); color: #2E6E68; }
.job-card-new { border: 2px dashed var(--color-border); background: transparent; box-shadow: none; align-items: center; justify-content: center;
  min-height: 200px; gap: var(--space-2); color: var(--color-text-muted); font-weight: 700; }
.job-card-new:hover { border-color: var(--color-primary); color: var(--color-primary); }
.job-card-new .ic { width: 28px; height: 28px; }
.job-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.section-link-btn { color: var(--color-primary); font-weight: 700; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.section-link-btn .ic { width: 16px; height: 16px; }

/* Assigned items */
.checklist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.checklist-row:last-child { border-bottom: none; }
.check-circle { width: 26px; height: 26px; border-radius: var(--radius-full); border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.check-circle .ic { width: 14px; height: 14px; opacity: 0; }
.checklist-row.done .check-circle { background: var(--color-success); border-color: var(--color-success); }
.checklist-row.done .check-circle .ic { opacity: 1; }
.checklist-row.done .checklist-label { color: var(--color-text-muted); text-decoration: line-through; }
.checklist-label { font-weight: 600; font-size: var(--text-sm); flex: 1; overflow-wrap: anywhere; }
.checklist-add { display: flex; gap: var(--space-2); padding-top: var(--space-3); }

/* ============================================================
   Job detail / chat
   ============================================================ */
.job-detail-breadcrumb { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-2); flex-wrap: wrap; }
.job-detail-breadcrumb a { color: var(--color-text-muted); font-weight: 600; text-decoration: none; }
.job-detail-breadcrumb a:hover { color: var(--color-primary); }
.job-detail-breadcrumb .ic { width: 14px; height: 14px; }
.job-detail-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }

.subtab-bar { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 2px solid var(--color-divider); margin-bottom: var(--space-5); scrollbar-width: none; }
.subtab-btn { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; padding: var(--space-3) var(--space-4); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none; }
.subtab-btn .ic { width: 17px; height: 17px; }
.subtab-btn:hover { color: var(--color-text); }
.subtab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.chat-shell { display: flex; flex-direction: column; min-height: 60dvh; height: calc(100dvh - 240px); }
.chat-toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.chat-stream { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-1) var(--space-4); scroll-behavior: smooth; }
.chat-stream::-webkit-scrollbar { width: 8px; }
.chat-stream::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.msg-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.msg-bubble-wrap { display: flex; flex-direction: column; max-width: 82%; animation: rise .25s ease-out; }
.msg-bubble-wrap.me { align-self: flex-end; align-items: flex-end; }
.msg-bubble-wrap.them { align-self: flex-start; align-items: flex-start; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-bubble-wrap.me .msg-bubble { background: var(--color-primary); color: #fff; border-bottom-right-radius: var(--radius-sm); }
.msg-bubble-wrap.them .msg-bubble { background: var(--color-surface); border: 1px solid var(--color-divider); border-bottom-left-radius: var(--radius-sm); }
.msg-bubble code { font-family: var(--font-mono); font-size: .88em; background: var(--color-surface-offset); border-radius: 5px; padding: 1px 5px; }
.msg-bubble-wrap.me .msg-bubble code { background: rgba(255,255,255,.2); }
.msg-bubble strong { font-weight: 700; }
.msg-bubble a { color: var(--color-primary); }
.msg-bubble-wrap.me .msg-bubble a { color: #fff; }
.msg-meta { font-size: 11px; color: var(--color-text-faint); margin-top: 4px; padding: 0 var(--space-2); display: flex; gap: var(--space-2); align-items: center; }
/* V5 phone pass: this row (name, time, model, effort, tokens) is only drawn on the admin's
   session transcript, where it was wider than a phone. Wrap instead of widening the page. */
.msg-meta { flex-wrap: wrap; }
.msg-meta .brand-mark { width: 14px; height: 14px; }
.msg-meta .brand-mark::before { inset: 3.5px; } .msg-meta .brand-mark::after { inset: 5.5px; }
.msg-thinking { color: var(--color-text-faint); font-style: italic; }
.msg-tools { display: flex; gap: var(--space-1); margin-top: var(--space-1); }
.msg-tools button { font-size: 11px; color: var(--color-text-faint); padding: 2px 6px; border-radius: var(--radius-sm); display: inline-flex; gap: 4px; align-items: center; }
.msg-tools button:hover { background: var(--color-surface-offset); color: var(--color-text); }
.msg-tools .ic { width: 12px; height: 12px; }

.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-4) var(--space-4); }
.welcome .brand-mark { margin-bottom: var(--space-4); }
.welcome h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.welcome p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 46ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: var(--color-surface); border: 1.5px solid var(--color-divider); font-weight: 600; font-size: var(--text-xs); color: var(--color-text); }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.chip.tool { border-style: dashed; color: var(--color-text-muted); }
.chip .rm { color: var(--color-error); font-weight: 800; }
.chip .ic { width: 14px; height: 14px; }

.composer { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.composer-bar { display: flex; align-items: flex-end; gap: var(--space-1); background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-2); }
.composer-bar:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.composer-bar textarea { flex: 1; background: transparent; border: 0; resize: none; font-size: var(--text-sm); line-height: 1.5; max-height: 160px;
  padding: var(--space-2) var(--space-2); outline: none; color: var(--color-text); }
.composer-bar textarea::placeholder { color: var(--color-text-faint); }
.cbtn { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; }
.cbtn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.cbtn .ic { width: 19px; height: 19px; }
.cbtn.rec { background: var(--color-error); color: #fff; animation: pulse-rec 1.4s ease-in-out infinite; }
.cbtn.send { background: var(--color-primary); color: #fff; }
.cbtn.send:hover { background: var(--color-primary-hover); }
.cbtn.send:disabled { opacity: .4; cursor: not-allowed; }
.composer-err { font-size: var(--text-xs); color: var(--color-error); font-weight: 600; margin: 0 var(--space-2) var(--space-2); }
.composer-hint { font-size: 11px; color: var(--color-text-faint); margin-top: var(--space-2); text-align: center; }

/* Files & photos */
.doc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.doc-row:last-child { border-bottom: none; }
.doc-ext { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: 6px; padding: 4px 6px; flex-shrink: 0; min-width: 44px; text-align: center; }
.doc-name { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-name a { text-decoration: none; }
.doc-name a:hover { color: var(--color-primary); }
.doc-meta { font-size: var(--text-xs); color: var(--color-text-faint); flex-shrink: 0; }
.dropzone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); cursor: pointer; width: 100%; }
.dropzone:hover, .dropzone.over { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone .ic { width: 32px; height: 32px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.photo-tile { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; position: relative; background: var(--color-surface-offset); border: 1px solid var(--color-divider); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.photo-tile-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-2); background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); color: #fff; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.photo-tile .icon-btn { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; background: rgba(0,0,0,.5); color: #fff; }
.photo-tile .icon-btn .ic { width: 14px; height: 14px; }
.photo-log-group-title { font-weight: 700; font-size: var(--text-sm); margin: var(--space-6) 0 var(--space-3); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.camera-cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-primary); color: #fff; margin-bottom: var(--space-8); text-align: center; flex-direction: column; width: 100%; }
.camera-cta:hover { background: var(--color-primary-hover); }
.camera-cta .ic { width: 34px; height: 34px; }
.camera-cta strong { font-size: var(--text-base); }
.camera-cta span { font-size: var(--text-xs); opacity: .85; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 110; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.lightbox-card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: min(760px, 100%); max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column; }
.lightbox-img { max-height: 48dvh; background: #000; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; }
.lightbox-img img { max-height: 48dvh; width: auto; max-width: 100%; object-fit: contain; }
.lightbox-body { padding: var(--space-5); }
.ai-answer { background: var(--color-surface-offset); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; margin-top: var(--space-3); }

/* ============================================================
   Mode workspaces
   ============================================================ */
.mode-hero { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.mode-icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mode-icon .ic { width: 28px; height: 28px; }
.mode-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.mode-layout.single { grid-template-columns: minmax(0, 1fr); }
.tool-panel { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--space-4); }
.tool-card { padding: var(--space-4); }
.tool-card h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-1); display: flex; align-items: center; gap: var(--space-2); }
.tool-card h3 .ic { width: 18px; height: 18px; color: var(--color-primary); }
.tool-card p { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }

.line-item-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-xs); }
.line-item-row:last-child { border-bottom: none; }
.line-item-desc { font-weight: 600; overflow-wrap: anywhere; }
.line-item-qty { color: var(--color-text-muted); white-space: nowrap; }
.line-item-total { font-weight: 700; text-align: right; white-space: nowrap; }
.line-item-row input { width: 52px; padding: 2px 4px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); font-size: var(--text-xs); text-align: right; }
.quote-total-bar { display: flex; align-items: center; justify-content: space-between; background: var(--color-navy); color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-top: var(--space-3); gap: var(--space-3); flex-wrap: wrap; }
.quote-total-label { font-size: 10px; opacity: .75; font-weight: 700; letter-spacing: .05em; }
.quote-total-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }

/* Voice recorder */
.recorder-shell { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; text-align: center; }
.record-btn { width: 96px; height: 96px; border-radius: var(--radius-full); background: var(--color-error); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
.record-btn .ic { width: 36px; height: 36px; }
.record-btn:hover { transform: scale(1.03); }
.record-btn.recording { animation: pulse-rec 1.4s ease-in-out infinite; }
@keyframes pulse-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(178,59,59,0.4); } 50% { box-shadow: 0 0 0 16px rgba(178,59,59,0); } }
.waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; }
.waveform span { width: 4px; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); opacity: 0.4; transform: scaleY(.3); }
.waveform.active span { animation: wave 1s ease-in-out infinite; opacity: .8; }
.waveform span:nth-child(2) { animation-delay: .1s; } .waveform span:nth-child(3) { animation-delay: .2s; }
.waveform span:nth-child(4) { animation-delay: .3s; } .waveform span:nth-child(5) { animation-delay: .4s; }
.waveform span:nth-child(6) { animation-delay: .5s; } .waveform span:nth-child(7) { animation-delay: .6s; }
@keyframes wave { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.record-timer { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text-muted); }
.organized h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-1); }
.organized ul { padding-left: var(--space-5); font-size: var(--text-sm); }
.organized li { margin-bottom: 2px; }

/* ============================================================
   Onboarding / setup / login
   ============================================================ */
.onboarding-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); }
.onboarding-card { width: 100%; max-width: 560px; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6); border: 1px solid var(--color-divider); }
.onboarding-eyebrow { text-align: center; color: var(--color-primary); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }
.onboarding-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; text-align: center; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.onboarding-sub { text-align: center; color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-6); }
.onboarding-welcome-icon { margin: 0 auto var(--space-5); }
.onboarding-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.onboarding-actions .btn { flex: 1; }
.choice-list { display: flex; gap: var(--space-2); }
.choice-chip { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md);
  border: 2px solid var(--color-divider); background: var(--color-surface-2); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chip:hover { border-color: var(--color-primary); }
.choice-chip.selected { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }
.signin { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-5);
  background: var(--color-surface); color: var(--color-text); border: 1.5px solid var(--color-border); border-radius: var(--radius-full);
  font-weight: 700; font-size: var(--text-sm); text-decoration: none; min-height: 48px; }
.signin:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.signin svg { width: 20px; height: 20px; }
.notice { margin-top: var(--space-5); font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-faint); text-align: center; }
.login-grid { background-image: radial-gradient(var(--color-divider) 1px, transparent 1px); background-size: 26px 26px; }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-6) 0; }
.feature { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-offset); font-size: var(--text-xs); font-weight: 600; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.feature .ic { width: 20px; height: 20px; color: var(--color-primary); }

/* ============================================================
   Calculator popup & modals
   ============================================================ */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 95; }
.calc-popup { position: fixed; z-index: 100; bottom: var(--space-6); right: var(--space-6); width: min(300px, calc(100vw - 32px)); background: var(--color-surface);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--color-divider); }
.calc-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-2); font-weight: 700; }
.calc-header span { display: flex; align-items: center; gap: var(--space-2); }
.calc-header .ic { width: 18px; height: 18px; }
.calc-display { margin: 0 var(--space-4) var(--space-3); padding: var(--space-4); background: var(--color-navy); color: #fff; border-radius: var(--radius-md);
  text-align: right; font-family: var(--font-display); font-size: var(--text-xl); overflow-x: auto; white-space: nowrap; }
.calc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.calc-key { padding: var(--space-4) 0; border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); background: var(--color-surface-offset); text-align: center; }
.calc-key:hover { background: var(--color-surface-offset-2); }
.calc-key-op { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.calc-key-eq { background: var(--color-primary); color: #fff; }
.calc-key-eq:hover { background: var(--color-primary-hover); }
.calc-key-wide { grid-column: span 2; }
.calc-footer { padding: 0 var(--space-4) var(--space-4); }

.modal-sheet { position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto;
  background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-5) var(--space-3); position: sticky; top: 0; background: var(--color-surface); z-index: 2; }
.modal-header span { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-lg); font-family: var(--font-display); }
.modal-header .ic { width: 20px; height: 20px; }
.modal-body { padding: 0 var(--space-5) var(--space-6); }

.toast { position: fixed; bottom: 100px; left: 16px; right: 16px; margin: 0 auto; width: fit-content; background: var(--color-navy); color: var(--color-text-inverse); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); z-index: 200; font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); max-width: calc(100vw - 32px); }
.toast .ic { width: 16px; height: 16px; color: var(--color-primary); }
.toast.err .ic { color: var(--color-error); }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-muted); }
.empty-state .ic { width: 44px; height: 44px; margin-bottom: var(--space-4); color: var(--color-text-faint); }
.empty-state h3 { color: var(--color-text); margin-bottom: var(--space-2); font-family: var(--font-display); }
.empty-state p { max-width: 42ch; margin-bottom: var(--space-5); font-size: var(--text-sm); }

/* ============================================================
   Admin control panel
   ============================================================ */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-8); }
.stat-card { padding: var(--space-4); }
.stat-card-label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-1); }
.stat-card-value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.stat-card-value.live { color: var(--color-success); }
.models { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.models input { position: absolute; opacity: 0; pointer-events: none; }
.model-card { display: block; cursor: pointer; background: var(--color-surface); border: 2px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-4); }
.model-card:hover { border-color: var(--color-border); }
.model-card .fam { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 4px; }
.model-card .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: 6px; }
.model-card .why { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.model-card .id { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-faint); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); word-break: break-all; }
.models input:checked + .model-card { border-color: var(--color-primary); background: var(--color-primary-soft); }
.models input:checked + .model-card .fam { color: var(--color-primary); }
.models input:focus-visible + .model-card { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cal { display: flex; gap: var(--space-2); }
.cal input { position: absolute; opacity: 0; pointer-events: none; }
.cal-step { flex: 1; cursor: pointer; text-align: center; background: var(--color-surface); border: 2px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3) var(--space-1); }
.cal-step .lv { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cal-step .bars { display: flex; gap: 2px; justify-content: center; margin-top: 6px; }
.cal-step .bars i { width: 4px; height: 10px; border-radius: 2px; background: var(--color-divider); display: block; }
.cal-step .bars i.lit { background: var(--color-text-faint); }
.cal input:checked + .cal-step { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }
.cal input:checked + .cal-step .bars i.lit { background: var(--color-primary); }
.cal input:focus-visible + .cal-step { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cal.off { opacity: .35; pointer-events: none; filter: saturate(0); }
/* V5 phone pass: on a small phone the five effort steps were wider than their card,
   and at 320px wider than the page, so the whole admin panel scrolled sideways.
   Tighten them there, and wrap rather than spill if a font is wider still. */
@media (max-width: 374px) {
  .cal { gap: var(--space-1); flex-wrap: wrap; }
  .cal-step { padding-left: 2px; padding-right: 2px; }
  .cal-step .lv { font-size: 0.6875rem; letter-spacing: 0; }
}
.switch { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.track { width: 46px; height: 26px; border-radius: 13px; background: var(--color-surface-offset-2); border: 1px solid var(--color-border); position: relative; flex-shrink: 0; }
.knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-text-faint); transition: transform .18s, background .18s; }
.switch input:checked + .track { background: var(--color-primary-highlight); border-color: var(--color-primary); }
.switch input:checked + .track .knob { transform: translateX(20px); background: var(--color-primary); }
.switch.locked { opacity: .5; pointer-events: none; }
.switch .lbl { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); text-align: left; padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-divider); font-weight: 700; white-space: nowrap; }
.tbl td { padding: var(--space-3); border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--color-surface-2); }
.tbl .m { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.tbl .num { font-family: var(--font-mono); text-align: right; }
.scroll { overflow-x: auto; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.meta-grid > div { padding: var(--space-3) var(--space-4); }
.meta-grid .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); font-weight: 700; margin-bottom: 3px; }
.meta-grid .v { font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; }

/* ============================================================
   Responsive
   ============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 1180px) {
  .topbar-link span { display: none; }
  .topbar-link { padding: var(--space-2) var(--space-3); }
  .topbar-link .ic { width: 20px; height: 20px; }
}
@media (max-width: 1100px) {
  .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .topbar-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .job-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-layout, .two-col { grid-template-columns: 1fr; }
  .tool-panel { position: static; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bottom-nav { display: flex; }
  main { padding-bottom: 76px; }
  #view-root { padding: var(--space-5) var(--space-4) var(--space-24); }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .tile { padding: var(--space-4) var(--space-2); }
  .tile-label { font-size: var(--text-xs); }
  .job-list-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab-stack { right: var(--space-3); bottom: 96px; gap: var(--space-2); }
  .fab { width: 44px; height: 44px; }
  .fab .ic { width: 19px; height: 19px; }
  .calc-popup { right: var(--space-3); left: var(--space-3); width: auto; bottom: 84px; }
  .app-topbar { padding: var(--space-3) var(--space-3); }
  .brand-name { display: none; }
  .topbar-right .hide-mobile { display: none; }
  .onboarding-card { padding: var(--space-6) var(--space-4); }
  .chat-shell { height: calc(100dvh - 250px); }
  .msg-bubble-wrap { max-width: 92%; }
  .feature-row { grid-template-columns: 1fr; }
  .choice-list { flex-direction: column; }
}
@media (min-width: 641px) and (max-width: 980px) { .bottom-nav { display: none; } }
@media print { .app-topbar, .bottom-nav, .fab-stack, .side-drawer, .composer { display: none !important; } }

/* ============================================================
   V4 — documents, money strip, start-here, guest trial, landing
   ============================================================ */

/* ---- guest trial bar ---- */
.guest-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 auto; max-width: var(--content-default);
  padding: var(--space-3) var(--space-5); font-size: var(--text-sm); color: var(--color-navy); background: var(--color-navy-soft);
  border-radius: var(--radius-md); margin-top: var(--space-4); }
.guest-bar > span { flex: 1; min-width: 200px; }
.guest-bar .ic { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
@media (max-width: 640px) { .guest-bar { margin: var(--space-3) var(--space-4) 0; } }

/* ---- start here (first run) ---- */
.start-here { padding: var(--space-5); border: 2px solid var(--color-primary-highlight); background: linear-gradient(180deg, var(--color-primary-soft), var(--color-surface) 60%); }
.start-here-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.start-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); text-align: left; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); position: relative; transition: transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.start-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.start-card strong { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.25; }
.start-card > span:last-child { font-size: var(--text-sm); color: var(--color-text-muted); }
.start-num { position: absolute; top: var(--space-3); right: var(--space-3); width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-text-inverse); font-family: var(--font-display); font-weight: 800; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; }
.start-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.start-icon .ic { width: 22px; height: 22px; }
.link-btn { color: var(--color-primary); font-weight: 700; text-decoration: underline; font-size: inherit; padding: 0; }
.tile-icon-docs { background: var(--color-success-highlight); color: var(--color-success); }
@media (max-width: 980px) { .start-grid { grid-template-columns: 1fr; } }

/* ---- money strip: quote -> paid ---- */
.money-strip { display: flex; align-items: stretch; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0; scrollbar-width: none; }
.money-strip::-webkit-scrollbar { display: none; }
.money-step { flex: 1; min-width: 118px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-sm); }
.money-k { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.money-v { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-navy); white-space: nowrap; }
.money-n { font-size: var(--text-xs); color: var(--color-text-faint); }
.money-arrow { align-self: center; width: 16px; height: 16px; color: var(--color-text-faint); flex-shrink: 0; }
.money-spent { border-color: var(--color-warning-highlight); background: var(--color-warning-highlight); margin-left: var(--space-2); }
.money-spent .money-v { color: var(--color-warning-hover); }
.money-strip.compact .money-step { min-width: 104px; padding: var(--space-2) var(--space-3); }
.money-strip.compact .money-v { font-size: var(--text-base); }
a.doc-row { text-decoration: none; color: inherit; }
a.doc-row:hover .doc-name { color: var(--color-primary); }
.doc-name .small { font-weight: 500; }
.msg-tools button.accent { color: var(--color-primary); font-weight: 700; }

/* ---- document page ---- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.doc-preview { position: sticky; top: 76px; }
.doc-preview-card { overflow: hidden; height: calc(100dvh - 150px); min-height: 520px; background: var(--color-surface-offset); }
.doc-preview-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.doc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.items-editor { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface-2); }
.items-head, .items-row { display: grid; grid-template-columns: minmax(0, 3fr) 64px 64px 92px 84px 36px; gap: var(--space-2); align-items: center; }
.items-head { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding: 0 0 var(--space-2); }
.items-row { padding: var(--space-1) 0; }
.items-row .input-field { padding: var(--space-2); font-size: var(--text-sm); }
.items-row .input-field.num { text-align: right; }
.items-amt { text-align: right; font-size: var(--text-sm); }
.check-head, .check-row { grid-template-columns: minmax(0, 3fr) 64px 72px minmax(0, 2fr) 36px; }
.doc-totals { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); margin-top: var(--space-3); }
.doc-totals > div { display: flex; gap: var(--space-5); align-items: center; font-size: var(--text-sm); min-width: 260px; justify-content: space-between; }
.doc-totals .grand { font-family: var(--font-display); font-size: var(--text-lg); border-top: 2px solid var(--color-primary); padding-top: var(--space-2); margin-top: var(--space-1); }
.doc-totals strong { font-family: var(--font-mono); }
.tax-input { width: 64px; display: inline-block; padding: 2px 6px; text-align: right; margin: 0 4px; }
.section-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.section-row:last-child { border-bottom: none; }
.doc-details summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted); }
.modal-sheet.wide { width: min(640px, calc(100vw - 32px)); }
@media (max-width: 980px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr column grows to its widest child, and
     the one-line rows under "Related documents" made the whole page 470px+
     wide on a phone. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-preview { position: static; }
  .doc-preview-card { height: 70vh; min-height: 420px; }
  .doc-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .items-head { display: none; }
  .items-row { grid-template-columns: 1fr 1fr 1fr; }
  .items-row [data-f="desc"] { grid-column: 1 / -1; }
  .items-amt { text-align: left; }
  .check-row { grid-template-columns: 1fr 1fr; }
  .check-row [data-f="item"], .check-row [data-f="note"] { grid-column: 1 / -1; }
}

/* ---- landing (sign-in page) ---- */
.landing { min-height: 100dvh; padding: var(--space-5) var(--space-4) var(--space-10); max-width: 1120px; margin: 0 auto; }
.landing-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.landing-title { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-4); }
.landing-sub { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-3); max-width: 46ch; }
.landing-actions { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; margin: var(--space-6) 0 var(--space-2); }
.guest-form { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }
.landing .feature-row { max-width: 520px; }
.landing-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: var(--space-3); align-items: center; }
.demo-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.demo-before { background: var(--color-surface-offset); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); transform: rotate(-1.2deg); }
.demo-before p { margin-bottom: var(--space-2); text-wrap: pretty; }
.demo-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--color-primary); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs); }
.demo-arrow .ic { width: 28px; height: 28px; }
.demo-after { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-5);
  border-top: 4px solid var(--color-primary); font-size: 12.5px; }
.demo-after-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.demo-after-head strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-navy); letter-spacing: .02em; }
.demo-after-head span { color: var(--color-text-faint); font-size: 11px; }
.demo-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 5px 0; border-bottom: 1px solid var(--color-divider); }
.demo-row span:last-child, .demo-total span:last-child { font-family: var(--font-mono); white-space: nowrap; }
.demo-total { display: flex; justify-content: space-between; padding: var(--space-2) 0 0; margin-top: var(--space-2); font-weight: 800; font-family: var(--font-display); font-size: var(--text-base); border-top: 2px solid var(--color-primary); }
.demo-terms { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 11.5px; }
.landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); }
.landing-step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-5); padding-right: var(--space-10); }
.landing-step strong { font-family: var(--font-display); font-size: var(--text-base); }
.landing-step > span:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 980px) {
  .landing-hero { grid-template-columns: 1fr; gap: var(--space-8); }
  .landing-steps { grid-template-columns: 1fr; margin-top: var(--space-8); }
}
@media (max-width: 640px) {
  .landing-demo { grid-template-columns: 1fr; }
  .demo-arrow { flex-direction: row; justify-content: center; }
  .demo-arrow .ic { transform: rotate(90deg); }
  .demo-before { transform: none; }
}
@media (max-width: 980px) {
  .doc-preview { order: -1; }
  .doc-preview-card { height: 60vh; min-height: 360px; }
}
.demo-after-head { flex-wrap: wrap; gap: var(--space-2); }
.demo-after-head span { white-space: nowrap; }

/* ============================================================
   V5: one language on the front page, favorites, Simple and
   Advanced, the savings tally, and the phone bar's middle button
   ============================================================ */

/* ---- front page: language switch, the highlighted "yes" ---- */
.lang-pill-word { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-family: var(--font-body);
  font-size: var(--text-sm); padding: var(--space-2) var(--space-4); background: var(--color-surface); min-height: 42px; }
.lang-pill-word .ic { width: 16px; height: 16px; }
.landing-mark { background: var(--color-primary-highlight); color: var(--color-text); font-weight: 700; padding: 1px 6px;
  border-radius: var(--radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- Start here stays: the head now carries the "Change" button ---- */
.start-here-head .btn { flex-shrink: 0; align-self: flex-start; }
.home-more { margin: calc(var(--space-6) * -1) 0 var(--space-10); padding: 0 var(--space-2); }

/* ---- Advanced home: a star on the tiles that are favorites ---- */
.tile { position: relative; }
.tile-fav { position: absolute; top: var(--space-3); left: var(--space-3); color: var(--color-gold); }
.tile-fav .ic { width: 15px; height: 15px; fill: currentColor; }
.tile-primary .tile-fav { color: var(--color-text-inverse); }

/* ---- the favorites picker ---- */
.fav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fav-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 2px solid var(--color-divider); background: var(--color-surface-2); text-align: left; min-height: 52px; }
/* Only where there is a real pointer: on a phone the "hover" stays on the row
   that was tapped last, and a refused fourth pick looked half-selected. */
@media (hover: hover) { .fav-row:hover { border-color: var(--color-primary); } }
.fav-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.fav-row.on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.fav-row .list-row-icon { flex-shrink: 0; }
.fav-name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--text-sm); line-height: 1.25; }
.fav-num { width: 24px; height: 24px; border-radius: var(--radius-full); flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 12px; border: 1.5px dashed var(--color-border); }
.fav-row.on .fav-num { background: var(--color-primary); color: var(--color-text-inverse); border: none; }

/* ---- savings tally (an estimate, and it says so) ---- */
.savings-strip { position: relative; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-10) var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--color-success-highlight); border: 1px solid color-mix(in oklab, var(--color-success) 25%, transparent); }
.savings-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-success); flex-shrink: 0; }
.savings-icon .ic { width: 22px; height: 22px; }
.savings-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.savings-text strong { font-family: var(--font-display); font-size: var(--text-base); line-height: 1.3; color: var(--color-text); }
.savings-rate { display: flex; flex-direction: column; gap: var(--space-1); }
.savings-rate-row { display: flex; align-items: center; gap: var(--space-2); }
.savings-rate .input-field { width: 84px; padding: var(--space-2) var(--space-3); text-align: right; }
.savings-hide { position: absolute; top: var(--space-2); right: var(--space-2); }

/* ---- document page: the button that replaces the inline preview on phones,
   and in any browser that says it cannot draw a PDF inside a page ---- */
.doc-preview-open { display: none; }
.doc-layout.no-inline-pdf .doc-preview-card { display: none; }
.doc-layout.no-inline-pdf .doc-preview-open { display: flex; }

/* ---- quote sheet: an error sits right above the buttons it is about ---- */
.mkdoc-actions .composer-err { margin-bottom: var(--space-3); }
.mkdoc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.mkdoc-row .btn-primary { flex: 1 1 auto; }      /* fills the row, or a row of its own when the two wrap */
.mkdoc-short { display: none; }

/* ---- front page: the language switch is a small form ---- */
.lang-form { display: inline-flex; margin: 0; }
.lang-pill-word { cursor: pointer; }

/* ---- small links that are tapped with a thumb ---- */
.home-more .link-btn, .section-link-btn { min-height: 40px; display: inline-flex; align-items: center; }
.savings-hide { width: 40px; height: 40px; }

/* ---- phone bar: five actions, the first favorite raised in the middle ---- */
.bottom-link { background: none; border: 0; min-width: 0; }
.bottom-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* A long name (Accounting, Contabilidad) is set a little smaller instead of being cut off. */
.bottom-label.tight { font-size: 10px; letter-spacing: -0.02em; }
.bottom-center { color: var(--color-text); }
.bottom-center .bottom-link-fab { display: flex; align-items: center; color: var(--color-text-inverse); margin-bottom: 2px; }
.bottom-center.active { color: var(--color-primary); }
.bottom-center:hover .bottom-link-fab { background: var(--color-primary-hover); }

/* ---- laptops: the eight page names did not fit beside their icons between
   1181px and about 1440px, and every page slid sideways. On those screens the
   names stay and the small icons go (the names are what people read). ---- */
@media (min-width: 1181px) and (max-width: 1480px) {
  .topbar-link .ic { display: none; }
  .topbar-link { padding: var(--space-2) var(--space-3); }
}

@media (max-width: 640px) {
  /* Start-here cards become rows on a phone: three choices fit on one screen. */
  .start-here { padding: var(--space-4); }
  .start-here-head { gap: var(--space-3); margin-bottom: var(--space-4); }
  .start-here-head .brand-mark { display: none; }
  .start-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; align-items: center;
    padding: var(--space-3) var(--space-4); padding-right: var(--space-10); }
  .start-card .start-icon { grid-row: 1 / span 2; }
  /* The number sits on the icon's corner here: the right edge is where the
     floating voice and calculator buttons pass over the cards. */
  .start-card .start-num { top: var(--space-2); left: var(--space-2); right: auto; width: 20px; height: 20px; font-size: 11px; }
  .start-card strong { grid-column: 2; }
  .start-card > span:last-child { grid-column: 2; }
  .fav-list { grid-template-columns: 1fr; }
  /* Twelve rows are taller than the sheet: Save stays in reach at the bottom. */
  .fav-actions { position: sticky; bottom: 0; background: var(--color-surface); padding: var(--space-3) 0 var(--space-4);
    margin-top: var(--space-3); margin-bottom: calc(var(--space-6) * -1); border-top: 1px solid var(--color-divider); }
  .savings-strip { padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4); gap: var(--space-3); }
  .savings-text { min-width: 0; flex-basis: calc(100% - 100px); }
  /* The quote sheet: keep each pair of choices on one line so the text box
     and the button stay on the screen. */
  #mkdoc-modal .choice-list { flex-direction: row; }
  #mkdoc-modal .choice-chip { padding: var(--space-2) var(--space-4); }
  /* ...and keep the sheet short: no intro paragraph, a smaller text box, and
     the photo and "Make the PDF" side by side in one row held at the foot of
     the sheet, with any error above them. One row, not two: stacked, they
     covered the text box on short screens. _base.html tells the sheet how
     tall the foot is, so the text box is scrolled clear of it. */
  #mkdoc-modal .mkdoc-intro { display: none; }
  #mkdoc-modal #mkdoc-text { height: 104px; }
  #mkdoc-modal .mkdoc-actions { position: sticky; bottom: 0; background: var(--color-surface); margin-top: var(--space-3);
    padding: var(--space-3) 0 var(--space-4); margin-bottom: calc(var(--space-6) * -1); }
  #mkdoc-modal .mkdoc-row { flex-wrap: nowrap; }
  #mkdoc-modal .mkdoc-long { display: none; }
  #mkdoc-modal .mkdoc-short { display: inline; }
  #mkdoc-modal #mkdoc-photo-btn { flex: 0 0 auto; min-height: 44px; }
  #mkdoc-modal #mkdoc-go { flex: 1 1 auto; min-width: 0; }
  /* Phone browsers don't draw a PDF inside a page (Android shows an empty box,
     iPhone only page one), so the preview becomes one button that opens it. */
  .doc-preview-card { display: none; }
  .doc-preview-open { display: flex; }
  .savings-rate { flex-direction: row; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; flex-wrap: wrap; }
  /* The star sits in the corner of a small tile, clear of the icon. */
  .tile-fav { top: 6px; left: 6px; }
  .tile-fav .ic { width: 12px; height: 12px; }
  .home-more { margin-top: calc(var(--space-5) * -1); }
  .landing-top { margin-bottom: var(--space-5); }
  .bottom-nav { padding-left: var(--space-2); padding-right: var(--space-2); }
  .bottom-link { font-size: 11px; padding: var(--space-1) 2px; }
  /* Phone pass, 360px screens (most Android phones): a workspace page was as
     wide as its widest child, 13px more than the screen. Let the column shrink. */
  .mode-layout, .two-col { grid-template-columns: minmax(0, 1fr); }
  /* ...and the two buttons under the setup interview stack instead of pushing
     the page 50px wider than the screen. */
  .onboarding-actions { flex-direction: column-reverse; }
  .onboarding-actions .btn { flex: 0 0 auto; width: 100%; }
  /* Job page, Files tab: the size, "Ask HAL" and delete took the whole row and
     the file's name got no room at all (in Spanish, none on any phone). The
     name gets the first line to itself; the controls sit under it. */
  #files-list .doc-row { flex-wrap: wrap; row-gap: var(--space-2); }
  #files-list .doc-name { flex: 1 1 calc(100% - 72px); }
  #files-list .doc-meta { margin-left: auto; }
  /* The smallest phones (320px): two long one-line buttons were wider than the
     screen. They may wrap to a second line instead of widening the page. */
  .home-hero .btn, .doc-preview-open { white-space: normal; text-align: center; max-width: 100%; }
  .home-hero .btn .ic, .doc-preview-open .ic { flex-shrink: 0; }
  /* Phone pass: the jobs row bled 4px past the screen edge (its side margins
     assumed the desktop gutter), which let the whole page slide sideways. */
  .carousel-wrap { margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
}

/* ============================================================
   V5.1 — the microphone says what it hears, materials on a quote,
   the Home Depot list, moving things between jobs
   ============================================================ */
/* voice notes: the words being heard right now, before they settle into the box */
.rec-live { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-offset); color: var(--color-text-muted); font-style: italic; overflow-wrap: anywhere; }
.record-btn:disabled { opacity: .6; cursor: progress; animation: none; }
.tool-card .btn-block { white-space: normal; }      /* a long label wraps instead of widening the page */
.record-btn:disabled .ic { animation: spin 1s linear infinite; }
.cbtn:disabled .ic { animation: spin 1s linear infinite; }

/* materials on a quote: the line editor with two more columns (a link and a remove) */
.mat-zip { width: 84px; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); text-align: center; }
.mat-head, .mat-row { grid-template-columns: minmax(0, 3fr) 60px 64px 88px 84px 36px 36px; }
.mat-row .mat-src { grid-column: 1 / -1; color: var(--color-text-muted); margin: -2px 0 var(--space-2); overflow-wrap: anywhere; }
.mat-row a.icon-btn { color: var(--color-primary); }
.mat-open { color: var(--color-primary); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; }
#mat-card .btn { white-space: normal; }             /* a long label wraps instead of widening the page */
@media (max-width: 640px) {
  .mat-row { grid-template-columns: 1fr 1fr 1fr; }
  .mat-row [data-f="item"] { grid-column: 1 / -1; }
  .mat-row .items-amt { align-self: center; }
  .mat-row a.icon-btn, .mat-row button.icon-btn { justify-self: start; width: 44px; height: 44px; }
  #mat-card .doc-totals > div { min-width: 0; width: 100%; }
  .mat-zip, #mat-markup { min-height: 40px; }
}

/* the Home Depot list: one row per item, the Open button always in reach.
   The floating mic and calculator sit over that button's column, so they
   stay off this page. */
body:has(#hd-list) .fab-stack { display: none; }
.hd-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.hd-row:last-child { border-bottom: 0; }
.hd-check { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.hd-check input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.hd-item, .hd-src { overflow-wrap: anywhere; }
.hd-price { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--text-sm); white-space: nowrap; }
.hd-row.got .hd-main, .hd-row.got .hd-price { opacity: .45; text-decoration: line-through; }
@media (max-width: 640px) {
  .hd-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .hd-price { grid-column: 2; flex-direction: row; gap: var(--space-2); align-items: baseline; justify-content: flex-start; }
  .hd-open { grid-column: 3; grid-row: 1 / span 2; min-height: 44px; }
}
@media print {
  .hd-open, .hd-check, #hd-copy, .banner, .job-detail-breadcrumb, .row > .btn { display: none !important; }
  .hd-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ============================================================
   V6 — the job is the workspace: project selector, company and job
   dashboards (Financial Overview, jobs board, attention, activity),
   job tabs, drop-anything inbox
   ============================================================ */

/* ---- project selector (top bar) ---- */
.scope { position: relative; min-width: 0; }
/* V6: on a narrow screen the job name gives way (with …) before the buttons on the right do */
.topbar-left { min-width: 0; flex: 0 1 auto; }
.topbar-right { flex-shrink: 0; }
.scope-btn > .ic, .scope-btn .scope-caret { flex-shrink: 0; }
.scope-btn { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 300px; min-height: 44px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-3); border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface); text-align: left; }
.scope-btn:hover, .scope-btn[aria-expanded="true"] { border-color: var(--color-primary); }
.scope-btn > .ic { width: 18px; height: 18px; color: var(--color-primary); }
.scope-btn .scope-caret { width: 16px; height: 16px; color: var(--color-text-muted); }
.scope-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.scope-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); }
.scope-name { font-weight: 700; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-pop { position: absolute; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px);
  overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 75; }
.scope-search { padding: var(--space-1) var(--space-1) var(--space-2); position: sticky; top: calc(var(--space-2) * -1); background: var(--color-surface); z-index: 1; }
.scope-item { display: flex; width: 100%; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-text); text-align: left; min-height: 48px; }
.scope-item:hover { background: var(--color-surface-offset); }
.scope-item.on { background: var(--color-primary-soft); }
.scope-item .pill { flex-shrink: 0; }
.scope-ico { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-surface-offset); color: var(--color-text-muted); }
.scope-ico .ic { width: 17px; height: 17px; }
.scope-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.scope-main strong { font-size: var(--text-sm); overflow-wrap: anywhere; line-height: 1.25; }
.scope-main span { font-size: var(--text-xs); color: var(--color-text-muted); }
.scope-item.quiet .scope-main span { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.scope-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); padding: var(--space-3) var(--space-2) var(--space-1); }
.scope-none { padding: var(--space-2); }
.scope-foot { border-top: 1px solid var(--color-divider); margin-top: var(--space-2); padding-top: var(--space-2); }
.drawer-group { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-faint); padding: var(--space-2) var(--space-3) var(--space-1); overflow-wrap: anywhere; }

/* ---- Financial Overview: five figures ---- */
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-k { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.kpi-k .ic { width: 14px; height: 14px; }
.kpi-v { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-n { font-size: var(--text-xs); color: var(--color-text-faint); }
.kpi-in .kpi-k .ic { color: var(--color-success); }
.kpi-out .kpi-k .ic { color: var(--color-warning); }
.kpi-owed .kpi-k .ic { color: var(--color-primary); }
.kpi-pipe .kpi-k .ic { color: var(--color-blue); }
.kpi-net { background: var(--color-navy-soft); border-color: transparent; }
.kpi-net.neg .kpi-v, .neg { color: var(--color-error) !important; }
.fin-flow > summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted); padding: var(--space-2) 0; list-style-position: inside; }
.fin-flow > summary:hover { color: var(--color-text); }
.fin-table td, .fin-table th { white-space: nowrap; }
.fin-table td:first-child { white-space: normal; min-width: 180px; }
.fin-job { font-weight: 700; color: var(--color-text); text-decoration: none; margin-right: var(--space-2); }
.fin-job:hover { color: var(--color-primary); }

/* ---- jobs board ---- */
.status-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.status-filter .choice-chip { min-height: 38px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.board-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; text-align: left; min-width: 0; }
.board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-border); }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-right: 0; }
.board-ico { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.board-ico .ic { width: 19px; height: 19px; }
.board-name { font-weight: 700; font-size: var(--text-base); line-height: 1.25; overflow-wrap: anywhere; }
.board-sub { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.board-money { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); font-weight: 600; }
.board-owed { color: var(--color-primary-hover); }
.board-meta { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-top: auto; }
.board-meta .job-card-note { margin-left: auto; }
.board-new { border: 2px dashed var(--color-border); background: transparent; box-shadow: none; align-items: center; justify-content: center;
  min-height: 150px; color: var(--color-text-muted); font-weight: 700; flex-direction: row; }
.board-new:hover { border-color: var(--color-primary); color: var(--color-primary); }
.board-new .ic { width: 22px; height: 22px; }
.board-card .job-card-tools { top: auto; bottom: var(--space-2); right: var(--space-2); opacity: 0; transition: opacity var(--transition-interactive); }
.board-card:hover .job-card-tools, .board-card:focus-within .job-card-tools { opacity: 1; }
@media (hover: none) { .board-card .job-card-tools { opacity: 1; position: static; justify-content: flex-end; } }
.board-card[hidden] { display: none; }
.task-job { margin-left: var(--space-1); text-decoration: none; font-weight: 600; }

/* ---- activity ---- */
.activity { padding: var(--space-1) 0; }
.act-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; border-bottom: 1px solid var(--color-divider); }
.act-row:last-child { border-bottom: 0; }
.act-row:hover { background: var(--color-surface-2); }
.act-ico { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.act-ico .ic { width: 15px; height: 15px; }
.act-main { display: flex; flex-direction: column; min-width: 0; }
.act-text { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.act-sub { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---- the job page ---- */
.job-head { margin-bottom: var(--space-4); }
.job-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.job-head-main { min-width: 0; flex: 1 1 300px; }   /* a basis, so the buttons drop below the name on a phone */
.job-detail-title { overflow-wrap: anywhere; }
.job-facts { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.job-fact { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; overflow-wrap: anywhere; }
a.job-fact:hover { color: var(--color-primary); }
.job-fact .ic { width: 15px; height: 15px; }
.status-wrap { position: relative; }
.job-status-btn { cursor: pointer; border: 0; min-height: 30px; }
.job-status-btn .ic { width: 13px; height: 13px; }
.job-status-btn:disabled { cursor: default; }
.status-pop { left: 0; right: auto; min-width: 180px; }
.status-pop button.on { background: var(--color-surface-offset); }
.job-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.job-tabs { margin-bottom: var(--space-5); }
.job-tabs .subtab-btn .pill { margin-left: 2px; }
.job-section { margin-bottom: var(--space-8); }
.job-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.job-col { min-width: 0; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.quick-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; align-items: center; text-align: left;
  padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; min-width: 0; }
.quick-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.quick-card .start-icon { grid-row: 1 / span 2; }
.quick-card strong { font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.25; }
.quick-card > span:last-child { font-size: var(--text-xs); color: var(--color-text-muted); }
.chat-compact .chat-shell { height: 560px; min-height: 420px; }
.focus-switch { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.focus-switch .choice-chip { text-decoration: none; min-height: 38px; }
.focus-switch .choice-chip .ic { width: 15px; height: 15px; }
.tool-docs .doc-row { padding: var(--space-2) 0; }
.tool-docs .doc-name { font-size: var(--text-sm); }
.mini-fin { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.mini-fin div { display: flex; flex-direction: column; }
.mini-fin span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.mini-fin strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-navy); }
.cust-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.cust-list dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); }
.cust-list dd { font-size: var(--text-sm); overflow-wrap: anywhere; }
.files-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.files-head .camera-cta, .files-head .dropzone { margin: 0; height: 100%; }
.pick-list { padding: 0; overflow: hidden; }
.pick-new { width: 100%; text-align: left; }
.wrong-job .link-btn { margin-left: var(--space-1); }

/* ---- drop anything (company dashboard) ---- */
.inbox-card { padding: var(--space-4); }
.inbox-drop { margin: 0; flex-direction: column; gap: var(--space-1); padding: var(--space-5); }
.inbox-drop strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text); }
.inbox-list { display: flex; flex-direction: column; }
.inbox-list:empty { display: none; }
.inbox-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--color-divider); margin-top: var(--space-3); }
.inbox-main { flex: 1; min-width: 0; }
.inbox-main .list-row-title { overflow-wrap: anywhere; }
.inbox-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.inbox-actions select { max-width: 240px; }
.inbox-item.busy { opacity: .6; pointer-events: none; }

@media (max-width: 1180px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .job-grid { grid-template-columns: minmax(0, 1fr); }
  .scope-btn { max-width: 240px; }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .kpi-net { grid-column: 1 / -1; }
  .kpi { padding: var(--space-3); }
  .kpi-v { font-size: var(--text-base); }
  .quick-grid { grid-template-columns: minmax(0, 1fr); }
  .files-head { grid-template-columns: minmax(0, 1fr); }
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  .app-topbar { gap: var(--space-2); }
  .scope-btn { max-width: 100%; padding: var(--space-1) var(--space-2); }
  .scope-kicker { display: none; }
  .scope-pop { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
  .job-head-actions .btn { padding: var(--space-2) var(--space-3); }
  .chat-compact .chat-shell { height: 70dvh; }
  .inbox-actions select { max-width: 100%; flex: 1 1 100%; }
  /* a document line: name on top, amount and status under it, nothing cut off */
  a.doc-row { flex-wrap: wrap; row-gap: var(--space-1); }
  a.doc-row .doc-name { white-space: normal; overflow-wrap: anywhere; flex: 1 1 calc(100% - 60px); }
  a.doc-row .doc-meta { margin-left: calc(44px + var(--space-3)); }
  a.doc-row .doc-meta:empty + .pill { margin-left: calc(44px + var(--space-3)); }
}
/* small phones: the job selector already leads home (All jobs), so the logo steps aside for the job name */
@media (max-width: 480px) { .brand.has-scope { display: none; } }
.status-filter .choice-chip { flex: 0 0 auto; padding: var(--space-2) var(--space-4); }
.focus-switch .choice-chip { flex: 0 0 auto; padding: var(--space-2) var(--space-4); }
/* the tool panel is narrow: a document's name wraps instead of being cut */
.tool-docs .doc-row { flex-wrap: wrap; row-gap: var(--space-1); }
.tool-docs .doc-name { white-space: normal; overflow-wrap: anywhere; flex: 1 1 140px; }
.tool-docs .doc-meta { margin-left: auto; }
#expenses-list .doc-name { flex-basis: 90px; }   /* store, amount and delete stay on one line */
/* V6: a document HAL made from the chat, as a button under its reply */
.msg-doc { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary-hover) !important; font-weight: 700; text-decoration: none; }
.msg-doc:hover { background: var(--color-primary-highlight); }
.msg-doc .ic { width: 16px; height: 16px; }

/* ---- the step-by-step quote ---- */
.modal-sheet.guided { width: min(760px, calc(100vw - 32px)); max-height: 92vh; }
.guided-steps { display: flex; gap: var(--space-2); list-style: none; margin-bottom: var(--space-5); counter-reset: gstep; }
.guided-steps li { flex: 1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-faint);
  border-top: 3px solid var(--color-divider); padding-top: var(--space-2); counter-increment: gstep; }
.guided-steps li::before { content: counter(gstep); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-offset); color: var(--color-text-muted); font-size: 11px; flex-shrink: 0; }
.guided-steps li.on { color: var(--color-primary-hover); border-top-color: var(--color-primary); }
.guided-steps li.on::before { background: var(--color-primary); color: var(--color-text-inverse); }
.guided-steps li.done { color: var(--color-text-muted); border-top-color: var(--color-primary-highlight); }
.guided-q { font-family: var(--font-display); font-size: var(--text-base); margin: var(--space-2) 0 var(--space-3); }
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); }
.gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 96px; padding: var(--space-3);
  border-radius: var(--radius-md); border: 2px solid var(--color-divider); background: var(--color-surface-2); text-align: center; font-weight: 700; font-size: var(--text-sm); }
.gtile:hover { border-color: var(--color-border); }
.gtile.on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }
.gtile-ico { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-navy); }
.gtile.on .gtile-ico { color: var(--color-primary); }
.gtile-ico .ic { width: 22px; height: 22px; }
.gtile-label { line-height: 1.25; }
.g-group { margin-bottom: var(--space-4); }
.g-group-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-2); color: var(--color-navy); }
.g-group-head .ic { width: 17px; height: 17px; }
.g-group .chips { justify-content: flex-start; margin: 0; }
.g-other { display: flex; gap: var(--space-2); margin: var(--space-2) 0 var(--space-5); }
.g-lines-head, .g-line { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px 96px 36px; gap: var(--space-2); align-items: center; }
.g-lines-head { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding-bottom: var(--space-2); }
.g-lines-head .r, .g-amt { text-align: right; }
.g-line { padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.g-line .input-field { padding: var(--space-2); font-size: var(--text-sm); }
.g-line .num { text-align: right; }
.g-qty, .g-price { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.g-qty input { width: 72px; flex-shrink: 0; }
.g-unit { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-amt { font-size: var(--text-sm); }
.g-line.est .g-price input { border-color: var(--color-gold); background: var(--color-gold-highlight); }
.g-est { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-1); color: var(--color-gold); margin-top: -2px; }
.g-est .ic { width: 13px; height: 13px; }
.g-total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 2px solid var(--color-primary);
  font-family: var(--font-display); font-weight: 700; }
.g-total strong { font-size: var(--text-lg); }
.guided-foot { display: flex; align-items: center; gap: var(--space-2); position: sticky; bottom: calc(var(--space-6) * -1); background: var(--color-surface);
  padding: var(--space-4) 0 var(--space-5); margin-top: var(--space-4); border-top: 1px solid var(--color-divider); }
@media (max-width: 640px) {
  .modal-sheet.guided { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 94dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtile { min-height: 84px; }
  .g-lines-head { display: none; }
  .g-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .g-line .g-desc { grid-column: 1 / 3; }
  .g-line .icon-btn { grid-column: 3; grid-row: 1; }
  .g-amt { grid-column: 1 / -1; }
  .guided-steps li { font-size: 10px; }
}

/* ---- V6: sign in with a phone number ---- */
.phone-signin { display: flex; flex-direction: column; gap: var(--space-2); }
.phone-open { cursor: pointer; width: 100%; }
.phone-open .ic { width: 20px; height: 20px; color: var(--color-primary); }
.phone-row { display: flex; gap: var(--space-2); }
.phone-row .input-field { flex: 1; min-width: 0; font-size: var(--text-base); }
#phone-code { letter-spacing: .2em; font-family: var(--font-mono); }
@media (max-width: 640px) { .phone-row { flex-direction: column; } }

/* ============================================================
   V7 — money in plain words, add receipts, sorting files, closeout
   ============================================================ */
.kpi-due .kpi-k .ic { color: var(--color-error); }
.kpi-foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.kpi-foot span, .kpi-foot a { display: inline-flex; align-items: center; gap: var(--space-1); }
.kpi-foot .ic { width: 14px; height: 14px; }
.kpi-review { color: var(--color-error); font-weight: 700; text-decoration: none; }
.kpi-review:hover { text-decoration: underline; }
.money-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hide-phone { }
.section-sub { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- the transaction table ---- */
.cat-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
.cat-chips::-webkit-scrollbar { display: none; }
.ledger { padding: 0; overflow: hidden; }
.ledger-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px 120px 112px 76px; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.ledger.with-job .ledger-row { grid-template-columns: 74px minmax(0, 1fr) 140px 140px 120px 112px 76px; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row[hidden] { display: none; }
.ledger-th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700;
  background: var(--color-surface-2); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.ledger-th .num, .lg-amt { text-align: right; }
.lg-date { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.lg-desc { display: flex; flex-direction: column; min-width: 0; }
.lg-desc a, .lg-open { font-weight: 700; color: var(--color-text); text-decoration: none; text-align: left; overflow-wrap: anywhere; padding: 0; font-size: inherit; }
.lg-desc a:hover, .lg-open:hover { color: var(--color-primary); }
.lg-sub { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.lg-items { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.lg-items summary { cursor: pointer; color: var(--color-primary); font-weight: 700; width: max-content; }
.lg-items ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.lg-items li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border-top: 1px dashed var(--color-divider); }
.lg-job a { font-weight: 600; color: var(--color-text-muted); text-decoration: none; overflow-wrap: anywhere; }
.lg-job a:hover { color: var(--color-primary); }
.lg-cat .pill { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lg-amt { font-weight: 700; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.lg-amt.in { color: var(--color-success); }
.lg-got { font-size: 11px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.lg-status { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.lg-act { display: flex; justify-content: flex-end; gap: 2px; }
.ledger-empty { padding: var(--space-5); }
.review-q { font-weight: 700; font-size: var(--text-sm); margin-top: var(--space-2); }
.review-section { margin-top: var(--space-6); }
@media (max-width: 480px) { .topbar-right .lang-pill { display: none; } }   /* in the menu and the account menu instead */
.review-row { align-items: flex-start; }

/* ---- add receipts ---- */
.rcpt-picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.rcpt-picks .camera-cta, .rcpt-picks .dropzone { margin: 0; padding: var(--space-5) var(--space-3); flex-direction: column; gap: var(--space-1); height: 100%; }
.rcpt-picks .dropzone strong { color: var(--color-text); }
.rcpt-list { display: flex; flex-direction: column; margin-top: var(--space-3); }
.rcpt-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); }
.rcpt-ico .ic { width: 20px; height: 20px; color: var(--color-success); }
.rcpt-row.busy .rcpt-ico .ic { color: var(--color-text-muted); animation: spin 1s linear infinite; }
.rcpt-row.warn .rcpt-ico .ic { color: var(--color-warning); }
.rcpt-main { display: flex; flex-direction: column; min-width: 0; }
.rcpt-main strong { font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ---- invoice from receipts ---- */
.billr-list { display: flex; flex-direction: column; max-height: 38vh; overflow-y: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.billr-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.billr-row:last-child { border-bottom: 0; }
.billr-row input { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.billr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.billr-main strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
#billr-missing ul { margin: var(--space-1) 0 0 var(--space-4); font-weight: 500; }

/* ---- a job on a phone: the four things done most, under the tabs ---- */
.job-quick { display: none; }

/* ---- the company table, stacked on a phone ---- */
.fin-table .fin-job { font-weight: 700; text-decoration: none; }

/* Narrower than a laptop: each line becomes a small card (date, what, amount,
   status), so nothing is cut off and nothing scrolls sideways. */
@media (max-width: 980px) {
  .ledger-th { display: none; }
  .ledger-row, .ledger.with-job .ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); }
  .lg-date { grid-column: 1; grid-row: 1; }
  .lg-desc { grid-column: 1; grid-row: 2; }
  .lg-amt { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .lg-status { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; gap: var(--space-2); }
  .lg-cat { display: none; }
  .lg-act { grid-column: 2; grid-row: 3; }
  .ledger.with-job .lg-job { grid-column: 1; grid-row: 4; font-size: var(--text-xs); }
}
@media (max-width: 640px) {
  .hide-phone { display: none !important; }
  .job-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: calc(var(--space-2) * -1) 0 var(--space-5); }
  .job-quick a, .job-quick button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-3) var(--space-1);
    background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    font-size: var(--text-xs); font-weight: 700; color: var(--color-text); text-decoration: none; text-align: center; min-height: 64px; }
  .job-quick .ic { width: 22px; height: 22px; color: var(--color-primary); }
  .money-actions .btn { flex: 1 1 calc(50% - var(--space-2)); padding-left: var(--space-3); padding-right: var(--space-3); }
  .money-actions .btn-primary { flex-basis: 100%; }
  .ledger-row, .ledger.with-job .ledger-row { padding: var(--space-3); }
  .rcpt-picks { grid-template-columns: 1fr; }
  .rcpt-picks .camera-cta { padding: var(--space-6) var(--space-3); }
  .fin-table.fin-stack thead { display: none; }
  .fin-table.fin-stack, .fin-table.fin-stack tbody, .fin-table.fin-stack tr, .fin-table.fin-stack td { display: block; width: 100%; }
  .fin-table.fin-stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
  .fin-table.fin-stack tr:last-child { border-bottom: 0; }
  .fin-table.fin-stack td { display: flex; justify-content: space-between; gap: var(--space-3); border: 0; padding: 3px 0; text-align: right; }
  .fin-table.fin-stack td::before { content: attr(data-label); font-family: var(--font-body, inherit); font-size: var(--text-xs); color: var(--color-text-muted); text-align: left; font-weight: 600; }
  .fin-table.fin-stack td:first-child { font-size: var(--text-base); padding-bottom: var(--space-2); }
  .fin-table.fin-stack td:first-child::before { display: none; }
}

/* ---- files, sorted by what they are ---- */
.file-groups { display: flex; flex-direction: column; gap: var(--space-5); }
.file-group-head { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-base); margin-bottom: var(--space-2); color: var(--color-navy); }
.file-group-head .ic { width: 18px; height: 18px; }
.file-group.uncat .file-group-head { color: var(--color-warning); }
.file-group.uncat .file-card { border-color: var(--color-warning); }
.file-group-tip { margin: calc(var(--space-1) * -1) 0 var(--space-2); }
.file-card { padding: 0 var(--space-4); }
.file-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.file-row:last-child { border-bottom: 0; }
.file-row.busy { opacity: .7; }
.file-row .doc-ext { margin-top: 2px; }
.file-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; cursor: zoom-in; background: var(--color-surface-offset); }
.file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.file-name { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.file-name:hover { color: var(--color-primary); }
.file-sub { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.file-meta a.pill { text-decoration: none; }
.file-typerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 2px; }
.file-type { width: auto; max-width: 260px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); min-height: 32px; }
.file-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.file-suggest code { font-family: var(--font-mono); font-size: 11px; background: var(--color-surface-offset); padding: 1px 6px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.file-acts { display: flex; gap: 2px; flex-shrink: 0; }
@media (max-width: 640px) {
  .file-row { flex-wrap: wrap; }
  .file-main { flex-basis: calc(100% - 60px); }
  .file-acts { width: 100%; justify-content: flex-end; margin-top: calc(var(--space-1) * -1); }
  .file-type { max-width: 100%; flex: 1 1 auto; }
}

/* ---- closeout ---- */
.close-state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.close-state .ic { width: 16px; height: 16px; }
.close-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.close-h { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-base); color: var(--color-navy); margin-bottom: var(--space-3); }
.close-h .ic { width: 18px; height: 18px; }
.close-list { display: flex; flex-direction: column; }
.close-list div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.close-list div:last-child { border-bottom: 0; }
.close-list dt { color: var(--color-text-muted); overflow-wrap: anywhere; }
.close-list dt a { font-weight: 700; }
.close-list dd { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.close-list dd.warn { color: var(--color-warning); }
.close-list .total dt { color: var(--color-text); font-weight: 700; }
.close-list .total { border-top: 2px solid var(--color-primary); }
.close-result { background: var(--color-navy-soft); border-color: transparent; }
.close-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl, 1.9rem); color: var(--color-navy); line-height: 1.1; margin-bottom: var(--space-2); }
.close-result.neg .close-big { color: var(--color-error); }
.close-flag .list-row-icon { background: var(--color-blue-highlight); color: var(--color-blue); }
.close-flag.warn .list-row-icon { background: var(--color-warning-highlight); color: var(--color-warning); }
.close-flag.ok .list-row-icon { background: var(--color-success-highlight); color: var(--color-success); }
.budget-card { padding: 0 var(--space-4); }
.budget-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 150px 120px 120px; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.budget-th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; }
.budget-row > span:nth-child(n+3) { text-align: right; }
.budget-row label { font-weight: 600; }
.budget-in { display: flex; align-items: center; gap: var(--space-1); }
.budget-in .input-field { padding: var(--space-2); }
.budget-row .ok { color: var(--color-success); }
.budget-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; flex-wrap: wrap; }
.budget-foot p { flex: 1 1 260px; margin: 0; }
.quick-card:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
@media (max-width: 980px) { .close-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .budget-th { display: none; }
  .budget-row { grid-template-columns: minmax(0, 1fr) 130px; row-gap: 2px; }
  .budget-row > span:nth-child(n+3) { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--text-xs); }
  .budget-row > span:nth-child(n+3)::before { content: attr(data-label); color: var(--color-text-muted); font-family: var(--font-body); }
}

/* ---- a scope from notes or a drawing ---- */
.scope-out { margin-top: var(--space-4); border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.scope-title { font-family: var(--font-display); font-size: var(--text-base); margin-bottom: var(--space-1); }
.scope-h { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-1); }
.scope-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-1) var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.scope-row:last-of-type { border-bottom: 0; }
.scope-main { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-sm); }
.scope-main strong { overflow-wrap: anywhere; }
.scope-qty { display: flex; align-items: center; gap: var(--space-1); }
.scope-qty .input-field { width: 72px; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.scope-price { grid-column: 1 / -1; text-align: right; color: var(--color-gold); }
.scope-price:empty { display: none; }
.scope-list { margin: 0 0 0 var(--space-5); font-size: var(--text-sm); }
.scope-list li { margin: 2px 0; }
.scope-out .pill { white-space: nowrap; }

/* ---- the bell ---- */
.notif-wrap { position: relative; }
.notif-btn { position: relative; }
.notif-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-primary);
  color: var(--color-text-inverse); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-family: var(--font-body); pointer-events: none; }
.notif-pop { width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; right: -52px; }
.notif-list { display: flex; flex-direction: column; }
.notif-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3) !important; }
.notif-row .list-row-icon { width: 32px; height: 32px; }
.notif-row .list-row-icon .ic { width: 16px; height: 16px; color: inherit; }
.notif-main { display: flex; flex-direction: column; min-width: 0; }
.notif-main strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.notif-main span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.notif-empty { padding: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 640px) {
  .notif-pop { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
}

/* ---- V7 (Avery, item 1): a phone shows what contractors use most, first ---- */
/* Home: greeting, the three favorites (with Add receipts), what needs you,
   the jobs, Drop anything, the money, to-dos, activity, every tool last.
   A job: the things to do, what needs you, its money, to-dos, documents,
   activity, then the chat. The order on a laptop is unchanged. */
@media (max-width: 640px) {
  .home-root { display: flex; flex-direction: column; }
  .home-root > .two-col, .home-root > .two-col > div { display: contents; }
  .home-root > *, .home-root > .two-col > *, .home-root > .two-col > div > * { order: 50; }
  .home-root > [data-surface="home.hero"] { order: 1; }
  .home-root > #brief-card { order: 2; }
  .home-root > #start-here { order: 3; }
  .home-root .two-col [data-surface="home.attention"] { order: 4; }
  .home-root > [data-surface="home.jobs"] { order: 5; }
  .home-root > [data-surface="home.inbox"] { order: 6; }
  .home-root > [data-surface="home.money"] { order: 7; }
  .home-root .two-col .home-tasks { order: 8; }
  .home-root .two-col [data-surface="home.chats"] { order: 9; }
  .home-root > .home-more, .home-root > [data-surface="home.tiles"] { order: 10; }
  .job-overview { display: flex; flex-direction: column; }
  .job-overview > .job-grid, .job-overview .job-col { display: contents; }
  .job-overview .ov-quick { order: 1; }
  .job-overview .ov-attn { order: 2; }
  .job-overview .ov-fin { order: 3; }
  .job-overview .ov-todos { order: 4; }
  .job-overview .ov-docs { order: 5; }
  .job-overview .ov-activity { order: 6; }
  .job-overview .ov-ask { order: 7; }
  /* the Overview has its own big "do something" cards: no second row of them */
  .job-quick.on-overview { display: none; }
}
@media (max-width: 640px) {
  .close-flag { flex-wrap: wrap; }
  .close-flag .list-row-main { flex: 1 1 calc(100% - 48px); }
  .close-flag .btn { margin-left: calc(38px + var(--space-3)); }
}