/* Field v3 · Workbench: a warm bench, white cards, ink for the next step, red only for your voice.
   Built for sunlight, gloves and one hand: 18px body, 15px minimum, 52px primary buttons, 44px everything. */
@font-face { font-family: 'Archivo'; font-weight: 500; font-display: swap; src: url('/app/v3/fonts/archivo-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 600; font-display: swap; src: url('/app/v3/fonts/archivo-600.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 700; font-display: swap; src: url('/app/v3/fonts/archivo-700.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-display: swap; src: url('/app/v3/fonts/archivo-800.woff2') format('woff2'); }
:root {
  --ink: #1A1A18; --ink-2: #3A3935; --ink-3: #5C5A55; --line: #D8D4CB; --line-2: #ECE9E2;
  --dock: var(--card); --dock-ring: rgba(255, 255, 255, .9);
  --bg: #F3F1EC; --card: #FFFFFF; --red: #C41E3A; --red-dark: #8E1626; --red-soft: #FBE4E6;
  --blue: #1F5FBF; --blue-dark: #163F86; --blue-soft: #E7EEFB;
  --amber-dark: #6B3A00; --amber-soft: #FFF1DB; --green-dark: #155C33; --green-soft: #E2F3E8;
  --money-soft: #E7E3DA;
  --bar: var(--bg); --bar-2: #FFFFFF; --on-bar: var(--ink);
  --shadow: 0 1px 2px rgba(26,26,24,.06); --shadow-2: 0 1px 2px rgba(26,26,24,.06), 0 6px 20px rgba(26,26,24,.06);
  --radius: 20px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F4F4F2; --ink-2: #E6E6E3; --ink-3: #C9C9C5; --line: #3A3A38; --line-2: #2A2A28;
    --money-soft: #2E2C27; --shadow: none; --shadow-2: none;
    --bg: #0E0E0D; --card: #1B1B19; --red: #D4314B; --red-dark: #FFB3BF; --red-soft: #3A0F16;
    --blue: #3D7DE0; --blue-dark: #B9D0F7; --blue-soft: #12233F;
    --amber-dark: #FFD49A; --amber-soft: #3A2500; --green-dark: #A8E2BE; --green-soft: #0F2E1C;
    --bar: #0E0E0D; --bar-2: #1B1B19; --on-bar: #F4F4F2; --dock-ring: rgba(27, 27, 25, .9);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
/* The app frame is pinned to the screen: only the content inside it scrolls. The page itself never scrolls,
   so the header and the bottom bar stay put and Safari's toolbars do not resize the app mid-swipe. */
html, body { margin: 0; height: 100%; overflow: hidden; }
/* The frame follows the part of the screen the keyboard leaves visible (--vvh, set from visualViewport in app.js),
   so the box being typed in sits right above the keyboard and the messages shrink to fit above it. */
body { position: fixed; top: var(--vvt, 0px); left: 0; right: 0; height: var(--vvh, 100%); }
body { background: var(--bg); color: var(--ink); font: 500 18px/1.4 "Archivo", -apple-system, "SF Pro Text", system-ui, sans-serif; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--red); }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Map chips, the stop card and Leaflet panes use z-index 500–1000. That stays inside this
   frame, so a full-screen viewer or the talk sheet (both sit on the page, above the frame)
   covers them and takes the clicks. Their order inside the app does not change. */
#app { max-width: 560px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; background: var(--bg); position: relative; isolation: isolate; }
main.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
/* A long screen scrolls; it never squeezes a card shorter than its text (text would spill onto the next row). */
main.scroll > * { flex-shrink: 0; }
.grow { flex: 1; }
.muted { color: var(--ink-3); } .small { font-size: 15px; } .center { text-align: center; } .pad { padding: 12px 4px; margin: 0; }
.title { margin: 4px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.3px; }
.label { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.section { margin: 8px 0 0; font-size: 17px; font-weight: 800; color: var(--ink-2); }

/* Buttons: one red primary per screen, 56px. */
.primary, .secondary, .dark, .blue, .danger, .btn { min-height: 52px; padding: 0 18px; border-radius: 14px; font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; border: 2px solid transparent; }
.primary { background: var(--red); color: #FFFFFF; }
.secondary { background: var(--card); color: var(--ink); border-color: var(--ink); }
.dark { background: var(--ink); color: var(--card); }
.blue { background: var(--blue); color: #FFFFFF; }
.danger { background: var(--red-soft); color: var(--red-dark); }
.xl { min-height: 58px; width: 100%; font-size: 19px; }
button:disabled { opacity: .5; cursor: default; }
.ghost { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 17px; font-weight: 600; }
.link { background: none; border: 0; color: var(--red); font-weight: 700; font-size: 17px; text-decoration: underline; min-height: 44px; padding: 0; align-self: flex-start; }
.dashed { min-height: 52px; border-radius: 12px; border: 2px dashed var(--ink-3); background: transparent; font-size: 17px; font-weight: 700; }
.danger-link { margin-top: 8px; min-height: 52px; background: none; border: 0; color: var(--red-dark); font-weight: 700; text-decoration: underline; }
.icon-btn { width: 48px; height: 48px; border: 0; background: transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn svg { width: 26px; height: 26px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card h2, .card h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.meta { margin: 0; font-size: 16px; color: var(--ink-3); }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); }
.chip svg { width: 16px; height: 16px; }
.chip.unpaid { background: var(--red-soft); color: var(--red-dark); }
.chip.back, .chip.hazard { background: var(--amber-soft); color: var(--amber-dark); }
.chip.open, .chip.waiting { background: var(--blue-soft); color: var(--blue-dark); }
.chip.paid, .chip.done { background: var(--green-soft); color: var(--green-dark); }
.note { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; background: var(--line-2); }
.note p { margin: 0; font-size: 16px; font-weight: 600; text-align: left; flex: 1; }
.note.blue { background: var(--blue-soft); color: var(--blue-dark); }
/* A notice with buttons: the message gets the full width, the buttons go on their own row underneath. */
.note:has(> .two) { flex-wrap: wrap; }
.note > .two { flex: 1 1 100%; padding-left: 38px; display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: flex-start; }
.note > .two > button { white-space: nowrap; min-height: 40px; padding: 0; }
.nico-badge { width: 28px; height: 28px; border-radius: 999px; background: var(--ink); color: var(--card); font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.note.blue .nico-badge { background: var(--blue-dark); color: var(--blue-soft); }
.lock-line { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 16px; color: var(--ink-2); font-weight: 600; }
.lock-line svg { width: 20px; height: 20px; }

/* Top bar and tabs */
.topbar { height: calc(60px + var(--safe-t)); padding: var(--safe-t) 12px 0 16px; background: var(--bar); color: var(--on-bar); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar .lockup { height: 26px; width: auto; }
.lang-pill { display: flex; background: var(--bar-2); border-radius: 999px; padding: 4px; gap: 2px; }
.lang-pill button { min-height: 36px; min-width: 44px; border: 0; border-radius: 999px; background: transparent; color: #D9D9D6; font-weight: 800; font-size: 15px; }
.lang-pill button[aria-pressed="true"] { background: #FFFFFF; color: #111111; }
.avatar { width: 44px; height: 44px; border-radius: 999px; border: 0; background: #3A3A38; color: #FFFFFF; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.avatar.big { width: 60px; height: 60px; font-size: 22px; font-weight: 800; }
.tabbar { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tabbar button { min-height: 62px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.tabbar button[aria-current="page"] { color: var(--red); box-shadow: inset 0 3px 0 var(--red); }
.offline-bar { background: var(--amber-soft); color: var(--amber-dark); font-weight: 700; font-size: 16px; padding: 8px 16px; text-align: center; }
.save-bar { background: var(--red-soft); color: var(--red-dark); }
.save-bar .link { min-height: 32px; font-size: 16px; margin-left: 6px; }
.usage-line { margin: 4px 16px 0; }

/* Screen header */
.screen-head { flex-shrink: 0; display: flex; gap: 4px; align-items: flex-start; padding: calc(8px + var(--safe-t)) 8px 10px 6px; background: var(--card); border-bottom: 1px solid var(--line); }
.head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.head-text h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.head-text p { margin: 0; font-size: 16px; color: var(--ink-3); }
.head-text a { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.head-text a svg { width: 18px; height: 18px; }
.screen-head .more { font-size: 26px; font-weight: 800; }
.screen-head > .chip { margin-top: 12px; }

/* Welcome */
.welcome { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: calc(32px + var(--safe-t)) 24px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; background: var(--card); }
.welcome-lockup { width: 200px; height: auto; }
@media (prefers-color-scheme: dark) { .welcome-lockup { content: url("/app/v2/wordmark.svg"); } .tk-footer img { filter: invert(1) hue-rotate(180deg); } }
.welcome h1 { margin: 12px 0 0; font-size: 36px; line-height: 1.08; font-weight: 800; letter-spacing: -0.5px; }
.welcome .lead { margin: 0; font-size: 19px; color: var(--ink-2); }
.consent { margin: 0; font-size: 16px; color: var(--ink-2); }
.legal { font-size: 16px; color: var(--ink-2); }
.legal summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.legal p { margin: 6px 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; }
.legal-links a { min-height: 44px; display: inline-flex; align-items: center; }
.seg { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--line); border-radius: 12px; padding: 4px; }
.seg button { min-height: 46px; border: 0; border-radius: 9px; background: transparent; font-size: 17px; font-weight: 700; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.seg.big button { min-height: 54px; font-size: 18px; }
.tk-footer { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; color: var(--ink-3); }
.tk-footer img { width: 150px; height: auto; }

/* Today */
.date-line { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.hello { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.3px; }
.summary { margin: 0 0 4px; font-size: 18px; color: var(--ink-2); }
.action-card { gap: 8px; }
.start { gap: 10px; }
.start-hint { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.example { min-height: 52px; text-align: left; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); padding: 10px 14px; font-size: 17px; font-weight: 600; }
.capture-bar { flex-shrink: 0; position: relative; z-index: 2; background: var(--dock); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .10); padding: 20px 24px 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.capture-bar .round { background: var(--card); color: var(--ink); }
.capture-row { display: grid; grid-template-columns: 56px 92px 56px; align-items: center; justify-items: center; column-gap: 40px; }
.round { width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--line-2); display: inline-flex; align-items: center; justify-content: center; }
.round svg { width: 26px; height: 26px; }
.mic { width: 92px; height: 92px; border-radius: 999px; border: 0; background: var(--red); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--red-soft); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mic svg { width: 42px; height: 42px; }
[data-mic] { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
[data-mic] * { pointer-events: none; }
.capture-bar .mic { width: 84px; height: 84px; box-shadow: 0 0 0 6px var(--dock-ring), 0 8px 20px rgba(0, 0, 0, .22); }
.capture-bar .mic svg { width: 38px; height: 38px; }
.capture-hint { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-3); text-align: center; max-width: 300px; }
.capture-bar .capture-hint { color: var(--red-dark); font-size: 14px; letter-spacing: .01em; line-height: 1.3; opacity: .85; }

/* Jobs */
.search { display: flex; align-items: center; gap: 10px; min-height: 52px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 0 14px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font-size: 16px; font-weight: 700; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.job-row { text-align: left; gap: 6px; }
.job-name { font-size: 19px; font-weight: 700; }
.job-row .last { font-size: 16px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-card svg { width: 40px; height: 40px; }
.crew-card p { margin: 0; color: var(--ink-2); }

/* Job timeline */
.timeline { gap: 14px; }
.confirm-card { border: 2px solid var(--blue); }
.confirm-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--blue-dark); }
.confirm-card dl { display: grid; grid-template-columns: 90px 1fr; row-gap: 6px; margin: 0; font-size: 16px; }
.confirm-card dt { color: var(--ink-3); } .confirm-card dd { margin: 0; font-weight: 600; }
.bubble.me { align-self: flex-end; max-width: 86%; background: var(--ink); color: var(--card); border-radius: 18px 18px 4px 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bubble.me p { margin: 0; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .tag { display: inline-flex; gap: 4px; align-items: center; font-size: 15px; font-weight: 700; opacity: .85; }
.bubble .tag svg { width: 16px; height: 16px; }
.when { font-size: 15px; opacity: .75; }
.pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #FFD49A; }
.pending button { min-height: 40px; border-radius: 10px; border: 0; background: #FFFFFF; color: #111111; font-weight: 700; padding: 0 12px; }
.photo.me { align-self: flex-end; margin: 0; width: min(260px, 80%); display: flex; flex-direction: column; gap: 6px; }
.photo.me img { width: 100%; min-height: 120px; border-radius: 16px; background: var(--line); object-fit: cover; }
.photo-open { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; }
.staged-photos { padding: 0 0 2px; }
.photo.me figcaption { font-size: 15px; color: var(--ink-3); text-align: right; }
.event { align-self: center; display: flex; gap: 6px; align-items: center; margin: 0; font-size: 15px; font-weight: 600; color: var(--green-dark); text-align: center; }
.event svg { width: 18px; height: 18px; }
.nico header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nico .answer { font-size: 18px; line-height: 1.45; }
.nico .answer p { margin: 0 0 8px; } .nico .answer p:last-child { margin-bottom: 0; }
.nico .answer ol, .nico .answer ul { margin: 0 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.nico-drawing { margin: 8px 0 0; background: #fff; border: 1px solid #D8D4CB; border-radius: 14px; overflow: hidden; }
.nico-drawing .drawing-open { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: #fff; cursor: pointer; }
.nico-drawing img, .drawing-sheet img { display: block; width: 100%; height: auto; max-width: none; background: #fff; }
.nico-drawing .drawing-save { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 0; border-top: 1px solid #D8D4CB; background: #fff; color: #111; font-weight: 700; font-size: 16px; }
.drawing-sheet { margin: 0 0 12px; background: #fff; border-radius: 14px; overflow: hidden; }
.bubble.them .nico-drawing img, .team-msgs .nico-drawing img { max-width: none; width: 100%; background: #fff; }
.nico .followup { margin: 0; font-weight: 700; }
.nico.stop { border: 2px solid var(--red); }
.stop-title { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 800; color: var(--red-dark); font-size: 19px; }
.thinking { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink-3); font-weight: 600; }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-3); animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.job-bottom { flex-shrink: 0; background: var(--card); border-top: 1px solid var(--line); padding: 8px 12px calc(12px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-height: 52px; max-height: 160px; resize: none; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 17px; background: var(--bg); }
.composer .send { width: 52px; height: 52px; border-radius: 14px; border: 0; background: var(--ink); color: var(--card); display: inline-flex; align-items: center; justify-content: center; }
/* One row: files, camera, the box, and the mic, which becomes Send once there is something to send. */
.composer .talk { flex: none; width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--red); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.composer .talk svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.composer .send { display: none; }
.composer.has-text .send { display: inline-flex; }
.composer.has-text .talk { display: none; }
.composer .attach.cam { width: 40px; }
.composer .attach.cam svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
/* The job's next step, under its title. */
.next-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
/* The next-step bar: the words (with the clock beside them), then one or two equal buttons. */
.next-bar .nb-top { display: flex; align-items: center; gap: 10px; }
.next-bar .nb-top p { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-2, #444); line-height: 1.35; }
.next-bar .nb-top .clock-btn { flex-shrink: 0; margin: 0 !important; white-space: nowrap; }
.next-bar .nb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.next-bar .nb-btns.one { grid-template-columns: 1fr; }
.next-bar .nb-btns > * { min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
.finish-back { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }

/* Estimate */
.lines { padding: 0; gap: 0; }
.line { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.line:last-child { border-bottom: 0; }
.line-top { display: flex; gap: 10px; align-items: center; }
.line-name { flex: 1; min-width: 0; min-height: 44px; border: 0; border-bottom: 2px solid var(--line); background: transparent; font-size: 18px; font-weight: 700; padding: 4px 0; }
.line-amount { font-size: 19px; font-weight: 800; white-space: nowrap; }
.line-amount.missing { font-size: 15px; color: var(--red-dark); background: var(--red-soft); padding: 4px 8px; border-radius: 8px; }
.line-controls { display: flex; align-items: center; gap: 8px; }
.stepper { display: flex; align-items: center; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.stepper button { width: 44px; height: 46px; border: 0; background: var(--card); font-size: 24px; font-weight: 700; }
.stepper span { min-width: 64px; white-space: nowrap; text-align: center; font-weight: 700; font-size: 17px; }
.card label.price { flex-direction: row; align-items: center; gap: 4px; border: 2px solid var(--line); border-radius: 12px; padding: 0 10px; min-height: 50px; font-size: 18px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }
.price input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 18px; font-weight: 700; min-height: 46px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 4px 4px 0; font-size: 17px; }
.totals dt, .totals dd { margin: 0; } .totals dd { text-align: right; font-weight: 700; }
.totals .grand { font-size: 22px; font-weight: 800; } .totals dd.grand { font-size: 30px; }
.rates input, .stack input, .stack select, .stack textarea, .card textarea, .card select, .card input[type="date"] { width: 100%; min-height: 50px; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 17px; background: var(--bg); }
.accent-swatch { display: inline-block; width: 32px; height: 32px; border-radius: 50%; margin: 0 8px 0 0; border: 3px solid transparent; vertical-align: middle; }
.accent-swatch:has(input:checked) { border-color: var(--ink); }
.accent-swatch input { width: 32px !important; height: 32px; min-height: 0 !important; opacity: 0; margin: 0; padding: 0; border: 0; }
.rates label, .stack label, .card label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.bottom-cta { flex-shrink: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px calc(16px + var(--safe-b)); }

/* Finish */
.option { min-height: 72px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); display: flex; align-items: center; gap: 14px; padding: 0 18px; font-size: 19px; font-weight: 700; text-align: left; }
.option svg { width: 28px; height: 28px; }
.option[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.summary-card header { display: flex; gap: 10px; align-items: center; }
.line-sum { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 17px; }
.lines.compact { padding: 8px 0; }
.lines.compact .link { margin: 4px 16px; }

/* Account */
.profile-head { display: flex; gap: 14px; align-items: center; padding: 4px 0 8px; }
.profile-head strong { font-size: 21px; } .profile-head p { margin: 0; color: var(--ink-3); font-size: 16px; }
.rows { padding: 0; gap: 0; }
.row { min-height: 64px; width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-align: left; color: var(--ink); text-decoration: none; cursor: pointer; }
.row:last-child { border-bottom: 0; }
.row-label { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 18px; font-weight: 600; }
.row-label small { font-size: 15px; color: var(--ink-3); font-weight: 400; }
.prose p { margin: 0; }

/* Crew */
.bubble.them { align-self: flex-start; max-width: 86%; background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bubble.them p { margin: 0; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.them .tag { font-size: 15px; font-weight: 800; color: var(--blue-dark); }
.bubble.them img { width: 100%; max-width: 240px; border-radius: 12px; background: var(--line); }
.chip.shared { border: 0; cursor: pointer; background: var(--blue-soft); color: var(--blue-dark); min-height: 32px; }
.head-text .chip + .chip { margin-left: 6px; }
.head-text { flex-wrap: wrap; }
.crew-card-item ul { margin: 0; padding-left: 20px; font-size: 16px; }
.crew-card-item p { margin: 0; font-size: 16px; }
.team-card h2 { display: flex; gap: 8px; align-items: center; }
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.team-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.team-list li:last-child { border-bottom: 0; }
.member-jobs a { color: var(--blue-dark); font-weight: 600; }
.team-list small { display: block; color: var(--ink-3); font-size: 15px; }
.avatar.small { width: 40px; height: 40px; font-size: 15px; flex-shrink: 0; }
.check { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 16px; color: var(--ink-2); }
.check input { width: 24px; height: 24px; min-height: 0; flex-shrink: 0; margin-top: 2px; }
.join-what { margin: 0; font-size: 19px; }
.sheet-body h3 { margin: 6px 0 0; font-size: 17px; }

/* Google */
.google-btn { display: inline-flex; gap: 10px; }
.g-mark { width: 22px; height: 22px; }
.google-card h2 { display: flex; gap: 8px; align-items: center; }
.google-card h3 { margin: 10px 0 0; font-size: 17px; }
.google-card .signed-in { margin: 0; font-size: 17px; }
.google-card .signed-in small { color: var(--ink-3); }
.g-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.g-files li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; border-bottom: 1px solid var(--line-2); }
.g-files li span { overflow-wrap: anywhere; } .g-files small { color: var(--ink-3); }
.calendar-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }

/* Sheets */
dialog.sheet { margin: auto 0 0; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--card); color: var(--ink); max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; }
dialog.sheet::backdrop { background: rgba(0,0,0,.55); }
.sheet-body { padding: 12px 16px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-body > header { display: flex; align-items: center; justify-content: space-between; }
.sheet-body h2 { margin: 0; font-size: 22px; font-weight: 800; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.preview { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 15px/1.4 ui-monospace, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }

/* Listening */
.listening { position: fixed; inset: 0; z-index: 50; background: #0B0B0B; color: #FFFFFF; display: flex; flex-direction: column; padding: calc(16px + var(--safe-t)) 20px calc(36px + var(--safe-b)); }
.listening .cancel { background: #2A2A28; color: #FFFFFF; }
.rec-time { margin: 32px 0 0; font-size: 17px; font-weight: 700; color: #F59AA6; letter-spacing: .5px; }
.rec-text { margin: 14px 0 0; font-size: 24px; line-height: 1.3; font-weight: 600; }
.wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 64px; }
.wave i { width: 6px; height: 20px; border-radius: 3px; background: #E8384F; animation: wave 1s infinite ease-in-out; }
.wave i:nth-child(2n) { animation-delay: .2s; } .wave i:nth-child(3n) { animation-delay: .35s; } .wave i:nth-child(5n) { animation-delay: .5s; }
@keyframes wave { 0%, 100% { height: 14px; } 50% { height: 56px; } }
.listening.working .wave i { animation: none; height: 8px; opacity: .5; }
.mic.huge { align-self: center; margin-top: 24px; width: 120px; height: 120px; box-shadow: 0 0 0 14px #3A0F16, 0 0 0 28px #1E0A0D; }
.mic.huge svg { width: 48px; height: 48px; }

.toast { position: fixed; left: 16px; right: 16px; top: calc(68px + var(--safe-t)); max-width: 528px; margin: 0 auto; z-index: 60; background: #111111; color: #FFFFFF; border-radius: 14px; padding: 14px 16px; font-size: 17px; font-weight: 600; line-height: 1.35; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.toast.error { background: #8E1626; }
@media (prefers-reduced-motion: reduce) { .dots i, .wave i { animation: none; } }

/* Location and weather heads-ups (v2.3) */
.chip.weather { background: var(--blue-soft); color: var(--blue-dark); }
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.weather-card ul.wx { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.4; }
.weather-card ul.wx li + li { margin-top: 2px; }
.place-card .place-line { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; }
.place-card .place-line svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }
.place-fields { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.place-fields legend { font-weight: 700; padding: 0 4px; }
.place-fields .link { align-self: flex-start; }

/* Proactive Nico lines on Today cards (v2.3) */
.pro-line { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--blue-dark); }
.pro-line:empty { display: none; }
.nico-badge.small { width: 22px; height: 22px; font-size: 12px; flex-shrink: 0; }
.sheet .answer { font-size: 17px; line-height: 1.45; }

/* Documents (v2.5): attach in the composer, made documents and attached PDFs in the timeline */
.composer .attach { flex-shrink: 0; width: 44px; min-height: 48px; border: 0; background: none; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
.composer .attach svg, .doc-line svg, .file-item svg, button svg.inline { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.doc-card .doc-line { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.doc-card .btn, .doc-card button.primary { align-self: stretch; }
.file-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.file-item p { margin: 0; font-weight: 700; }
.file-item .when { flex-basis: 100%; }
[data-send-via="pdf"] svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -4px; margin-right: 6px; }

/* Details under a Nico answer: sources and what is still uncertain (v2.5.1) */
.answer-details { font-size: 15px; color: var(--ink-3); }
.answer-details summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.answer-details ul { margin: 4px 0 8px; padding-left: 20px; }
.answer-details .label { margin: 6px 0 0; }
/* Team chat inside the team card on Crew. */
.team-chat { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.team-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.team-msgs > li { max-width: 86%; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.team-msgs li p { margin: 0; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
.team-msgs li.them { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.team-msgs li.mine { align-self: flex-end; background: var(--ink); color: var(--card); border-bottom-right-radius: 4px; }
.team-msgs li.pending { opacity: .7; }
.team-msgs .tag { font-size: 15px; font-weight: 800; color: var(--blue-dark); }
.team-msgs .when { font-size: 13px; opacity: .75; }
/* Nico's answers in a crew chat (@nico): on the left for everyone, marked with Nico's badge. */
.team-msgs li.nico { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink); }
.team-msgs .nico-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.team-msgs li.nico .thinking { margin: 0; }
/* The conversation scrolls in its own box, newest at the bottom; the box to write in sits right under it. */
.team-msgs { max-height: min(56vh, 520px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 2px 2px 4px; scroll-padding-bottom: 8px; }
.team-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.team-photo { padding: 0; border: 0; background: none; border-radius: 12px; overflow: hidden; line-height: 0; }
.team-photo img { width: 140px; height: 140px; object-fit: cover; display: block; background: var(--line); }
.team-compose { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; background: var(--card); padding: 8px 0; box-shadow: 0 -10px 12px -10px rgba(0,0,0,.18); }
.team-row { display: flex; gap: 8px; align-items: center; }
.team-row .send { margin-left: auto; }
.team-compose .nico-at { flex: none; height: 52px; padding: 0 14px 0 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 17px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.team-compose textarea { flex: 1; width: 100%; box-sizing: border-box; min-width: 0; min-height: 52px; max-height: 160px; resize: none; border: 2px solid var(--line); border-radius: 14px; padding: 13px 14px; font: inherit; font-size: 17px; line-height: 1.35; background: var(--bg); color: inherit; overflow-y: auto; }
.team-compose textarea:focus { border-color: var(--blue); outline: none; }
.team-compose .attach { flex: none; width: 52px; height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.team-compose .attach.voice { border: 0; background: var(--red); color: #fff; }
.team-compose .attach svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.team-compose .send { width: 52px; height: 52px; flex: none; border-radius: 14px; border: 0; background: var(--ink); color: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.team-attach { display: flex; gap: 8px; }
.team-attach[hidden] { display: none; }
.team-thumb { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
.team-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 13px; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 26px; padding: 0; }
.photo-full { width: 100%; height: auto; border-radius: 12px; display: block; }
/* People on a job: a button in the job header, and one sheet to see and add people. */
.people-btn { position: relative; }
.people-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.people-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; padding: 0 4px; }
.add-people { display: flex; flex-direction: column; gap: 8px; }
.add-person { display: flex; align-items: center; gap: 10px; text-align: left; }
.add-person .plus { font-size: 24px; font-weight: 700; color: var(--blue-dark); }
.sheet .secondary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -4px; margin-right: 6px; }
.tabbar button { position: relative; }
.tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
/* A document Nico made, readable in the chat before it is sent. */
.doc-preview { width: 100%; height: 440px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.doc-card .two { margin-top: 8px; }
.line .suggested { margin: -2px 0 6px; font-size: 14px; color: var(--blue-dark); }
.doc-notes { margin: 0 0 8px; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
/* A document in the chat: a small page picture to tap, and the full page over the chat. */
.doc-thumb { position: relative; display: block; width: 100%; height: 190px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; touch-action: manipulation; }
.doc-thumb-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transform: translateZ(0); }
.doc-thumb iframe { width: 250%; height: 475px; border: 0; transform: scale(.4); transform-origin: 0 0; pointer-events: none; }
.doc-hit { position: absolute; inset: 0; z-index: 2; pointer-events: auto; touch-action: manipulation; }
.doc-hit span { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.82); color: #fff; font-size: 14px; font-weight: 700; pointer-events: none; }
.viewer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; background: var(--card); border-bottom: 1px solid var(--line); }
.viewer-head strong { font-size: 18px; }
.viewer-page { flex: 1; width: 100%; border: 0; background: #fff; }
.viewer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px); background: var(--card); border-top: 1px solid var(--line); }
body.viewing { overflow: hidden; }

/* Notifications: the one-time offer in Crew, and the message a tapped notification opened. */
.push-offer p { margin: 0 0 10px; }
.pushed { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 12px; transition: outline-color 0.6s; }

/* v2.11 ease pass: one-line job header, small name check, quiet feedback, scrollable filters. */
.title-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.head-sub .chip { font-size: 14px; padding: 2px 9px; }
.head-sub a, .head-sub > span:not(.chip) { font-size: 15px; }
.confirm-card { border-width: 1px; padding: 12px 14px; gap: 8px; }
.confirm-card .confirm-title { margin: 0; font-size: 15px; color: var(--ink-3); font-weight: 600; }
.confirm-name { margin: 0; font-size: 17px; }
.nico .feedback { display: flex; gap: 18px; }
.nico .feedback .link { min-height: 36px; font-size: 15px; color: var(--ink-3); text-decoration: none; font-weight: 600; }
.answer-details summary { list-style: none; color: var(--ink-3); }
.answer-details summary::-webkit-details-marker { display: none; }
.answer-details summary::after { content: '›'; margin-left: 6px; font-size: 20px; line-height: 1; transition: transform .15s; }
.answer-details[open] summary::after { transform: rotate(90deg); }
.tag-nico { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); }
.suggested-note { margin: 0; }
.filters { flex-wrap: nowrap; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.filters::-webkit-scrollbar { display: none; }
.filters .filter { flex: 0 0 auto; }
.toast { pointer-events: none; display: flex; align-items: center; gap: 12px; }
.toast.has-action { pointer-events: auto; }
.toast button { margin-left: auto; flex-shrink: 0; background: none; border: 1px solid rgba(255,255,255,.5); color: #FFFFFF; border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 16px; min-height: 40px; }
.place-fields select, .stack .two select { min-width: 0; width: 100%; }
.stack .two { grid-template-columns: 1fr 1fr; }
.sheet .link[data-send-via] { align-self: center; }
details.legal summary { list-style: none; cursor: pointer; }
details.legal summary::-webkit-details-marker { display: none; }
details.legal summary::after { content: '›'; margin-left: 6px; display: inline-block; transition: transform .15s; }
details.legal[open] summary::after { transform: rotate(90deg); }
.btn svg, .sheet .primary svg, .sheet .secondary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; flex-shrink: 0; }
/* Swipe: right = the next step, left = tomorrow. The strip rides along beside the card as it moves. */
:is([data-swipe], [data-swipe-line]) { touch-action: pan-y; position: relative; }
:is([data-swipe], [data-swipe-line]).swiping { z-index: 1; user-select: none; -webkit-user-select: none; }
:is([data-swipe], [data-swipe-line]) img, :is([data-swipe], [data-swipe-line]) video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:is([data-swipe], [data-swipe-line]).swiping::before { content: attr(data-swipe-hint); position: absolute; top: -1px; bottom: -1px; width: 100vw; display: flex; align-items: center; font-size: 17px; font-weight: 800; color: #fff; pointer-events: none; opacity: .55; transition: opacity .1s; white-space: nowrap; }
:is([data-swipe], [data-swipe-line]).swiping[data-swipe-dir="right"]::before { right: calc(100% + 1px); justify-content: flex-end; padding-right: 18px; background: #155C33; border-radius: var(--radius) 0 0 var(--radius); }
:is([data-swipe], [data-swipe-line]).swiping[data-swipe-dir="left"]::before { left: calc(100% + 1px); justify-content: flex-start; padding-left: 18px; background: #4A4A48; border-radius: 0 var(--radius) var(--radius) 0; }
:is([data-swipe], [data-swipe-line]).swiping[data-swipe-hint=""]::before { opacity: 0; }
:is([data-swipe], [data-swipe-line]).swiping.armed::before { opacity: 1; }
main.scroll { overflow-x: hidden; }
.job-row .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.snoozed { background: var(--line); color: var(--ink-2); }
.swipe-tip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px dashed var(--line); font-size: 15px; color: var(--ink-2); }
.swipe-tip .link { min-height: 36px; font-size: 15px; align-self: center; flex-shrink: 0; }
.snoozed-line { margin: 4px 0 0; font-size: 15px; color: var(--ink-3); text-align: center; }
.snoozed-line .link { display: inline; min-height: 0; font-size: 15px; }
/* Translated for the app's language: one small line under the bubble to see what was actually said. */
.tr-link { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0; min-height: 28px; font: inherit; font-size: 14px; font-weight: 600; color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; }
.card.nico .tr-link { color: var(--ink-3); opacity: 1; }
.tr-note { font-size: 14px; opacity: .7; }
/* "Restore from a backup file" is a <label> (it opens the file picker): lay it out like the other rows. */
.card label.row { flex-direction: row; align-items: center; gap: 12px; font-size: inherit; font-weight: inherit; color: var(--ink); }
/* Where the job is, and the sky there (emoji only) on cards and rows; the job header shows temperature too. */
.where { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ink-2); min-width: 0; }
.where svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-3); }
.where-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.where .sky { font-size: 20px; line-height: 1; margin-left: 2px; flex-shrink: 0; }
.sky-line { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.here-wx { display: flex; align-items: center; gap: 8px; margin: -4px 4px 4px; font-size: 16px; color: var(--ink-2); }
.here-wx svg { width: 16px; height: 16px; color: var(--ink-3); }
.here-wx .here-sky { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); }
.row-sky { font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* Computer: the list (Today, Jobs, Crew) on the left, the open job on the right. */
@media (min-width: 960px) {
  #app.wide { max-width: 1320px; display: grid; grid-template-columns: minmax(380px, 440px) 1fr; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  #app.wide .pane { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
  #app.wide .pane-detail { border-left: 1px solid var(--line); background: var(--bg); }
  #app.wide .pane-detail .job-head > .icon-btn:first-child { display: none; }
  #app.wide .job-row.selected { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
  #app.wide .pick-job { align-items: center; justify-content: center; text-align: center; color: var(--ink-3); }
  #app.wide .pick-job svg { width: 48px; height: 48px; }
  #app.wide .card button:hover, #app.wide .job-row:hover { filter: brightness(.98); }
}
/* Account › Your jobs on every device */
.sync-card h2 { display: flex; align-items: center; gap: 8px; }
/* Field plans: the card on Account and the sheet that says what Paid adds. */
.plan-card { display: grid; gap: 8px; }
.plan-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.plan-card h2 svg { width: 20px; height: 20px; }
.plan-card.paid h2 svg { color: var(--green, #1E7A46); }
.plan-card p { margin: 0; }
.plan-card .link { justify-self: start; }
.plan-why { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.plan-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.plan-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green, #1E7A46); margin-top: 1px; }
dialog [data-action="plan-code"] { display: block; margin: 6px auto 0; }
.sync-line { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.sync-line .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--green-dark); flex-shrink: 0; }
.sync-line .dot.syncing { background: var(--amber-dark); } .sync-line .dot.offline, .sync-line .dot.error { background: var(--ink-3); }
.danger-text { color: var(--red); align-self: flex-start; }
.form-error { margin: 0; color: var(--red); font-weight: 600; }
/* A captured video: the clip on the phone that took it, its frames everywhere else. */
.video-item video { width: 100%; max-width: 320px; border-radius: 14px; background: #000; display: none; }
.video-item.has-video video { display: block; }
.video-item .frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 320px; }
.video-item.has-video .frames { display: none; }
.video-item .frames img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.video-item figcaption { display: flex; align-items: center; gap: 4px; }
.video-item figcaption svg { width: 14px; height: 14px; }

/* Sign in with Google: one tap opens the TradesKnow account. Google's own button shows in a sheet only when its prompt cannot. */
.google-btn { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 28px; border: 2px solid var(--line); background: #fff; color: #1f1f1f; font: inherit; font-size: 18px; font-weight: 700; }
.google-btn .g-mark { width: 22px; height: 22px; }
.google-btn[disabled] { opacity: .6; }
.gis-fallback { display: flex; justify-content: center; min-height: 48px; padding: 8px 0; }

/* Several crew chats: one tap apart at the top of Crew. */
.crew-switch { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.crew-switch::-webkit-scrollbar { display: none; }
.crew-chip { flex: none; position: relative; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; white-space: nowrap; }
.crew-chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.crew-chip.new { border-style: dashed; color: var(--ink-2); }
.crew-chip .chip-badge { display: inline-block; margin-left: 8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; line-height: 20px; text-align: center; padding: 0 5px; }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-head h2 { margin: 0; flex: 1; min-width: 0; }
.team-head .title-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.team-head .pencil { font-size: 16px; color: var(--ink-3); }
.team-people summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 6px 0; }
.add-person small { display: block; font-weight: 500; color: var(--ink-3); font-size: 13px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 14px; margin: 2px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.link-google { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.classic-card h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.classic-card p { margin: 0; font-size: 16px; line-height: 1.45; }
.classic-card .classic-summary { font-weight: 700; }
.classic-card .classic-skipped { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.classic-card .primary { align-self: stretch; }
.nudge-card { padding: 12px 14px; gap: 8px; }
.nudge-card p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 16px; font-weight: 600; }
.nudge-card p svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; }
.nudge-card p span { flex: 1; }
.nudge-x { border: 0; background: none; font-size: 22px; line-height: 1; padding: 0 2px; color: var(--ink-3); }
.google-btn.small { min-height: 48px; font-size: 16px; gap: 8px; }
/* Crew: every crew chat is a row like a job; one opens full screen like a job. */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.section-head .add-crew { font-weight: 700; font-size: 16px; }
.crew-row .crew-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.crew-row .when { font-size: 14px; color: var(--ink-3); flex: none; }
.crew-row.unread .job-name, .crew-row.unread .last { font-weight: 800; color: var(--ink); }
.crew-row .chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -2px; margin-right: 4px; }
.crew-row .chip-badge { min-width: 22px; height: 22px; border-radius: 11px; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; padding: 0 6px; }
.screen-chat .chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.team-msgs.full { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior-y: contain; padding: 14px 14px 10px; gap: 10px; }
.team-msgs .chat-note { align-self: center; max-width: 92%; background: none; border: 0; text-align: center; font-size: 14px; color: var(--ink-3); padding: 4px 8px; }
.crew-bottom .team-compose { position: static; box-shadow: none; padding: 0; background: none; }
.screen-chat .head-sub { font-size: 15px; color: var(--ink-3); }
.screen-chat .title-btn .pencil { font-size: 16px; color: var(--ink-3); }

/* Replies: a Reply button on every message, answer and photo; the strip above the box says what the reply is
   about; the sent message starts with a quote of it (tap to jump back). */
.reply-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; margin-left: 6px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 700; opacity: .95; cursor: pointer; vertical-align: middle; }
.reply-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nico .feedback .reply-btn { margin-left: 0; padding-left: 0; color: var(--ink-3); }
.photo.me figcaption .reply-btn, .bubble.them .reply-btn, .team-msgs .reply-btn { color: var(--ink-3); }
.bubble.me .reply-btn, .team-msgs li.mine .reply-btn { color: inherit; }
.quote { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin: 0 0 2px; padding: 6px 10px; border: 0; border-left: 4px solid var(--red); border-radius: 8px; background: rgba(127, 127, 127, .16); color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.quote b { font-size: 14px; }
.quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .9; }
.quote svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.reply-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 6px 6px 12px; border-left: 4px solid var(--red); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 15px; }
.reply-bar[hidden] { display: none; }
.reply-bar > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-bar .grow { min-width: 0; display: flex; flex-direction: column; }
.reply-bar .grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.reply-bar .icon-btn { flex: none; }
.flash { animation: tk-flash 1.2s ease-out; }
@keyframes tk-flash { 0%, 40% { box-shadow: 0 0 0 4px var(--red); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 3px solid var(--red); } }

/* Nico sent this answer to a crew chat (or offers to). */
.sent-to { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--green-dark); }
/* Nico answered a change that is not in the estimate yet (QA review 2026-10-26). */
.unsaved { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--amber-dark, #8a5a00); }
.unsaved .link { margin-left: auto; }
.est-changes { margin: 0; }
.sent-to svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; }
.sent-to .link { margin-left: auto; }
.send-crew { display: inline-flex; align-items: center; gap: 6px; }
.send-crew svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Files in a crew chat: a paper clip next to Capture; a chip before sending and on the message (tap to open). */
.team-filechip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; }
.team-filechip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.team-filechip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.team-filechip small { color: var(--ink-3); font-weight: 500; flex: none; }
.team-filechip button { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ink-3); min-width: 32px; min-height: 32px; }
.team-files { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.team-msgs li.mine .team-filechip { background: rgba(255,255,255,.12); color: inherit; border-color: rgba(255,255,255,.3); }
.team-msgs li.mine .team-filechip small { color: inherit; opacity: .8; }
/* Getting paid: the balance under a job's title, the owed card on Today, the payment sheets. */
.money-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.money-strip.late { background: var(--red-soft); }
.money-sum { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; }
.money-sum strong { font-size: 22px; line-height: 1.1; }
.money-sum small { font-size: 14px; color: var(--ink-3); }
.money-strip.late .money-sum small { color: var(--red-dark); font-weight: 600; }
.money-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.money-btns button { min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.money-btns .due { box-shadow: 0 0 0 3px var(--red-soft); }
.owed-card h3 { font-size: 30px; margin: 0; }
.chip.late { background: var(--red); color: #fff; }
.pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pay-list li { display: flex; gap: 8px; align-items: stretch; }
.pay-row { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); }
.pay-row .pay-label { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.pay-row strong { font-size: 19px; word-break: break-all; }
.pay-list .btn.small { min-height: 56px; display: inline-flex; align-items: center; padding: 0 14px; }
.collect-total { font-size: 40px; font-weight: 800; margin: 0; text-align: center; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; }
.chip-radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font-weight: 700; }
.chip-radio input:checked + span { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chip-radio input:focus-visible + span { outline: 3px solid var(--blue); }
.promise-form { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.reply-item .reply-acts { display: flex; gap: 8px; margin-top: 6px; }
.reply-item .reply-acts > * { min-height: 44px; }
.toast button + button { margin-left: 0; }
.toast.has-action { flex-wrap: wrap; }
.collect-row { margin-top: 10px; }
.collect-row button { min-height: 48px; padding: 0 8px; }
.action-card .mark-paid { width: 100%; margin-top: 10px; }
.money-strip .nico-money { margin: 10px 0 0; }
.call-notes { margin: 8px 0 14px; padding-left: 22px; display: grid; gap: 8px; font-size: 17px; line-height: 1.4; }
.call-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-out button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.nico-call { gap: 10px; margin-bottom: 14px; }
.nico-call .muted.small { margin: 0; text-align: center; }
.nico-call textarea { width: 100%; margin-top: 8px; }
.nico-note summary, .call-points summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--ink-2, #444); }
.call-points { margin-top: 10px; }
.call-after { margin-top: 12px; }
.call-talk { margin: 8px 0 4px; font-size: 15px; }
.call-talk summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.call-talk p { margin: 6px 0; line-height: 1.4; }
.call-talk p.nico b { color: var(--teal, #C41E3A); }
.money-strip .nico-money, .money-strip .collect-row { flex: 1 1 100%; margin-top: 0; }
.money-strip .collect-row button { min-height: 44px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.form-error { margin: 0; color: var(--red-dark, #8E1626); font-weight: 700; font-size: 15px; line-height: 1.4; }
/* Nico's call while it is out: one quiet line until how it went comes back. */
.call-pending .dots i, .call-live .dots i { width: 6px; height: 6px; }
.event.call-pending { color: var(--ink-2, #444); flex-wrap: wrap; justify-content: center; }
.event.call-pending .link { min-height: 32px; font-size: 15px; align-self: center; }
/* Pull to refresh: a strip that grows under the header while the list is pulled down. */
.pull { position: fixed; left: 0; right: 0; height: 0; opacity: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--ink-3); background: var(--bg); pointer-events: none; transition: height .15s ease, opacity .15s ease; }
/* Today: tap a card to open its job; the name is the link. */
.action-card { cursor: pointer; }
.card-link { color: inherit; text-decoration: none; }
.owed-card { cursor: pointer; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.four.collect-row button { padding: 0 4px; }
.action-card .four { margin-top: 10px; }
.action-card .four .mark-paid { width: auto; margin-top: 0; }
[data-swipe-line].swiping[data-swipe-dir="left"]::before { background: var(--red); }

/* =================== Workbench (v3) =================== */
/* Ink is the one next step on a screen; outline is the alternative; tints are status; red is only your voice. */
.primary { background: var(--ink); color: var(--card); }
.secondary { border-width: 1.5px; }
.link { color: var(--ink); }
a { color: var(--ink); }
.danger-link { color: var(--red-dark); }
.card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.title, .hello { font-weight: 800; letter-spacing: -0.5px; }
.hello { font-size: 28px; line-height: 1.1; }
.chip.unpaid { background: var(--money-soft); color: var(--ink); }
.chip.unpaid.late { background: var(--red-soft); color: var(--red-dark); }
.filter { border-width: 1px; }
.search { border-width: 1px; border-radius: 14px; }
dialog.sheet { border-radius: 28px 28px 0 0; }
dialog.sheet .sheet-body::before { content: ''; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 2px; }

/* Top bar: the Field wordmark (as in v2; dark letters on this light bar), one language pill, your initials. */
@media (prefers-color-scheme: dark) { .topbar .lockup { content: url("/app/v2/wordmark.svg"); } }
.topbar { background: var(--bg); color: var(--ink); height: calc(60px + var(--safe-t)); padding: var(--safe-t) 12px 0 20px; gap: 10px; }
.wordmark { font-weight: 800; font-size: 22px; letter-spacing: -0.3px; }
.wordmark b { color: var(--red); font-weight: 800; }
.lang-one { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: 15px; color: var(--ink-3); }
.lang-one b { color: var(--ink); }
.avatar { width: 40px; height: 40px; background: var(--ink); color: var(--card); font-size: 15px; }

/* Tab bar: Today · Jobs · Talk · Map · Crew. The red button in the middle is the only red on the screen. */
.tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; height: calc(72px + var(--safe-b)); background: var(--card); border-top: 1px solid var(--line-2); position: relative; z-index: 3; }
.tabbar > button, .tabbar > a { min-height: 64px; font-size: 13px; font-weight: 600; color: var(--ink-3); gap: 4px; box-shadow: none !important; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: none; border: 0; position: relative; }
.tabbar > button svg { width: 24px; height: 24px; }
.tabbar > button[aria-current="page"] { color: var(--ink); font-weight: 700; }
.tabbar > button[aria-current="page"]::after { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--ink); }
/* Today's dock: Talk to Nico is the big button, photo and type beside it. Other screens have no dock. */
.talk-dock { flex-shrink: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 10px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--line-2); position: relative; z-index: 3; }
.talk-dock .round { width: 52px; height: 52px; background: var(--line-2); color: var(--ink); }
.talk-nico { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 68px; border: 0; border-radius: 999px; background: var(--red); color: #FFFFFF; box-shadow: 0 8px 22px rgba(196,30,58,.32); touch-action: none; user-select: none; -webkit-user-select: none; padding: 0 16px; }
.talk-nico svg { width: 30px; height: 30px; flex-shrink: 0; stroke-width: 2; }
.talk-nico span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; text-align: left; }
.talk-nico b, .talk-nico small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.talk-nico b { font-size: 18px; }
.talk-nico small { font-size: 13px; font-weight: 600; opacity: .9; }
/* Listening: the same button, now the one to press to send. A soft pulse says the mic is on; ✕ cancels. */
.talk-dock.live .talk-nico { animation: talkpulse 1.4s infinite ease-in-out; }
.talk-dock.live .talk-nico b { font-variant-numeric: tabular-nums; }
.talk-dock.live.free .talk-nico small { font-size: 15px; font-weight: 800; opacity: 1; }
.talk-dock.live [data-rec="cancel"] { background: var(--card); border: 1px solid var(--line); }
.talk-dock.live.working .talk-nico { animation: none; opacity: .75; pointer-events: none; }
.talk-dock.live.working .round { visibility: hidden; }
@keyframes talkpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,30,58,.35), 0 8px 22px rgba(196,30,58,.32); } 50% { box-shadow: 0 0 0 10px rgba(196,30,58,.12), 0 8px 22px rgba(196,30,58,.32); } }
@media (prefers-reduced-motion: reduce) { .talk-dock.live .talk-nico { animation: none; } }
/* Jobs: + New job sits beside the search box. */
.jobs-screen .search-row { display: flex; align-items: center; gap: 10px; }
.jobs-screen .search-row .search { flex: 1; min-width: 0; }
.new-job { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--red); color: #FFFFFF; font-weight: 700; font-size: 15px; white-space: nowrap; }
.new-job svg { width: 18px; height: 18px; }
dialog .stack .xl svg { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; }
.tabbar .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); }

/* The talk sheet: what Nico hears, where it goes, and how to stop. */
.listening { background: rgba(26,26,24,.55); color: var(--ink); padding: 0; justify-content: flex-end; }
.talk-sheet { background: var(--card); border-radius: 28px 28px 0 0; padding: 10px 16px calc(22px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; }
.talk-sheet .grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.talk-to { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 16px; padding: 10px 12px; }
.talk-to .pin { width: 36px; height: 36px; border-radius: 10px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.talk-to .pin svg { width: 20px; height: 20px; }
.talk-to div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.talk-to b { font-size: 16px; } .talk-to span { font-size: 15px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-btn { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); font-weight: 700; font-size: 15px; flex-shrink: 0; }
.talk-pick { display: flex; flex-direction: column; background: var(--bg); border-radius: 16px; overflow: hidden; max-height: 40vh; overflow-y: auto; }
.talk-pick button { min-height: 52px; text-align: left; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; font-weight: 700; font-size: 17px; }
.talk-pick button[aria-pressed="true"] { background: var(--card); }
.listening .rec-time { margin: 6px 4px 0; color: var(--red); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.listening .rec-text { margin: 0 4px; font-size: 22px; font-weight: 700; line-height: 1.3; min-height: 58px; }
.listening .wave i { background: var(--red); }
.talk-row { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; justify-items: center; }
.talk-row .round { width: 56px; height: 56px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.listening .mic.huge { margin: 0; width: 96px; height: 96px; box-shadow: 0 0 0 10px var(--red-soft); }
.talk-hint { margin: 0; text-align: center; font-size: 15px; color: var(--ink-3); }
.talk-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.talk-btn small { font-size: 13px; font-weight: 700; color: var(--ink-3); min-height: 16px; }
.listening.free .stop-label { color: var(--red); font-size: 15px; }
.listening.free .mic.huge { box-shadow: 0 0 0 10px var(--red-soft), 0 0 0 0 var(--red-soft); }
.listening.inline { inset: auto 0 0 0; background: var(--card); border-top: 1px solid var(--line); padding: 10px 12px calc(12px + var(--safe-b)); justify-content: flex-start; box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
.rec-bar { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; }
.rec-bar .round { width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.rec-bar .rec-mid { min-width: 0; }
.listening.inline .rec-time { margin: 0; display: flex; align-items: center; gap: 6px; }
.listening.inline .rec-text { margin: 2px 0 0; font-size: 15px; font-weight: 600; min-height: 0; line-height: 1.3; }
.rec-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--red); animation: recdot 1s infinite ease-in-out; }
@keyframes recdot { 50% { opacity: .25; } }
.rec-done { min-height: 52px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--red); color: #FFFFFF; font-size: 17px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.listening.inline.working .rec-done { opacity: .4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.talk-hint .link { font-size: 15px; min-height: 32px; align-self: center; }

/* Today and Jobs: one card per group, rows inside it; a row's one action sits on its right. */
.section-head { margin: 6px 4px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; font-weight: 800; }
.section-head .muted { font-weight: 600; }
.section-head .head-links { display: flex; align-items: baseline; gap: 16px; }
.section-head .head-links .link { font-size: 15px; font-weight: 700; }
.handoff { display: grid; gap: 8px; border: 2px solid var(--teal, #C41E3A); }
.handoff p { margin: 0; }
.owed-link { font-size: 15px; min-height: 36px; text-decoration: none; font-weight: 700; }
.rows-card { padding: 0; gap: 0; overflow: hidden; }
.need-row, .list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line-2); background: var(--card); text-align: left; width: 100%; color: var(--ink); min-height: 64px; }
.rows-card > :last-child { border-bottom: 0; }
.tile { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; background: var(--money-soft); color: var(--ink); }
.tile svg { width: 22px; height: 22px; }
.tile.blue { background: var(--blue-soft); color: var(--blue-dark); } .tile.amber { background: var(--amber-soft); color: var(--amber-dark); }
.tile.green { background: var(--green-soft); color: var(--green-dark); } .tile.red { background: var(--red-soft); color: var(--red-dark); } .tile.grey { background: var(--line-2); color: var(--ink-3); }
.need-text, .list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.need-text .card-link, .list-text .job-name { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-text > span, .list-sub { font-size: 15px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-btn { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-weight: 700; font-size: 15px; flex-shrink: 0; color: var(--ink); }
.list-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.list-end b { font-size: 17px; font-weight: 800; }
.list-end .chip { font-size: 13px; padding: 2px 9px; }
.need-row.action-card { cursor: pointer; }
/* Next up: the next visit, with a little map, Text ETA and Directions. */
.next-up { padding: 0; overflow: hidden; gap: 0; box-shadow: var(--shadow-2); }
.next-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.kicker { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .6px; color: var(--ink-3); }
.next-up h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; }
.next-up .two { margin-top: 8px; grid-template-columns: 1fr 1fr; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg.small { display: inline-flex; background: var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg.small button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; font-weight: 700; font-size: 15px; color: var(--ink-3); }
.seg.small button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* Directions and ETA sheets. */
.map-apps { background: var(--bg); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; }
.map-app { min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; text-align: left; font-size: 18px; font-weight: 700; color: var(--ink); }
.map-app:last-child { border-bottom: 0; }
.map-app small { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.app-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.app-ic svg { width: 22px; height: 22px; }
.eta-mins { display: flex; flex-wrap: wrap; gap: 8px; }

/* Job: name, then customer · trade · status; three steps; the next step; the place; the chat. */
.screen-head { background: var(--bg); border-bottom: 0; }
.stepper3 { list-style: none; margin: 0; padding: 0 16px 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--bg); }
.stepper3 li { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.stepper3 i { height: 4px; border-radius: 2px; background: var(--line); }
.stepper3 li.done i, .stepper3 li.now i { background: var(--ink); }
.stepper3 li.now { color: var(--ink); }
.next-bar { background: var(--bg); border-bottom: 1px solid var(--line-2); padding-top: 4px; }
.place-card2 { padding: 0; overflow: hidden; gap: 0; }
.place-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.place-row .grow { display: flex; flex-direction: column; min-width: 0; }
.place-row b { font-size: 17px; } .place-row .muted { font-size: 15px; }
.round-btn { width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.round-btn.ink { background: var(--ink); color: var(--card); }
.round-btn svg { width: 22px; height: 22px; }
.composer .attach.plus { width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.composer .attach.plus svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.job-bottom { border-top: 1px solid var(--line-2); }
.composer textarea { border: 1px solid var(--line); border-radius: 22px; background: var(--bg); }
.timeline { background: var(--bg); }

/* Estimate (v3): one row per line, tap to change */
.est-lines { padding: 4px 0; }
.est-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--line-2, #ECE9E2); text-align: left; color: var(--ink); font: inherit; min-height: 64px; }
.est-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.est-text b { font-weight: 700; font-size: 17px; }
.est-text small { flex-basis: 100%; color: var(--ink-3); font-size: 14px; }
.est-row .line-amount { font-weight: 700; font-size: 17px; white-space: nowrap; }
.est-row .line-amount.missing { color: var(--red-dark); font-size: 15px; }
.tag-nico { display: inline-block; background: #E7EEFB; color: #163F86; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.est-add { display: block; width: 100%; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--line-2, #ECE9E2); text-align: left; font: inherit; font-weight: 700; color: var(--ink-2); min-height: 52px; }
.est-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding: 14px 16px; }
.est-totals dt { color: var(--ink-3); }
.est-totals dd { margin: 0; text-align: right; font-weight: 600; }
.est-totals .grand { color: var(--ink); font-weight: 800; font-size: 20px; }
.cust-lang { margin: 12px 4px; }
.est-foot { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.est-foot button { min-height: 56px; }
/* Sent: paid on the spot, Nico's reminder, the next stop */
.sent-line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sent-check svg { width: 28px; height: 28px; fill: none; stroke: #155C33; stroke-width: 2.4; }
.pay-spot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pay-spot button { padding: 0 6px; font-size: 16px; }
.nico-remind { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.sheet .next-up { margin: 0; }
/* Map (v3): OpenStreetMap under the job pins, a filter on top, the chosen stop as a card */
.map-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.map-canvas { background: #E8E4DA; }
.map-canvas.full { position: absolute; inset: 0; z-index: 0; }
.map-top { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 500; display: grid; gap: 8px; justify-items: start; }
.map-seg { background: var(--card); box-shadow: var(--shadow); border-radius: 999px; padding: 4px; }
.map-note { margin: 0; background: var(--card); color: var(--ink-2); padding: 6px 12px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); }
.map-me { position: absolute; right: 12px; bottom: 210px; z-index: 500; box-shadow: var(--shadow); }
.map-card { position: absolute; left: 12px; right: 12px; bottom: 26px; z-index: 500; margin: 0; padding: 16px; }
.map-card h2 { margin: 2px 0 2px; font-size: 20px; }
.map-card .meta { margin: 0 0 12px; color: var(--ink-3); }
.map-credit { position: absolute; right: 6px; bottom: 4px; z-index: 500; margin: 0; font-size: 11px; background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 6px; }
.map-credit a { color: #333; }
.map-on { margin: 20px 16px; text-align: left; }
.map-on h1 { font-size: 24px; margin: 12px 0 8px; }
.map-on p { color: var(--ink-2); }
.map-on-art { width: 56px; height: 56px; border-radius: 16px; background: #E7EEFB; display: grid; place-items: center; }
.map-on-art svg { width: 30px; height: 30px; stroke: #163F86; fill: none; stroke-width: 2; }
.pin { background: none; border: 0; }
.pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink, #1A1A18); color: #fff; font: 800 15px/1 "Archivo", system-ui, sans-serif; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); box-sizing: border-box; }
.pin.money span { background: #fff; color: #1A1A18; border-color: #1A1A18; }
.pin.st-waiting span { background: #2563EB; } .pin.st-approved span { background: #1F7A3E; } .pin.st-back span { background: #B7791F; } .pin.st-done span, .pin.st-paid span { background: #9A958C; }
.pin.sel span { box-shadow: 0 0 0 3px #C41E3A, 0 2px 6px rgba(0,0,0,.35); transform: scale(1.15); }
.pin.dot span { width: 22px; height: 22px; margin: 6px; background: #C41E3A; }
.mini-map { position: relative; display: block; height: 120px; border-radius: 16px 16px 0 0; overflow: hidden; margin: -16px -16px 12px; text-decoration: none; }
.mini-map .map-canvas { position: absolute; inset: 0; pointer-events: none; }
.mini-full { position: absolute; right: 10px; bottom: 10px; z-index: 500; background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.place-card2 .mini-map { margin: -14px -14px 10px; }
/* Nico's route */
.route-card header { display: flex; align-items: center; gap: 8px; }
.route-card header strong { flex: 1; }
.route-save { background: #E2F3E8; color: #155C33; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.route-card p { margin: 8px 0 12px; color: var(--ink-2); }
.route-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.route-btns .dark, .route-btns .secondary { min-height: 44px; font-size: 16px; }
.route-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.route-compare p { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--bg); display: grid; }
.route-compare p.on { background: #E2F3E8; color: #155C33; }
.route-compare span { font-size: 13px; }
.route-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.route-list li { display: flex; align-items: center; gap: 10px; }
.route-list small { display: block; color: var(--ink-3); }
.pin-n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 800; flex: none; }
.next-up .mini-map, .place-card2 .mini-map { margin: 0; border-radius: 0; }
.leaflet-container svg { width: auto; height: auto; fill: initial; stroke: initial; stroke-width: initial; max-width: none; }
/* Crew (v3) */
.crew-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.crew-head .title { margin-bottom: 2px; }
.crew-head p { margin: 0; }
.invite-btn { min-height: 44px; font-size: 16px; padding: 0 14px; border-radius: 999px; }
.face-row { display: flex; margin: 12px 0 4px; }
.face { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 800; font-size: 14px; border: 3px solid var(--bg); margin-right: -8px; }
.crew-row.unread .job-name { font-weight: 800; }
.hand-off { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; margin-top: 12px; }
.map-screen .map-credit { top: 62px; bottom: auto; right: 12px; }
.tag-change { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #fff1cc; color: #6b4e00; border-radius: 6px; padding: 1px 6px; }
.est-row.removed { opacity: .6; } .est-row.removed b { text-decoration: line-through; }
.change-note .two { margin-top: 8px; }
/* On site: the clock on the next-step line, the punch list, the day's log, crew hours. */
.next-bar .clock-btn { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 6px 12px; min-height: 36px; border-radius: 999px; border: 1.5px solid var(--ink, #1A1A18); background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 800; }
.next-bar .clock-btn svg { width: 16px; height: 16px; }
.next-bar .clock-btn.on { background: #C41E3A; border-color: #C41E3A; color: #fff; }
.punch-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.punch-card ul { list-style: none; margin: 0; padding: 0; }
.punch-card li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08); }
.punch-card li.done span { text-decoration: line-through; opacity: .6; }
.punch-check { flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; border: 2px solid var(--ink, #1A1A18); background: transparent; display: grid; place-items: center; }
.punch-card li.done .punch-check { background: var(--ink, #1A1A18); color: #fff; }
.punch-check svg { width: 18px; height: 18px; }
.log-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hours-list { list-style: none; padding: 0; margin: 0 0 12px; }
.hours-list li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.08); }
.signoff-btn { display: block; margin: 8px 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; padding: 4px 10px; background: rgba(255,255,255,.92); border-radius: 10px; font-size: 12px; font-weight: 700; width: fit-content; }
.map-legend span { display: inline-flex; align-items: center; gap: 4px; }
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1A1A18; }
.map-legend .dot.st-waiting { background: #2563EB; } .map-legend .dot.st-approved { background: #1F7A3E; } .map-legend .dot.st-back { background: #B7791F; } .map-legend .dot.st-unpaid { background: #fff; border: 2px solid #1A1A18; box-sizing: border-box; }
.cost-list { list-style: none; padding: 0; margin: 0 0 12px; }
.cost-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08); }
.cost-list li.total { font-size: 18px; border-top: 2px solid var(--ink, #1A1A18); }
.conn { padding: 8px 0 14px; border-bottom: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .conn h3, .conn p { margin: 0; }
.conn .dark, .conn .secondary { width: 100%; }
.stripe-return { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); color: var(--ink); font-weight: 700; }
.addr-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; } .addr-fields legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.addr-list { list-style: none; margin: -4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 6px 18px rgba(17,17,17,.12); display: grid; gap: 2px; }
.addr-list[hidden] { display: none; }
.addr-list [role=option] { padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; display: grid; gap: 2px; color: var(--ink); }
.addr-list [role=option] span { font-size: .875rem; color: var(--ink-3); } .addr-list [role=option][aria-selected=true], .addr-list [role=option]:hover { background: var(--line-2); }
.addr-list .addr-hint { padding: 6px 12px 2px; }
.addr-error { color: #C41E3A; font-weight: 700; margin: 0; } .addr-fix { display: block; text-align: left; padding: 2px 0; }

/* Crew: Invite stays on one line. */
.crew-head .invite-btn { white-space: nowrap; flex-shrink: 0; }
.map-screen .map-credit { top: auto; bottom: 4px; left: 12px; right: auto; }
/* Talk to Nico is red wherever it is offered. */
dialog .new-talk { background: var(--red); border-color: var(--red); color: #FFFFFF; }
/* Owed job: the amount, Nico's line, then Got paid and Send reminder side by side. */
.money-strip .money-btns { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.money-strip .money-btns button { min-height: 48px; }
dialog .collect-row { margin: 8px 0 4px; }
dialog .collect-row button { min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; }

/* Talk to Nico: one red mic button, the same everywhere: big in Today's dock, round in a job's and a crew chat's
   message box and in the estimate's and invoice's bottom bar. Nothing floats over a screen. While talking, the one
   live bar (outside #app) takes the place of the dock, the message box and the tab bar, with the one Stop. */
.nico-round { flex: none; width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--red); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; align-self: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nico-round svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.bottom-cta.with-nico { display: flex; gap: 10px; align-items: stretch; }
.bottom-cta.with-nico > :not(.nico-btn) { flex: 1 1 0; min-width: 0; }
.est-foot.with-nico > .secondary { flex: 0 1 auto; }
.talk-nico, .composer .talk { -webkit-touch-callout: none; }
body.nico-live-on .tabbar, body.nico-live-on .talk-dock, body.nico-live-on .job-bottom, body.nico-live-on .team-compose, body.nico-live-on .bottom-cta .nico-btn { display: none; }
.nico-live { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; padding: 10px 12px calc(10px + var(--safe-b)); background: var(--card); border-top: 2px solid var(--red); box-shadow: 0 -8px 24px rgba(26,26,24,.12); }
body.nico-live-on #app { height: calc(100% - var(--live-h, 96px)); }
.nico-orb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--red-soft); }
.nico-orb i { width: 24px; height: 24px; border-radius: 50%; background: var(--red); transition: transform .2s; }
.nico-live[data-stage="listening"] .nico-orb i { animation: voice-breathe 1.6s ease-in-out infinite; }
.nico-live[data-stage="thinking"] .nico-orb i { opacity: .55; animation: voice-breathe .8s ease-in-out infinite; }
.nico-live[data-stage="speaking"] .nico-orb i { animation: voice-talk .45s ease-in-out infinite alternate; }
@keyframes voice-breathe { 50% { transform: scale(.82); } }
@keyframes voice-talk { from { transform: scale(.9); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .nico-orb i { animation: none !important; } }
.nico-live-mid { min-width: 0; }
.nico-live[data-stage="speaking"] .nico-live-mid { cursor: pointer; }
.nico-live-state { margin: 0; display: flex; gap: 6px; align-items: baseline; font-size: 16px; white-space: nowrap; overflow: hidden; }
.nico-live-state span { color: var(--ink-3); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.nico-live-state span::before { content: '· '; }
.nico-live-line { max-height: 6.2em; overflow-y: auto; font-size: 15px; line-height: 1.3; }
.nico-live-line p, .nico-live-line div > :first-child { margin: 2px 0 0; }
.nico-live-line small { display: block; font-weight: 800; color: var(--ink-3); font-size: 12px; }
.nico-live-line.hazard { border-left: 4px solid var(--red); padding-left: 8px; }
.nico-live-left { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.nico-live-left:empty { display: none; }
.nico-live-stop { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--red); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 800; }
.nico-live-stop svg { width: 20px; height: 20px; }

/* Today (Dipal, 2026-10-25): Nico's read of the day on top, five layouts, and one bar at the bottom to talk it
   through with Nico. Colors from the theme tokens only, so light and dark both read. */
.today .brief { padding: 14px; gap: 0; }
.brief-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.brief-right { margin-left: auto; }
.brief-right .owed-link { font-size: 14px; }
.nico-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); flex: none; margin: 0 4px 0 2px; }
.brief-say { margin: 8px 0 4px; font-size: 17px; line-height: 1.35; }
.brief-say.solo { margin: 0 2px 4px; }
.brief .needs { margin: 6px -14px -14px; }
.brief-rows .need-row:last-child { border-bottom: 0; }
.brief .needs .rows-card { border-top: 1px solid var(--line-2); border-radius: 0; }
.more-needs { display: block; width: 100%; padding: 10px 16px 12px; text-align: center; border-top: 1px solid var(--line-2); }
.brief .next-up { margin-top: 10px; box-shadow: none; border: 1px solid var(--line-2); }
/* B: timeline */
.tline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.tline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.ev { position: relative; }
.ev::before { content: ''; position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink-3); }
.ev.now::before { border-color: var(--red); background: var(--red); }
.ev-k { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ev.now .ev-k { color: var(--red); }
/* C: at a glance */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.glance-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 10px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; text-align: left; min-height: 76px; }
.glance-tile b { font-size: 22px; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.glance-tile span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.glance-tile.red b { color: var(--red); }
/* D: conversation */
.thread { display: flex; flex-direction: column; gap: 8px; }
.thread-who { margin: 0 2px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--ink-3); }
.nico-msg { align-self: flex-start; width: 92%; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; border-bottom-left-radius: 6px; overflow: hidden; }
.nico-msg > p { margin: 0; padding: 12px 14px; font-size: 16px; line-height: 1.35; }
.nico-msg .next-up { margin: 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.nico-msg .need-row { border-bottom: 0; }
/* E: map first */
.today-map { height: 260px; border-radius: 20px; overflow: hidden; }
.today-map-off { display: flex; align-items: center; gap: 12px; }
.today-map-off p { margin: 0; flex: 1; font-size: 14px; color: var(--ink-3); }
.over-map { position: relative; z-index: 2; margin-top: -34px; box-shadow: var(--shadow-2); }
.today-map-off + .over-map { margin-top: 0; }
/* The bar: talk it through with Nico. */
.talk-dock.nico-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 12px 10px; }
.say-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
.say-chips::-webkit-scrollbar { display: none; }
.say-chip { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; }
.nico-line { display: flex; align-items: center; gap: 10px; }
.nico-field-wrap { position: relative; flex: 1; min-width: 0; }
.nico-field { width: 100%; height: 50px; border: 0; border-radius: 999px; background: var(--line-2); color: var(--ink-3); font: inherit; font-size: 16px; text-align: left; padding: 0 50px 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nico-cam { position: absolute; right: 6px; top: 7px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.nico-cam svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.nico-bar .talk-nico.nico-round { width: 54px; height: 54px; min-height: 54px; padding: 0; border-radius: 50%; flex: none; box-shadow: 0 6px 16px rgba(196,30,58,.28); }
.nico-bar .talk-nico.nico-round svg { width: 26px; height: 26px; }
.layout-row .row-label { display: flex; flex-direction: column; gap: 2px; }
.layout-row small { color: var(--ink-3); font-size: 13px; font-weight: 500; }

/* The conversation with Nico (3.15.0): one thread, the tech's turns on the right, Nico's on the left,
   a growing box with the mic and Send at the bottom. Tall so it reads like a chat, in light and dark. */
dialog.sheet.talk-sheet { height: 88dvh; }
.talk-sheet .sheet-body { overflow: hidden; }
.talk-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }
.talk-empty { margin: auto 8px; color: var(--ink-3); font-size: 16px; line-height: 1.45; text-align: center; }
.talk-turn { max-width: 88%; border-radius: 18px; padding: 10px 14px; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.talk-turn p { margin: 0; white-space: pre-wrap; }
.talk-turn.me { align-self: flex-end; background: var(--ink); color: var(--card); border-bottom-right-radius: 6px; }
.talk-turn.nico { align-self: flex-start; background: var(--line-2); color: var(--ink); border-bottom-left-radius: 6px; }
.talk-turn.nico .answer { font-size: 17px; }
.talk-turn.nico .answer > :first-child { margin-top: 0; }
.talk-turn.nico .answer > :last-child { margin-bottom: 0; }
.talk-turn.thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.talk-compose { flex: none; display: flex; align-items: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.talk-compose textarea { flex: 1; min-width: 0; min-height: 50px; max-height: 160px; resize: none; box-sizing: border-box; border: 2px solid var(--line); border-radius: 25px; padding: 12px 16px; font: inherit; font-size: 17px; line-height: 1.35; background: var(--bg); color: var(--ink); }
.talk-compose textarea::placeholder { color: var(--ink-3); opacity: 1; }
.talk-compose textarea:focus { border-color: var(--ink-3); outline: none; }
.talk-compose .talk-mic, .talk-compose .talk-send { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.talk-compose .talk-mic { background: var(--red); color: #fff; }
.talk-compose .talk-send { background: var(--ink); color: var(--card); }
.talk-compose .talk-send:disabled { opacity: .45; }
.talk-compose svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.talk-fresh { flex: none; align-self: center; color: var(--ink-3); font-size: 15px; }

/* What Nico knows (3.16.0). */
.memory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.memory-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.memory-list li span { display: grid; gap: 2px; flex: 1; }
.memory-list li small { color: var(--ink-3); font-size: 13px; }
.remembered { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--green-dark); }
.remembered .link { margin-left: auto; }

/* Sign-up: English or Spanish, asked clearly (3.16.0). */
.signup .lang-pick { display: grid; gap: 8px; margin: 4px 0 8px; }
.signup .lang-pick .label { font-weight: 800; font-size: 17px; margin: 0; }