@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* Hidden means hidden. A part switched off with the hidden mark stays off
   whatever layout its own rule gives it, so no part needs a rule of its own
   to obey it. */
[hidden] { display: none !important; }

:root {
  --bg:        #D6E4EF;
  /* The intro's look: white cards with a soft blue edge. --frame is the
     field border, --card-edge the edge of each section card. */
  --frame:     #C8D5E3;
  --need:      #C8D5E3;
  --card-edge: rgba(47,107,255,0.26);
  --surface:   #FFFFFF;
  /* Room the floating mic button needs at the foot of a scroll area:
     its 58px button, 20px from the bottom, plus a gap. */
  --mic-clearance: calc(96px + env(safe-area-inset-bottom, 0px));
  --surface2:  #F5F7FA;
  --surface3:  #EDF0F4;
  /* The brand: electric blue on black and white, with a small hint of
     pink. --accent fills buttons and highlights, --accent2 is the blue for
     text and links on white, --accent-hi and --accent-glow are the lighter
     blues for the dark backdrop, --accent-ink is text on a bright blue
     fill. --pink is the second colour, kept small: the logo's dot and a
     word picked out here and there. Green (--green) means done, signed or
     clear; amber and red keep their meanings. */
  --accent:    #2F6BFF;
  --accent2:   #1D4ED8;
  --accent3:   #1E3A8A;
  --accent-rgb: 47,107,255;
  --accent-deep: #1F4FE0;
  --accent-deep-rgb: 31,79,224;
  --accent-hi: #5B8CFF;
  --accent-hi-rgb: 91,140,255;
  --accent-glow: #9DB8FF;
  --accent-glow-rgb: 157,184,255;
  --accent-pale: #DCE6FF;
  --accent-wash: #EEF3FF;
  --accent-edge: #B9CBFF;
  --accent-ink: #06123A;
  --accent-grad: linear-gradient(180deg, #5B8CFF 0%, #2F6BFF 45%, #1F4FE0 100%);
  --pink:      #FF3D8B;
  --pink-rgb:  255,61,139;
  --pink-text: #C2185B;
  --green:     #15803D;
  --green-rgb: 34,197,94;
  --green-fill: #22C55E;
  --green-wash: #E9F8EE;
  --green-edge: #A7E3BD;
  --yellow:    #D4920A;
  /* Amber for text: --yellow is too light to read on white or grey in
     sunlight (about 2:1), so it stays for borders, dots and fills only. */
  --yellow-text: #8A5A00;
  --blue:      #2D7DD2;
  --risk:      #C0392B;
  --text:      #0D1117;
  --text2:     #3D5166;
  --text3:     #566A7F;
  --border:    #D8E2ED;
  --border2:   #C8D5E3;
  --silver:    #8899AA;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Where words sit on a narrow phone: a paragraph, label or button never
   ends on one lone word, and headings break into even lines. What's typed
   in a field wraps as it always has (the style only: a select or input
   keeps its own no-wrap). */
body { text-wrap: pretty; }
input, textarea, select, [contenteditable] { text-wrap-style: auto; }
h1, h2, h3, h4, .auth-title, .section-header h3, .job-hero-addr { text-wrap: balance; }

/* ── ACCESSIBILITY MODES ── */

/* Text size (Menu › Settings). A size set on the body alone doesn't reach
   text set in px, so every font size in the app is calc(Npx * var(--ts))
   and Large and Extra large reach all of it. Text that takes the body's
   size grows with the body. */
:root { --ts: 1; }
body.text-size-large { --ts: 1.12; }
body.text-size-xl { --ts: 1.28; }
body { font-size: calc(100% * var(--ts)); }
/* Bars with a fixed amount of room keep their size: the report's step
   tabs and the quote's total bar. */
.section-tabs, .quote-bar { --ts: 1; }
/* While the size changes, nothing eases (see setTextSize). */
body.text-size-switching *, body.text-size-switching *::before, body.text-size-switching *::after { transition: none !important; }
/* With larger text an area's status buttons wrap rather than cut "Not
   applicable" off, and the status beside an area's name wraps instead of
   pushing the name out. */

/* High contrast */
body.high-contrast {
  --border: #7A8C9E;
  --border2: #5E7082;
  --text2: #1E2B38;
  --text3: #3D5166;
}
body.high-contrast .sidebar,
body.high-contrast .voice-popover,
body.high-contrast .toast { border-width: 2px; }

/* Reduce motion override (in addition to prefers-reduced-motion) */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
/* Larger touch targets: the defaults are already 44px (thumb sized);
   this setting goes a step further for gloves. */
body.large-touch .field-val { min-height: 56px; padding: 13px 14px; font-size: calc(16px * var(--ts)); }
body.large-touch .notes-toggle { width: 52px; }
body.large-touch .section-tab { min-height: 52px; padding: 14px 18px; font-size: calc(14px * var(--ts)); }
body.large-touch .job-input { min-height: 52px; padding: 14px 13px; font-size: calc(15px * var(--ts)); }
body.large-touch #jobPanelBody .job-input, body.large-touch #reportBody .job-input { min-height: 56px; font-size: calc(16px * var(--ts)); }
/* Buttons with words in them get taller, never narrower: a fixed square
   squeezed "Yes, it's sent" and Upgrade into three lines. */
body.large-touch .job-action-btn,
body.large-touch .extract-btn { min-height: 56px; }
body.large-touch .mic-fab { width: 68px; height: 68px; }
body.large-touch .toggle-switch { width: 56px; height: 32px; }
body.large-touch .toggle-switch::after { width: 28px; height: 28px; }
body.large-touch .toggle-switch.on::after { transform: translateX(24px); }

/* ── SPLASH SCREEN ── */
#splash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb),0.08), var(--bg) 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.25s ease;
}

.splash-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.splash-logo > * {
  opacity: 0;
  animation: splashIn 0.6s ease forwards;
}

.splash-icon         { animation-delay: 0.05s; }
.splash-name         { animation-delay: 0.18s; }
.splash-tagline      { animation-delay: 0.32s; }
.splash-standard     { animation-delay: 0.46s; }
.splash-loading      { animation-delay: 0.62s; }

@keyframes splashIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(145deg, var(--accent2) 0%, var(--accent) 55%, var(--accent3) 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(38px * var(--ts));
  box-shadow: 0 0 60px rgba(var(--accent-rgb),0.35), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
  animation: splashIn 0.6s ease forwards, iconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  position: relative;
  overflow: hidden;
}

.splash-icon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: rotate(20deg);
  animation: fabShineSweep 1.4s ease-in-out 0.6s;
}

@keyframes iconPop {
  0%   { transform: scale(0.3) translateY(20px) rotate(-15deg); }
  55%  { transform: scale(1.15) translateY(-4px) rotate(8deg); }
  75%  { transform: scale(0.96) translateY(0) rotate(-3deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}

.splash-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(38px * var(--ts));
  font-weight: 700;
  letter-spacing: -1px;
  color: #F4F7FA;
}
/* The name blends into the dark: bright at the top, melting into blue and
   then the background at the foot of the letters, with a faint reflection
   below. It drifts in out of a blur, then a light sheen crosses it once,
   if the sign-in check takes that long (the splash goes when it's done). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .splash-name {
    color: transparent;
    background:
      linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.85) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat,
      linear-gradient(180deg, #F4F7FA 0%, var(--accent-pale) 42%, var(--accent-hi) 72%, rgba(var(--accent-rgb),0.25) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-reflect: below -6px linear-gradient(transparent 55%, rgba(255,255,255,0.14));
    animation: splashNameIn 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s forwards,
               splashNameSheen 1.1s ease-in-out 1s forwards;
  }
}
/* The logo box takes the same white-to-blue fade as the name below it,
   so the two read as one run of colour; the ring turns dark to show on
   the pale top. */
#splash .splash-icon {
  background: linear-gradient(180deg, #F4F7FA 0%, var(--accent-pale) 40%, var(--accent-hi) 78%, var(--accent) 100%);
  color: var(--accent-ink);
  box-shadow: 0 0 60px rgba(var(--accent-hi-rgb),0.35), 0 10px 30px rgba(var(--accent-rgb),0.25), inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(var(--accent-deep-rgb),0.35);
}
@keyframes splashNameIn {
  from { opacity: 0; letter-spacing: 10px; filter: blur(10px); transform: translateY(6px); }
  to   { opacity: 1; letter-spacing: -1px; filter: blur(0) drop-shadow(0 0 18px rgba(var(--accent-hi-rgb),0.35)); transform: none; }
}
@keyframes splashNameSheen {
  from { background-position: -150% 0, 0 0; }
  to   { background-position: 250% 0, 0 0; }
}

.splash-tagline {
  font-size: calc(15.5px * var(--ts));
  color: #E2F3F1;
  letter-spacing: 0.3px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0 14px rgba(var(--accent-hi-rgb),0.25);
}
/* The slogan arrives a phrase at a time; the last phrase carries the
   same blue as the foot of the name. */
.splash-tagline span {
  display: inline-block;
  opacity: 0;
  animation: splashIn 0.5s ease forwards;
}
.splash-tagline span:nth-child(1) { animation-delay: 0.5s; }
.splash-tagline span:nth-child(2) { animation-delay: 0.75s; }
.splash-tagline span:nth-child(3) { animation-delay: 1s; color: var(--pink); font-weight: 600; }

.splash-standard {
  font-size: calc(11px * var(--ts));
  font-weight: 600;
  color: var(--accent2);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 5px 12px;
  border-radius: 99px;
}

/* Only once the sign-in check has taken a second (#splash.waiting, on a
   weak signal): "Signing in…" under a bar that keeps moving, since how
   long the signal will take isn't known. */
.splash-loading {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 200px;
  visibility: hidden;
}
#splash.waiting .splash-loading { visibility: visible; }

.splash-progress-track {
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.splash-progress-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hi) 70%, var(--pink));
  border-radius: 99px;
  animation: splashWait 1.3s ease-in-out infinite;
}

@keyframes splashWait {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.splash-status {
  font-size: calc(11.5px * var(--ts));
  color: #A7B6C4;
  white-space: nowrap;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  min-height: 14px;
  transition: opacity 0.15s;
}

/* ── ONBOARDING ── */
/* Scrolls on its own (body doesn't): the business step is taller than a
   small phone. The auto margins centre the form when it fits. */
#onboardScreen {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  animation: menuFadeIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
#onboardScreen > .auth-wrap { margin: auto 0; }
.ob-steps {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.ob-step {
  width: 28px; height: 4px;
  border-radius: 99px;
  background: rgba(232,240,246,0.2);
  transition: background 0.3s, width 0.3s;
}
.ob-step.active { background: var(--accent-hi); width: 44px; }
.ob-step.done   { background: rgba(var(--accent-hi-rgb),0.55); }
.ob-panel { animation: menuFadeIn 0.35s cubic-bezier(0.22,1,0.36,1); }
/* The business's boxes (#businessFields) sit on the set-up card and on
   Menu › Business details, where nothing "can wait". */
.business-fields { display: flex; flex-direction: column; gap: 16px; width: 100%; }
#businessPanel .ob-setup-only { display: none; }
#businessPanel .business-fields { gap: 14px; margin: 12px 0 16px; }
#businessPanel .auth-label { color: var(--text3); }
#businessPanel .auth-label-optional { color: var(--text3); }
#businessPanel .auth-input { background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); min-height: 48px; }
#businessPanel .business-save { width: 100%; min-height: 48px; justify-content: center; font-size: calc(14px * var(--ts)); }
.ob-tip { font-size: calc(12px * var(--ts)); color: var(--text3); line-height: 1.6; margin: 4px 0 0; }
.ob-checklist { display: flex; flex-direction: column; gap: 10px; }
.ob-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: calc(13px * var(--ts));
  color: var(--text2);
  line-height: 1.5;
}
.ob-check-item strong { color: var(--text); }
.ob-check-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.15);
  color: var(--accent2);
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
/* Sign-in, sign-up and business setup: the first thing a business owner
   sees, so it looks like the paid product it is. A deep ink backdrop with a
   blue glow, the brand in white, and a crisp white card. */
#authScreen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px calc(24px + env(safe-area-inset-bottom));
  animation: menuFadeIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
#authScreen, #onboardScreen {
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(var(--accent-rgb),0.38), rgba(var(--accent-rgb),0) 62%),
    linear-gradient(180deg, #0B141C 0%, #070B10 100%);
  color-scheme: dark;
}
.auth-wrap { width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.auth-logo { display:flex; align-items:center; gap:11px; margin-bottom:-6px; }
.auth-logo-icon { width:36px; height:36px; background:linear-gradient(145deg, var(--accent), var(--accent2)); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset, 0 6px 22px rgba(var(--accent-rgb),0.45); }
.auth-logo-name { font-family:'Space Grotesk',sans-serif; font-size: calc(24px * var(--ts)); font-weight:800; letter-spacing:1.5px; color:#F4F8FB; }
.auth-tagline { font-size: calc(14px * var(--ts)); line-height:1.5; color:rgba(232,240,246,0.7); text-align:center; max-width:300px; margin:0; }
.auth-card { width:100%; background:#FFFFFF; color:#0D1117; border:1px solid rgba(255,255,255,0.6); border-radius:20px; padding:28px 24px 22px; box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 28px 64px rgba(0,0,0,0.5); display:flex; flex-direction:column; gap:16px; color-scheme: light;
  /* The card is always light: its own tokens, whatever the page sets. */
  --surface:#FFFFFF; --surface2:#F4F7FA; --text:#0D1117; --text2:#3D5166; --text3:#566A7F; --border:#D8E2ED; --border2:#C8D5E3; --accent2:#1D4ED8; }
.auth-title { font-family:'Space Grotesk',sans-serif; font-size: calc(23px * var(--ts)); font-weight:700; color:#0D1117; letter-spacing:-0.4px; margin:0; }
.auth-subtitle { font-size: calc(14px * var(--ts)); color:#4A5D70; margin-top:-8px; line-height:1.5; }
.auth-field { display:flex; flex-direction:column; gap:7px; }
.auth-label { font-size: calc(12px * var(--ts)); font-weight:700; color:#3D5166; text-transform:uppercase; letter-spacing:0.7px; }
.auth-label-optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: #566A7F; }
/* 16px text, so iPhone doesn't zoom the page when a field is tapped. */
.auth-input { width:100%; padding:13px 14px; background:#FFFFFF; border:1.5px solid #C8D5E3; border-radius:12px; color:#0D1117; font-family:'Inter',sans-serif; font-size: calc(16px * var(--ts)); outline:none; transition:border-color 0.2s, box-shadow 0.2s; box-sizing:border-box; min-height:52px; }
.auth-input:focus { border-color:var(--accent2); box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.16); }
.auth-input::placeholder { color:#7D8FA1; }
.auth-pass { position:relative; }
.auth-pass .auth-input { padding-right:76px; }
.auth-reveal { position:absolute; right:4px; top:50%; transform:translateY(-50%); min-width:64px; min-height:44px; border:none; background:none; color:var(--accent2); font-family:'Inter',sans-serif; font-size: calc(13px * var(--ts)); font-weight:700; cursor:pointer; border-radius:10px; }
.auth-reveal:focus-visible { outline:2px solid var(--accent2); outline-offset:-2px; }
.auth-consent { display:flex; align-items:flex-start; gap:10px; font-size: calc(14px * var(--ts)); line-height:1.45; color:#3D5166; cursor:pointer; }
.auth-consent input { width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--accent2); cursor:pointer; }
.auth-consent a { color:var(--accent2); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.auth-error { font-size: calc(13px * var(--ts)); color:#B42318; min-height:16px; line-height:1.4; }
.auth-error:empty { min-height:0; margin-top:-8px; }
.auth-btn { width:100%; padding:14px; background:var(--accent2); border:none; border-radius:12px; color:white; font-family:'Inter',sans-serif; font-size: calc(16px * var(--ts)); font-weight:700; letter-spacing:0.1px; cursor:pointer; transition:background 0.2s, transform 0.15s, box-shadow 0.2s; margin-top:2px; min-height:52px; box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 20px rgba(10,122,112,0.28); display:flex; align-items:center; justify-content:center; gap:8px; }
.auth-btn:hover { background:#086A61; }
.auth-btn:active { transform:scale(0.985); }
.auth-btn:disabled { opacity:0.45; cursor:not-allowed; box-shadow:none; }
.auth-btn.secondary { background:#FFFFFF; color:#0D1117; border:1.5px solid #C8D5E3; box-shadow:none; }
.auth-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 8px; margin:-4px -6px 0; }
.auth-link { background:none; border:none; color:var(--accent2); font-family:'Inter',sans-serif; font-size: calc(14px * var(--ts)); font-weight:600; cursor:pointer; padding:0 6px; transition:color 0.15s; min-height:44px; white-space:nowrap; }
/* Too narrow for both links on one line: one under the other, centred. */
@media (max-width: 359px) { .auth-links { flex-direction:column; align-items:center; } }
.auth-link:hover { color:#065A53; }
.auth-badge { width:52px; height:52px; margin:0 auto 2px; border-radius:16px; background:rgba(var(--accent-rgb),0.1); color:var(--accent2); display:flex; align-items:center; justify-content:center; }
.auth-footer { font-size: calc(12px * var(--ts)); color:rgba(232,240,246,0.6); text-align:center; line-height:1.6; margin:0; }
.auth-footer a { color:rgba(232,240,246,0.85); text-decoration:underline; text-underline-offset:2px; }
/* Legal links: a 44px tall tap area without moving the text around them. */
.auth-footer a, .drawer-legal a { display:inline-block; padding:14px 2px; margin:-14px 0; }

/* The fade-up the sign-in, set-up and quote screens open with. */
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MAIN APP ── */
#app {
  display: none;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  overflow: hidden;
}

/* ── HEADER ── */
header {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #CBD8E8;
  box-shadow: 0 2px 12px rgba(0,50,100,0.1), 0 1px 3px rgba(0,0,0,0.06);
  padding: 0 16px;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(52px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.header-job {
  font-size: calc(11.5px * var(--ts));
  color: var(--text3);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-job span,
.header-job.has-job {
  color: var(--text2);
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pill {
  font-size: calc(10px * var(--ts));
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.pill-red   { background: transparent; border: 1px solid var(--border); color: var(--text2); font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.pill-grey  { background: var(--surface2); border: 1px solid var(--border); color: var(--text2); }
.pill-green { background: var(--green-wash); border: 1px solid rgba(var(--green-rgb),0.35); color: var(--green); }

/* Standard selector */
.standard-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.standard-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(10px * var(--ts));
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 4px 22px 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 160px;
}

.standard-select:hover { border-color: var(--accent); color: var(--text); }
.standard-select:focus { outline: none; border-color: var(--accent); }

.standard-select option {
  background: var(--surface2);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.standard-select-chevron {
  position: absolute;
  right: 6px;
  color: var(--text3);
  pointer-events: none;
}

.progress-ring-wrap {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-bg { stroke: var(--border); }

.progress-ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.3s;
}

.progress-ring-fill.complete { stroke: rgb(var(--green-rgb)); animation: ringCelebrate 0.6s ease; }

@keyframes ringCelebrate {
  0%   { stroke-width: 2.5; }
  40%  { stroke-width: 4.5; }
  100% { stroke-width: 2.5; }
}

.progress-ring-wrap:has(.progress-ring-fill.complete) {
  animation: ringWrapPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ringWrapPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.progress-ring-label {
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  color: var(--green);
  margin-left: -2px;
}

.progress-ring-text {
  position: absolute;
  font-size: calc(7px * var(--ts));
  font-weight: 800;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}

/* ── BODY ── */
.body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* ── HAMBURGER ── */
.hamburger-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 7px;
  transition: background 0.15s;
}
.hamburger-btn:hover { background: var(--surface2); }

.header-icon-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.header-icon-btn:hover { background: var(--surface2); color: var(--accent2); }
.hamburger-btn span {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: all 0.25s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--accent2); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--accent2); }

/* ── DRAWER OVERLAY ── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── SIDEBAR / DRAWER ── */
.sidebar {
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 160;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.1, 0.4, 1);
}
.sidebar.open { transform: translateX(0); }

.drawer-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Full width on a phone; a readable column on a tablet or computer. */
  padding: 4px max(14px, calc(50% - 320px)) 24px;
}
.drawer-scroll > * { flex-shrink: 0; }

/* The menu's top bar is a .page-topbar (see PAGE TOP BARS); on a page it
   adds a back button to the menu's list. */
.drawer-back {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; margin-left: -6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}


/* Menu groups: This job, Jobs, Business, App. On the menu list each panel
   shows only its header row; tapping it opens the panel as a full page
   (.on-page), with every other item hidden. See showMenuPage(). */
.drawer-group-label {
  padding: 12px 8px 0;
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Job details */
.job-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  font-size: calc(14px * var(--ts));
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}

.panel-label .panel-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent2);
}

/* Menu rows */
.panel-label-toggle {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.panel-label-toggle:active { background: var(--surface2); }
.panel-title { flex-shrink: 0; }

.job-panel-summary {
  flex: 1;
  min-width: 0;
  font-size: calc(12px * var(--ts));
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.panel-toggle-chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text3);
}

.job-panel-body {
  padding: 2px 14px 14px;
}

.sidebar:not(.on-page) .drawer-scroll .job-panel > :not(.panel-label),
.sidebar:not(.on-page) .drawer-scroll .saved-panel > :not(.panel-label) { display: none; }
.sidebar.on-page .drawer-scroll > :not(.menu-page-active) { display: none; }
/* A page opened from elsewhere (Billing, from the account button) has no row in the list. */
.sidebar:not(.on-page) .menu-row-hidden { display: none; }
.sidebar.on-page .menu-page-active > .panel-label { display: none; }
.sidebar.on-page .menu-page-active { background: transparent; border: none; border-radius: 0; overflow: visible; }
.sidebar.on-page .menu-page-active > .job-panel-body { padding: 4px 2px 16px; }


.job-field {
  margin-bottom: 10px;
}

.job-field-label {
  display: block;
  font-size: calc(11.5px * var(--ts));
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 4px;
}

.job-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: calc(14px * var(--ts));
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 44px;
}
/* iOS gives date and time fields a fixed width that spills out of their
   column; this keeps them inside it and left-aligned like the other fields. */
input.job-input[type="date"], input.job-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
}
input.job-input[type="date"]::-webkit-date-and-time-value,
input.job-input[type="time"]::-webkit-date-and-time-value { text-align: left; }
/* At 320 wide a half-width date keeps room for the whole date beside its icon. */
@media (max-width: 360px) { #jobPanelBody input.job-input[type="date"], #jobPanelBody input.job-input[type="time"] { padding-left: 10px; padding-right: 6px; } }
/* Job details: big fields for gloves, in the same soft card style as the
   rest of the app. */
#jobPanel:not(.menu-page-active) { border: 1px solid var(--card-edge); border-radius: 16px; }
#jobPanelBody .job-input, #reportBody .job-input { border: 1.5px solid var(--frame); border-radius: 10px; font-size: calc(15px * var(--ts)); min-height: 52px; }

.job-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); background: var(--surface); }

.drawer-legal {
  padding: 14px 8px 4px;
  text-align: center;
  font-size: calc(11.5px * var(--ts));
  color: var(--text3);
}
.drawer-legal a { color: var(--text2); }

.job-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
  padding-right: 28px;
  cursor: pointer;
}

.job-select option {
  background: var(--surface2);
  color: var(--text);
}
.job-input::placeholder { color: var(--text3); }

/* minmax(0, …): a date field's own width can't push its column past the screen edge at 320 wide */
.job-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.job-row-suburb { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.drawer-subhead {
  margin: 16px 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb),0.08);
  font-size: calc(12px * var(--ts));
  font-weight: 800;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.logo-upload-row { display: flex; align-items: center; gap: 10px; }
.logo-preview {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px dashed var(--border2);
  background: var(--bg);
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-upload-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.logo-upload-btn, .logo-remove-btn {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.logo-upload-btn:hover { border-color: var(--accent); color: var(--accent2); }
.logo-remove-btn:hover { border-color: var(--risk); color: var(--risk); }

.job-action-btn {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(12.5px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 12px;
  font-size: calc(11.5px * var(--ts));
  font-weight: 600;
  color: var(--text3);
}
.sync-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.sync-status.saved .sync-status-dot { background: rgb(var(--green-rgb)); }
.sync-status.saved { color: var(--green); }
.sync-status.offline .sync-status-dot { background: var(--yellow); }
.sync-status.offline { color: var(--yellow-text); }
.sync-status.error .sync-status-dot { background: var(--risk); }
.sync-status.error { color: var(--risk); }

/* A panel in the menu */
.saved-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}



/* Settings panel. One page in the menu, in groups: Display, Voice, Your data. */
.settings-group-title {
  padding: 16px 0 2px;
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.settings-group-title:first-child { padding-top: 4px; }
.settings-row-desc .settings-inline-link { display: flex; margin-top: 2px; font-size: calc(12px * var(--ts)); }
.learned-list { margin-top: 8px; }
.learned-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.learned-text { flex: 1; min-width: 0; font-size: calc(12.5px * var(--ts)); color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.learned-note { display: block; font-size: calc(11px * var(--ts)); color: var(--text3); }
.learned-list .learned-remove { flex: none; font-size: calc(12.5px * var(--ts)); }
.learned-empty { font-size: calc(11.5px * var(--ts)); color: var(--text3); font-style: italic; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child { border-bottom: none; }

.settings-row-text { flex: 1; min-width: 0; }

.settings-row-title {
  font-size: calc(13px * var(--ts));
  font-weight: 650;
  color: var(--text);
  margin-bottom: 2px;
}

.settings-row-desc {
  font-size: calc(11.5px * var(--ts));
  color: var(--text3);
  line-height: 1.5;
}

.billing-explainer {
  padding: 12px 14px;
  margin: 12px 0 6px;
  border-radius: 10px;
  background: var(--surface2, rgba(0,0,0,0.03));
  font-size: calc(12px * var(--ts));
  line-height: 1.5;
  color: var(--text2, var(--text));
}
.billing-explainer > summary { font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--accent2); cursor: pointer; min-height: 24px; }
.billing-explainer[open] > summary { margin-bottom: 8px; }
.billing-explainer p { margin: 0 0 6px; }
.billing-explainer p:last-child { margin-bottom: 0; }
.billing-explainer ul { margin: 0 0 6px; padding-left: 18px; }

.settings-danger-btn {
  flex-shrink: 0;
  color: var(--risk) !important;
  border-color: rgba(192,57,43,0.3) !important;
  background: rgba(192,57,43,0.06) !important;
}

.settings-danger-btn:hover {
  background: rgba(192,57,43,0.14) !important;
  border-color: var(--risk) !important;
}

.settings-primary-btn {
  flex-shrink: 0;
  color: var(--accent2) !important;
  border-color: rgba(var(--accent-rgb),0.3) !important;
  background: rgba(var(--accent-rgb),0.06) !important;
}

.settings-primary-btn:hover {
  background: rgba(var(--accent-rgb),0.14) !important;
  border-color: var(--accent) !important;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: var(--surface3);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

/* Takes the tap area out to 44px tall without making the switch bigger. */
.toggle-switch::before { content: ''; position: absolute; inset: -8px -4px; }

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text2);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}

.toggle-switch.on {
  background: rgba(var(--accent-rgb),0.25);
}

.toggle-switch.on::after {
  transform: translateX(22px);
  background: var(--accent);
}

/* Text size segmented control */
.text-size-control {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.text-size-btn {
  border: none;
  background: var(--bg);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(13px * var(--ts));
  font-weight: 700;
  padding: 6px 9px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 1px solid var(--border);
  min-width: 44px;
  min-height: 44px;
}

.text-size-btn:first-child { border-left: none; }
/* Each A shows the size it sets */
.text-size-btn[data-size="normal"] { font-size: 13px; }
.text-size-btn[data-size="large"]  { font-size: 16px; }
.text-size-btn[data-size="xl"]     { font-size: 19px; }

.text-size-btn.active {
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent2);
}

.text-size-btn:hover { color: var(--text); }







.auth-inline-link { border: none; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.drawer-help { text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-top: 8px; }
/* Send is for the report: off the menu's own pages (Settings, Billing). */
.settings-row.current-plan { background: rgba(var(--accent-rgb), 0.08); border-radius: 10px; }
.settings-row.current-plan .settings-primary-btn:disabled { opacity: 1; background: transparent; color: var(--accent2); border-color: transparent; box-shadow: none; }


/* ── HORIZONTAL SECTION TABS (in report) ── */
.section-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid #C8D8E8;
  background: #EEF4FA;
  box-shadow: 0 1px 4px rgba(0,40,80,0.05);
  flex-shrink: 0;
  scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }

.section-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text3);
  font-family: 'Inter', sans-serif;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
  min-height: 44px;
}

.section-tab:hover { color: var(--text2); background: rgba(var(--accent-rgb),0.06); }

.section-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.35);
}

.tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
}

/* Empty: hollow circle (default above) */

/* Partial: half-filled (diagonal split) */
.tab-dot.partial {
  border-color: var(--yellow);
  background: linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
}

/* Done: fully filled, solid */
.tab-dot.done {
  background: rgb(var(--green-rgb));
  border-color: rgb(var(--green-rgb));
}

/* Current: filled with ring (outer halo) */
.tab-dot.current {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25);
}

.tab-label { color: var(--text); }

/* ── VOICE POPOVER ── */
.voice-popover {
  position: fixed;
  bottom: 92px;
  left: 50%;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(160deg, var(--surface2) 0%, var(--surface) 50%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 175;
  /* Never taller than the space above the mic, and scrolls on its own when
     the note and its panels don't fit (phones with the browser bar showing). */
  max-height: calc(100vh - 92px - 16px - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - 92px - 16px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateX(-50%) translateY(24px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-popover > * { flex-shrink: 0; }

.voice-popover.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

/* Pocket lock (the inspector locks it while recording): the page behind the voice popover can't be
   scrolled or tapped, so a phone in a pocket doesn't change the report. */
.pocket-shield {
  position: fixed; inset: 0; z-index: 172;
  background: rgba(0,0,0,0.35);
  touch-action: none; overscroll-behavior: contain;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
}
.pocket-shield span {
  background: var(--surface); color: var(--text2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px; font-size: calc(13px * var(--ts)); font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
body.pocket-lock { overflow: hidden; }
body.pocket-lock .voice-popover-close { visibility: hidden; }
body.pocket-lock .voice-btn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.voice-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voice-popover-title {
  font-size: calc(13px * var(--ts));
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

.test-mode-badge {
  font-size: calc(10px * var(--ts));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.voice-popover-close {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: calc(14px * var(--ts));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.voice-popover-close:hover { border-color: var(--accent); color: var(--accent2); }

/* ── FLOATING MIC BUTTON ── */
/* Docked bottom bar — the mic button lives here instead of floating over
   content. main-panel's flex column gives report-body (flex:1) the
   remaining height automatically, same mechanism as the header, so the
   scrollable area is always correctly sized and never needs a manual
   "clear the floating button" gutter hack. Centered placement is
   reachable one-handed regardless of which hand is holding the phone. */
.mic-dock {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 170;
  transition: opacity 0.2s, transform 0.2s;
}

/* Count of notes waiting for signal (see .pending-notes-bar) */
.mic-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--yellow);
  color: #1a1a1a;
  font-size: calc(11px * var(--ts));
  font-weight: 800;
  line-height: calc(20px * var(--ts));
  text-align: center;
  z-index: 2;
  pointer-events: none;
}


.mic-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--accent2) 0%, var(--accent) 55%, var(--accent3) 100%);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.4), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
  transition: all 0.2s;
  animation: fabBreathe 3s ease-in-out infinite;
  overflow: hidden;
}

.mic-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 22%, transparent 45%);
  pointer-events: none;
}

.mic-fab::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: rotate(20deg);
  animation: fabShineSweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fabShineSweep {
  0%, 60%  { left: -150%; }
  85%, 100% { left: 150%; }
}

@keyframes fabBreathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.4), 0 0 0 0 rgba(var(--accent-rgb),0.25); }
  50%      { box-shadow: 0 8px 28px rgba(var(--accent-rgb),0.5), 0 0 0 8px rgba(var(--accent-rgb),0); }
}

.mic-fab:hover { transform: scale(1.1) rotate(-4deg); box-shadow: 0 10px 28px rgba(var(--accent-rgb),0.5), 0 0 0 8px rgba(var(--accent-rgb),0.1); animation-play-state: paused; }
.mic-fab:active { transform: scale(0.92); }

.mic-fab.recording {
  background: linear-gradient(145deg, #5DE8D4 0%, var(--risk) 55%, #d63a52 100%);
  box-shadow: 0 8px 24px rgba(192,57,43,0.45), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
  animation: fabPulse 1.1s infinite;
}

@keyframes fabPulse {
  0%   { box-shadow: 0 8px 24px rgba(192,57,43,0.4), 0 0 0 0 rgba(192,57,43,0.5); transform: scale(1); }
  50%  { box-shadow: 0 8px 24px rgba(192,57,43,0.4), 0 0 0 14px rgba(192,57,43,0); transform: scale(1.05); }
  100% { box-shadow: 0 8px 24px rgba(192,57,43,0.4), 0 0 0 0 rgba(192,57,43,0); transform: scale(1); }
}

.mic-fab.open { background: linear-gradient(145deg, var(--surface3) 0%, var(--surface2) 100%); color: var(--text); animation: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06), inset 0 -2px 4px rgba(0,0,0,0.3); }

.voice-photo-btn { width: 100%; min-height: 44px; margin: -4px 0 10px; padding: 11px 12px; border-radius: 10px; border: 1.5px dashed var(--border); background: transparent; color: var(--text2); font: inherit; font-size: calc(13px * var(--ts)); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.voice-photo-btn:active { background: var(--surface2); }
.voice-photo-btn.has-photos { border-style: solid; color: var(--accent2); border-color: rgba(var(--accent-rgb), 0.5); }
.voice-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all 0.2s, transform 0.1s;
  letter-spacing: -0.2px;
}

.voice-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
.voice-btn:active { transform: scale(0.98); }

.voice-btn.recording {
  border-color: var(--risk);
  background: rgba(192,57,43,0.08);
  animation: voicePulse 1.5s infinite;
}

@keyframes voicePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}

.mic-svg { width: 16px; height: 16px; flex-shrink: 0; }

.waveform {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
}

.waveform.show { display: flex; }

.wave-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  height: 3px;
  /* Height is set by driveWave() in js/app/: it jumps as words are heard. */
}

.transcript-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 72px;
  /* Grows with the note so it can be re-read, then scrolls. */
  max-height: min(45vh, 360px);
  font-size: calc(11.5px * var(--ts));
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.6;
  overflow-y: auto;
  transition: border-color 0.2s;
}

.transcript-box.active { border-color: var(--accent); color: var(--text); }

/* Quick phrases: tap a ready-made sentence into the note. */
.quick-phrases { margin-top: 8px; font-size: calc(13px * var(--ts)); }
.quick-phrases summary { cursor: pointer; color: var(--text2); min-height: 44px; display: flex; align-items: center; }
.quick-phrases-group { margin: 6px 0 4px; font-size: calc(12px * var(--ts)); font-weight: 600; color: var(--text2); }
.quick-phrases-row { display: flex; flex-direction: column; gap: 6px; }
.quick-phrase {
  text-align: left; min-height: 44px; padding: 8px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit; cursor: pointer;
}
.quick-phrase.added { border-color: var(--accent); }

/* Notes already sent to the report: kept to re-read, not editable. */
.transcript-done {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg);
  max-height: min(30vh, 220px);
  overflow-y: auto;
  font-size: calc(13px * var(--ts));
  line-height: 1.5;
  color: var(--text2);
}
.transcript-done-label { font-size: calc(11px * var(--ts)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }

.low-confidence-warning {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(212,146,10,0.12);
  border: 1px solid rgba(212,146,10,0.35);
  color: var(--yellow-text);
  font-size: calc(11px * var(--ts));
  font-weight: 600;
  line-height: 1.4;
}
.low-confidence-warning.show { display: flex; }
.low-confidence-warning svg { flex-shrink: 0; }
.cleanup-suggest-btn {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(212,146,10,0.5);
  background: rgba(212,146,10,0.18);
  color: var(--yellow-text);
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cleanup-suggest-btn:disabled { opacity: 0.6; cursor: default; }
.cleanup-panel {
  margin-top: 6px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),0.06);
  border: 1px solid rgba(var(--accent-rgb),0.25);
}
.cleanup-panel-label {
  font-size: calc(10px * var(--ts));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent2);
  margin-bottom: 6px;
}
.cleanup-panel-text {
  font-size: calc(13px * var(--ts));
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 8px;
}
.cleanup-panel-note {
  font-size: calc(11px * var(--ts));
  color: var(--yellow-text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.cleanup-panel-actions { display: flex; gap: 8px; }
.cleanup-apply-btn, .cleanup-dismiss-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
}
.cleanup-apply-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cleanup-dismiss-btn {
  background: transparent;
  color: var(--text2);
}
.pending-notes-bar {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(212,146,10,0.08);
  border: 1px solid var(--yellow);
}
.pending-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pending-notes-text {
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  color: var(--yellow-text);
}
.pending-notes-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--yellow);
  background: transparent;
  color: var(--text);
  font-size: calc(11.5px * var(--ts));
  font-weight: 700;
  cursor: pointer;
}
.pending-notes-btn:disabled { opacity: 0.6; cursor: default; }
.pending-notes-details summary {
  margin-top: 6px;
  font-size: calc(12px * var(--ts));
  color: var(--text3);
  cursor: pointer;
}
.pending-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: calc(11.5px * var(--ts));
  color: var(--text2);
}
.pending-note-time {
  flex-shrink: 0;
  color: var(--text3);
}
.pending-note-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pending-note-remove {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text3);
  font-size: calc(12px * var(--ts));
  cursor: pointer;
  padding: 0 2px;
}

.extract-btn {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(145deg, var(--accent2) 0%, var(--accent) 60%, var(--accent3) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  min-height: 44px;
}

.extract-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: rotate(20deg);
  transition: left 0.6s ease;
}

.extract-btn:hover::after { left: 150%; }

.extract-btn:hover { opacity: 0.88; }
.extract-btn:active { transform: scale(0.98); }
.extract-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ai-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(11px * var(--ts));
  color: var(--text2);
  padding: 7px 10px;
  background: var(--bg);
  border-radius: 7px;
  border: 1px solid var(--border);
}

.ai-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--green-rgb)); flex-shrink: 0; }
.ai-dot.thinking { background: var(--yellow); animation: blink 0.8s infinite; }

@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }


/* ── MAIN PANEL ── */
.main-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* Progress */
.progress-wrap { height: 2px; background: rgba(255,255,255,0.04); flex-shrink: 0; }
.progress-fill { height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.5s cubic-bezier(0.22,1,0.36,1); width: 0%; }

/* Report body */
.report-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* On a computer the report takes the same column as Jobs and This job
     (680 wide), instead of stretching a label to one edge and its answer
     to the other. */
  padding: 16px max(16px, calc(50% - 340px));
  padding-bottom: calc(var(--mic-clearance) + 16px);
  display: block;
  background: var(--bg);
}

/* Report sections */
.report-section {
  background: var(--surface);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(13,40,60,0.08);
  overflow: hidden;
  margin-bottom: 14px;
  animation: sectionIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.section-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.07), rgba(var(--accent-rgb),0) 70%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(13.5px * var(--ts));
  font-weight: 700;
  flex: 1;
  letter-spacing: -0.2px;
  color: var(--text);
}

.section-header h3 .sec-num {
  color: var(--accent2);
  font-weight: 800;
  margin-right: 5px;
}

.sec-badge {
  font-size: calc(10px * var(--ts));
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.sec-badge.done    { background: rgba(var(--green-rgb),0.1); color: var(--green); border: 1px solid rgba(var(--green-rgb),0.3); }
.sec-badge.partial { background: rgba(255,182,72,0.1); color: var(--yellow-text); border: 1px solid rgba(255,182,72,0.2); }
.sec-badge.empty   { background: transparent; color: var(--text3); border: 1px solid var(--border2); }

/* Next section button — appears at the bottom of a completed section */
.next-section-btn {
  display: none;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb),0.3);
  background: rgba(var(--accent-rgb),0.06);
  color: var(--accent2);
  font-family: 'Inter', sans-serif;
  font-size: calc(13px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.1px;
}
.next-section-btn:hover {
  background: rgba(var(--accent-rgb),0.12);
  border-color: rgba(var(--accent-rgb),0.45);
  transform: translateY(-1px);
}
.next-section-btn:active { transform: scale(0.98); }
.next-section-btn.visible { display: flex; animation: nextBtnIn 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes nextBtnIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.section-fields {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field-wide { grid-column: 1 / -1; }

.field-label {
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-hint { font-size: calc(9px * var(--ts)); color: var(--yellow-text); opacity: 0; transition: opacity 0.2s; }
.edit-mode .edit-hint { opacity: 1; }

/* Field notes toggle + panel */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.field-val-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.field-val-row .field-val {
  flex: 1;
}

.notes-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  width: 44px;
  border-radius: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
  position: relative;
}

.notes-toggle:hover { color: var(--accent2); border-color: var(--accent); }
.notes-toggle.has-content { color: var(--accent2); border-color: rgba(var(--accent-rgb),0.35); background: rgba(var(--accent-rgb),0.05); }
.notes-toggle.open { color: var(--accent2); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
.notes-toggle .icon { transition: transform 0.25s ease; }
.notes-toggle.open .icon { transform: rotate(-15deg); }

.notes-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--bg);
  display: none;
}
.notes-toggle.has-content .notes-dot { display: block; }
.notes-toggle.open .notes-dot { display: none; }

.field-notes {
  display: none;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--surface2);
  border-left: 2px solid var(--accent);
  overflow: hidden;
}

.field-notes.open {
  display: block;
  animation: notesReveal 0.25s ease;
}

@keyframes notesReveal {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 200px; }
}

.field-notes-textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 11px 6px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: calc(12px * var(--ts));
  line-height: 1.6;
  resize: vertical;
  display: block;
  box-sizing: border-box;
}

.field-notes-textarea::placeholder { color: var(--text3); font-style: italic; }
.field-notes-textarea:focus { outline: none; }

.field-notes-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 7px;
}

.field-notes-mic {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(10.5px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 99px;
  transition: all 0.15s;
}

.field-notes-mic:hover { color: var(--accent2); border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
.field-notes-mic.active { color: var(--risk); border-color: var(--risk); }

.field-notes-charcount {
  font-size: calc(9px * var(--ts));
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
}

.scan-plate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(12px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  transition: all 0.15s;
  min-height: 44px;
}
.scan-plate-btn:hover { color: var(--accent2); border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
.scan-plate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.scan-plate-file-btn { margin-top: 8px; }
/* The two durable notice buttons sit inside its photo box. */
.section-photo-widget .scan-plate-btn { width: calc(100% - 24px); margin: 10px 12px 0; }
.section-photo-widget .scan-plate-file-btn { margin-top: 8px; }

.field-val {
  font-size: calc(15px * var(--ts));
  font-weight: 500;
  padding: 11px 12px;
  background: var(--surface2);
  border: 1.5px solid var(--frame);
  border-radius: 10px;
  color: var(--text3);
  min-height: 52px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  cursor: default;
  line-height: 1.4;
}

.field-val:not(.filled):not(.choice-source) { border-color: var(--need); }
.field-val.filled {
  border-color: rgba(var(--accent-rgb),0.4);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-style: normal;
}

.field-val.flash { animation: fieldFlash 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes fieldFlash {
  0%   { background: rgba(var(--accent-rgb),0.18); transform: scale(1); border-color: var(--accent); }
  50%  { transform: scale(1.02); }
  100% { background: rgba(255,255,255,0.05); transform: scale(1); }
}

/* Edit mode fields */
.edit-mode .field-val {
  cursor: pointer;
  border-color: rgba(var(--accent-rgb), 0.2);
}

.edit-mode .field-val:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.04); }

.field-val.editing {
  padding: 0;
  border-color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.06) !important;
  cursor: text;
  border-radius: 8px;
}

.field-val.editing input,
.field-val.editing select {
  width: 100%;
  height: 100%;
  padding: 9px 11px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: calc(16px * var(--ts)); /* under 16px makes iOS zoom the page on focus */
  outline: none;
}

/* Finding card editors swap the whole field for the input */
.field-edit-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: calc(16px * var(--ts));
  outline: none;
}

.field-val.editing select option { background: var(--surface2); }

.edited-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }

/* Tags */
.yes-tag { display:inline-block; background:rgba(192,57,43,0.14); color: var(--risk); padding:2px 8px; border-radius:99px; font-size: calc(11px * var(--ts)); font-weight:700; border:1px solid rgba(192,57,43,0.28); }
.no-tag  { display:inline-block; background:rgba(var(--green-rgb),0.14); color:var(--green); padding:2px 8px; border-radius:99px; font-size: calc(11px * var(--ts)); font-weight:700; border:1px solid rgba(var(--green-rgb),0.28); }
.risk-tag { display:inline-block; padding:3px 9px; border-radius:99px; font-size: calc(11.5px * var(--ts)); font-weight:700; line-height:1.35; }
.risk-high   { background:#FDECEA; color:var(--risk);  border:1px solid rgba(192,57,43,0.35); }
.risk-medium { background:#FDF4E3; color:#9A6A08;      border:1px solid rgba(212,146,10,0.4); }
.risk-low    { background:var(--green-wash); color:var(--green); border:1px solid rgba(var(--green-rgb),0.35); }

.warn-note.note-good { background: var(--green-wash); border-color: rgba(var(--green-rgb),0.35); color: var(--green); }
.warn-note {
  margin: 0 14px 12px;
  padding: 8px 10px;
  background: #FDECEA;
  border: 1px solid rgba(192,57,43,0.3);
  border-radius: 8px;
  font-size: calc(12px * var(--ts));
  line-height: 1.45;
  color: var(--risk);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.warn-note .icon { margin-top: 1px; }
.warn-note.note-info { background: var(--surface2); border-color: var(--border); color: var(--text2); }

/* A finalised job (FINALISED JOBS in js/app/): the one line at the top of
   a locked report, and the Amend form on the job's card. */
.issue-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb),0.07);
  color: var(--text);
  font-size: calc(12px * var(--ts));
}
.issue-banner.locked {
  border-color: rgba(var(--green-rgb),0.35);
  background: rgba(var(--green-rgb),0.06);
}
.issue-banner-row { display: flex; align-items: center; gap: 8px; }
.issue-banner-text { flex: 1; min-width: 0; line-height: 1.45; }
.issue-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.issue-amend-form { margin: 12px 0 0 58px; }
.issue-amend-form label { display: block; margin: 0 0 6px; font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--text); }
.issue-amend-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: calc(16px * var(--ts));
  resize: vertical;
}
.issue-amend-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
body.report-locked #reportBody .report-section,
body.report-locked #jobPanelBody { opacity: 0.78; }
body.report-locked #micDock { opacity: 0.4; }

/* Pre-inspection agreement */
.agreement-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--yellow);
  background: rgba(212,146,10,0.08);
  color: var(--yellow-text);
  font-size: calc(12px * var(--ts));
  font-weight: 700;
}
.agreement-banner.signed {
  border-color: rgba(var(--green-rgb),0.35);
  background: rgba(var(--green-rgb),0.06);
  color: var(--green);
  font-weight: 600;
}
.agreement-banner-text { flex: 1; min-width: 0; }
.agreement-banner-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--text);
  font-size: calc(12.5px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
/* Full-screen sheets: the pre-inspection agreement and the check before sending */
.page-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(0,0,0,0.55);
}
.page-sheet-overlay.open { display: block; }
.page-sheet {
  position: absolute;
  inset: 0;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.page-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
  border-bottom: 1px solid var(--border);
}
.page-sheet-title { font-size: calc(15px * var(--ts)); font-weight: 800; color: var(--text); }
.page-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-sheet-body > * { flex-shrink: 0; }
.agreement-text {
  white-space: pre-wrap;
  font-size: calc(12px * var(--ts));
  line-height: 1.55;
  color: var(--text2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  max-height: 42vh;
  overflow-y: auto;
}
.agreement-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  color: var(--text);
}
.agreement-check input { width: 22px; height: 22px; }
.agreement-other-toggle { align-self: center; }
.agreement-other { display: flex; gap: 8px; }
.agreement-other .job-input { flex: 1; min-width: 0; }
.agr-remote { margin: 0 0 16px; padding: 14px; border-radius: 10px; border-left: 3px solid var(--accent); background: var(--bg); }
.agr-remote-text { font-size: calc(14px * var(--ts)); line-height: 1.5; margin-bottom: 10px; }
.agr-remote-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.agreement-view-signature {
  display: block; max-width: 240px; width: 100%; margin-top: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* The agreement sheet: the address on top, then three steps, each with a
   numbered head, and a thin bar under the header that fills as they're done. */
#agreementOverlay .page-sheet-header { position: relative; }
/* On a wide screen the sheet floats as a card instead of a full-height strip. */
@media (min-width: 720px) {
  #agreementOverlay .page-sheet { inset: 24px 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45); }
}
.agr-progress {
  position: absolute; left: 16px; right: 16px; bottom: -2px; height: 3px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.agr-progress i { display: block; border-radius: 3px; background: var(--border); transition: background 0.25s; }
.agr-progress i.done { background: var(--accent); }
#agreementOverlay:has(#agreementEdit[style*="display: none"]) .agr-progress { display: none; }

.agr-body { gap: 0; padding: 22px 20px calc(32px + env(safe-area-inset-bottom, 0px)); font-feature-settings: 'cv11', 'ss01'; }
.agr-intro { padding: 0 0 18px; }
.agr-kicker, .agr-section-label { font-size: calc(11px * var(--ts)); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent2); }
.agr-addr {
  margin: 8px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: calc(26px * var(--ts)); line-height: 1.12;
  font-weight: 700; letter-spacing: -0.025em; color: var(--text); text-wrap: balance;
}
.agr-addr.empty { color: var(--text3); }
.agr-lede { margin: 10px 0 0; font-size: calc(14.5px * var(--ts)); line-height: 1.55; color: var(--text2); text-wrap: pretty; max-width: 46ch; }
#agreementEdit > .sheet-voice { margin: 0 0 8px; }

/* Each step: a numbered head, then its content at full width. */
.agr-steps { list-style: none; margin: 0; padding: 0; }
.agr-step { display: flex; flex-direction: column; gap: 12px; padding: 26px 0 0; }
.agr-step + .agr-step { margin-top: 26px; border-top: 1px solid var(--border); }
.agr-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.agr-step-dot {
  flex: none; width: 32px; height: 32px; border-radius: 99px; box-sizing: border-box;
  border: 1.5px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(13px * var(--ts)); font-weight: 700; color: var(--text3); font-variant-numeric: tabular-nums;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.agr-step.now .agr-step-dot { border-color: var(--accent); color: var(--accent2); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); }
.agr-step.done .agr-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.agr-step.done .agr-step-dot b { display: none; }
.agr-step.done .agr-step-dot::after {
  content: ''; width: 11px; height: 6px; margin-top: -3px;
  border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.agr-step-of { font-size: calc(11px * var(--ts)); font-weight: 650; letter-spacing: 0.04em; color: var(--text3); font-variant-numeric: tabular-nums; }
.agr-step.done .agr-step-of { color: var(--accent2); }
.agr-step-title {
  margin: 1px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: calc(19px * var(--ts)); line-height: calc(24px * var(--ts));
  font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.agr-step .job-field, .agr-step .job-row { margin: 0; }
/* Step 1: what Job details already say, on one line with Change. A box
   shows only for what's missing, so the date and fee share a row or one
   of them takes it all. */
.agr-job-line {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.agr-job-text { flex: 1; min-width: 0; font-size: calc(14.5px * var(--ts)); font-weight: 600; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.agr-job-line .link-btn { flex: none; min-height: 44px; }
#agreementDateFeeRow { display: flex; gap: 8px; }
#agreementDateFeeRow > .job-field { flex: 1 1 0; min-width: 0; }
.agr-hint {
  margin: -4px 0 0; padding: 9px 12px; border-radius: 10px; font-size: calc(12.5px * var(--ts)); line-height: 1.5;
  background: rgba(255,182,72,0.12); color: var(--yellow-text);
}
.agr-sign-need { margin: -2px 0 0; padding: 0; background: none; color: var(--text3); text-align: center; }

/* The wording, set as a page: a numbered gutter, clause titles, room to read. */
.agr-doc {
  padding: 4px 16px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
.agr-clause {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.agr-clause > p { grid-column: 2; }
.agr-clause:last-of-type { border-bottom: 0; }
.agr-clause-num {
  font-size: calc(13px * var(--ts)); font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums;
}
.agr-clause-title { margin: 0 0 6px; font-size: calc(15px * var(--ts)); line-height: calc(22px * var(--ts)); font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.agr-doc p { margin: 0; font-size: calc(14.5px * var(--ts)); line-height: 1.65; text-wrap: pretty; }
.agr-doc p + p { margin-top: 8px; }
.agr-doc-intro { padding: 16px 0 0; }
.agr-doc-close {
  margin: 4px -16px -4px !important; padding: 16px 16px 18px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 0 0 15px 15px;
  background: rgba(var(--accent-rgb), 0.07); color: var(--text); font-weight: 500;
}
.agr-doc-close + .agr-doc-close { margin-top: 0 !important; border-top: 0; padding-top: 0; }
.agr-blank {
  display: inline-block; padding: 0 6px; border-radius: 5px; font-size: calc(12.5px * var(--ts)); font-weight: 600;
  background: rgba(255,182,72,0.18); color: var(--yellow-text);
}

/* "I have read and agree": a large tap target that turns green when ticked. */
.agr-step .agreement-check {
  gap: 12px; min-height: 56px; padding: 12px 16px; box-sizing: border-box; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface2);
  font-size: calc(14.5px * var(--ts)); transition: background 0.2s, border-color 0.2s;
}
.agr-step .agreement-check input { flex: none; margin: 0; accent-color: var(--accent); }
.agr-step .agreement-check:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

/* The signature pad: a signing line with the client's name under it. */
.signature-pad-wrap.agreement-sig-wrap { height: 176px; border: 1.5px solid var(--border); border-radius: 14px; }
.agreement-sig-wrap::before {
  content: '×'; position: absolute; left: 18px; bottom: 34px; font-size: calc(18px * var(--ts)); line-height: 1; color: #94a3b8; pointer-events: none;
}
.agreement-sig-wrap::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 32px; height: 1px; background: #cbd5e1; pointer-events: none;
}
.agreement-sig-wrap .signature-placeholder { padding-bottom: 30px; font-size: calc(13px * var(--ts)); color: #94a3b8; }
.agreement-sig-actions { display: flex; align-items: center; justify-content: space-between; margin-top: -6px; }
.agr-sig-by { font-size: calc(12.5px * var(--ts)); color: var(--text3); }
.agr-sig-by::before { content: 'Signed by '; }
.agr-sig-clear {
  min-height: 36px; padding: 0 12px; margin-right: -12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--text2);
}
.agr-sig-clear:hover { color: var(--accent2); }
#agreementEdit .agr-step .extract-btn { margin-top: 6px; }

/* Other ways to sign: quiet rows under the button. */
.agr-alt { margin-top: 10px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.agr-alt-label { padding: 12px 16px 4px; font-size: calc(11px * var(--ts)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.agr-alt-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 50px; padding: 0 16px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: calc(14px * var(--ts)); font-weight: 600; color: var(--text);
}
.agr-alt-btn + .agr-alt-btn { border-top: 1px solid var(--border); }
.agr-alt-btn svg { flex: none; color: var(--text3); }
.agr-alt-btn:hover { background: var(--surface2); }
.agr-alt-btn:disabled { opacity: 0.55; cursor: default; }
.agr-alt .agreement-other { padding: 0 16px 14px; }

/* Signed: who and when on top, then the wording. */
.agr-signed {
  margin: 0 0 24px; padding: 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.11), rgba(var(--accent-rgb), 0.03));
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.agr-signed-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 99px; font-size: calc(12.5px * var(--ts)); font-weight: 650; background: rgba(var(--accent-rgb), 0.15); color: var(--accent2);
}
.agr-signed-chip::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.agr-signed-name { margin-top: 12px; font-family: 'Space Grotesk', sans-serif; font-size: calc(24px * var(--ts)); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.agr-signed-meta { margin-top: 4px; font-size: calc(13.5px * var(--ts)); color: var(--text2); font-variant-numeric: tabular-nums; }
.agr-signed .agreement-view-signature { max-width: 260px; margin-top: 16px; border-radius: 12px; padding: 6px; box-sizing: border-box; }
.agr-section-label { color: var(--text3); margin-bottom: 12px; }
/* A signed agreement's two actions, straight under the signature. */
.agr-signed-acts { display: flex; flex-direction: column; margin: -8px 0 26px; }
.agr-signed-acts .link-btn { align-self: center; min-height: 44px; margin-top: 4px; }
/* Long form sheets (the treatment record): numbered sections with a short
   head, a hairline between them, the same look as the agreement's steps. */
.sheet-secs { gap: 0; padding: 22px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
.sheet-intro { padding: 0 0 14px; }
.sheet-intro .agr-lede { margin-top: 8px; }
.sheet-secs > .sheet-voice { margin: 0 0 4px; }
.sheet-sec { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 0; }
.sheet-sec + .sheet-sec { margin-top: 24px; border-top: 1px solid var(--border); }
.sheet-sec .job-field, .sheet-sec .job-row { margin: 0; }
.sheet-sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 2px; }
.sheet-sec-num {
  flex: none; width: 30px; height: 30px; border-radius: 99px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent2);
  font-size: calc(13px * var(--ts)); font-weight: 700; font-variant-numeric: tabular-nums;
}
.sheet-sec-title {
  margin: 3px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: calc(19px * var(--ts)); line-height: calc(24px * var(--ts));
  font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.sheet-sec-sub { margin: 3px 0 0; font-size: calc(13px * var(--ts)); line-height: 1.45; color: var(--text3); }
.sheet-hint { margin: -4px 0 0; }
.sheet-sec .extract-btn { margin-top: 6px; }

/* The treatment record and bait visit in the quote's style: each part folds
   to one row with what it holds, amber when something's missing. */
.sheet-folds { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.sheet-folds + .sheet-sec { margin-top: 12px; padding-top: 20px; }
.sheet-fold-body { display: flex; flex-direction: column; gap: 12px; }
.sheet-fold-body .job-field, .sheet-fold-body .job-row { margin: 0; }
.sheet-fold-hint { margin: 0; font-size: calc(13px * var(--ts)); color: var(--text3); }
/* A fold for fields most jobs don't need. */
.sheet-more { border: 1px solid var(--border); border-radius: 12px; }
.sheet-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px;
  list-style: none; cursor: pointer; font-size: calc(14px * var(--ts)); font-weight: 600; color: var(--text2);
}
.sheet-more > summary::-webkit-details-marker { display: none; }
.sheet-more > summary::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px; border: solid var(--text3); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 0.2s;
}
.sheet-more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.sheet-more > .job-row { padding: 0 14px 14px; }

/* The treatment record and bait visit sheets sit on white, not on the quote's
   dark backdrop, so their folds drop the quote card's heavy shadow and glow
   (which read as grey on grey) for a plain white card with a clear edge.
   Fields are white with a firm border, labels dark, so each one stands out
   from the card it sits on, in sunlight too. */
body .sheet-folds .sheet-fold {
  background: var(--surface); border: 1px solid var(--border2); box-shadow: 0 1px 3px rgba(13,40,60,0.08);
}
body .sheet-folds .sheet-fold > summary { background: none; }
body .sheet-folds .sheet-fold[open] { border-color: rgba(var(--accent-rgb),0.45); box-shadow: 0 2px 10px rgba(13,40,60,0.10); }
body .sheet-folds .sheet-fold[open] > summary { border-bottom-color: var(--border2); }
.sheet-folds .sheet-fold .fgroup-icon { background: var(--accent-wash); color: var(--accent2); }
.sheet-folds .job-field-label { font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--text); margin-bottom: 6px; }
body .sheet-folds .job-input { background: var(--surface); border: 1.5px solid var(--border2); border-radius: 10px; }
body .sheet-folds .job-input:hover { border-color: #A9BACB; }
.sheet-folds .job-input::placeholder { color: #6B7C8E; }
.sheet-folds .sheet-more { border-color: var(--border2); }
/* A finished fold (the treatment record's, the quote's) shows a green tick
   beside its chevron and no line under its title; one that still needs
   something shows a short amber note (setFoldNote in js/quote.js). */
.quote-fold-sub:empty { display: none; }
.fold-tick { display: none; flex-shrink: 0; width: 24px; height: 24px; border-radius: 99px; place-items: center; background: var(--green); color: #fff; }
.quote-fold.done .fold-tick { display: grid; }
.quote-fold:not(.done) .fold-tick-text { display: none; }
.sheet-folds .sheet-more > summary { color: var(--text); }

/* Check before sending */
.send-review-label {
  margin-top: 6px;
  font-size: calc(10.5px * var(--ts));
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text3);
}
.send-review-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.send-review-name { font-size: calc(14px * var(--ts)); font-weight: 700; color: var(--text); }
.send-review-email { font-size: calc(13px * var(--ts)); color: var(--text2); word-break: break-all; }
.send-review-warn { font-size: calc(12.5px * var(--ts)); font-weight: 600; color: var(--yellow-text); }
.send-review-add-email { display: flex; gap: 8px; margin-top: 8px; }
.send-review-add-email .job-input { flex: 1; min-width: 0; }
.send-review-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.send-review-file-name { font-size: calc(13.5px * var(--ts)); font-weight: 700; color: var(--text); }
.send-review-file-meta { font-size: calc(12px * var(--ts)); color: var(--text3); }
.send-review-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.send-review-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-left: 3px solid var(--silver);
  border-radius: 6px;
  background: var(--surface2);
}
.send-review-tile span { font-size: calc(10.5px * var(--ts)); font-weight: 600; color: var(--text3); }
.send-review-tile strong { font-size: calc(12.5px * var(--ts)); font-weight: 800; color: var(--text3); }
.send-review-tile.tone-bad  { border-color: var(--risk);   background: #FDF2F0; }
.send-review-tile.tone-warn { border-color: var(--yellow); background: #FDF7EA; }
.send-review-tile.tone-good { border-color: rgb(var(--green-rgb));  background: var(--green-wash); }
.send-review-tile.tone-bad strong  { color: var(--risk); }
.send-review-tile.tone-warn strong { color: var(--yellow-text); }
.send-review-tile.tone-good strong { color: var(--green); }
.send-review-sub { margin-top: 8px; font-size: calc(12px * var(--ts)); font-weight: 700; color: var(--text2); }
.send-review-list { margin: 4px 0 0; padding-left: 18px; font-size: calc(12.5px * var(--ts)); line-height: 1.5; color: var(--text2); }
.send-review-gaps {
  padding: 10px 12px;
  border: 1px solid var(--yellow);
  border-radius: 10px;
  background: #FDF7EA;
}
.send-review-gaps .send-review-label { margin-top: 0; color: var(--yellow-text); }
.send-review-body { resize: vertical; font-size: calc(13px * var(--ts)); line-height: 1.5; }
.send-review-cancel { align-self: center; margin-top: 2px; }

/* Report a problem (js/crash-guard.js) */
#problemOverlay .page-sheet-body { display: flex; flex-direction: column; gap: 10px; }
.problem-intro { margin: 0; font-size: calc(13.5px * var(--ts)); line-height: 1.5; color: var(--text2); }
.problem-message { resize: vertical; font-size: calc(14px * var(--ts)); line-height: 1.5; }
.problem-include { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--ts)); color: var(--text); }
.problem-include input { width: 18px; height: 18px; accent-color: var(--accent); }
.problem-details-wrap > summary { font-size: calc(12.5px * var(--ts)); }
.problem-details-note { margin: 6px 0; font-size: calc(12px * var(--ts)); color: var(--text3); line-height: 1.45; }
.problem-details { margin: 0; max-height: 200px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--surface2, rgba(127,127,127,0.08)); font-size: calc(11px * var(--ts)); line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--text2); }
.link-btn {
  border: none;
  background: none;
  padding: 0 10px;
  color: var(--accent2);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 -10px;
}

/* Signature pads */
.signoff-fields {
  padding: 14px 14px 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .signoff-fields { grid-template-columns: 1fr; }
}

.signature-block { display: flex; flex-direction: column; gap: 6px; }

.signature-pad-wrap {
  position: relative;
  background: #fff;
  border: 1.5px dashed var(--border2);
  border-radius: 14px;
  height: 110px;
  overflow: hidden;
}

.signature-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.signature-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: calc(12px * var(--ts));
  font-style: italic;
  pointer-events: none;
}

.signature-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signature-status {
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  color: var(--text3);
}
.signature-status.signed { color: var(--green); }
/* A signature already on the report isn't drawn on: a thumb scrolling past
   would mark it. Sign again empties the pad. */
.signature-pad-wrap.kept { border-style: solid; }
.signature-pad-wrap.kept .signature-canvas { pointer-events: none; cursor: default; }

/* Sign again and the sheets' Clear buttons: plain buttons like the job page's. */
.signature-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 650 calc(13.5px * var(--ts)) 'Inter', sans-serif;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.signature-clear-btn:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.signature-clear-btn:active { transform: scale(0.97); background: var(--surface2); }
.signature-clear-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }

/* Photo attachment grid */
.photo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 4px;
}
.photo-count { font-size: calc(11.5px * var(--ts)); color: var(--text2); }
.photo-count.at-cap { color: var(--yellow-text); font-weight: 600; }
.add-photo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  color: #fff;
  background: var(--accent2);
  border: none;
  border-radius: 99px;
  padding: 8px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.add-photo-btn:hover { opacity: 0.88; }
.add-photo-btn:disabled { background: var(--surface2); color: var(--text3); cursor: not-allowed; }
/* On Finish, Report done or Send is the step's one filled button. */
.add-photo-btn.quiet:not(:disabled) { background: var(--surface); color: var(--accent2); border: 1px solid var(--border2); }
/* A done report's banner offers the next step, so Next steps aside. */
body #mainPanel.done-waiting .next-section-btn {
  background: var(--surface); color: var(--text); border: 1px solid var(--border2); box-shadow: none;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 10px 14px 14px;
}
@media (max-width: 480px) {
  .photo-grid { grid-template-columns: 1fr 1fr; }
}
.photo-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.photo-card img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--surface2);
}
.photo-card-body { padding: 7px 8px; }
.photo-caption-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: calc(11px * var(--ts));
  font-family: inherit;
  padding: 5px 7px;
  margin-bottom: 6px;
}
.photo-caption-input::placeholder { color: var(--text3); }
.photo-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.photo-analyze-btn {
  font-size: calc(10px * var(--ts));
  font-weight: 600;
  color: var(--accent2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.photo-analyze-btn:hover { text-decoration: underline; }
.photo-analyze-btn:disabled { color: var(--text3); cursor: not-allowed; text-decoration: none; }
.photo-remove-btn {
  font-size: calc(10px * var(--ts));
  font-weight: 600;
  color: var(--risk);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.photo-remove-btn:hover { text-decoration: underline; }

/* Empty screens: a dashed box saying what goes here, plus (on Saved reports
   and the Dashboard) one button for the next step. */
.photo-empty-state,
.empty-state {
  margin: 0 14px 14px;
  padding: 24px 14px;
  text-align: center;
  color: var(--text3);
  font-size: calc(12px * var(--ts));
  border: 1px dashed var(--border);
  border-radius: 9px;
}
.empty-state { margin: 8px 0; color: var(--text2); font-size: calc(13px * var(--ts)); line-height: 1.5; }
.empty-state p { margin: 0 0 14px; }
.empty-state .job-action-btn { display: inline-flex; padding: 8px 18px; }

/* Choice cards: short-choice questions (activity, YES/NO, risk, weep
   holes...) as rows of big cards on a dark instrument panel, readable at
   arm's length in a subfloor or in full sun. Unpicked cards are steel
   outlines with a stripe in the colour they'll take; the picked card
   floods with it. Each card wraps a hidden native radio (see CHOICE CARDS
   in js/app/). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.choice-field { grid-column: 1 / -1; }
#waterLeakWrap { grid-column: 1 / -1; display: grid; gap: 12px; }
.choice-source { display: none !important; }
/* White cards on a light panel, each with a coloured edge, and the picked
   one filled in its colour. */
.choice-panel {
  --act-panel:   var(--surface2);
  --act-steel:   var(--border2);
  --act-ink:     var(--text);
  --act-dim:     var(--text3);
  --act-card:    var(--surface);
  --tone-bad:    #D7261E;
  --tone-warn:   #FFB000;
  --tone-good:   var(--green-fill);
  --tone-neutral:var(--accent);
  padding: 6px;
  background: var(--act-panel);
  border-radius: 12px;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 6px;
}
.choice-card {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  padding: 8px 6px 8px 12px;
  border: 1.5px solid var(--act-steel);
  border-radius: 10px;
  background: var(--act-card);
  color: var(--act-ink);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
}
.choice-card:active { transform: scale(0.97); }
.choice-card-code {
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(15px * var(--ts));
  /* On narrow phones a long answer (ADEQUATE in a three-across row) steps
     down in size to stay on one line instead of breaking mid-word. */
  font-size: clamp(11.5px, 19cqi, calc(15px * var(--ts)));
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.1;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.choice-card-desc {
  font-size: calc(12px * var(--ts));
  font-weight: 600;
  line-height: 1.25;
  color: var(--act-dim);
}
.choice-card::before {
  content: ''; position: absolute; left: -1.5px; top: -1.5px; bottom: -1.5px; width: 5px;
  border-radius: 10px 0 0 10px; background: var(--tone); display: none;
}
.choice-card.tone-bad     { --tone: var(--tone-bad);     --tone-ink: #FFFFFF; }
.choice-card.tone-warn    { --tone: var(--tone-warn);    --tone-ink: #10161D; }
.choice-card.tone-good    { --tone: var(--tone-good);    --tone-ink: #10161D; }
.choice-card.tone-neutral { --tone: var(--tone-neutral); --tone-ink: #FFFFFF; }
.choice-card.tone-neutral::before { background: var(--act-steel); }
.choice-card:has(input:checked),
.choice-card.active {
  background: var(--tone);
  border-color: var(--tone);
  color: var(--tone-ink);
}
.choice-card:has(input:checked) .choice-card-desc { color: var(--tone-ink); }
.choice-card:has(input:checked)::before,
.choice-card.active::before { display: none; }
button.choice-card { font: inherit; background: var(--act-card); text-align: left; }
@media (max-width: 340px) { .choice-card { padding-left: 8px; padding-right: 4px; } }
button.choice-card:focus-visible,
.choice-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
body.large-touch .choice-card { min-height: 72px; }

/* Short job-detail dropdowns (inspection type, state, payment) as card
   grids. The native <select> stays in the page, hidden, and keeps the
   value; see SELECT CARDS in js/app/. */
.select-cards-source { display: none !important; }
.select-cards .choice-card { min-height: 65px; }
.select-cards .choice-card-code { font-size: clamp(12px, 18cqi, calc(14px * var(--ts))); }
body.large-touch .select-cards .choice-card { min-height: 72px; }

/* Findings gating question: termite activity, which every finding must
   answer. Taller cards, and an amber frame until it's answered. */
.findings-gate { margin: 8px 6px 0; padding: 8px; }
.findings-gate .field-label {
  color: var(--act-ink);
  font-size: calc(14px * var(--ts));
  font-weight: 700;
  margin-bottom: 8px;
}
.findings-gate .choice-card { min-height: 76px; }
body.large-touch .findings-gate .choice-card { min-height: 88px; }
.findings-gate-hint {
  margin-top: 8px;
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  color: var(--yellow-text);
}

/* Findings details reveal animation */
.findings-details {
  animation: findingsReveal 0.35s ease;
}

@keyframes findingsReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* No findings summary */
.findings-none {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 12px 14px;
  background: rgba(var(--green-rgb),0.08);
  border: 1px solid rgba(var(--green-rgb),0.25);
  border-radius: 9px;
  font-size: calc(12px * var(--ts));
  color: var(--text);
  animation: findingsReveal 0.35s ease;
}

.inactive-reminder {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 14px 14px;
  padding: 11px 13px;
  background: rgba(255,182,72,0.08);
  border: 1px solid rgba(255,182,72,0.25);
  border-radius: 9px;
  font-size: calc(11.5px * var(--ts));
  line-height: 1.4;
  color: var(--text2);
}
.inactive-reminder .icon { color: var(--yellow-text); flex-shrink: 0; margin-top: 1px; }

.treatment-auto-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 14px 0;
  padding: 13px 14px;
  background: rgba(192,57,43,0.10);
  border: 1.5px solid var(--risk);
  border-left-width: 5px;
  border-radius: 10px;
  color: var(--text);
  font-size: calc(13px * var(--ts));
  line-height: 1.4;
}
.treatment-auto-banner .icon { color: var(--risk); flex-shrink: 0; margin-top: 1px; }
.treatment-auto-banner strong { display: block; font-size: calc(14px * var(--ts)); font-weight: 800; color: var(--risk); margin-bottom: 2px; }
.treatment-auto-banner span { color: var(--text2); }

.system-verify {
  margin: 0 14px 14px;
  padding: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  animation: findingsReveal 0.35s ease;
}
.system-verify-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(15px * var(--ts));
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
}
.system-verify-header .icon { color: var(--accent2); }
.system-verify-hint {
  font-size: calc(12.5px * var(--ts));
  color: var(--text2);
  line-height: 1.4;
  margin-bottom: 12px;
}
.system-verify .section-fields { padding: 0; }
.system-verify-flag {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 13px;
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.3);
  border-radius: 9px;
  font-size: calc(11.5px * var(--ts));
  line-height: 1.4;
  color: var(--text);
}
.system-verify-flag .icon { color: var(--risk); flex-shrink: 0; margin-top: 1px; }

.findings-none-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgb(var(--green-rgb));
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--ts));
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Multi-finding card system ─────────────────────────────────── */
.findings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 4px;
}

/* A finding is a card like an area's: its head has an icon tile in the
   colour of its activity, where it is, and the activity and its number
   under that, with a bin to remove it. */
.finding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
  overflow: hidden;
  animation: findingsReveal 0.3s ease;
}
.finding-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 6px 12px 12px;
  border-bottom: 1px solid var(--border);
}
.finding-head-active .area-tile { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); color: var(--risk); }
.finding-head-inactive .area-tile { background: rgba(245,162,35,0.12); border-color: rgba(212,146,10,0.4); color: var(--yellow-text); }
.finding-head-none .area-tile { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); }
.finding-card-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  font-size: calc(15.5px * var(--ts));
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.finding-card-label small { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: calc(13.5px * var(--ts)); font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--text3); }
.finding-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.finding-act { font-weight: 600; }
.finding-head-active .finding-act { color: var(--risk); }
.finding-head-inactive .finding-act { color: var(--yellow-text); }
.finding-head-none .finding-act { color: var(--green); }
.area-tile-badge.finding-tile-num { width: calc(21px * var(--ts)); height: calc(21px * var(--ts)); right: -6px; bottom: -6px; background: var(--text3); font-size: calc(11px * var(--ts)); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.finding-head-active .finding-tile-num { background: var(--risk); }
.finding-head-inactive .finding-tile-num { background: var(--yellow); }
.finding-head-none .finding-tile-num { background: var(--green-fill); }

.finding-remove-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 12px;
  color: var(--text3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.finding-remove-btn:hover, .finding-remove-btn:active { color: var(--risk); background: rgba(192,57,43,0.08); }
.finding-remove-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 0; }

.finding-card-body { padding: 4px 0 6px; }

/* Add another finding, borer finding or reading: a plain button with a
   plus, like the job page's buttons. */
.findings-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 14px 14px;
  padding: 0 16px;
  min-height: 48px;
  width: calc(100% - 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--accent2);
  font: 650 calc(14px * var(--ts)) 'Inter', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.findings-add-btn svg { flex: none; width: 16px; height: 16px; stroke-width: 2.4; }
.findings-add-btn:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.findings-add-btn:active { transform: scale(0.98); background: var(--surface2); }
.findings-add-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
.findings-add-btn.at-cap { opacity: 0.4; cursor: not-allowed; }
/* Borer finding cards sit inside the borers box, under the borer question. */
#borerFindingsList { display: flex; flex-direction: column; gap: 10px; }
.system-verify .borer-card .section-fields { padding: 14px 16px; }
.borer-findings .findings-add-btn, .system-verify .findings-add-btn { margin: 10px 0 0; width: 100%; }
.borer-findings .findings-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* "Nothing found" shortcut at the top of Findings and Conducive Conditions. */
.nothing-found-btn {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); margin: 14px 16px 0; padding: 12px 16px; min-height: 56px;
  background: rgba(var(--accent-rgb), 0.08); border: 1.5px solid rgba(var(--accent-rgb), 0.45); border-radius: 12px;
  color: var(--accent2); font-family: 'Inter', sans-serif; text-align: left; cursor: pointer;
}
.nothing-found-btn svg { flex: none; }
.nothing-found-btn strong { display: block; font-size: calc(15px * var(--ts)); font-weight: 700; }
.nothing-found-btn small { display: block; margin-top: 2px; font-size: calc(12.5px * var(--ts)); color: var(--text2); }
.nothing-found-btn:active { transform: scale(0.99); }
/* Tap chips under a text field (timber affected, borer type): one row
   that scrolls sideways, so the card stays short. */
/* A finding field that is its own drop-down: the native list lies over
   the box, invisible, so a tap anywhere on it opens the picker. */
.field-val.pick-field { position: relative; padding-right: 36px; cursor: pointer; }
.field-val.pick-field::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: rotate(45deg);
}
.pick-field-list { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: calc(16px * var(--ts)); }

/* ── DASHBOARD ── */
/* DASHBOARD — a page of its own over the report: a big title and one line
   on what needs the inspector, tabs with a sliding underline, search, and
   one list of jobs. A job opens a sheet with its timeline and next step.
   Content keeps to a readable column on wide screens. */
.dashboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.dashboard-overlay.open { opacity: 1; pointer-events: auto; }
.dashboard-panel {
  height: 100%;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  transform: translateY(14px);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.dashboard-overlay.open .dashboard-panel { transform: none; }
.dashboard-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 max(18px, calc(50% - 340px)) calc(32px + env(safe-area-inset-bottom, 0px));
}

/* ── JOBS: THE ORDER OF THE PAGE ──
   Read top to bottom the way a tech uses it: the day and how much needs
   them (the headline, the biggest thing on the page), then which list
   (To do, Waiting, Done, Due) with search beside it, then the jobs. The
   controls sit quiet on the backdrop so the headline and the cards carry
   the weight. */
.dash-hero { position: relative; isolation: isolate; padding: 20px 0 22px; }
.dash-hero-date {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(11.5px * var(--ts)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent2);
}
/* A small live dot before the date: this is today's page. */
.dash-hero-date::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(var(--accent-glow-rgb), 0.16); }
.dash-hero-title {
  margin: 10px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(29px * var(--ts)); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text); text-wrap: balance;
}
.dash-hero-title b { font-weight: 700; color: var(--accent2); }
@media (min-width: 720px) { .dash-hero-title { font-size: calc(38px * var(--ts)); } }
/* Under the headline: what's booked for later, and re-inspections that are
   overdue, which opens the Due tab. */
.dash-hero-more { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: calc(14px * var(--ts)); line-height: 1.4; color: var(--text2); }
.dash-hero-more i { font-style: normal; color: var(--text3); }
.dash-hero-more button { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--risk); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Which list, and search: one band. On a phone the search sits under the
   lists; on a wide screen they share a row. */
.dash-controls { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
@media (min-width: 720px) {
  .dash-controls { flex-direction: row; align-items: center; gap: 12px; }
  .dash-controls .dash-tabs { flex: none; }
  .dash-controls .dash-tab { flex: none; padding: 0 16px; }
  .dash-controls .dash-search { flex: 1; min-width: 200px; }
}
/* The lists are a segmented track; the open one is a raised pill that
   slides between them. */
.dash-tabs {
  position: relative;
  display: flex; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  border-radius: 14px; background: var(--surface2); border: 1px solid var(--border);
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  position: relative; z-index: 1;
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: calc(14px * var(--ts)); font-weight: 600; letter-spacing: -0.01em; color: var(--text3); cursor: pointer;
  white-space: nowrap; transition: color 0.2s, opacity 0.2s;
}
/* The count sits in a small pill. */
.dash-tab span {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(11.5px * var(--ts)); font-weight: 700; background: var(--surface); color: var(--text3);
  transition: background 0.2s, color 0.2s;
}
.dash-tab span:empty { display: none; }
.dash-tab:hover { color: var(--text2); }
.dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-tab.active { color: var(--text); }
.dash-tab.active span { background: rgba(var(--accent-rgb), 0.14); color: var(--accent2); }
/* A list with nothing in it steps back. */
.dash-tab.empty:not(.active) { opacity: 0.6; }
.dash-tab.empty:not(.active) span { background: none; }
.dash-tab-line {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 0;
  border-radius: 10px; background: var(--surface); box-shadow: 0 1px 3px rgba(16,24,40,0.12);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.dash-tabs.searching .dash-tab.active { color: var(--text3); }
.dash-tabs.searching .dash-tab-line { opacity: 0; }

.dash-search {
  display: flex; align-items: center; gap: 10px;
  height: 48px; margin: 0; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text3);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.dash-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); }
.dash-search input::placeholder { color: var(--text3); }
.dash-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: inherit; font-size: calc(15px * var(--ts)); color: var(--text);
}



/* The Jobs list: a card per job with its icon tile (the next document in
   blue, amber while it waits on the client, a green tick when done), the
   street and suburb on their own lines, how far along it is, and the next
   step as a button along its foot. */
.dash-cards { display: flex; flex-direction: column; gap: 12px; }
.dash-card { border-radius: 16px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.dash-card-main {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 10px; align-items: start;
  padding: 13px 14px 12px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dash-card-main:active { background: var(--surface2); }
.dash-card-main:focus-visible, .dash-card-act:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: -3px; }
.dash-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-card-street { font-size: calc(16px * var(--ts)); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.dash-card-suburb { font-size: calc(13.5px * var(--ts)); color: var(--text2); }
.dash-card-sub { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(13px * var(--ts)); color: var(--text3); }
/* Where the job is up to, after the client: one piece, so a long line
   wraps it whole instead of leaving its date alone on the next line. */
.dash-card-status { white-space: nowrap; font-weight: 600; color: var(--text2); }
.dash-card.waiting .dash-card-status { color: var(--yellow-text); }
.dash-card.done:not(.declined) .dash-card-status { color: var(--green); }
.dash-card-tag {
  padding: 2px 7px; border-radius: 6px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent2);
  font-size: calc(10.5px * var(--ts)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.dash-card-tag.sample { background: rgba(var(--pink-rgb), 0.12); color: var(--pink-text); }
.dash-card-tag.warn { background: rgba(255,182,72,0.16); color: var(--yellow-text); }
.dash-card-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 1px; }
.dash-card-when { font-size: calc(12.5px * var(--ts)); font-weight: 650; color: var(--text3); white-space: nowrap; }
.dash-card-total { font-size: calc(14.5px * var(--ts)); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-card-progress { grid-column: 1 / -1; display: flex; gap: 4px; }
.dash-card-progress i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface3); }
.dash-card-progress i.done { background: var(--green-fill); }
.dash-card-progress i.now { background: var(--accent); }
.dash-card-progress i.bad { background: var(--risk); }
.dash-card-progress i.skip { background: var(--border); }
.dash-card-act {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px;
  border: 0; border-top: 1px solid var(--accent-edge); background: var(--accent-wash); color: var(--accent2);
  font: 700 calc(15px * var(--ts)) 'Inter', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dash-card-act svg { flex: none; }
.dash-card-act:active { background: var(--accent-pale); }
.dash-card.waiting .dash-card-act, .dash-card-act.wait { border-top-color: rgba(240,168,30,0.4); background: rgba(255,182,72,0.12); color: var(--yellow-text); }
body .dash-card { border-color: transparent; box-shadow: 0 10px 26px rgba(0,0,0,0.3); }

.dash-none { margin: 0; padding: 36px 12px; text-align: center; font-size: calc(14px * var(--ts)); color: var(--text3); }
/* To do, in the order the week runs: a heading where the day changes
   (still open from earlier, today, coming up). */
.dash-part { display: flex; align-items: center; gap: 8px; margin: 14px 2px 0; font-size: calc(11px * var(--ts)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
/* How many under it, then a hairline that fades out to the right. */
.dash-part[data-count]::after { content: attr(data-count); order: 0; letter-spacing: 0; font-weight: 700; opacity: 0.7; }
.dash-part::before { content: ''; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: 0.3; }
.dash-part:first-child { margin-top: 0; }
/* Finished jobs a full phone handed to the account, under Done. */
.dash-parked { margin: 16px 2px 0; font-size: calc(13.5px * var(--ts)); line-height: 1.5; color: var(--text2); }
.dash-parked .link-btn { display: inline; min-height: 0; padding: 0; font-size: inherit; font-weight: 700; }
.dash-empty { padding-top: 4px; }
.dash-cards.fade-in, .dash-none.fade-in { animation: dashFade 0.22s ease-out; }
@keyframes dashFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* A job's sheet: address, its four steps as a timeline, the next step. */
.dash-detail {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.dash-detail.open { opacity: 1; pointer-events: auto; }
.dash-detail-sheet {
  width: 100%; max-width: 560px; max-height: 90%; overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-detail.open .dash-detail-sheet { transform: none; }
.dash-detail-grab { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: var(--border); }
.dash-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-detail-head-text { min-width: 0; }
.dash-detail-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin-bottom: 10px;
  border-radius: 99px; font-size: calc(12px * var(--ts)); font-weight: 650; letter-spacing: 0;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent2);
}
.dash-detail-chip::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.dash-detail-chip.waiting { background: rgba(255,182,72,0.16); color: var(--yellow-text); }
.dash-detail-chip.done { background: var(--surface2); color: var(--text2); }
.dash-detail-addr {
  margin: 0; font-family: 'Space Grotesk', sans-serif;
  font-size: calc(23px * var(--ts)); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  text-wrap: balance;
}
.dash-detail-close {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Client, quote and date in one row of small facts. */
.dash-detail-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface2);
}
.dash-detail-facts > div { min-width: 0; padding: 10px 12px; }
.dash-detail-facts > div + div { border-left: 1px solid var(--border); }
.dash-detail-facts dt { font-size: calc(10.5px * var(--ts)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.dash-detail-facts dd { margin: 4px 0 0; font-size: calc(14.5px * var(--ts)); font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* What to do next, with why, above the progress. */
.dash-next {
  margin-top: 14px; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.03));
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.dash-next.done { background: var(--surface2); border-color: var(--border); }
.dash-next.waiting { background: rgba(255,182,72,0.08); border-color: rgba(255,182,72,0.35); }
.dash-next-label { font-size: calc(10.5px * var(--ts)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent2); }
.dash-next.done .dash-next-label { color: var(--text3); }
.dash-next.waiting .dash-next-label { color: var(--yellow-text); }
.dash-next-title { margin-top: 5px; font-family: 'Space Grotesk', sans-serif; font-size: calc(19px * var(--ts)); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.dash-next-hint { margin: 6px 0 0; font-size: calc(14px * var(--ts)); line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.dash-next .dash-detail-primary { margin-top: 14px; }


/* The side line: numbered dots, ticked when done, joined by a line that fills in blue. */

.dash-detail-primary {
  width: 100%; min-height: 50px; border: 0; border-radius: 14px;
  background: var(--accent-grad);
  color: #fff; font: inherit; font-size: calc(15px * var(--ts)); font-weight: 650; letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.dash-detail-primary:active { transform: scale(0.98); }
.dash-detail-primary:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
.dash-detail-links { display: flex; gap: 8px; }
.dash-detail-primary + .dash-detail-links { margin-top: 10px; }
.dash-detail-links button {
  flex: 1; min-height: 46px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font: inherit; font-size: calc(14px * var(--ts)); font-weight: 600; cursor: pointer;
}
.dash-detail-links:empty { display: none; }

/* Re-inspections due (js/reinspection.js): the status line in the tile's colour. */
.reinspect-card .dash-card-status { color: var(--yellow-text); }
.reinspect-card.overdue .dash-card-status { color: var(--risk); }
.reinspect-card.reminded .dash-card-status { color: var(--accent2); }
.dash-detail-chip.overdue { background: rgba(192,57,43,0.12); color: var(--risk); }
.dash-next .dash-detail-links { margin-top: 10px; }
.reinspect-prepurchase { color: var(--yellow-text); }
.reinspect-prepurchase strong { font-weight: 700; }
.reinspect-note { margin: 12px 2px 0; font-size: calc(13px * var(--ts)); line-height: 1.5; color: var(--text3); }
.reinspect-form { display: grid; gap: 6px; margin-top: 16px; }
.reinspect-form .send-review-label { margin-top: 8px; }
.reinspect-form .job-input { width: 100%; box-sizing: border-box; }
.reinspect-body { min-height: 240px; font: inherit; font-size: calc(14.5px * var(--ts)); line-height: 1.5; resize: vertical; }
.reinspect-form + .reinspect-note + .dash-detail-actions { margin-top: 16px; }

/* A page inside the sheet (the Due tab's reminder email), with a back link. */
.dash-peek-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 12px; }
.dash-peek-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; margin-left: -8px;
  border: none; border-radius: 99px; background: none; color: var(--accent2);
  font: inherit; font-size: calc(13.5px * var(--ts)); font-weight: 600; cursor: pointer;
}
.dash-peek-kicker { font-size: calc(12.5px * var(--ts)); color: var(--text3); }
.dash-peek-title { margin: 2px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: calc(22px * var(--ts)); font-weight: 800; letter-spacing: -0.3px; color: var(--text); }

/* Wide screens: the sheet sits at the side, so the job list stays in view. */
@media (min-width: 900px) {
  .dash-detail { left: auto; width: 440px; justify-content: flex-end; align-items: stretch; background: none; }
  .dashboard-panel { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), margin-right 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
  .dashboard-overlay:has(.dash-detail.open) .dashboard-panel { margin-right: 440px; }
  .dash-detail-sheet {
    max-width: 440px; max-height: none; height: 100%;
    border-radius: 0; padding: 24px 24px 24px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.25);
    transform: translateX(100%);
  }
  .dash-detail-grab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-panel, .dash-tab-line, .dash-detail-sheet { transition: none; }
  .dash-cards.fade-in, .dash-none.fade-in, .dash-start.fade-in, .dash-sample.fade-in { animation: none; }
}

.asb-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 9px 11px;
  background: rgba(255,182,72,0.08);
  border: 1px solid rgba(255,182,72,0.25);
  border-left: 3px solid var(--yellow);
  border-radius: 7px;
  font-size: calc(11px * var(--ts));
  color: var(--yellow-text);
  line-height: 1.5;
}

.asb-icon { flex-shrink: 0; font-size: calc(13px * var(--ts)); }
.asb-text { color: var(--text2); }

/* Toast */
.toast {
  position: fixed;
  /* Above the mic button, so it never covers it or the buttons beside it. */
  bottom: calc(var(--mic-clearance) + 8px);
  right: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
  z-index: 999;
  opacity: 0;
  transform: translateY(16px) scale(0.9) rotate(-2deg);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(320px, calc(100vw - 32px));
}

.toast.show { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
.toast.toast-success { border-left-color: rgb(var(--green-rgb)); }
/* Errors get a red tint and red text, not just a red edge, so they can't be
   mistaken for "saved" in bright light. */
.toast.toast-error   { border-left-color: var(--risk); border-color: rgba(192,57,43,0.35); background: #FDECEA; color: var(--risk); }
.toast.toast-info    { border-left-color: var(--blue); }

.toast-icon { font-size: calc(15px * var(--ts)); flex-shrink: 0; }
/* A toast with a button (Undo) takes taps; plain toasts let them through. */
/* Only while it's on screen: one that has faded would still catch taps. */
.toast.toast-has-action { padding-right: 8px; }
.toast.show.toast-has-action { pointer-events: auto; }
.toast-action {
  flex-shrink: 0;
  min-height: 44px;
  margin: -8px 0 -8px 4px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent3);
  font: 700 calc(13px * var(--ts)) 'Inter', sans-serif;
  cursor: pointer;
}

/* AI working: a moving bar and a line of text under the report header, shown
   while setAI('thinking') is on (see setAI in js/app/). */
.ai-busy-bar {
  display: none;
  position: fixed;
  top: calc(52px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 101;
  padding: 7px 16px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--accent3);
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,50,100,0.08);
}
.ai-busy-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 35%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  animation: aiBusySlide 1.3s ease-in-out infinite;
}
body.ai-busy:has(#app[style*="flex"]) .ai-busy-bar { display: block; }
.ai-keep-btn { margin: -6px 0 -6px 12px; padding: 6px 10px; min-height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text2); font: inherit; font-size: calc(12px * var(--ts)); font-weight: 600; cursor: pointer; vertical-align: middle; }
@keyframes aiBusySlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(290%); }
}


.profile-menu-wrap { position: relative; }
.profile-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: calc(12px * var(--ts)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; flex-shrink: 0;
  transition: opacity 0.15s;
  position: relative;
}
/* The avatar stays a 32px circle; this ring takes the tap out to 44px. */
.profile-btn::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.profile-btn:hover { opacity: 0.85; }
.profile-dropdown-name { font-size: calc(13px * var(--ts)); font-weight: 700; color: var(--text); }
.profile-dropdown-email { font-size: calc(12px * var(--ts)); color: var(--text3); margin-top: 2px; word-break: break-all; }
.profile-dropdown-business { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: calc(11.5px * var(--ts)); color: var(--text2); }

/* ── SECTION PHOTO WIDGET ── */
.section-photo-hint { font-size: calc(12px * var(--ts)); color: var(--text3); padding: 8px 12px 0; }
/* A section's photo box, in the job page's look: a card whose head has a
   photo tile, the title over the count, and Add photo as a plain button. */
.section-photo-widget {
  margin: 8px 14px 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.section-photo-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 64px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.section-photo-header-left {
  flex: 1 1 150px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
  min-width: 0;
  font-size: calc(15px * var(--ts));
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* The title's icon becomes the tile, beside the title and the count. */
.section-photo-title { display: contents; }
.section-photo-header-left svg {
  grid-row: 1 / span 2; width: 36px; height: 36px; padding: 9px; box-sizing: border-box;
  border-radius: 10px; background: rgba(var(--accent-rgb), 0.1); color: var(--accent2);
}
.section-photo-count {
  font-size: calc(13px * var(--ts));
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text3);
}
.section-photo-count:empty { display: none; }
.section-photo-add-btn, .spot-photo-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--accent2);
  font: 650 calc(13.5px * var(--ts)) 'Inter', sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s;
}
.section-photo-add-btn svg, .spot-photo-add svg { flex: none; }
.section-photo-add-btn:hover, .spot-photo-add:hover { border-color: rgba(var(--accent-rgb), 0.5); text-decoration: none; }
.section-photo-add-btn:active, .spot-photo-add:active { transform: scale(0.97); background: var(--surface2); }
.section-photo-add-btn:focus-visible, .spot-photo-add:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
.section-photo-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.section-photo-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.section-photo-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.section-photo-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.section-photo-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section-photo-empty {
  grid-column: 1 / -1;
  padding: 14px;
  text-align: center;
  font-size: calc(12px * var(--ts));
  color: var(--text3);
}
.field-label:has(.field-hint) { flex-wrap: wrap; }
.field-hint { flex-basis: 100%; font-size: calc(11.5px * var(--ts)); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text3); }
.section-fields > .res-disclaimer { grid-column: 1 / -1; margin: 0; }
.section-fields > .access-intro, .section-fields > .access-summary { grid-column: 1 / -1; }
.access-intro { margin: 0; font-size: calc(12.5px * var(--ts)); color: var(--text3); line-height: 1.45; }
.access-intro .link-btn, .access-more .link-btn { display: inline; min-height: 0; margin: 0 0 0 2px; padding: 0; font-size: inherit; }
/* Hindered and restricted access: one card each, a header with the count,
   then the areas as a list. Name first, the reason under it, status quiet. */
.access-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.access-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.access-group-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface3); color: var(--text2); }
.access-hindered .access-group-icon { background: rgba(245,162,35,0.14); color: var(--yellow-text); }
.access-restricted .access-group-icon { background: rgba(192,57,43,0.10); color: var(--risk); }
.access-group-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: calc(15px * var(--ts)); font-weight: 700; color: var(--text); line-height: 1.25; }
.access-group-title small { font-size: calc(12px * var(--ts)); font-weight: 400; color: var(--text3); line-height: 1.4; }
.access-count { flex: none; padding: 3px 9px; border-radius: 99px; font-size: calc(12px * var(--ts)); font-weight: 700; background: var(--surface3); color: var(--text2); white-space: nowrap; }
.access-count.hindered { background: rgba(245,162,35,0.16); color: var(--yellow-text); }
.access-count.restricted { background: rgba(192,57,43,0.10); color: var(--risk); }
.access-count.none { background: rgba(var(--green-rgb),0.12); color: var(--green); }
.access-items { border-top: 1px solid var(--border); }
.access-item { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; row-gap: 3px; padding: 11px 14px 12px; border-top: 1px solid var(--border); color: var(--text); }
.access-item:first-child { border-top: 0; }
.access-item-name { grid-column: 1; grid-row: 1; font-size: calc(15px * var(--ts)); font-weight: 600; }
/* The status is the way back to the area in Section 4. */
.access-item-state { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface2); color: var(--text2); font: inherit; font-size: calc(12px * var(--ts)); font-weight: 600; cursor: pointer; white-space: nowrap; }
.access-item-state::after { content: '›'; font-size: calc(16px * var(--ts)); line-height: 1; color: var(--text3); margin-right: 4px; }
.access-item-state:active { background: var(--surface3); }
.access-item-why { grid-column: 1 / -1; grid-row: 2; font-size: calc(13.5px * var(--ts)); color: var(--text2); line-height: 1.4; }
.access-item-other .access-spot { grid-row: 2; }
/* Where exactly: tap to type. */
.access-spot { grid-column: 1 / -1; margin-top: 6px; min-height: 40px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); font: inherit; font-size: calc(14px * var(--ts)); line-height: 1.4; text-align: left; cursor: pointer; }
.access-spot.empty { border-style: dashed; background: transparent; color: var(--accent2); font-weight: 600; }
.access-spot-editor { grid-column: 1 / -1; margin-top: 6px; display: flex; flex-direction: column; }
.access-spot-input { width: 100%; min-height: 44px; padding: 10px 11px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(16px * var(--ts)); outline: none; }
/* Photos of the spot, each with its own details. */
.spot-photos { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.spot-photo { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: start; }
.spot-photo img { grid-row: 1 / span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); }
.spot-photo .photo-caption-input { width: 100%; }
.spot-photos .spot-photo-add { align-self: flex-start; margin: 0; }
/* Describe: the AI looks at the photo and suggests its caption, shown in a
   box under the caption until the inspector taps Use or Not this. */
.spot-photo .photo-actions { grid-column: 2; }
.photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.photo-actions .photo-remove-btn, .photo-card-footer .photo-remove-btn { margin-left: auto; }
/* A photo in a two-across grid takes the full width while its suggestion
   waits, so the words have room. */
.section-photo-card:has(> .section-photo-body > .photo-suggest:not([hidden])),
.photo-card:has(> .photo-card-body > .photo-suggest:not([hidden])) { grid-column: 1 / -1; }
.section-photo-card:has(> .section-photo-body > .photo-suggest:not([hidden])) img,
.photo-card:has(> .photo-card-body > .photo-suggest:not([hidden])) img { height: 160px; }
.photo-describe-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--accent2); font: 650 calc(12.5px * var(--ts)) 'Inter', sans-serif; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.photo-describe-btn:active { background: var(--surface2); }
.photo-describe-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
.photo-describe-btn:disabled { color: var(--text3); cursor: progress; }
.photo-describe-btn:disabled .icon { animation: dockSpin 1.4s linear infinite; }
.photo-card-footer .photo-describe-btn { min-height: 30px; padding: 0 8px; font-size: calc(11px * var(--ts)); }
.photo-suggest { grid-column: 1 / -1; padding: 9px 11px 10px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 10px; background: rgba(var(--accent-rgb), 0.06); }
.photo-card-body .photo-suggest { margin-bottom: 6px; }
.photo-suggest-label { display: flex; align-items: center; gap: 5px; font-size: calc(11px * var(--ts)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent2); }
.photo-suggest-label .icon { width: 12px; height: 12px; }
.photo-suggest-text { margin: 4px 0 8px; font-size: calc(14px * var(--ts)); line-height: 1.4; color: var(--text); }
.photo-suggest-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.photo-suggest-use { min-height: 36px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--accent); color: #FFFFFF; font: 650 calc(13px * var(--ts)) 'Inter', sans-serif; cursor: pointer; }
.photo-suggest-use:active { transform: scale(0.97); }
.photo-suggest-skip { min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--text2); font: 600 calc(13px * var(--ts)) 'Inter', sans-serif; cursor: pointer; }
.photo-suggest-use:focus-visible, .photo-suggest-skip:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .photo-describe-btn:disabled .icon { animation: none; } }
.access-item-why.missing { color: var(--yellow-text); font-weight: 600; }
.access-hint { margin-top: 6px; font-size: calc(12px * var(--ts)); color: var(--text3); line-height: 1.45; }
.res-disclaimer { margin:0 14px 12px; padding:10px 14px; background:rgba(245,162,35,0.07); border-left:3px solid var(--yellow); border-radius:0 6px 6px 0; font-size: calc(12px * var(--ts)); color:var(--text2); line-height:1.6; }


.obs-zone-label { font-size: calc(11px * var(--ts)); font-weight: 600; color: var(--text3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.6px; }
.obs-zone-btn {
  padding: 7px 14px;
  background: #EDF4FA;
  border: 1px solid #BDD0E3;
  border-radius: 20px;
  color: #3A6080;
  font-family: 'Inter', sans-serif;
  font-size: calc(12px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,40,80,0.06);
  min-height: 44px;
}
.obs-zone-btn.active {
  background: rgba(var(--accent-rgb),0.12);
  border-color: var(--accent);
  color: var(--accent2);
}
.obs-zone-panel {
  margin-top: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.obs-zone-panel-header {
  padding: 8px 12px;
  background: linear-gradient(135deg, #E8F5F2, #EDF4FA);
  border-bottom: 1px solid #C8D8E8;
  font-size: calc(10.5px * var(--ts));
  font-weight: 700;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.obs-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.obs-items-label { padding: 2px 12px 0; font-size: calc(10.5px * var(--ts)); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text3); }
.obs-items-label + .obs-items { padding-top: 6px; }
.obs-item-btn {
  padding: 6px 14px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(12px * var(--ts));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 44px;
}
.obs-item-btn.selected {
  background: rgba(var(--accent-rgb),0.1);
  border-color: rgba(var(--accent-rgb),0.5);
  color: var(--accent2);
}
.obs-panels-wrap { display: flex; flex-direction: column; gap: 8px; }
.obs-panels-wrap .obs-zone-panel { margin-top: 0; }
.area-summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; cursor: pointer; list-style: none; text-transform: none; letter-spacing: 0; }
.area-summary::-webkit-details-marker { display: none; }
.area-summary::after { content: '›'; flex: none; font-size: calc(20px * var(--ts)); line-height: 1; color: var(--text3); transition: transform 0.15s; }
.obs-zone-panel[open] > .area-summary::after { transform: rotate(90deg); }
.obs-zone-panel:not([open]) > .area-summary { border-bottom: 0; }
.area-sum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.area-sum-name { font-size: calc(14px * var(--ts)); font-weight: 600; color: var(--text); }
.area-sum-state { flex: none; font-size: calc(12px * var(--ts)); font-weight: 600; color: var(--text3); text-align: right; }
.area-sum-inspected { color: var(--green); }
.area-sum-partial { color: var(--yellow-text); }
.area-sum-not { color: var(--risk); }
.area-sum-na { color: var(--text2); }
.area-sum-why { font-size: calc(12px * var(--ts)); font-weight: 500; color: var(--text2); }
.area-status { display: flex; gap: 6px; padding: 10px 12px; }
.area-status-btn { flex: 1; padding: 7px 4px; font-size: calc(11.5px * var(--ts)); border-radius: 8px; }
.area-status-btn.status-partial { background: rgba(245,162,35,0.14); border-color: var(--yellow); color: var(--yellow-text); }
.area-status-btn.status-not { background: rgba(192,57,43,0.12); border-color: var(--risk); color: var(--risk); }
.area-status-btn.status-na { background: rgba(86,106,127,0.16); border-color: var(--text3); color: var(--text); box-shadow: inset 0 0 0 1px var(--text3); }
.area-status + .obs-items, .area-result + .obs-items { padding-top: 0; }
.area-result { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 10px; }
.area-result-label { font-size: calc(11.5px * var(--ts)); font-weight: 600; color: var(--text2); margin-right: 2px; }
.area-result-btn.result-clear { background: rgba(var(--green-rgb),0.12); border-color: rgb(var(--green-rgb)); color: var(--green); }
.area-evidence { padding: 0 12px 10px; font-size: calc(12px * var(--ts)); color: var(--text2); line-height: 1.45; }
.area-finding-prompts { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 0; }
.area-finding-prompt { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 10px 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); font-size: calc(13.5px * var(--ts)); line-height: 1.35; color: var(--text2); }
.area-finding-prompt .area-tile { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); color: var(--risk); }
.area-finding-text { flex: 1; min-width: 0; }
.area-finding-text strong { color: var(--text); font-weight: 650; }
.area-finding-prompt .area-finding-add { flex: none; }
@media (max-width: 459px) { .area-finding-prompt { flex-wrap: wrap; } .area-finding-text { flex-basis: calc(100% - 68px); } .area-finding-prompt .area-finding-add { margin-left: 56px; } }
/* The same prompt inside the open finding card: "Write it up here?" */
.finding-area-slot { margin: 10px 6px 0; background: rgba(192,57,43,0.05); border-color: rgba(192,57,43,0.28); }
.finding-area-slot .area-finding-add { min-width: 76px; justify-content: center; }
/* "What was it?" under an area's evidence: termites, borers, rot or
   delignification, two to a row on a phone. */
.area-finding-prompt.has-picks { flex-wrap: wrap; }
.area-finding-picks { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.area-finding-prompt .area-finding-picks .area-finding-add { margin: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }
.area-finding-prompt .area-finding-picks .area-finding-add { padding: 0 8px; }
@media (min-width: 460px) { .area-finding-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px) { body.text-size-xl .area-finding-picks { grid-template-columns: 1fr; } }
/* The box that says which Findings groups are out of sight, with a button
   to bring each in. */
.findings-more {
  margin: 10px 8px 0; padding: 14px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px rgba(13,40,60,0.07);
}
.findings-more-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
/* "No timber pests found", in the box that says what isn't answered. */
.findings-more-none { flex: 1 0 100%; width: 100%; margin: 0; }
.findings-more-icon {
  flex: none; width: 40px; height: 40px; box-sizing: border-box; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text3);
}
.findings-more-state.is-none .findings-more-icon { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); }
.findings-more-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.findings-more-text strong { font-size: calc(15px * var(--ts)); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.findings-more-text small { font-size: calc(13px * var(--ts)); line-height: 1.4; color: var(--text3); }
.findings-more-label { display: block; margin-bottom: 10px; font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--text2); }
.findings-more-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.area-evidence .link-btn { display: inline; margin-left: 4px; }
.area-result-btn.result-found { background: rgba(192,57,43,0.12); border-color: var(--risk); color: var(--risk); }
/* A moisture reading: where, the reading and a bin, at field size. */
.moisture-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.moisture-row .photo-caption-input { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: calc(16px * var(--ts)); }
.moisture-row .moisture-reading { flex: 0 0 84px; text-align: center; font-variant-numeric: tabular-nums; }
.moisture-row .photo-remove-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 12px; color: var(--text3); text-decoration: none; }
.moisture-row .photo-remove-btn:hover, .moisture-row .photo-remove-btn:active { color: var(--risk); background: rgba(192,57,43,0.08); text-decoration: none; }
.high-risk-prompt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 14px 4px;
  padding: 12px 14px;
  background: rgba(245,162,35,0.08);
  border: 1px solid rgba(245,162,35,0.3);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  animation: notesReveal 0.3s ease;
}
.high-risk-prompt svg { color: var(--yellow-text); flex-shrink: 0; margin-top: 2px; }
.high-risk-prompt-text { flex:1; display:flex; flex-direction:column; gap:3px; font-size: calc(12px * var(--ts)); }
.high-risk-prompt-text strong { color: var(--yellow-text); font-size: calc(12.5px * var(--ts)); }
.high-risk-prompt-text span { color: var(--text2); line-height: 1.5; }
.high-risk-prompt-actions { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.high-risk-prompt-actions button {
  font-size: calc(11px * var(--ts)); font-weight: 600; padding: 5px 10px; border-radius: 6px;
  cursor: pointer; border: 1px solid rgba(245,162,35,0.4);
  font-family: 'Inter', sans-serif; white-space: nowrap;
}
.high-risk-prompt-actions button:first-child { background: rgba(245,162,35,0.15); color: var(--yellow-text); }
.high-risk-prompt-actions button:last-child { background: none; color: var(--text3); border-color: var(--border); }

.access-clear-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  min-height: 44px;
}
.access-clear-btn:hover { border-color: rgba(var(--accent-rgb),0.5); color: var(--text); }
.access-clear-btn.active {
  background: rgba(var(--green-rgb),0.1);
  border-color: rgba(var(--green-rgb),0.35);
  color: var(--green);
}

/* ── SPECIES INTELLIGENCE PANEL ── */

.species-confirm {
  margin: 10px 14px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  overflow: hidden;
  animation: notesReveal 0.25s ease;
}

.species-confirm-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
}

.species-confirm-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(12px * var(--ts));
  color: var(--text2);
  flex: 1;
  min-width: 0;
}

.species-confirm-text .icon { color: var(--accent2); flex-shrink: 0; }
.species-confirm-text strong { color: var(--text); }

.species-confirm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.species-confirm-btn {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: 'Inter', sans-serif;
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.15s;
}

.species-confirm-btn.confirm {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent2);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.species-confirm-btn.confirm:hover { background: rgba(var(--accent-rgb), 0.25); }
.species-confirm-btn.dismiss:hover { color: var(--text); border-color: var(--border); }

/* Species Intelligence Panel */
.species-intel {
  margin: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  animation: notesReveal 0.3s ease;
}

.species-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent);
  border-bottom: 1px solid var(--border);
}

.species-intel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(12px * var(--ts));
  font-weight: 800;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.species-intel-close {
  background: transparent;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 3px;
  border-radius: 3px;
  transition: color 0.15s;
}
.species-intel-close:hover { color: var(--text); }

.species-intel-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Flag banners */
.species-flag {
  display: flex;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 5px;
  font-size: calc(11.5px * var(--ts));
  line-height: 1.5;
}

.species-flag.danger {
  background: rgba(192,57,43,0.1);
  border: 1px solid rgba(192,57,43,0.3);
  color: #ff8095;
}

.species-flag.warning {
  background: rgba(255,182,72,0.1);
  border: 1px solid rgba(255,182,72,0.3);
  color: var(--yellow-text);
}

.species-flag.info {
  background: rgba(var(--accent-hi-rgb),0.1);
  border: 1px solid rgba(var(--accent-hi-rgb),0.3);
  color: var(--blue);
}

.species-flag-icon { font-size: calc(14px * var(--ts)); flex-shrink: 0; margin-top: 1px; }
.species-flag-text { color: var(--text); font-size: calc(11.5px * var(--ts)); }
.species-flag.danger .species-flag-text strong,
.species-flag.warning .species-flag-text strong,
.species-flag.info .species-flag-text strong { color: inherit; }

/* On-site field ID section in species intel panel */
.intel-section-field-id {
  background: rgba(var(--accent-hi-rgb),0.07);
  border: 1px solid rgba(var(--accent-hi-rgb),0.2);
  border-radius: 8px;
  margin-bottom: 8px;
}
.intel-section-field-id .intel-section-title {
  color: var(--blue);
  border-bottom-color: rgba(var(--accent-hi-rgb),0.15);
}
.intel-field-id-item {
  font-size: calc(11.5px * var(--ts)) !important;
  line-height: 1.5 !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(var(--accent-hi-rgb),0.1) !important;
  color: var(--text) !important;
}
.intel-field-id-item:last-child { border-bottom: none !important; }

/* Intel sections */
.intel-section { display: flex; flex-direction: column; gap: 5px; }

.intel-section-title {
  font-size: calc(10px * var(--ts));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent2);
  margin-bottom: 2px;
}

.intel-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.intel-item {
  display: flex;
  gap: 7px;
  font-size: calc(11.5px * var(--ts));
  color: var(--text2);
  line-height: 1.5;
}

.intel-item::before {
  content: '›';
  color: var(--accent2);
  flex-shrink: 0;
  font-weight: 700;
}

.intel-item strong { color: var(--text); }

/* Treatment options */
.intel-treatments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intel-treatment {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}

.intel-treatment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.intel-treatment-product {
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  color: var(--text);
}

.intel-treatment-type {
  font-size: calc(9.5px * var(--ts));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 99px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.intel-treatment-notes {
  font-size: calc(11px * var(--ts));
  color: var(--text2);
  line-height: 1.5;
}

.intel-treatment-toxicity {
  font-size: calc(10px * var(--ts));
  color: var(--text3);
  margin-top: 2px;
}

/* Field notes prompt list */
.intel-prompts {
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 4px;
  padding: 8px 10px;
}

.intel-prompt-item {
  display: flex;
  gap: 7px;
  font-size: calc(11px * var(--ts));
  color: var(--text2);
  line-height: 1.5;
  padding: 2px 0;
}

.intel-prompt-item::before {
  content: '→';
  color: var(--accent2);
  flex-shrink: 0;
  font-size: calc(10px * var(--ts));
  margin-top: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── ICONS ── */
.icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── ACCESSIBILITY: focus states ── */
button:focus-visible,
.field-val:focus-visible,
.job-input:focus-visible,
.section-tab:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* ── ACCESSIBILITY: reduced motion ── */
/* ── VOICE HUD ── a border round the whole screen while voice or the AI
   is working, readable from the corner of the eye. Taps pass through. */
.voice-hud {
  --hud: #FF6A00;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  border: 0 solid var(--hud);
  opacity: 0;
  transition: opacity 0.2s, border-width 0.2s;
}
body[data-voice] .voice-hud { opacity: 1; }
body[data-voice="listening"] .voice-hud,
body[data-voice="thinking"] .voice-hud {
  border-width: 10px;
  box-shadow: inset 0 0 36px rgba(255, 106, 0, 0.55);
}
body[data-voice="listening"] .voice-hud { animation: hudPulse 1.6s ease-in-out infinite; }
body[data-voice="thinking"] .voice-hud { animation: hudPulse 0.6s ease-in-out infinite; }
@keyframes hudPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-voice] .voice-hud { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT
   ══════════════════════════════════════════════════════════════════════ */


/* Send: a fix button beside each gap on the check sheet, "Did that send?",
   and one Sent line per document (report banner and quote screen). */
.send-review-fixes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.send-review-fixes .link-btn { flex: none; min-height: 32px; font-size: calc(12.5px * var(--ts)); font-weight: 700; color: var(--accent2); }
.send-review-gap { display: flex; flex-direction: column; }
.did-it-send-overlay { z-index: 310; }
.did-it-send {
  position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  max-width: 420px; margin: 0 auto; padding: 18px 16px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.did-it-send-title { font-size: calc(16px * var(--ts)); font-weight: 800; color: var(--text); }
.did-it-send-text { margin: 8px 0 14px; font-size: calc(13px * var(--ts)); line-height: 1.5; color: var(--text2); }
.did-it-send-btns { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
/* ASK FIRST: SAYON's own sheet for a question, over whatever asked it. */
#askOverlay { z-index: 950; }
#askOverlay .did-it-send-text { white-space: pre-line; margin-bottom: 0; }
#askOverlay .did-it-send-btns { margin-top: 14px; }
#askOverlay .link-btn { align-self: center; min-height: 44px; }
#askOverlay .extract-btn.danger { background: var(--risk); }
#askOverlay .ask-input {
  width: 100%; box-sizing: border-box; margin-top: 12px; padding: 12px 14px; min-height: 48px;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: calc(16px * var(--ts)); outline: none;
}
#askOverlay .ask-input:focus { border-color: var(--accent2); }
.ask-facts { margin: 10px 0 0; border-top: 1px solid var(--border); }
.ask-facts > div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: calc(13px * var(--ts)); line-height: 1.4; }
.ask-facts dt { flex: 0 0 76px; color: var(--text3); }
.ask-facts dd { flex: 1; margin: 0; color: var(--text); font-weight: 600; }
.photo-source-btns { margin-top: 14px; }
/* One filled button on the sheet; the others are quiet. */
body .photo-source-btns .extract-btn.quiet {
  background: var(--surface); color: var(--text); border: 1px solid var(--border2); box-shadow: none; font-weight: 600;
}
.photo-source-btns .extract-btn.quiet::after { content: none; }
/* Add photo is the camera; "Choose one instead" sits beside it, quiet. A
   computer has no camera to open, so Add photo is its file picker and the
   second way isn't shown. */
.photo-add-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.photo-choose { min-height: 44px; margin: 0; padding: 0 2px; font-size: calc(13px * var(--ts)); }
.section-photo-hint .photo-choose { display: inline; min-height: 0; padding: 0; font-size: inherit; }
.photo-toolbar .photo-choose { margin-left: auto; margin-right: 12px; }
@media (hover: hover) and (pointer: fine) { .photo-choose { display: none !important; } }
.move-status { margin: 0 0 10px; font-size: calc(13px * var(--ts)); font-weight: 700; line-height: 1.4; color: var(--text); }
.move-steps { margin: 0 0 14px; padding-left: 20px; font-size: calc(13px * var(--ts)); line-height: 1.5; color: var(--text2); }
.move-steps li + li { margin-top: 4px; }
#moveOverlay a.extract-btn { display: block; text-align: center; text-decoration: none; }

/* After Extract: what was filled and what's still blank */
.extract-summary-sheet { top: auto; bottom: 0; max-height: 80vh; max-height: 80dvh; border-radius: 16px 16px 0 0; }
/* The sheet scrolls as a whole. iPhone browsers wouldn't scroll the inner
   body of a sheet that only has a max-height, so the list was cut off. */
.extract-summary-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.extract-summary-sheet .page-sheet-body { flex: none; overflow: visible; }
.extract-summary-filled { font-size: calc(15px * var(--ts)); font-weight: 700; color: var(--text); }
.extract-summary-label { font-size: calc(12px * var(--ts)); font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; }
.extract-summary-list { display: flex; flex-direction: column; gap: 8px; }
.extract-blank-btn {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: inherit; font-size: calc(14px * var(--ts)); text-align: left; cursor: pointer;
}
.extract-blank-btn span { color: var(--text2); font-size: calc(18px * var(--ts)); }
.extract-summary-done { font-size: calc(13px * var(--ts)); color: var(--text2); }
/* Before you leave: each gap with its one-tap fix under it */
.extract-summary-gaps { display: flex; flex-direction: column; gap: 6px; }
.extract-gap { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 10px; border-left: 3px solid var(--yellow); background: var(--bg); font-size: calc(14px * var(--ts)); line-height: 1.4; color: var(--text); }
.extract-gap .send-review-fixes { margin-top: 4px; gap: 2px 16px; }
.extract-gap .link-btn { min-height: 36px; }
.extract-summary-actions { display: flex; flex-direction: column; gap: 4px; }
.extract-readback-btn { min-height: 44px; font-size: calc(14px * var(--ts)); font-weight: 700; color: var(--accent2); }
.extract-blank-flash { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── ONE THEME: the sign-in look everywhere ──
   Every screen sits on the sign-in backdrop (deep ink with a blue glow),
   with white cards on top and blue for actions. Bars are ink, not white,
   and text on the backdrop is light. These rules start with body, so they
   win over the plain rules earlier in the file. */
:root {
  --ink:        #0B141C;
  --ink2:       #111D27;
  --on-ink:     #F4F8FB;
  --on-ink2:    rgba(232,240,246,0.72);
  --backdrop:
    radial-gradient(120% 40% at 50% -8%, rgba(var(--accent-rgb),0.34), rgba(var(--accent-rgb),0) 62%),
    linear-gradient(180deg, #0B141C 0%, #070B10 100%);
}
body { background: var(--backdrop); background-color: #070B10; }
body #splash,
body #quoteScreen { background: var(--backdrop); background-color: #070B10; color-scheme: dark; }
body .splash-logo { color: var(--on-ink); }

/* Top bar and section tabs: ink, light text, blue for the active tab. */
body header { background: var(--ink); border-bottom: none; box-shadow: none; }
body .header-job,
body .header-job span,
body .header-job.has-job { color: var(--on-ink2); }
body .header-icon-btn { color: var(--on-ink2); }
body .header-icon-btn:hover,
body .hamburger-btn:hover { background: rgba(255,255,255,0.08); color: var(--accent-glow); }
body .hamburger-btn span { background: var(--on-ink); }
body header .progress-ring-bg { stroke: rgba(255,255,255,0.18); }
body header .progress-ring-wrap { color: var(--on-ink2); }
body .section-tabs { background: transparent; border-bottom: none; box-shadow: none; }
body .section-tab { color: var(--on-ink2); }
body .section-tab:hover { color: var(--on-ink); background: rgba(255,255,255,0.06); }
body .section-tab .tab-label { color: inherit; }
body .section-tab.active { color: #FFFFFF; }
body .section-tab .tab-dot:not(.partial):not(.done):not(.current) { border-color: rgba(255,255,255,0.4); }
body .progress-wrap { background: rgba(255,255,255,0.06); }
body .report-body { background: transparent; }

/* Cards on the backdrop: white, no edge line, a soft shadow for lift. */
body .report-section,
body #jobPanel:not(.menu-page-active) { border-color: transparent; box-shadow: 0 14px 36px rgba(0,0,0,0.35); }
/* Banners on the backdrop need a solid face to stay readable. */
/* Unsigned agreement: light red, as no job should start without it. */
body .agreement-banner { background: linear-gradient(135deg, #FFE4E4 0%, #FFF1F1 60%, #FFF7F7 100%); border-color: #F2A3A3; color: #9B1C1C; box-shadow: 0 0 0 1px rgba(215,38,30,0.08), 0 6px 22px -6px rgba(215,38,30,0.45); }
body .agreement-banner:not(.signed) .agreement-banner-btn { background: #D7261E; border-color: #D7261E; color: #FFFFFF; box-shadow: 0 3px 10px rgba(215,38,30,0.35); }
body .agreement-banner.signed { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); box-shadow: none; }
/* Link sent: it's on the client now, so amber rather than the red "get it signed". */
body .agreement-banner.waiting { background: rgba(212,146,10,0.1); border-color: var(--yellow); color: var(--yellow-text); box-shadow: none; }
body .agreement-banner.waiting .agreement-banner-btn { background: transparent; border-color: currentColor; color: inherit; box-shadow: none; }
body .issue-banner { background: #FFFFFF; border-color: transparent; box-shadow: 0 14px 36px rgba(0,0,0,0.35); }
body .issue-banner.locked { background: #FFFFFF; border-color: var(--accent-edge); }
/* ── BLUE GLOW DETAILS ──
   The intro's look carried into the report: fades from bright blue into
   nothing, soft blue glows, and a title that runs from ink into blue. One
   colour throughout; amber, red and green keep their meanings. */
:root { --glow: 47,107,255; --glow-hi: 125,162,255; --glow-ink: 31,79,224; }

/* Progress bar: blue into a lighter blue, with a glow. */
body .progress-fill {
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--glow)), rgb(var(--glow-hi)));
  box-shadow: 0 0 10px rgba(var(--glow-hi),0.6);
}
/* Active tab: lit from the top like the logo, with a glow under it. */
body .section-tab.active {
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(var(--glow),0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Cards: a faint blue ring and a glow rising off the top edge. */
body .report-section {
  box-shadow: 0 14px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--glow),0.18), 0 -10px 40px -14px rgba(var(--glow),0.7);
}
/* Section header: a bright line above and a fine line below, both fading
   out to the right, over a blue wash that fades the same way. */
body .report-section .section-header {
  border-top: 3px solid rgb(var(--glow));
  border-image: linear-gradient(90deg, rgb(var(--glow)), rgb(var(--glow-hi)) 45%, rgba(var(--glow-hi),0)) 1;
  background: linear-gradient(135deg, rgba(var(--glow),0.16) 0%, rgba(var(--glow-hi),0.06) 45%, rgba(var(--glow),0) 80%);
}
body .report-section .section-header h3 .sec-num { color: rgb(var(--glow-ink)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body .report-section .section-header h3 {
    background: linear-gradient(90deg, var(--text) 0%, var(--text) 45%, rgb(var(--glow-ink)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: calc(15px * var(--ts));
  }
}
/* Cards inside a section (area rows, access groups) take the same fading
   line under their heading. */
body .obs-zone-panel[open] > .obs-zone-panel-header,
body .access-group-head {
  border-bottom: 1px solid rgba(var(--glow),0.5);
  border-image: linear-gradient(90deg, rgba(var(--glow),0.75), rgba(var(--glow-hi),0.35) 50%, rgba(var(--glow-hi),0)) 1;
}
/* A picked answer glows in its own colour (red, amber, green or grey). */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  body .choice-card:has(input:checked),
  body .choice-card.active {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--tone) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
  }
}
/* In edit mode a field lights up blue under the finger or pointer. */
body .edit-mode .field-val:hover { box-shadow: 0 0 0 3px rgba(var(--glow),0.14), 0 0 16px rgba(var(--glow),0.18); }
/* The same blue glow on the home screen, top bar, menu and dashboard. */
/* Logo boxes fade like the intro's: near-white at the top into blue. */
body .auth-logo-icon {
  background: linear-gradient(180deg, #F4F7FA 0%, var(--accent-pale) 40%, var(--accent-hi) 78%, var(--accent) 100%);
  color: var(--accent-ink);
  box-shadow: 0 0 14px rgba(var(--glow-hi),0.4), inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -2px 3px rgba(var(--accent-deep-rgb),0.35);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body .auth-logo-name {
    background: linear-gradient(180deg, #F4F7FA 0%, var(--accent-pale) 45%, var(--accent-hi) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(var(--glow),0.35));
  }
}
/* A fine blue line under the top bars, fading out to the right. */
body header,
body .quote-topbar {
  border-bottom: 1px solid rgba(var(--glow),0.5);
  border-image: linear-gradient(90deg, rgba(var(--glow-hi),0.8), rgba(var(--glow),0.4) 45%, rgba(var(--glow),0)) 1;
}
body .panel-label .panel-icon {
  background: linear-gradient(180deg, rgba(var(--glow-hi),0.28), rgba(var(--glow),0.14));
  border-color: rgba(var(--glow),0.3);
  color: rgb(var(--glow-ink));
  box-shadow: 0 2px 10px rgba(var(--glow),0.22), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Menu: group labels trail a fading line. */
body .drawer-group-label { display: flex; align-items: center; gap: 10px; color: rgb(var(--glow-ink)); }
body .drawer-group-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(var(--glow),0.6), rgba(var(--glow-hi),0.25) 50%, rgba(var(--glow-hi),0));
}
/* A picked plain answer (storey, roof, inspection type) fades like the
   active tab instead of sitting flat in the old blue. */
body .choice-card.tone-neutral:has(input:checked),
body .choice-card.tone-neutral.active {
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--glow),0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Mic button: the same bright blue fade, with a light blue glow breathing round it. */
body .mic-fab:not(.recording):not(.open) {
  background: linear-gradient(180deg, var(--accent-glow) 0%, var(--accent-hi) 30%, var(--accent) 65%, var(--accent-deep) 100%);
  color: #FFFFFF;
  animation-name: fabBreatheGlow;
}
body .mic-fab:not(.recording):not(.open) svg { filter: drop-shadow(0 1px 1px rgba(var(--accent-deep-rgb),0.5)); }
body .mic-fab:not(.recording):not(.open):hover { box-shadow: 0 10px 28px rgba(var(--glow),0.55), 0 0 0 8px rgba(var(--glow-hi),0.14); }
@keyframes fabBreatheGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(var(--glow),0.45), 0 0 18px rgba(var(--glow-hi),0.35), 0 0 0 0 rgba(var(--glow-hi),0.3); }
  50%      { box-shadow: 0 8px 28px rgba(var(--glow),0.55), 0 0 26px rgba(var(--glow-hi),0.5), 0 0 0 8px rgba(var(--glow-hi),0); }
}

body .choice-card { transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s, transform 0.08s; }

/* Areas (Section 4) */
.areas-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px 6px; }
.areas-mark-all { font-size: calc(13px * var(--ts)); }
.area-result-label { padding: 0 12px 6px; font-size: calc(12px * var(--ts)); font-weight: 600; color: var(--text2); }
.area-result { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 12px; }
.area-result .obs-item-btn { border-radius: 8px; }
.obs-reasons { margin: 0 12px 10px; padding: 10px 10px 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.obs-reasons .obs-items-label { display: flex; align-items: center; gap: 6px; padding: 0; font-size: calc(12px * var(--ts)); letter-spacing: 0; text-transform: none; }
.obs-reasons .obs-items-label svg { width: 14px; height: 14px; flex: none; }
.obs-reasons .obs-items { padding: 8px 0 10px; }
.obs-reasons-hindered .obs-items-label { color: var(--yellow-text); }
.obs-reasons-restricted .obs-items-label { color: var(--risk); }
.obs-reasons-hindered .obs-item-btn.selected { background: rgba(245,162,35,0.14); border-color: var(--yellow); color: var(--yellow-text); font-weight: 600; }
.obs-reasons-restricted .obs-item-btn.selected { background: rgba(192,57,43,0.10); border-color: var(--risk); color: var(--risk); font-weight: 600; }
.area-status-btn { font-size: calc(12px * var(--ts)); line-height: 1.2; }

/* Areas in the job page's look: how many are marked over a bar per area in
   its status colour, then each area as a card like a job's step, with the
   area's own icon on a tile in its status colour (green inspected, amber
   with limits, red not inspected, dashed not applicable, grey to mark) and
   a tick, cross or dash on its corner, joined by a short line. What's
   recorded reads under the name. Open, the card takes a blue edge and
   shows big status buttons, what was found and the reasons. */
.areas-intro { align-items: stretch; gap: 12px; padding: 14px 14px 4px; }
.areas-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
.areas-bar > * { white-space: normal; }
.areas-progress { font-size: calc(13.5px * var(--ts)); font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text2); }
.areas-segs { display: flex; gap: 5px; }
.areas-segs i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface3); transition: background 0.2s; }
.areas-segs i.inspected { background: var(--green-fill); }
.areas-segs i.partial { background: var(--yellow); }
.areas-segs i.not { background: var(--risk); }
.areas-segs i.na { background: var(--border2); }
.areas-mark-all {
  align-self: flex-start; min-height: 48px; padding: 0 16px 0 13px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: 650 calc(14px * var(--ts)) 'Inter', sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.areas-mark-all svg { flex: none; color: var(--green); }
.areas-mark-all:active { transform: scale(0.97); background: var(--surface2); }
.areas-mark-all:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
/* Recheck later on a limited area's card (RECHECK LATER FROM THE AREA'S CARD). */
.area-recheck { margin: 0 12px 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.area-recheck-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.area-recheck-title { font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--text); }
.area-recheck-text small { font-size: calc(12px * var(--ts)); color: var(--text2); line-height: 1.35; }
.area-recheck .toggle-switch { flex: none; }

#areaChecklist { gap: 10px; padding: 10px 14px 14px; }
/* The site plan under the areas (THE SITE PLAN IN THE REPORT, js/site-plan.js). */
.report-plan { padding: 2px 14px 16px; }
.report-plan-head { margin: 0 0 8px; font-size: calc(13px * var(--ts)); font-weight: 800; color: var(--text); }
.area-node { position: relative; }
.area-node:not(:last-child)::after { content: ''; position: absolute; left: 34px; top: 100%; width: 2px; height: 10px; background: var(--border2); }
.area-node[class*="area-node-"]:not(:last-child)::after { background: var(--green-fill); }
#areaChecklist .obs-zone-panel { margin: 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15,23,42,0.05); overflow: hidden; }
#areaChecklist .area-node.open .obs-zone-panel { border: 2px solid var(--accent); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 22px -10px rgba(15,23,42,0.22); }
#areaChecklist .area-summary {
  min-height: 72px; padding: 12px 14px 12px 12px; gap: 14px; background: transparent; border: 0; border-image: none;
  -webkit-tap-highlight-color: transparent;
}
#areaChecklist .area-node.open .area-summary { padding: 11px 13px 11px 11px; }
#areaChecklist .area-summary::after { content: none; }
#areaChecklist .area-summary:active { background: var(--surface2); }
#areaChecklist .area-summary:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: -3px; border-radius: 14px; }

.area-tile {
  flex: none; position: relative; width: 44px; height: 44px; box-sizing: border-box; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text3); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.area-node-inspected .area-tile { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); }
.area-node-partial .area-tile { background: rgba(245,162,35,0.12); border-color: rgba(212,146,10,0.4); color: var(--yellow-text); }
.area-node-not .area-tile { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); color: var(--risk); }
.area-node-na .area-tile { background: transparent; border-style: dashed; border-color: var(--border2); }
.area-tile-badge {
  position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; box-sizing: border-box; border-radius: 99px; display: grid; place-items: center;
  background: var(--green-fill); color: #fff; border: 2px solid var(--surface);
}
.area-node-partial .area-tile-badge { background: var(--yellow); }
.area-node-not .area-tile-badge { background: var(--risk); }
.area-node-na .area-tile-badge { background: var(--text3); }

#areaChecklist .area-sum-text { gap: 3px; }
#areaChecklist .area-sum-name { font-size: calc(15.5px * var(--ts)); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.area-sum-line { display: flex; flex-direction: column; gap: 1px; font-size: calc(13.5px * var(--ts)); line-height: 1.35; }
#areaChecklist .area-sum-state { font-size: inherit; font-weight: 600; text-align: left; }
#areaChecklist .area-sum-text > .area-sum-state { font-size: calc(13.5px * var(--ts)); font-weight: 500; color: var(--text3); }
#areaChecklist .area-sum-why { font-size: inherit; font-weight: 500; color: var(--text3); }
#areaChecklist .area-sum-found { color: var(--risk); font-weight: 600; }
.area-sum-chev { flex: none; color: var(--text3); transition: transform 0.2s; }
.obs-zone-panel[open] .area-sum-chev { transform: rotate(90deg); color: var(--accent2); }

/* Inside an open area: sections split by hairlines, no boxes in boxes. */
.area-body { border-top: 1px solid var(--border); }
#areaChecklist .area-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; }
#areaChecklist .area-status-btn {
  min-height: 56px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); box-shadow: none;
  font-size: calc(12.5px * var(--ts)); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; white-space: normal; text-align: center;
}
#areaChecklist .area-status-btn svg { flex: none; color: var(--text3); }
#areaChecklist .area-status-btn.active svg { color: inherit; }
#areaChecklist .area-status-btn.status-inspected { background: var(--green-wash); border-color: var(--green-fill); color: var(--green); box-shadow: inset 0 0 0 1px var(--green-fill); }
#areaChecklist .area-status-btn.status-partial { background: rgba(245,162,35,0.14); border-color: var(--yellow); color: var(--yellow-text); box-shadow: inset 0 0 0 1px var(--yellow); }
#areaChecklist .area-status-btn.status-not { background: rgba(192,57,43,0.1); border-color: var(--risk); color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk); }
#areaChecklist .area-status-btn.status-na { background: rgba(86,106,127,0.14); border-color: var(--text3); color: var(--text); box-shadow: inset 0 0 0 1px var(--text3); }
#areaChecklist .area-result-label { padding: 0 12px 8px; font-size: calc(12.5px * var(--ts)); font-weight: 650; color: var(--text2); }
#areaChecklist .area-result .obs-item-btn { min-height: 48px; border-radius: 12px; font-weight: 600; }
#areaChecklist .area-result-btn:not(.selected) { background: var(--surface2); }
#areaChecklist .area-evidence { padding: 0 12px 12px; }
#areaChecklist .obs-reasons { margin: 0; padding: 12px 12px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
#areaChecklist .obs-reasons .obs-items-label { font-size: calc(12.5px * var(--ts)); font-weight: 650; }
#areaChecklist .obs-reasons .obs-items { padding: 8px 0 12px; }
#areaChecklist .obs-item-btn:not(.selected) { background: var(--surface2); }
/* Where exactly and its photos, under the kind of reason that was ticked. */
#areaChecklist .area-spot { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; }
@media (min-width: 900px) { #areaChecklist .area-status, #areaChecklist .area-result { max-width: 640px; } }
/* Large text on a narrow phone: the three status buttons stack, the icon
   beside the words, so none is cut off. */
@media (max-width: 599px) {
  body.text-size-large #areaChecklist .area-status,
  body.text-size-xl #areaChecklist .area-status { grid-template-columns: minmax(0, 1fr); }
  body.text-size-large #areaChecklist .area-status-btn,
  body.text-size-xl #areaChecklist .area-status-btn { min-height: 52px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 14px; text-align: left; }
}

/* Areas unable to be inspected, in the same look: each kind of limit is a
   card with its icon tile, and each area in it has the head of its card in
   Areas (icon tile in its status colour, status and reasons under the name)
   which opens it there. Where exactly and how many photos read under it;
   they are added on the area's card. */
#section-restrictions .access-group { border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
#section-restrictions .access-group-head { gap: 12px; padding: 14px; }
#section-restrictions .access-group-icon { width: 36px; height: 36px; border-radius: 10px; }
#section-restrictions .access-group-title { font: 700 calc(16px * var(--ts))/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.01em; }
#section-restrictions .access-group-title small { font-family: 'Inter', sans-serif; letter-spacing: 0; margin-top: 2px; }
#section-restrictions .access-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px 14px 12px; }
.access-item-head {
  width: 100%; min-height: 64px; padding: 0; display: flex; align-items: center; gap: 14px;
  border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.access-item-head:active .area-tile { transform: scale(0.96); }
.access-item-head:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 3px; border-radius: 12px; }
.access-item-partial .area-tile { background: rgba(245,162,35,0.12); border-color: rgba(212,146,10,0.4); color: var(--yellow-text); }
.access-item-partial .area-tile-badge { background: var(--yellow); }
.access-item-not .area-tile { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); color: var(--risk); }
.access-item-not .area-tile-badge { background: var(--risk); }
.access-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#section-restrictions .access-item-name { font-size: calc(15.5px * var(--ts)); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 2px; }
#section-restrictions .access-item-state {
  display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: calc(13.5px * var(--ts)); font-weight: 600; line-height: 1.35; color: var(--yellow-text);
}
#section-restrictions .access-item-state::after { content: none; }
.access-item-not .access-item-state { color: var(--risk) !important; }
#section-restrictions .access-item-why { font-size: calc(13.5px * var(--ts)); font-weight: 500; color: var(--text3); line-height: 1.35; }
#section-restrictions .access-item-why.missing { color: var(--yellow-text); font-weight: 600; }
.access-item-where { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: calc(13.5px * var(--ts)); font-weight: 500; color: var(--text2); line-height: 1.35; }
.access-item-where svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--text3); }
#section-restrictions .access-spot, #areaChecklist .access-spot { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; text-align: left; }
#section-restrictions .access-spot svg, #areaChecklist .access-spot svg { flex: none; color: var(--text3); }
#section-restrictions .access-spot.empty svg, #areaChecklist .access-spot.empty svg { color: var(--accent2); }
#areaChecklist .access-spot, #areaChecklist .access-spot-editor { margin-top: 0; }
#areaChecklist .access-spot-input { min-height: 48px; border-radius: 12px; }
#section-restrictions .spot-photos, #areaChecklist .spot-photos { margin-top: 0; }
#section-restrictions .spot-photo img, #areaChecklist .spot-photo img { border-radius: 10px; }

/* Address suggestions under the street address box */
.addr-wrap { position: relative; }
.addr-suggest { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.addr-suggest.open { display: block; }
.addr-suggest-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  min-height: 44px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: none;
  text-align: left; font-family: inherit; cursor: pointer; }
.addr-suggest-item:last-child { border-bottom: 0; }
.addr-suggest-item:active, .addr-suggest-item:hover { background: var(--surface2); }
.addr-suggest-street { font-size: calc(14px * var(--ts)); font-weight: 600; color: var(--text); }
.addr-suggest-area { font-size: calc(12px * var(--ts)); color: var(--text2); }
.addr-suggest-credit { padding: 5px 12px 6px; font-size: calc(10.5px * var(--ts)); color: var(--text3, var(--text2)); text-align: right; border-top: 1px solid var(--border); }

/* ── PHOTO VIEWER ── any photo, full screen, pinch or double-tap to zoom. */
.photo-viewer {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  background: rgba(4,8,12,0.96);
  color: #F4F8FB;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.photo-viewer-bar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
}
.photo-viewer-info { flex: 1; min-width: 0; font-size: calc(13px * var(--ts)); color: rgba(232,240,246,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-viewer-close {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.photo-viewer-stage {
  flex: 1; min-height: 0; overflow: hidden; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
.photo-viewer.zoomed .photo-viewer-stage { cursor: grab; }
.photo-viewer-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.photo-viewer-hint { text-align: center; font-size: calc(12px * var(--ts)); color: rgba(232,240,246,0.55); padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.photo-viewer.zoomed .photo-viewer-hint { visibility: hidden; }
.photo-viewer-markup {
  height: 44px; flex-shrink: 0; padding: 0 16px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; gap: 7px; font: inherit; font-size: calc(15px * var(--ts)); font-weight: 600; cursor: pointer;
}

/* ── PHOTO MARKUP ── circle, arrow, draw or label on a photo (js/photo-markup.js). */
.photo-markup {
  position: fixed; inset: 0; z-index: 401;
  display: flex; flex-direction: column;
  background: #05090D; color: #F4F8FB;
}
.photo-markup-bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
}
.photo-markup-title { flex: 1; text-align: center; font-size: calc(16px * var(--ts)); font-weight: 700; }
.photo-markup-text-btn {
  min-height: 44px; padding: 0 16px; border-radius: 22px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: #fff;
  font: inherit; font-size: calc(15px * var(--ts)); font-weight: 600;
}
.photo-markup-text-btn.primary { background: var(--accent, #2F9E6E); border-color: transparent; color: #fff; }
.photo-markup-text-btn:disabled { opacity: 0.4; cursor: default; }
.photo-markup-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 4px 8px; overflow: hidden;
}
.photo-markup-stage canvas {
  max-width: 100%; max-height: 100%; touch-action: none; cursor: crosshair;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.photo-markup-note { margin: 4px 14px 0; font-size: calc(12.5px * var(--ts)); color: #FFD60A; text-align: center; }
.photo-markup-label { display: flex; gap: 8px; padding: 8px 12px 0; }
.photo-markup-label input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; font: inherit; font-size: calc(16px * var(--ts));
}
.photo-markup-hint { text-align: center; font-size: calc(13px * var(--ts)); color: rgba(232,240,246,0.7); padding: 8px 14px 4px; min-height: 1.4em; }
.photo-markup-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 12px; }
.photo-markup-tools button {
  min-height: 56px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: inherit; font-size: calc(13px * var(--ts)); font-weight: 600;
}
.photo-markup-tools button.on { background: #fff; color: #05090D; border-color: #fff; }
.photo-markup-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.photo-markup-colours { display: flex; gap: 10px; flex: 1; }
.photo-markup-colours button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 3px solid rgba(255,255,255,0.25);
}
.photo-markup-colours button.on { border-color: #fff; box-shadow: 0 0 0 2px #05090D inset; }
.photo-markup-colours [data-markup-colour="red"] { background: #FF3B30; }
.photo-markup-colours [data-markup-colour="yellow"] { background: #FFD60A; }
.photo-markup-colours [data-markup-colour="white"] { background: #FFFFFF; }
/* Photos in the report open the viewer when tapped. */
img[data-photo-id][src] { cursor: zoom-in; }
.finding-photos .spot-photos { margin-top: 0; }
/* A conducive condition's own photos, under its answer. */
.cond-photos .spot-photos { margin-top: 0; }
.field > .cond-photos { margin-top: 10px; }

/* ── VOICE CAPTURE ──
   The voice panel in the intro's look: a white card glowing blue along the
   top, a big speak button with the mic in a glowing blue disc (red while
   recording), the note in plain readable type, and the fill-in button
   lit like the active tab. */
body .voice-popover {
  background: linear-gradient(180deg, rgba(var(--glow),0.13) 0, rgba(var(--glow-hi),0.04) 70px, rgba(255,255,255,0) 130px), #FFFFFF;
  border: 0;
  border-radius: 20px;
  padding: 16px;
  gap: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--glow),0.28), 0 -14px 44px -18px rgba(var(--glow),0.85);
}
body .voice-popover-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--glow),0.5);
  border-image: linear-gradient(90deg, rgba(var(--glow),0.8), rgba(var(--glow-hi),0.35) 50%, rgba(var(--glow-hi),0)) 1;
}
body .voice-popover-title { font-size: calc(15px * var(--ts)); letter-spacing: -0.2px; color: rgb(var(--glow-ink)); }
body #voicePopoverTitleText { color: var(--text); }
body .voice-popover-close { border-radius: 50%; border-color: transparent; background: rgba(var(--glow),0.08); color: var(--text2); }
body .toggle-switch.on { background: linear-gradient(180deg, var(--accent-hi), var(--accent-deep)); }
body .toggle-switch.on::after { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

body .voice-btn {
  min-height: 66px;
  padding: 10px 14px;
  justify-content: flex-start;
  gap: 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(var(--glow),0.4);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(var(--glow-hi),0.12) 100%);
  font-size: calc(15px * var(--ts));
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(var(--glow),0.14);
}
body .voice-btn .mic-svg {
  width: 22px; height: 22px; padding: 11px; box-sizing: content-box; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-glow) 0%, var(--accent-hi) 30%, var(--accent) 65%, var(--accent-deep) 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(var(--glow),0.45), inset 0 1px 1px rgba(255,255,255,0.5);
}
body .voice-btn:hover { border-color: rgba(var(--glow),0.7); background: linear-gradient(180deg, #FFFFFF 0%, rgba(var(--glow-hi),0.2) 100%); }
body .voice-btn.recording { border-color: rgba(215,38,30,0.55); background: linear-gradient(180deg, #FFFFFF 0%, #FFE9E7 100%); color: #9B1C1C; }
body .voice-btn.recording .mic-svg { background: linear-gradient(180deg, #FF8A80 0%, #E5483E 45%, #C0392B 100%); box-shadow: 0 4px 14px rgba(215,38,30,0.45), inset 0 1px 1px rgba(255,255,255,0.45); }

body .wave-bar { width: 4px; border-radius: 3px; background: linear-gradient(180deg, rgb(var(--glow-hi)), rgb(var(--glow))); box-shadow: 0 0 8px rgba(var(--glow),0.55); }

body .transcript-box {
  min-height: 96px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #F4F7FA;
  font-family: 'Inter', sans-serif;
  font-size: calc(14px * var(--ts));
  line-height: 1.55;
  color: var(--text3);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
body .transcript-box.active { color: var(--text); background: #FFFFFF; border-color: rgba(var(--glow),0.55); }
body .transcript-box:focus { outline: none; background: #FFFFFF; border-color: rgb(var(--glow)); box-shadow: 0 0 0 3px rgba(var(--glow),0.16), 0 0 18px rgba(var(--glow),0.18); }

body .extract-btn {
  min-height: 52px;
  border-radius: 14px;
  font-size: calc(15px * var(--ts));
  font-weight: 700;
  background: var(--accent-grad);
  box-shadow: 0 6px 20px rgba(var(--glow),0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
body .extract-btn:disabled { opacity: 0.4; box-shadow: none; }
body .ai-bar { justify-content: center; border: 0; background: transparent; padding: 2px 10px 0; font-size: calc(11.5px * var(--ts)); color: var(--text3); }
body .ai-dot { width: 7px; height: 7px; box-shadow: 0 0 8px currentColor; color: var(--green); }

/* ── ONE BLUE ──
   Buttons take the logo's blue fade, the same as the open tab and Extract,
   instead of the older flat blue and green. */
body .next-section-btn,
body .cleanup-apply-btn,
body .profile-btn,
body .issue-primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 1px rgba(var(--accent-deep-rgb),0.45);
  box-shadow: 0 4px 14px rgba(var(--glow),0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
body .next-section-btn:hover { background: linear-gradient(180deg, var(--accent-glow) 0%, var(--accent) 50%, var(--accent-deep) 100%); border-color: transparent; }

/* ── COMPASS (Orientation) ── */
.compass-body { align-items: center; text-align: center; }
.compass-dial { position: relative; width: min(72vw, 280px); aspect-ratio: 1; margin: 14px auto 4px; }
.compass-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 16px solid var(--accent);
}
.compass-rose { width: 100%; height: 100%; will-change: transform; }
.compass-ring { fill: var(--bg); stroke: var(--border); stroke-width: 3; }
.compass-ticks line { stroke: var(--text2); stroke-width: 2; stroke-linecap: round; }
.compass-rose text { text-anchor: middle; font-family: 'Inter', sans-serif; font-weight: 700; fill: var(--text); }
.compass-n { font-size: calc(26px * var(--ts)); fill: #dc2626 !important; }
.compass-l { font-size: calc(20px * var(--ts)); }
.compass-s { font-size: calc(12px * var(--ts)); fill: var(--text2) !important; font-weight: 600; }
body .compass-body .compass-main.locked { background: var(--accent3); box-shadow: 0 0 0 3px var(--accent); text-shadow: none; }
.compass-main:disabled { opacity: 0.6; cursor: default; }
.compass-note { font-size: calc(13px * var(--ts)); line-height: 1.45; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-width: 360px; }
.compass-body .extract-btn { max-width: 360px; margin-top: 4px; padding: 16px; }

/* ── BOTTOM DOCK ──
   Three things in a rounded glass dock that floats above the bottom edge:
   Jobs, the mic and This job. However much the app grows, nothing else
   joins it: new documents go on the job's page. The place on show is lit
   as a blue chip: Jobs for the job list and the account menu behind it,
   This job for the job's page and every document under it. The mic is a
   round button, no word: open, it shows a down mark to close the panel;
   while it listens it turns red with a Stop square and the time above it;
   while the AI fills the report it spins. */
:root {
  --dock-h: 68px;
  --dock-gap: max(10px, env(safe-area-inset-bottom, 0px));
  --tabbar-h: calc(var(--dock-h) + 8px + var(--dock-gap));
  --mic-clearance: 16px;
}
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
  height: var(--tabbar-h);
  padding: 8px 14px var(--dock-gap);
  box-sizing: border-box;
  pointer-events: none;
}
body:has(#app[style*="flex"]) .tabbar,
body:has(#quoteScreen.open) .tabbar { display: block; }
.tabbar-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  height: var(--dock-h); max-width: 420px; margin: 0 auto; padding: 0 7px;
  border-radius: calc(var(--dock-h) / 2);
  background: rgba(14,24,33,0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--glow),0.14), 0 -6px 24px -10px rgba(var(--glow),0.45);
}
.tabbar-inner > .tab { flex: 1; min-width: 0; }
.tab {
  position: relative; height: 54px; border-radius: 27px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--on-ink2); font: 600 calc(12px * var(--ts)) 'Inter', sans-serif; letter-spacing: 0.1px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
/* Away from the job (Jobs, the menu), This job reads as its street. */
.tab-job-street { display: none; }
body:has(#dashboardOverlay.open) .tab-job-street:not(:empty),
body:has(#sidebarPanel.open) .tab-job-street:not(:empty) { display: block; }
body:has(#dashboardOverlay.open) .tab-job-street:not(:empty) + .tab-job-label,
body:has(#sidebarPanel.open) .tab-job-street:not(:empty) + .tab-job-label { display: none; }
.tab-icon { position: relative; display: flex; }
.tab .icon { transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1); }
.tab:active .icon { transform: scale(0.88); }
body:has(#dashboardOverlay.open) .tab[data-tab="dashboard"],
body:has(#sidebarPanel.open) .tab[data-tab="dashboard"],
body:not(:has(#dashboardOverlay.open)):not(:has(#sidebarPanel.open)) .tab[data-tab="job"] {
  color: var(--accent-pale);
  background: linear-gradient(180deg, rgba(var(--accent-glow-rgb),0.24), rgba(var(--accent-rgb),0.14));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-glow-rgb),0.35), 0 0 18px rgba(var(--glow),0.25);
}

/* What each tab knows. Jobs: how many need the inspector. This job: how much
   of the report is filled in, as a number (a part-filled ring read as a
   loading spinner that never finished), and a green tick when it's done. */
.tab-count {
  position: absolute; top: -6px; left: calc(100% - 6px);
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-hi); color: var(--accent-ink); font: 800 calc(10.5px * var(--ts)) 'Inter', sans-serif;
  box-shadow: 0 0 0 2px rgb(14,24,33);
}
.tab-progress {
  position: absolute; top: -7px; left: calc(100% - 8px);
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(14,24,33); color: var(--on-ink); font: 800 calc(9.5px * var(--ts)) 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 2px rgb(14,24,33);
}
.tab-progress-tick { display: none; width: 13px; height: 13px; fill: none; stroke: #FFFFFF; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-progress.done { padding: 0; width: 17px; background: var(--green-fill); box-shadow: 0 0 0 2px rgb(14,24,33); }
.tab-progress.done .tab-progress-pct { display: none; }
.tab-progress.done .tab-progress-tick { display: block; }
.tab-progress.empty { display: none; }

/* The mic: a round button in the middle of the dock. */
.tabbar-inner > .mic-dock {
  position: relative; left: auto; bottom: auto; transform: none; z-index: auto;
  flex: 0 0 auto; display: flex; justify-content: center; padding: 0 6px;
}
.tabbar .mic-fab { width: 58px; height: 58px; margin: 0; outline: none; }
.tabbar .mic-fab::after { display: none; }
.tabbar .mic-fab > svg { position: relative; z-index: 1; }
.mic-fab .mic-fab-close, .mic-fab .mic-fab-stop { display: none; }
.tabbar .mic-fab:hover { transform: none; }
.tabbar .mic-fab:active { transform: scale(0.94); }
body .tabbar .mic-fab:not(.recording):not(.open) { color: var(--accent-ink); }
body .tabbar .mic-fab:not(.recording):not(.open) svg { filter: none; }
body.large-touch .tabbar .mic-fab { width: 62px; height: 62px; }
/* Open, not listening: a quiet button with a down mark that closes the panel. */
.tabbar .mic-fab.open { background: rgba(255,255,255,0.12); color: var(--on-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.tabbar .mic-fab.open::before { display: none; }
.mic-fab.open .mic-fab-mic { display: none; }
.mic-fab.open .mic-fab-close { display: block; }
/* Listening: red, a Stop square, a ring pulsing out, and the time above. */
body[data-voice="listening"] .tabbar .mic-fab {
  background: linear-gradient(180deg, #F0524A 0%, #D7261E 100%); color: #FFFFFF;
  animation: dockListen 1.4s ease-out infinite;
}
body[data-voice="listening"] .tabbar .mic-fab::before { display: none; }
body[data-voice="listening"] .mic-fab .mic-fab-mic,
body[data-voice="listening"] .mic-fab .mic-fab-close { display: none; }
body[data-voice="listening"] .mic-fab .mic-fab-stop { display: block; }
.mic-fab-time {
  position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%);
  display: none; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  background: #D7261E; color: #FFFFFF; font: 700 calc(13px * var(--ts)) 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px rgba(215,38,30,0.45); pointer-events: none; white-space: nowrap;
}
.mic-fab-time::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; animation: dockDot 1s ease-in-out infinite; }
body[data-voice="listening"] .mic-fab-time { display: inline-flex; }
@keyframes dockListen { 0% { box-shadow: 0 6px 18px rgba(215,38,30,0.5), 0 0 0 0 rgba(240,82,74,0.55); } 100% { box-shadow: 0 6px 18px rgba(215,38,30,0.5), 0 0 0 14px rgba(240,82,74,0); } }
@keyframes dockDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Thinking: the AI is filling the report. */
body[data-voice="thinking"] .mic-fab:not(.open) .mic-fab-mic { animation: dockSpin 1.2s linear infinite; }
@keyframes dockSpin { to { transform: rotate(360deg); } }
.tabbar .mic-badge { top: -4px; right: 0; }
@media (prefers-reduced-motion: reduce) {
  body[data-voice="listening"] .tabbar .mic-fab, .mic-fab-time::before, body[data-voice="thinking"] .mic-fab .mic-fab-mic { animation: none; }
}
/* Locked for a pocket, the tabs are too; the mic stays live to stop. */
body.pocket-lock .tabbar .tab { pointer-events: none; opacity: 0.4; }
.voice-popover { bottom: calc(var(--tabbar-h) + 10px); max-height: calc(100dvh - var(--tabbar-h) - 26px - env(safe-area-inset-top, 0px)); }

/* Room for the dock under the screens, the menu and the dashboard. #app
   is a flex child that would otherwise grow under the dock. */
body:has(#app[style*="flex"]) #app { flex: none; height: calc(100vh - var(--tabbar-h)); height: calc(100dvh - var(--tabbar-h)); }
#quoteScreen.open { height: calc(100vh - var(--tabbar-h)); height: calc(100dvh - var(--tabbar-h)); }
.sidebar, .dashboard-overlay, .job-overlay { bottom: var(--tabbar-h); }
body:has(#app[style*="flex"]) .toast,
body:has(#quoteScreen.open) .toast { bottom: calc(var(--tabbar-h) + var(--mic-clearance)); }
.dashboard-panel-body, .drawer-scroll, .job-page-body { padding-bottom: 24px; }
.dash-detail-sheet { padding-bottom: 20px; }

/* ── PAGE TOP BARS ──
   Dashboard, Quote and Menu open under one kind of bar: the place's name
   and nothing to close, since the tabs below are the way between places.
   A menu page adds a back button to the menu's list. Ink like the report's
   top bar. */
.page-topbar {
  flex-shrink: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, calc(50% - 340px)) 8px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.page-topbar-title {
  flex: 1; min-width: 0; margin: 0;
  font: 700 calc(19px * var(--ts)) 'Space Grotesk', sans-serif; letter-spacing: -0.2px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body .page-topbar {
  background: var(--ink);
  border-bottom: 1px solid rgba(var(--glow),0.5);
  border-image: linear-gradient(90deg, rgba(var(--glow-hi),0.8), rgba(var(--glow),0.4) 45%, rgba(var(--glow),0)) 1;
}
body .page-topbar-title { color: var(--on-ink); }
body .page-topbar .drawer-back { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-ink); }

/* The account and settings button on the Jobs bar. */
.topbar-account {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 4px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2); cursor: pointer;
}
.topbar-account-initials {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent2)); color: #fff; font: 800 calc(12px * var(--ts)) 'Inter', sans-serif;
}
body .page-topbar .topbar-account { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-ink); }
/* This job's New job: the one place a new job starts, kept in sight
   rather than at the foot of Job details. */
.topbar-new {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 11px; border-radius: 22px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: 650 calc(14px * var(--ts)) 'Inter', sans-serif; cursor: pointer;
}
.topbar-new svg { color: var(--accent2); }
.topbar-new:active { transform: scale(0.97); }
body .page-topbar .topbar-new { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-ink); }
body .page-topbar .topbar-new svg { color: var(--accent-glow); }

/* The dashboard and the menu's list sit on the backdrop like the report
   and the quote, white cards on ink, so the four places read as one app.
   A menu page keeps its light page, as its forms sit straight on it. */
body .dashboard-overlay,
body .job-overlay,
body .sidebar:not(.on-page) { background: var(--backdrop); background-color: #070B10; color-scheme: dark; }
body .dash-hero-date { color: var(--accent-glow); }
body .dash-hero-title { color: var(--on-ink); }
body .dash-hero-title b { color: var(--pink); }
body .dash-hero-more, body .dash-parked { color: var(--on-ink2); }
body .dash-hero-more i { color: var(--on-ink2); }
body .dash-hero-more button { color: var(--pink); }
body .dash-part { color: var(--accent-glow); }
body .dash-parked .link-btn { color: var(--accent-glow); }
body .dash-tabs { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
body .dash-tab { color: var(--on-ink2); }
body .dash-tab:hover { color: var(--on-ink); }
body .dash-tab.active { color: var(--on-ink); }
body .dash-tab span { background: rgba(255,255,255,0.1); color: var(--on-ink2); }
body .dash-tab.empty:not(.active) span { background: none; }
body .dash-tab.active span { background: rgba(var(--accent-glow-rgb),0.2); color: var(--accent-glow); }
body .dash-tabs.searching .dash-tab.active { color: var(--on-ink2); }
body .dash-tab-line {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(var(--accent-glow-rgb),0.18), 0 6px 16px rgba(0,0,0,0.35);
}
/* Search is the quiet one on the page: glass, not a white slab, so it
   never outshines the headline or the jobs. It lights when typed in. */
body .dash-search { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); box-shadow: none; }
body .dash-search:hover { border-color: rgba(255,255,255,0.14); }
body .dash-search:focus-within { background: rgba(255,255,255,0.07); border-color: rgba(var(--accent-glow-rgb),0.6); box-shadow: 0 0 0 4px rgba(var(--accent-glow-rgb),0.12); }
body .dash-search input { color: var(--on-ink); }
body .dash-search input::placeholder { color: var(--on-ink2); }
/* The Jobs bar melts into the page, so the headline under it is what the
   eye meets first; New job carries a touch of the accent as the bar's
   one action, the account button stays neutral. */
body .dashboard-panel-header { background: transparent; border-bottom-color: transparent; border-image: none; }
body .dashboard-panel-header .topbar-new { background: rgba(var(--accent-glow-rgb),0.1); border-color: rgba(var(--accent-glow-rgb),0.32); }
body .dashboard-panel-header .topbar-new:hover { background: rgba(var(--accent-glow-rgb),0.16); }
/* A faint glow behind the headline gives the top of the page its lift. */
body .dash-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 -20px;
  background: radial-gradient(34% 46% at 26% 52%, rgba(var(--glow),0.2), transparent);
}
body .dash-none,
body .dash-search,
body .sidebar:not(.on-page) .drawer-group-label { color: var(--accent-glow); }
body .sidebar:not(.on-page) .drawer-group-label::after { background: linear-gradient(90deg, rgba(var(--glow-hi),0.6), rgba(var(--glow-hi),0)); }
body .sidebar:not(.on-page) .drawer-legal,
body .sidebar:not(.on-page) .drawer-legal a { color: var(--on-ink2); }

/* ── MENU: ACCOUNT ── who's signed in, at the top of the menu. The card
   is the way in to Your sign-in. */
.menu-account {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 4px 0 18px; padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,40,80,0.06);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.menu-account-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent2)); color: #fff;
  font: 800 calc(15px * var(--ts)) 'Inter', sans-serif;
}
.menu-account-text { flex: 1; min-width: 0; }
.menu-account-text > span { display: block; }
.menu-account .profile-dropdown-name { font-size: calc(15px * var(--ts)); }
.menu-account .profile-dropdown-business { margin-top: 4px; }
.menu-account-go { flex: none; font-size: calc(12px * var(--ts)); color: var(--text3); }
.menu-account .panel-toggle-chevron { flex: none; color: var(--text3); }
.sidebar.on-page .menu-account { display: none; }
/* Sign out: the last thing in the menu, and quiet. */
.drawer-signout {
  display: block; margin: 18px auto 0; min-height: 44px; padding: 0 18px;
  border: none; background: none; cursor: pointer;
  font: 600 calc(13px * var(--ts)) 'Inter', sans-serif; color: var(--text2);
  text-decoration: underline; text-underline-offset: 3px;
}
body .sidebar:not(.on-page) .drawer-signout { color: var(--on-ink2); }
/* Your sign-in (Menu › the card on top) */
.signin-line { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.signin-line .job-input { flex: 1; min-width: 0; }
.signin-email { margin: 6px 0 2px; font-size: calc(14px * var(--ts)); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.signin-pass { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.signin-pass .settings-row-title { margin: 6px 0 0; }
.signin-pass .job-input { padding-right: 76px; }
.signin-pass .auth-error:empty { margin-top: 0; }
.signin-pass .settings-primary-btn { align-self: flex-start; margin-top: 6px; }
#signinPanel .settings-row-desc a { color: var(--accent2); font-weight: 600; }

/* Delete sits quietly at the foot of the job sheet. */
.dash-detail-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border); }
.dash-detail-delete {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  border: none; background: none; cursor: pointer;
  color: var(--risk); font: 600 calc(13px * var(--ts)) 'Inter', sans-serif;
}

/* Generate PDF sits at the foot of the report's sign-off page; Send stays in the menu. */
/* Finish: the next steps once the report is done. The quote, then Send
   (the main action), then the report PDF on its own as a quiet link. */
.finish-next { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px 26px; }
.finish-next-label { margin: 6px 2px 2px; font-size: calc(11px * var(--ts)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent2); }
.finish-next-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.finish-next-btn:active { transform: scale(0.98); }
.finish-next-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent2);
}
.finish-next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.finish-next-text b { font-size: calc(15.5px * var(--ts)); font-weight: 700; letter-spacing: -0.01em; }
.finish-next-text small { font-size: calc(12.5px * var(--ts)); line-height: 1.35; color: var(--text3); }
.finish-next-chev { flex-shrink: 0; color: var(--text3); }
.finish-next-btn.primary { border-color: transparent; background: var(--accent-grad); color: #FFFFFF; box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.35), inset 0 1px 0 rgba(255,255,255,0.3); }
.finish-next-btn.primary .finish-next-icon { background: rgba(255,255,255,0.2); color: #FFFFFF; }
.finish-next-btn.primary small, .finish-next-btn.primary .finish-next-chev { color: rgba(255,255,255,0.88); }
.finish-next-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.finish-next-pdf {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: none; background: none; font: 600 calc(13.5px * var(--ts)) 'Inter', sans-serif; color: var(--accent2); cursor: pointer;
}
.finish-next-pdf:disabled { opacity: 0.4; cursor: not-allowed; }
/* Report done: the tick that replaces the Done button once it's tapped. */
.finish-done { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--green-edge); background: var(--green-wash); color: var(--green); }
.finish-done-tick { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #FFFFFF; }
.finish-done-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.finish-done-text b { font-size: calc(15.5px * var(--ts)); font-weight: 700; }
.finish-done-text small { font-size: calc(12.5px * var(--ts)); color: var(--text2); }
.finish-done .link-btn { flex: none; font-size: calc(12.5px * var(--ts)); }
.finish-resend { align-self: center; font-size: calc(13px * var(--ts)); }
/* What the report is still missing, above Report done: the check sheet's
   own amber box (.send-review-gaps), so the two read as one list. */
.finish-gaps { margin-bottom: 4px; }

/* Walking that list (SHOW ME in js/app/editing.js): a slim bar under the
   report, above the dock, with how many are left and Next. */
.blank-walk {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 6px 12px 4px; padding: 5px 5px 5px 16px;
  border-radius: 99px; border: 1px solid rgba(212,146,10,0.45); background: #FDF7EA; box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.blank-walk-text { flex: 1; min-width: 0; font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--yellow-text); }
.blank-walk-next {
  flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--border2); border-radius: 99px; background: var(--surface);
  font-family: inherit; font-size: calc(13.5px * var(--ts)); font-weight: 700; color: var(--accent2); cursor: pointer;
}
.blank-walk-close { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--yellow-text); cursor: pointer; }

/* The treatment certificate on This job (its Next step card, then under Treatment), and its Email button lit when arriving from the Jobs list. */
.qp-cert { margin-top: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: var(--surface); }
.qp-cert.sent { border-color: var(--border); }
.qp-cert-title { font-size: calc(13.5px * var(--ts)); font-weight: 700; color: var(--text); }
.qp-cert-text { margin: 3px 0 0; font-size: calc(13px * var(--ts)); line-height: 1.5; color: var(--text2); }
/* What the certificate would go without, above its Email button. */
.qp-cert-gaps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(212,146,10,0.45); background: #FDF7EA; font-size: calc(13px * var(--ts)); line-height: 1.45; color: var(--yellow-text);
}
.qp-cert-gaps span { flex: 1 1 60%; min-width: 0; }
.qp-cert-gaps .quote-link-btn { flex: none; min-height: 36px; }
.qp-cert .quote-step-actions, .qp-cert .qp-cert-actions { margin-top: 10px; }
/* Email and PDF are one row of buttons the same height. */
.qp-cert .qp-cert-actions { align-items: stretch; }
.qp-cert-actions .qp-cert-email { flex: 1 1 auto; }
/* Given in person: a quiet line under the buttons, still a full-size tap. */
.qp-cert-handed { display: block; min-height: 44px; margin: 2px 0 -8px; padding: 0; border: none; background: none; cursor: pointer;
  font: 500 calc(12.5px * var(--ts)) 'Inter', sans-serif; color: var(--text3); text-align: left; }
.qp-cert-handed span { font-weight: 650; color: var(--accent2); }
.qp-cert-email.flash, .job-way-link.flash, .job-signed-email.flash { animation: qp-flash 0.8s ease-in-out 3; }
@keyframes qp-flash { 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.3); } }
@media (prefers-reduced-motion: reduce) { .qp-cert-email.flash, .job-way-link.flash, .job-signed-email.flash { animation: none; } }

/* Two fields that belong together (the termite system and its name),
   joined down the left by the same side line as the job sheet. */
.field-pair { display: flex; flex-direction: column; gap: 14px; padding-left: 28px; }
.field-pair > .field { position: relative; }
.field-pair > .field::before {
  content: ''; position: absolute; left: -28px; top: 2px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 99px; border: 2px solid var(--accent); background: var(--surface);
}
.field-pair > .field:first-child::before { background: var(--accent); }
.field-pair > .field:first-child::after {
  content: ''; position: absolute; left: -22px; top: 18px; bottom: -16px; width: 2px;
  border-radius: 2px; background: rgba(var(--accent-rgb), 0.45);
}
/* Follow-ups under a question: a What and Where side by side, or a small
   stack (water leaks and where). Each takes the hollow dot, and the line
   stops when nothing is showing under the question. */
.field-pair > .field-pair-row,
.field-pair > .fp-follow { position: relative; }
.field-pair > .field-pair-row::before,
.field-pair > .fp-follow::before {
  content: ''; position: absolute; left: -28px; top: 2px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 99px; border: 2px solid var(--accent); background: var(--surface);
}
.field-pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fp-follow { display: flex; flex-direction: column; gap: 14px; }
.field-pair > :first-child:has(+ [hidden], + [style*="display: none"], + [style*="display:none"])::after { display: none; }

/* Ready-made recommendations under Other Recommendations: tap to add. */
.rec-lines { margin: 4px 14px 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.rec-lines-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.rec-lines-head span { font-size: calc(10.5px * var(--ts)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.rec-lines-head small { font-size: calc(12px * var(--ts)); font-weight: 600; color: var(--text3); }
.rec-lines-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.rec-line {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); text-align: left; line-height: 1.25;
  background: var(--surface); color: var(--text2); font: inherit; font-size: calc(12.5px * var(--ts)); font-weight: 550; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rec-line::before { content: '+'; flex: none; width: 14px; margin-right: 4px; font-weight: 700; color: var(--accent2); }
.rec-line.on { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent2); font-weight: 650; }
.rec-line.on::before { content: '✓'; }
.rec-line-more { border-style: dashed; color: var(--text2); }  /* the lines that don't fit this report */
.rec-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rec-lines-added { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.rec-lines-added li { position: relative; padding-left: 16px; font-size: calc(13px * var(--ts)); line-height: 1.5; color: var(--text2); }
.rec-lines-added li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px; border-radius: 99px; background: var(--accent); }

/* ── REPORT STEPS ──
   Six steps that fit across a phone without sliding: the dot sits over the
   label. The strip still scrolls if larger text makes it wider. */
/* On a computer the strip sits over the report's column. */
.section-tabs { gap: 2px; padding: 6px max(8px, calc(50% - 344px)); }
.section-tab {
  flex: 1 1 auto; min-width: 0;
  flex-direction: column; justify-content: center; gap: 4px;
  padding: 7px 6px; font-size: calc(11.5px * var(--ts)); letter-spacing: -0.1px;
}
.section-tab .tab-label { line-height: 1.15; }
@media (min-width: 600px) {
  .section-tab { flex-direction: row; gap: 6px; padding: 10px 12px; font-size: calc(13px * var(--ts)); }
}
body.large-touch .section-tab { flex: 0 0 auto; }
/* The in-app numbers read oddly (the first tab is 3.); the PDF keeps them. */
.report-section .section-header h3 .sec-num { display: none; }
/* The agreement banner shows where it's acted on, before the inspection.
   Finish lists an unsigned agreement with what else is missing. */
#reportBody:not([data-step="property"]) > #agreementBanner { display: none !important; }
/* One filled button. On Finish the done banner would only repeat Finish's
   own next step. On Property, an agreement still to sign comes first: its
   button is the filled one, and the done banner's goes quiet. */
#reportBody[data-step="finish"] > #reportDoneBanner { display: none !important; }
body #reportBody[data-step="property"]:has(> #agreementBanner:not([hidden]):not(.waiting)) #reportDoneBannerBtn {
  background: transparent; border-color: currentColor; color: inherit; box-shadow: none;
}
/* The Property step's Job details card: back to the address and booking. */
.report-job-card {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 12px 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--card-edge); background: var(--surface); color: var(--text);
  box-shadow: 0 6px 20px rgba(13,40,60,0.08); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.report-job-card:active { transform: scale(0.99); }
.report-job-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#reportBody:not([data-step="property"]) > #reportJobCard { display: none; }
.report-job-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.report-job-title { font: 700 calc(15px * var(--ts)) 'Space Grotesk', sans-serif; letter-spacing: -0.2px; }
.report-job-sub { font-size: calc(12.5px * var(--ts)); line-height: 1.4; color: var(--text3); white-space: pre-line; overflow-wrap: anywhere; }
.report-job-edit { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border2); font-size: calc(13px * var(--ts)); font-weight: 700; color: var(--accent2); }

/* The report's top row: back to This job, the address, the ring. */
body header .header-back { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-ink); }
.header-job { font-size: calc(14px * var(--ts)); }
/* The header's address opens the job's details. */
button.header-job { border: none; background: none; padding: 0; text-align: left; font-family: inherit; cursor: pointer; }
button.header-job.has-job { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 3px; }

/* DATE CHIPS: today, tomorrow and the next few days under the date. */
.date-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 12px; padding: 2px 0; }
.date-chips::-webkit-scrollbar { display: none; }
.date-chips:empty { display: none; }
.date-chip {
  flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text); font: 600 calc(13px * var(--ts)) 'Inter', sans-serif; cursor: pointer; white-space: nowrap;
}
.date-chip.on { border-color: transparent; background: var(--accent-grad); color: #FFFFFF; }

/* Report done, not sent yet: the line at the top of every step. */
body .report-done-banner .agreement-banner-btn { background: var(--accent2); border-color: var(--accent2); color: #FFFFFF; box-shadow: none; }

/* The job page's Delete, at the very bottom. */
.job-delete { margin: 18px 4px 0; }

/* BACK: the arrow that follows a swipe in from the left edge (home-screen app). */
.edge-back {
  position: fixed; left: 0; z-index: 1000; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: var(--surface); color: var(--text2); border: 1px solid var(--border2); box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: translateX(calc(-44px + var(--pull, 0) * 60px)); opacity: calc(0.3 + var(--pull, 0) * 0.7);
}
.edge-back.ready { background: var(--accent2); border-color: var(--accent2); color: #FFFFFF; }



/* Next: always there, so the steps can be walked in order; quieter until
   the section is complete. */
.next-section-btn { width: auto; margin: 4px 14px 14px; }
.next-section-btn.pending { background: transparent; }
body .next-section-btn.pending {
  background: var(--surface); color: var(--accent2); text-shadow: none;
  border: 1px solid rgba(var(--accent-rgb), 0.45); box-shadow: none;
}
body .next-section-btn.pending:hover { background: rgba(var(--accent-rgb), 0.08); }

/* ── QUESTION GROUPS ──
   Long steps fold into groups. The header counts what's answered; folded,
   it shows the answers (or, for conducive conditions, what was found). */
.fgroup { border-top: 1px solid var(--border); }
.section-header + .fgroup, .nothing-found-btn + .fgroup { border-top: none; }
.fgroup-head {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; min-height: 58px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fgroup-head::-webkit-details-marker { display: none; }
.fgroup-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.fgroup-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fgroup-title { font: 700 calc(15px * var(--ts)) 'Space Grotesk', sans-serif; letter-spacing: -0.2px; color: var(--text); }
.fgroup-sub {
  font-size: calc(12.5px * var(--ts)); line-height: 1.4; color: var(--text3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fgroup-sub.concern { color: var(--yellow-text); font-weight: 600; }
.fgroup[open] .fgroup-sub { display: none; }
.fgroup-count {
  flex-shrink: 0; font-size: calc(11px * var(--ts)); font-weight: 600; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--border2); color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fgroup-started .fgroup-count { background: rgba(255,182,72,0.1); color: var(--yellow-text); border-color: rgba(255,182,72,0.3); }
.fgroup-done .fgroup-count { background: rgba(var(--green-rgb),0.1); color: var(--green); border-color: rgba(var(--green-rgb),0.3); }
.fgroup-done .fgroup-count::before { content: '✓ '; }
.fgroup-count:empty { display: none; }
.fgroup-chev { flex-shrink: 0; color: var(--text3); transition: transform 0.2s ease; }
/* Large text on a phone: the count goes under the title, so a short title
   isn't run over by it. */
@media (max-width: 459px) {
  body.text-size-large .fgroup-head, body.text-size-xl .fgroup-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; }
  body.text-size-large .fgroup-head > .fgroup-icon, body.text-size-xl .fgroup-head > .fgroup-icon { grid-row: 1 / span 2; }
  body.text-size-large .fgroup-head > .fgroup-text, body.text-size-xl .fgroup-head > .fgroup-text { grid-column: 2; grid-row: 1; }
  body.text-size-large .fgroup-head > .fgroup-count, body.text-size-xl .fgroup-head > .fgroup-count { grid-column: 2; grid-row: 2; justify-self: start; }
  body.text-size-large .fgroup-head > .fgroup-chev, body.text-size-xl .fgroup-head > .fgroup-chev { grid-column: 3; grid-row: 1 / span 2; }
}
.fgroup[open] .fgroup-chev { transform: rotate(180deg); }
.fgroup > .section-fields { padding-top: 2px; }
.fgroup > :last-child { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .fgroup-chev { transition: none; } }
.fgroup-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(var(--accent-rgb),0.12); color: var(--accent2);
}

/* Grouped steps: each group is a card of its own on a soft panel, with a
   tinted header, so the groups read apart at a glance. */
.report-section.grouped { background: var(--surface2); }
body .report-section.grouped > .section-header { background-color: var(--surface); }
.report-section.grouped > details.fgroup {
  margin: 10px 8px 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(13,40,60,0.07);
}
.report-section.grouped > details.fgroup > .fgroup-head {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.07), rgba(var(--accent-rgb),0.015));
}
.report-section.grouped > details.fgroup[open] > .fgroup-head { border-bottom: 1px solid var(--border); }
.report-section.grouped > details.fgroup > .fgroup-head { padding: 12px 12px 12px 10px; }
.report-section.grouped > details.fgroup > .section-fields { padding: 14px 12px; }
.report-section.grouped > details.fgroup .section-fields > .section-photo-widget { margin: 0; }
.report-section.grouped > details.fgroup > .section-photo-widget { margin: 2px 12px 4px; }
.report-section.grouped > .section-photo-widget { margin: 10px 8px 0; background: var(--surface); }
.report-section.grouped > .next-section-btn { margin-top: 14px; }

/* Sub-headings inside a group: a blue bullet, the topic, a fading rule. */
.fsub {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 22px; margin-top: 8px;
  font-size: calc(11.5px * var(--ts)); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text2);
}
.section-fields > .fsub:first-child { margin-top: 0; }
.fsub::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.fsub::after { content: ''; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), rgba(0,0,0,0)); }
.fsub .fsub-action {
  order: 2; margin-left: auto; min-height: 44px; padding: 0 2px; font-size: calc(13px * var(--ts)); font-weight: 600;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
}
.fsub .fsub-action:disabled { opacity: 0.6; }
/* A line under a group's header on what it covers. */
.fgroup-hint { margin: 12px 12px 0; font-size: calc(12.5px * var(--ts)); line-height: 1.45; color: var(--text3); }
.fgroup-hint + .section-fields { padding-top: 10px; }
.report-section.grouped > details.fgroup > .findings-list { padding: 10px 8px 2px; }
.report-section.grouped > details.fgroup > .findings-none { margin-left: 8px; margin-right: 8px; width: auto; }
.report-section.grouped > details.fgroup > .findings-add-btn { margin-left: 8px; margin-right: 8px; width: calc(100% - 16px); }
.report-section.grouped > details.fgroup > .rec-lines { margin: 12px 12px 0; }
.report-section.grouped > details.fgroup > .warn-note { margin: 0 12px 14px; }
/* Sign-off: inspector details side by side, then the signature. */
.signoff-grid .job-input { width: 100%; }
.signoff-hint { margin: -4px 0 0; font-size: calc(11.5px * var(--ts)); line-height: 1.45; color: var(--text3); }

/* Other photos are optional, so they carry no status. */
#sts-photos { display: none; }

/* Say it instead: speak a sheet instead of typing it (SAY IT INSTEAD in js/app/).
   One quiet row: a small mic disc, the words, and the example under them
   in grey. The whole row is the button (its ::after covers the box). */
.sheet-voice { position: relative; margin: 10px 0 12px; padding: 6px 12px 8px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color 0.2s, background-color 0.2s; }
.sheet-voice:hover { border-color: var(--border2); }
.sheet-voice-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: calc(14px * var(--ts)); font-weight: 650; text-align: left; cursor: pointer; }
.sheet-voice-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.sheet-voice-btn:focus-visible { outline: none; }
.sheet-voice:has(.sheet-voice-btn:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); }
.sheet-voice-btn svg { flex: none; width: 16px; height: 16px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: rgba(var(--accent-rgb), 0.12); color: var(--accent2); transition: background 0.2s, color 0.2s; }
.sheet-voice-btn:disabled { opacity: 1; cursor: default; color: var(--text2); }
.sheet-voice-hint { margin: -4px 0 0 46px; font-size: calc(12px * var(--ts)); line-height: 1.45; color: var(--text3);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sheet-voice-text { margin: 2px 0 2px 46px; font-size: calc(13px * var(--ts)); line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.sheet-voice[data-state="listening"] { border-color: rgba(215,38,30,0.45); }
.sheet-voice[data-state="listening"] .sheet-voice-btn svg { background: #D7261E; color: #fff; animation: sheetVoicePulse 1.4s ease-in-out infinite; }
.sheet-voice[data-state="hearing"] .sheet-voice-btn svg, .sheet-voice[data-state="filling"] .sheet-voice-btn svg { background: var(--accent-grad, var(--accent)); color: #fff; }
@keyframes sheetVoicePulse { 50% { box-shadow: 0 0 0 6px rgba(215,38,30,0.18); } }
.sheet-voice[data-state="listening"] .sheet-voice-hint, .sheet-voice[data-state="hearing"] .sheet-voice-hint, .sheet-voice[data-state="filling"] .sheet-voice-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .sheet-voice[data-state="listening"] .sheet-voice-btn svg { animation: none; } }

/* ── LAST VISIT: an address inspected before ── */
body .agreement-banner.last-visit-banner { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent2); box-shadow: none; }
.last-visit-skip { flex-shrink: 0; padding: 0 6px; min-height: 32px; font-size: calc(12px * var(--ts)); font-weight: 700; color: inherit; opacity: 0.8; }
body .agreement-banner.last-visit-banner .agreement-banner-btn { background: var(--accent2); border-color: var(--accent2); color: #fff; box-shadow: none; }
.last-visit-rows { display: flex; flex-direction: column; gap: 8px; }
.last-visit-row { padding: 10px 12px; border-radius: 10px; background: var(--bg); border-left: 3px solid transparent; }
.last-visit-row.changed { border-left-color: var(--yellow); }
.last-visit-label { font-size: calc(12px * var(--ts)); font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.last-visit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: calc(14px * var(--ts)); line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.last-visit-cols small { display: block; font-size: calc(11px * var(--ts)); color: var(--text2); font-weight: 600; }
.last-visit-row.changed .last-visit-cols > div:last-child { font-weight: 700; }

/* Billing: how many inspectors on Team and Business */
.seat-pick { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: calc(12.5px * var(--ts)); color: var(--text2); }
.seat-pick label { font-weight: 600; }
.seat-pick .seat-input { width: 76px; min-height: 40px; padding: 8px 10px; text-align: center; }
.seat-total { color: var(--text); font-weight: 600; }

/* Your team */
.team-places { padding: 4px 0 8px; font-size: calc(12.5px * var(--ts)); color: var(--text2); }
.team-list { border-top: 1px solid var(--border); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.team-row-text { flex: 1; min-width: 0; }
.team-row-name { font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.team-row-sub { font-size: calc(11.5px * var(--ts)); color: var(--text3); overflow-wrap: anywhere; }
.team-row-pending .team-row-name { color: var(--text2); }
.team-row-btn { flex: none; font-size: calc(12.5px * var(--ts)); }
.team-row-btn + .team-row-btn { margin-left: 4px; }
.team-invite { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.team-invite .job-input { flex: 1; min-width: 0; }
.team-help { padding: 4px 0 8px; }
.team-more { margin-top: 4px; }

/* ── SMALL PHONES ── at 320–359 px the dashboard's four filters fit
   without scrolling off, and the quote's total keeps to one line beside
   an icon-only PDF button. */
@media (max-width: 359px) {
  .dashboard-panel-body { padding-left: 14px; padding-right: 14px; }
  .dash-tabs { gap: 0; }
  .dash-tab { padding: 0 6px; gap: 4px; font-size: calc(13px * var(--ts)); }
  .dash-tab span { min-width: 18px; height: 18px; padding: 0 5px; font-size: calc(11px * var(--ts)); }
  .quote-bar-label { white-space: nowrap; }
  .quote-bar .quote-bar-pdf { width: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .quote-bar .quote-bar-pdf .icon { width: 18px; height: 18px; }
  .quote-bar-send { padding: 0 14px; }
}


/* ── THIS JOB ──
   The open job's page over the report: the address, the next step, every
   stage as a numbered line (each opens its document), then the job's
   details. A readable column on wide screens. */
.job-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 220;
  background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.job-overlay.open { opacity: 1; pointer-events: auto; }
.job-page { height: 100%; display: flex; flex-direction: column; transform: translateY(14px); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.job-overlay.open .job-page { transform: none; }
.job-page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 max(16px, calc(50% - 340px)); }
.job-hero-addr { margin: 0; font: 700 calc(26px * var(--ts))/1.15 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: var(--text); }
.job-hero-sub { margin: 6px 0 0; font-size: calc(15px * var(--ts)); color: var(--text2); }
.job-next { background: var(--surface); border: none; border-top: 3px solid var(--accent); box-shadow: 0 14px 36px rgba(0,0,0,0.25); }
.job-next.waiting { background: var(--surface); border-top-color: #F0B43C; }
.job-next.done { background: var(--surface); border-top-color: var(--border2); }
.job-section-head { margin: 24px 2px 10px; font-size: calc(11px * var(--ts)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.job-pdf-list { margin: 0 0 12px; padding: 0 0 0 20px; }
.job-pdf-list li { padding: 5px 0; font-size: calc(14px * var(--ts)); color: var(--text); }
.job-pdf-list li strong { display: block; font-weight: 650; }
.job-pdf-list li span { display: block; font-size: calc(12.5px * var(--ts)); color: var(--text3); }
.job-pdf-note { margin: 0 0 12px; font-size: calc(13px * var(--ts)); color: var(--text3); }
.job-next .dash-detail-links { margin-top: 10px; }
.job-page #jobPanel > .panel-label { display: none; }
.job-page #jobPanel { border-radius: 16px; margin-bottom: 8px; }
.job-page .job-panel-body { padding: 14px 16px 6px; }
.job-page .sync-status { padding-left: 16px; padding-right: 16px; }
.job-page .sync-status { padding-bottom: 14px; }
body .job-hero-addr { color: var(--on-ink); }
body .job-hero-sub,
body .job-section-head { color: var(--on-ink2); }
body .job-section-head { color: var(--accent-glow); }
body .job-page #jobPanel { border-color: transparent; box-shadow: 0 14px 36px rgba(0,0,0,0.35); }

/* The job page's look: a hero with what the job is, how far along it is
   and one-tap Call, Email and Directions; the next step with its
   document's icon; each step as a card with an icon tile in the colour of
   where it's up to (green done, blue next, grey to come), joined by a
   short line, Job details first (they come before the agreement and the
   report), opening in place; then the job PDF. */
.job-hero { padding: 18px 0 6px; }
.job-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.job-hero-top .dash-detail-chip { margin: 0; }
.job-hero-count { font-size: calc(12.5px * var(--ts)); font-weight: 650; color: var(--text3); }
.job-hero-eyebrow { margin-bottom: 6px; font-size: calc(11.5px * var(--ts)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent2); }
.job-progress { display: flex; gap: 5px; margin-top: 16px; }
.job-progress i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface3); }
.job-progress i.done { background: var(--green-fill); }
.job-progress i.now { background: var(--accent); }
.job-progress i.bad { background: var(--risk); }
.job-progress i.skip { background: var(--border); opacity: 0.6; }
.job-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.job-act {
  flex: 1 1 0; min-width: 96px; min-height: 48px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font: 650 calc(14px * var(--ts)) 'Inter', sans-serif; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.job-act svg { flex: none; color: var(--accent2); }
.job-act:active { transform: scale(0.97); }
.job-act:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }

.job-tile {
  flex: none; position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text3);
}
.job-tile.done { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); }
.job-tile.now { background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35); }
.job-tile.wait { background: rgba(255,182,72,0.16); border-color: rgba(240,168,30,0.45); color: var(--yellow-text); }
.job-tile.bad { background: rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.3); color: var(--risk); }
.job-tile.skip { background: transparent; border-style: dashed; }
.job-tile-tick {
  position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; border-radius: 99px; display: grid; place-items: center;
  background: var(--green-fill); color: #fff; border: 2px solid var(--surface);
}

.job-next-head { display: flex; align-items: center; gap: 14px; }
.job-next .job-tile { width: 48px; height: 48px; border-radius: 14px; }
.job-next .dash-next-title { margin-top: 3px; }
.job-next.done { border-top-color: var(--green-fill); }
.job-next.waiting .job-tile.now { background: linear-gradient(180deg, #FFC65C 0%, #F0A81E 100%); color: #3A2600; box-shadow: 0 6px 16px rgba(240,168,30,0.35); }

.job-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.job-steps li { position: relative; }
.job-steps li:not(:last-child)::after { content: ''; position: absolute; left: 33px; top: 100%; width: 2px; height: 10px; background: var(--border2); }
.job-steps li.done:not(:last-child)::after { background: var(--green-fill); }
.job-step, .job-details-head {
  width: 100%; min-height: 72px; padding: 12px 14px 12px 12px; display: flex; align-items: center; gap: 14px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.job-steps li.now .job-step { border: 2px solid var(--accent); padding: 11px 13px 11px 11px; }
.job-steps li.skip .job-step { opacity: 0.72; }
.job-step:active { transform: scale(0.99); background: var(--surface2); }
.job-step:focus-visible, .job-details-head:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.45); outline-offset: 2px; }
.job-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.job-step-label { display: flex; align-items: center; gap: 8px; font-size: calc(15.5px * var(--ts)); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.job-step-flag { padding: 3px 7px; border-radius: 6px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent2); font-size: calc(10.5px * var(--ts)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.job-step-text { font-size: calc(13.5px * var(--ts)); font-weight: 500; line-height: 1.35; color: var(--text3); }
.job-steps li.done .job-step-text { color: var(--green); }
.job-steps li.now .job-step-text { color: var(--text2); }
.job-steps li.bad .job-step-text { color: var(--risk); }
.job-step-bar { display: block; height: 6px; margin-top: 5px; border-radius: 99px; background: var(--surface3); overflow: hidden; }
.job-step-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-grad); }
.job-step-chev { flex: none; color: var(--text3); transition: transform 0.2s; }

.job-pdf { margin-top: 24px; padding: 12px 14px 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.job-pdf-head { display: flex; align-items: center; gap: 14px; min-height: 46px; }
.job-pdf-head + * { margin-top: 12px; }
.job-pdf-list { margin-left: 58px; padding: 0; list-style: none; }
.job-pdf-list li { border-top: 1px solid var(--border); }
.job-pdf .dash-detail-links { margin-left: 58px; }
.job-pdf .dash-detail-links button { min-height: 48px; }
.job-pdf .dash-detail-links button.primary { border-color: transparent; background: var(--accent-grad); color: #fff; }
.job-pdf.made .job-step-label { color: var(--green); }
.job-pdf.amending { border-color: #F0B43C; }
.job-pdf .dash-detail-links { flex-wrap: wrap; }
/* Amend is the quiet one of the row. */
.job-pdf .dash-detail-links .job-pdf-amend { flex: 0 0 auto; padding: 0 16px; border-color: transparent; background: none; color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }
/* Finalise as the next step: Email, Save, then what's in it. */
.job-next .job-pdf-more { margin: 6px 0 -8px; }
.job-next .job-pdf-btn:disabled, .job-pdf .job-pdf-btn:disabled { opacity: 0.6; }
/* What the job skipped: quiet lines under its steps, each with the one
   thing that can still be done about it. */
.job-skipped { margin: 12px 4px 0; }
.job-skipped p { margin: 0; padding: 4px 0; font-size: calc(13.5px * var(--ts)); line-height: 1.45; color: var(--text3); }
.job-skipped button { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body .job-skipped p { color: var(--on-ink2); }
body .job-skipped button { color: var(--accent-glow); }
/* What went in, folded under the buttons. */
.job-pdf-more { margin: 4px 0 -6px 58px; }
.job-pdf-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
  font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--text3); }
.job-pdf-more > summary::-webkit-details-marker { display: none; }
.job-pdf-more > summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
.job-pdf-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.job-pdf-more .job-pdf-list { margin: 0 0 8px; }
.job-pdf-more .job-pdf-note { margin: 0 0 12px; font-size: calc(12.5px * var(--ts)); }

.job-details { margin-top: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.job-details-head { list-style: none; border: none; border-radius: 0; background: transparent; }
.job-details-head::-webkit-details-marker { display: none; }
.job-details[open] .job-details-head .job-step-chev { transform: rotate(90deg); }
body .job-page .job-details #jobPanel:not(.menu-page-active) { margin: 0; border: none; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.job-steps .job-details { margin-top: 0; }
/* Steps kept on the page (the client's answer, the treatment, bait visits)
   open in place like Job details: what was recorded, and what can be done
   about it. */
.job-fold[open] .job-details-head .job-step-chev { transform: rotate(90deg); }
.job-fold-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.job-fold-text { margin: 0; font-size: calc(14px * var(--ts)); line-height: 1.5; color: var(--text2); }
.job-fold-text.good strong { color: var(--green); }
.job-fold-text.bad strong { color: var(--risk); }
.job-fold-text.warn strong { color: var(--yellow-text); }
.job-fold-body .qp-links { margin-top: 0; }
.job-fold-body .qp-cert, .job-fold-body .bait-card { margin-top: 4px; }
.job-steps li.now > .job-fold { border: 2px solid var(--accent); }
body .job-page .job-steps li.now > .job-fold { border-color: var(--accent-hi); }
/* A step that can't be started yet is a line, not a button. */
.job-step-still { box-sizing: border-box; cursor: default; }
/* The Next step card does a step that's done on this page: the client's
   answer, the certificate. */
.job-next .quote-answer-btns { margin-top: 14px; }
.job-next .quote-answer-btns .quote-btn { height: 50px; border-radius: 14px; font-size: calc(15px * var(--ts)); }
.job-next .qp-links { margin-top: 6px; }
.job-next .qp-cert { margin-top: 14px; }

/* On the ink backdrop: white cards with a shadow, the
   hero's text and buttons light. */
body .job-hero-eyebrow { color: var(--accent-glow); }
body .job-hero-count { color: var(--on-ink2); }
body .job-progress i { background: rgba(255,255,255,0.14); }
body .job-progress i.done { background: var(--green-fill); }
body .job-progress i.now { background: var(--accent-hi); }
body .job-progress i.bad { background: #FF5A4F; }
body .job-progress i.skip { background: rgba(255,255,255,0.07); }
body .job-act { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: var(--on-ink); }
body .job-act svg { color: var(--accent-glow); }
body .job-page .job-step,
body .job-pdf,
body .job-details { border-color: transparent; box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
body .job-page .job-steps li.now .job-step { border-color: var(--accent-hi); }
body .job-page .job-steps li:not(:last-child)::after { background: rgba(255,255,255,0.2); }
body .job-page .job-steps li.done:not(:last-child)::after { background: var(--green-fill); }
/* Touch keeps hover after a tap: a card keeps its white. */
body .job-page .job-step:hover { background: var(--surface); }
body .job-page .job-step:active { background: var(--surface2); }

/* Job details in three parts: Property, Client and Booking, each under its
   own head. On a new job they're the page itself, a card each, with the
   agreement after them as the next step; once the address is in they fold
   into Job details, the first of the job's steps. */
.job-group-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font: 700 calc(16px * var(--ts))/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.01em; color: var(--text);
}
.job-group-icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.1); color: var(--accent2); }
.job-group + .job-group { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.job-field-hint { font-weight: 500; color: var(--text3); }
/* "Inspected here before, on …", under the address. */
.job-last-visit { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.07); font-size: calc(13.5px * var(--ts)); font-weight: 500; line-height: 1.4; color: var(--text2); }
#jobPanel .select-cards .choice-card { min-height: 50px; }
#cards-jobState .choice-card { align-items: center; padding: 6px 4px; text-align: center; }
#cards-jobInspectionType .choice-card { min-height: 58px; gap: 2px; padding-top: 7px; padding-bottom: 7px; }
#cards-jobInspectionType .choice-card-desc { font-size: calc(12px * var(--ts)); }
body.large-touch #jobPanel .select-cards .choice-card { min-height: 64px; }

.job-hero.new { padding-bottom: 2px; }
.job-hero.new .job-hero-sub { font-size: calc(15.5px * var(--ts)); line-height: 1.45; }
.job-hero-tip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: calc(13.5px * var(--ts)); line-height: 1.4; color: var(--text3); }
.job-hero-tip svg { flex: none; margin-top: 1px; color: var(--accent2); }
/* A new job's kind: an inspection, or a new construction job. A quiet line. */
.job-hero-kind { margin: 8px 0 0; font-size: calc(13.5px * var(--ts)); line-height: 1.4; color: var(--text3); }
.job-hero-kind button { padding: 0; border: none; background: none; font: inherit; font-weight: 600; color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body .job-hero-kind { color: var(--on-ink2); }
body .job-hero-kind button { color: var(--accent-glow); }
.job-details.new { margin-top: 16px; background: transparent; border: none; overflow: visible; }
.job-details.new > .job-details-head { display: none; }
body .job-page .job-details.new #jobPanel:not(.menu-page-active) { border: none; background: transparent; overflow: visible; }
.job-page .job-details.new .job-panel-body { padding: 0; }
.job-details.new .job-group,
.job-details.new .job-group + .job-group { margin: 0 0 12px; padding: 16px 16px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.job-details.new .job-group:last-of-type { margin-bottom: 0; }
.job-details.new .sync-status { display: none; }
.job-next-new { margin-top: 12px; }
/* Under the two ways to sign: coming back to it later is a quiet line. */
.job-next .job-next-later { margin-top: 4px; }
.job-next .job-next-later button { border-color: transparent; background: none; color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }
body .job-hero-tip { color: var(--on-ink2); }
body .job-hero-tip svg { color: var(--accent-glow); }
body .job-page .job-details.new,
body .job-page .job-details.new #jobPanel { box-shadow: none; }
body .job-details.new .job-group { border-color: transparent; box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
/* A special purpose inspection's ticks sit on Job details' light card, so
   an unticked box is drawn light too (the Jobs screen around it is dark). */
#jobPurposes { color-scheme: light; }

/* The logo's dot is the brand's pink. */
.logo-dot { fill: var(--pink); stroke: var(--pink); }
/* Done, signed and clear are green, apart from the blue that marks
   progress and actions. */
.agr-step.done .agr-step-dot { background: var(--green-fill); border-color: var(--green-fill); }
.agr-step.done .agr-step-of { color: var(--green); }
.agr-signed {
  background: linear-gradient(180deg, rgba(var(--green-rgb), 0.12), rgba(var(--green-rgb), 0.03));
  border-color: rgba(var(--green-rgb), 0.35);
}
.agr-signed-chip { background: rgba(var(--green-rgb), 0.16); color: var(--green); }
::selection { background: rgba(var(--pink-rgb), 0.28); }

/* Check before sending, refreshed: section heads in sentence case, roomier
   cards, each thing worth checking on its own row with its fixes as small
   buttons, and Preview as a button rather than a link. */
#sendReviewOverlay .page-sheet-body { gap: 10px; padding: 20px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
.send-review-label {
  margin-top: 14px; font-family: 'Space Grotesk', sans-serif; font-size: calc(16px * var(--ts)); font-weight: 700;
  letter-spacing: -0.01em; text-transform: none; color: var(--text);
}
.send-review-card { padding: 14px 16px; border-radius: 14px; background: var(--surface); gap: 12px; }
.send-review-name { font-size: calc(15px * var(--ts)); }
.send-review-warn { font-size: calc(13px * var(--ts)); }
.send-review-file + .send-review-file, .send-review-file + .send-review-gap { padding-top: 12px; border-top: 1px solid var(--border); }
.send-review-file-name { font-size: calc(14.5px * var(--ts)); }
.send-review-file-meta { margin-top: 2px; font-size: calc(12.5px * var(--ts)); }
.send-review-file .link-btn, .send-review-fixes .link-btn {
  flex: none; margin: 0; min-height: 36px; padding: 0 14px; border: 1px solid var(--border2); border-radius: 99px;
  background: var(--surface); text-decoration: none; font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--accent2);
}
.send-review-file .link-btn:hover, .send-review-fixes .link-btn:hover { border-color: var(--accent); background: var(--accent-wash); }
.send-review-fixes { gap: 6px; margin-top: 8px; }
.send-review-sub { margin-top: 10px; font-size: calc(12.5px * var(--ts)); }
.send-review-tiles { gap: 8px; }
.send-review-tile { padding: 10px 12px; border-radius: 10px; }
.send-review-tile span { font-size: calc(11px * var(--ts)); }
.send-review-tile strong { font-size: calc(13px * var(--ts)); }
.send-review-gaps { padding: 14px 16px 6px; border-radius: 14px; border-color: rgba(212,146,10,0.45); }
.send-review-gaps .send-review-label { margin: 0 0 4px; font-size: calc(15px * var(--ts)); color: var(--yellow-text); }
.send-review-gaps .send-review-list { list-style: none; margin: 0; padding: 0; }
.send-review-gaps .send-review-list li {
  position: relative; padding: 10px 0 10px 18px; font-size: calc(13.5px * var(--ts)); line-height: 1.45; color: var(--text);
}
.send-review-gaps .send-review-list li + li { border-top: 1px solid rgba(212,146,10,0.25); }
.send-review-gaps .send-review-list li::before {
  content: ''; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 99px; background: var(--yellow);
}
/* A line and its button side by side; two buttons drop under the line. */
.send-review-gaps .send-review-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.send-review-gap-text { flex: 1 1 58%; min-width: 0; }
.send-review-gaps .send-review-fixes { flex: none; max-width: 100%; margin-top: 0; }

/* The foot of a sheet: its one action, always in reach while the page
   above it scrolls, with who it goes to on the button. */
.page-sheet-foot {
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface);
}
.page-sheet-foot .extract-btn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-sheet-foot .link-btn { align-self: center; min-height: 36px; margin: 0; }
.page-sheet-foot-note { font-size: calc(12.5px * var(--ts)); font-weight: 600; line-height: 1.35; color: var(--yellow-text); text-align: center; }


/* ── YOUR PRICES (js/price-book.js) ─────────────────────────────────────── */
.pb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pb-row:last-child { border-bottom: none; }
.pb-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.pb-row-title { font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--text); line-height: 1.35; }
.pb-row-unit { font-size: calc(11.5px * var(--ts)); color: var(--text3); line-height: 1.4; }
.pb-start { color: #8a5a00; font-weight: 600; }
.pb-price { position: relative; flex: none; width: 104px; }
.pb-dollar { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: calc(14px * var(--ts)); color: var(--text3); pointer-events: none; }
.pb-price .pb-input { width: 100%; padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; font-size: calc(15px * var(--ts)); min-height: 44px; }
.pb-price .pb-input::placeholder { color: var(--text3); opacity: 0.6; }
.pb-intro { margin-bottom: 8px; }
.pb-back { width: 100%; margin-bottom: 10px; }
.pb-status { padding: 8px 10px; border-radius: 8px; background: rgba(var(--accent-rgb),0.06); color: var(--text2, var(--text)); margin-bottom: 4px; }
.pb-status.warn { background: rgba(183,121,31,0.10); }
.pb-owner { margin-bottom: 4px; }
.pb-terms { padding: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.pb-terms-input { width: 100%; resize: vertical; font-family: inherit; }
.ob-price-list { width: 100%; text-align: left; margin: 4px 0 6px; }
.ob-gst-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font-size: calc(13px * var(--ts)); color: var(--text); line-height: 1.45; padding: 8px 0 4px; cursor: pointer; }
.ob-gst-row input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.ob-price-more { font-size: calc(11.5px * var(--ts)); color: var(--text3); line-height: 1.5; margin: 2px 0 10px; text-align: left; width: 100%; }
.quote-hint-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent2); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ── CHEMICAL REGISTER (js/chemicals.js) ───────────────────────────────── */
.chem-add { width: 100%; margin: 6px 0 10px; }
.chem-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.chem-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.chem-card > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 44px; cursor: pointer; }
.chem-card > summary::-webkit-details-marker { display: none; }
.chem-card[open] > summary .quote-fold-chev { transform: rotate(180deg); }
.chem-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chem-card-name { font-size: calc(14px * var(--ts)); font-weight: 650; color: var(--text); }
.chem-card-sub { font-size: calc(11.5px * var(--ts)); color: var(--text3); line-height: 1.4; }
.chem-card-body { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.chem-card-body .quote-link-btn { align-self: flex-start; }
.chem-use { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.chem-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: calc(13px * var(--ts)); font-weight: 600; }
.chem-links a { color: var(--accent2); text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
.chem-remove { color: var(--red, #b42318); }
.treat-use .chem-links { margin-top: 4px; }
.treat-use-pest { font-weight: 500; color: var(--text3); }
.treat-use-note { font-size: calc(12px * var(--ts)); color: #8a5a00; line-height: 1.4; margin-top: 4px; }
.treat-keep-rate { margin-top: 4px; }
.chem-nolink { color: var(--text3); font-weight: 500; }
.chem-unreg { color: var(--risk, #b42318); font-weight: 700; }
.chem-apvma { font-size: calc(13px * var(--ts)); color: var(--text2, var(--text)); padding: 0 2px; }
.chem-apvma.gone { color: var(--risk, #b42318); font-weight: 600; background: rgba(180,35,24,0.06); border-radius: 8px; padding: 8px 10px; }
.chem-apvma-note { margin-top: 6px; color: var(--text3); }
.chem-search { position: relative; margin-bottom: 10px; }
.chem-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
.chem-search .job-input { width: 100%; padding-left: 36px; min-height: 44px; box-sizing: border-box; }
.chem-docs { display: flex; flex-direction: column; gap: 8px; }
.chem-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 10px; }
.chem-doc-title { font-size: calc(12.5px * var(--ts)); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.chem-doc-exp { font-weight: 600; color: var(--text3); }
.chem-doc-exp.soon { color: #8a5a00; }
.chem-doc-exp.expired { color: var(--risk, #b42318); }
.chem-doc-row { display: flex; align-items: stretch; gap: 8px; }
.chem-doc-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 8px; background: rgba(var(--accent-rgb),0.06); color: var(--accent2); font-size: calc(13px * var(--ts)); font-weight: 600; text-decoration: none; }
.chem-doc-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chem-doc-link .icon { flex: none; }
.chem-doc-send { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--accent2); cursor: pointer; }
.chem-doc-none { font-size: calc(12.5px * var(--ts)); color: var(--text3); }
.chem-rates { display: flex; flex-direction: column; gap: 6px; }
.chem-rates:empty { display: none; }
.chem-rates-note { margin: -2px 0 4px; font-size: calc(12px * var(--ts)); line-height: 1.45; color: var(--text3); }
.chem-rate { padding: 6px 0; border-bottom: 1px solid var(--border); }
.chem-rate:last-child { border-bottom: none; }
.chem-rate-use { font-size: calc(12.5px * var(--ts)); color: var(--text2, var(--text)); line-height: 1.4; }
.chem-rate-val { font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--text); }
.chem-rate-val.none { color: #8a5a00; font-weight: 600; }
.chem-edit-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.chem-edit-body .quote-link-btn { align-self: flex-start; }

/* ── SAMPLE JOB (js/sample-job.js) ──────────────────────────────────────── */
/* The note on the sample's job page: what it is, and how to remove it. */
.sample-note {
  margin-top: 16px; padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid rgba(var(--pink-rgb), 0.45);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.sample-note-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px;
  background: rgba(var(--pink-rgb), 0.12); color: var(--pink-text);
  font-size: calc(11px * var(--ts)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.sample-note-tag::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: var(--pink); }
.sample-note p { margin: 10px 0 0; font-size: calc(14px * var(--ts)); line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.sample-note-remove {
  margin-top: 10px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc(14px * var(--ts)); font-weight: 650; color: var(--accent2); text-decoration: underline; text-underline-offset: 3px;
}
/* The tag on its row in Jobs. */
/* An empty Jobs list starts the first job, and offers the sample. */
.dashboard-panel-body.no-jobs .dash-controls { display: none; }
.dash-start {
  padding: 18px 16px 16px; border-radius: 16px; background: var(--surface); border-top: 3px solid var(--accent);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}
.dash-start .job-tile { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; }
.dash-start-title { margin: 0; font: 700 calc(19px * var(--ts))/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: var(--text); }
.dash-start-text { margin: 6px 0 14px; font-size: calc(14px * var(--ts)); line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.dash-start + .dash-sample { margin-top: 12px; }
.dash-sample-btn {
  width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text);
  font: 650 calc(15px * var(--ts)) 'Inter', sans-serif; cursor: pointer;
}
.dash-start.fade-in { animation: dashFade 0.22s ease-out; }
.dash-sample {
  padding: 18px 16px 16px; border-radius: 16px; background: var(--surface); border-top: 3px solid var(--pink);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}
.dash-sample-title { margin: 0; font: 700 calc(19px * var(--ts))/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: var(--text); }
.dash-sample-text { margin: 6px 0 14px; font-size: calc(14px * var(--ts)); line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.dash-sample.fade-in { animation: dashFade 0.22s ease-out; }
button.drawer-help { width: 100%; font-family: inherit; text-align: left; cursor: pointer; }

/* A copy of the report for the agent or solicitor, on the check sheet (js/app/send.js) */
.send-review-copy { margin: -4px 0 4px; }
.send-copy-open { min-height: 40px; padding: 0; font-size: calc(13.5px * var(--ts)); font-weight: 700; color: var(--accent2); text-align: left; }
.send-copy-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.send-copy-add .send-review-file-meta { margin-top: 6px; }

/* ── VOICE CAPTURE, DOCKED ──
   The voice panel sits on the dock, as wide as the screen and only as tall
   as it needs, so the report stays readable above it. While it listens it
   shrinks to one bar (LISTENING ON THE MOVE below) and the page behind
   can still be scrolled and tapped. The mic and the photo
   button share a row; the sound bars take the close button's place. */
#voicePopover {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-content: start;
  width: min(560px, calc(100vw - 16px)); max-width: none;
  bottom: calc(var(--tabbar-h) + 6px);
  padding: 10px 12px 12px; border-radius: 18px;
  max-height: min(62dvh, calc(100dvh - var(--tabbar-h) - 26px - env(safe-area-inset-top, 0px)));
}
#voicePopover > * { grid-column: 1 / -1; min-width: 0; }
#voicePopover > .voice-popover-header { grid-row: 1; min-height: 32px; padding: 0; border: 0; }
#voicePopover .voice-popover-title { min-width: 0; font-size: calc(13.5px * var(--ts)); }
#voicePopoverTitleText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#voicePopover .voice-popover-close { margin: -6px -6px -6px 0; }
#voicePopover > .waveform { grid-row: 1; grid-column: 2; align-self: center; height: 22px; margin-right: 4px; }
/* Listening with the note open, the X (make it smaller) stays beside the bars. */
body.voice-expanded:not(.pocket-lock) #voicePopover:not(.notes-voice) > .waveform { margin-right: 44px; pointer-events: none; }
#voicePopover > .voice-btn { grid-column: 1; min-height: 52px; padding: 6px 12px; gap: 12px; border-radius: 14px; font-size: calc(14px * var(--ts)); }
body #voicePopover .voice-btn .mic-svg { width: 20px; height: 20px; padding: 8px; }
#voicePopover > .voice-photo-btn { grid-column: 2; position: relative; width: 52px; min-height: 52px; margin: 0; padding: 0; border-radius: 14px; }
#voicePopover .voice-photo-btn svg { width: 20px; height: 20px; }
#voicePopover .voice-photo-btn[data-count]:not([data-count=""])::after {
  content: attr(data-count); position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 99px; background: var(--accent); color: #fff; font-size: calc(11px * var(--ts)); font-weight: 800; line-height: 20px; text-align: center;
}
#voicePopover > .transcript-box { min-height: 0; max-height: min(24dvh, 170px); padding: 10px 12px; border-radius: 12px; font-size: calc(14px * var(--ts)); line-height: 1.5; }
#voicePopover > .transcript-box:not(.active) { font-size: calc(13px * var(--ts)); }
#voicePopover > .transcript-done { margin: 0; max-height: 4.6em; }
#voicePopover > .quick-phrases { order: 1; margin: -6px 0 -10px; }
#voicePopover .quick-phrases summary { font-size: calc(12.5px * var(--ts)); color: var(--text3); }
#voicePopover > .extract-btn { min-height: 48px; }
body.large-touch #voicePopover > .extract-btn { min-height: 56px; }
/* Nothing to fill in yet: no greyed-out button taking a row. */
#voicePopover > .transcript-box:not(.active) ~ .extract-btn:disabled { display: none; }
#voicePopover > .ai-bar { order: 2; justify-content: center; padding: 0; border: 0; background: transparent; font-size: calc(11.5px * var(--ts)); color: var(--text3); }
/* Listening, the whole note open: the speak button, the newest lines and
   two quiet buttons (fill in so far, lock for a pocket), nothing else. */
body[data-voice="listening"] #voicePopover > .transcript-done,
body[data-voice="listening"] #voicePopover > .quick-phrases,
body[data-voice="listening"] #voicePopover > .extract-btn,
body[data-voice="listening"] #voicePopover > .ai-bar { display: none; }
body[data-voice="listening"] #voicePopover > .transcript-box { max-height: 7.6em; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.2em); mask-image: linear-gradient(to bottom, transparent 0, #000 1.2em); }
body.pocket-lock #voicePopover > .transcript-box { max-height: 4.6em; }
/* Clear of the dock's red timer while it listens. */
body[data-voice="listening"] #voicePopover { bottom: calc(var(--tabbar-h) + 40px); }
/* Listening, it stays in sight over Jobs and This job too (under the dock and the sheets). */
body[data-voice="listening"] #voicePopover { z-index: 230; }
.pocket-shield { background: rgba(6,18,58,0.28); }
.pocket-shield span { padding: 10px 16px; font-size: calc(12.5px * var(--ts)); opacity: 0.96; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: transform 0.8s linear, background 0.8s linear; }
.pocket-shield span.holding { transform: scale(1.06); background: var(--accent-wash); color: var(--accent2); }

/* ── LISTENING ON THE MOVE ──
   While the mic listens the panel is one bar on the dock: a red Listening
   mark over the newest words (a tap opens the whole note), Fill in and the
   photo button. Nothing covers the report, so it scrolls and takes taps
   with the mic on (js/app/voice.js). */
:root { --voice-live-h: 68px; }
.voice-live, .voice-listen-actions { display: none; }
body.listening-bar #voicePopover { padding: 6px 6px 6px 12px; gap: 6px; align-items: center; border-radius: 18px; }
body.listening-bar #voicePopover > :not(.voice-live):not(.voice-photo-btn) { display: none; }
body.listening-bar #voicePopover > .voice-live { display: flex; grid-column: 1; grid-row: 1; align-items: center; gap: 8px; min-width: 0; }
body.listening-bar #voicePopover > .voice-photo-btn { grid-column: 2; grid-row: 1; width: 48px; min-height: 48px; border-radius: 13px; }
.voice-live-note {
  flex: 1; min-width: 0; min-height: 52px; padding: 4px 2px; border: 0; background: none;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  text-align: left; color: var(--text); cursor: pointer; font: inherit;
}
.voice-live-head { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--ts)); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tone-bad, #D7261E); }
.voice-live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(215,38,30,0.5); animation: liveDot 1.4s ease-out infinite; flex-shrink: 0; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(215,38,30,0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(215,38,30,0); } }
/* The newest words: two lines, the end of the note always in sight. */
.voice-live-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  max-height: 2.7em; overflow: hidden; line-height: 1.35;
  font-size: calc(14px * var(--ts)); font-weight: 500; color: var(--text);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.9em); mask-image: linear-gradient(to bottom, transparent 0, #000 0.9em);
}
.voice-live-text.empty { color: var(--text3); font-weight: 500; -webkit-mask-image: none; mask-image: none; }
.voice-live-fill {
  flex-shrink: 0; min-height: 48px; padding: 0 16px; border-radius: 13px;
  border: 1.5px solid var(--accent-edge); background: var(--accent-wash); color: var(--accent2);
  font: inherit; font-size: calc(14px * var(--ts)); font-weight: 700; cursor: pointer;
}
.voice-live-fill:disabled { opacity: 0.45; cursor: default; }
body.large-touch .voice-live-fill, body.large-touch #voicePopover > .voice-photo-btn { min-height: 56px; }
/* The whole note open while listening: two quiet buttons under it. */
body.voice-expanded:not(.pocket-lock) #voicePopover:not(.notes-voice) > .voice-listen-actions { display: flex; gap: 8px; }
.voice-listen-btn {
  flex: 1; min-height: 44px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  font: inherit; font-size: calc(13px * var(--ts)); font-weight: 700; cursor: pointer;
}
.voice-listen-btn:first-child { color: var(--accent2); border-color: var(--accent-edge); background: var(--accent-wash); }
/* The page under the bar can still be scrolled clear of it. */
body.listening-bar .report-body { padding-bottom: calc(var(--voice-live-h) + 56px); }
body.listening-bar .dashboard-panel-body, body.listening-bar .drawer-scroll, body.listening-bar .job-page-body { padding-bottom: calc(var(--voice-live-h) + 64px); }
body.listening-bar:has(#app[style*="flex"]) .toast, body.listening-bar .toast { bottom: calc(var(--tabbar-h) + 48px + var(--voice-live-h)); }
@media (prefers-reduced-motion: reduce) { .voice-live-dot { animation: none; } }

/* ── MENU PAGES IN CARDS ────────────────────────────────────────────────
   Business details, Your prices, Chemical register, Your team, Settings
   and Your sign-in, in Billing's look: each group a white card on the
   page, its label trailing a fading line. */
.sidebar.on-page .menu-page-active .settings-group-title { display: flex; align-items: center; gap: 10px; padding: 18px 2px 8px; color: var(--text2); }
.sidebar.on-page .menu-page-active .settings-group-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border2), rgba(200,213,227,0)); }
.sidebar.on-page .menu-page-active .settings-group-title:first-child { padding-top: 6px; }
.menu-card {
  padding: 2px 14px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--card-edge); box-shadow: 0 6px 18px rgba(0,40,80,0.07);
}
.menu-card + .menu-card { margin-top: 12px; }
.menu-card .settings-row { padding: 13px 0; }
.menu-card .settings-row:last-child { border-bottom: none; }
/* A hidden row last (Test mode) leaves no line under the one above it. */
.menu-card .settings-row:not(:has(~ .settings-row:not([hidden]))) { border-bottom: none; }
/* The two deletes: their own card, edged in red. */
.menu-card.menu-card-danger { border-color: rgba(192,57,43,0.28); box-shadow: none; }
.sidebar.on-page .menu-page-active .pb-intro { margin: 0 2px 12px; font-size: calc(12.5px * var(--ts)); color: var(--text2); }
.sidebar.on-page .menu-page-active .pb-status { margin-bottom: 4px; padding: 10px 12px; border-radius: 12px; }

/* Business details: the top of the PDF, then the boxes. */
.biz-preview { padding: 12px 14px 14px; margin-bottom: 12px; background: linear-gradient(180deg, var(--surface), var(--accent-wash)); }
.biz-preview-tag { font-size: calc(10.5px * var(--ts)); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent2); margin-bottom: 8px; }
.biz-preview-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--border); border-bottom: 2px solid var(--accent); }
.biz-preview-logo {
  flex: none; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--accent); color: #fff; font: 800 calc(13px * var(--ts)) 'Inter', sans-serif;
}
.biz-preview-logo.has-logo { background: transparent; }
.biz-preview-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.biz-preview-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.biz-preview-name { font: 700 calc(15px * var(--ts)) 'Inter', sans-serif; color: var(--text); overflow-wrap: anywhere; line-height: 1.25; }
.biz-preview-line { font-size: calc(11.5px * var(--ts)); color: var(--text3); overflow-wrap: anywhere; line-height: 1.45; }
.biz-preview-row { display: block; }
.biz-preview-row > span { display: inline-block; max-width: 100%; }
.biz-preview-name.blank, .biz-preview-line.blank { color: var(--text3); font-style: italic; font-weight: 500; }
#businessPageSlot.menu-card { padding: 14px 14px 4px; }
#businessPanel .business-save { margin-top: 14px; }

/* Your prices: a card per group. */
.pb-card .pb-row { padding: 12px 0; }
.menu-card .pb-terms { padding: 12px 0 14px; border-top: 1px solid var(--border); }

/* Chemical register: white product cards like the rest of the app. */
.sidebar.on-page #chemicalsPanel .chem-card { background: var(--surface); border-color: var(--card-edge); border-radius: 16px; box-shadow: 0 4px 14px rgba(0,40,80,0.06); }
.sidebar.on-page #chemicalsPanel .chem-card[open] { box-shadow: 0 8px 22px rgba(0,40,80,0.10); }
.sidebar.on-page #chemicalsPanel .chem-card > summary { padding: 13px 14px; }
.sidebar.on-page #chemicalsPanel .chem-card-body { padding: 0 14px 14px; }
.sidebar.on-page #chemicalsPanel .chem-search .job-input { border-radius: 14px; background: var(--surface); }

/* Your team: the places as a meter, then a face for each person. */
.team-card { padding: 0 14px; }
.team-places { padding: 14px 0 12px; }
.team-places-text { font-size: calc(13px * var(--ts)); font-weight: 600; color: var(--text2); }
.team-places-track { margin: 8px 0 2px; height: 8px; border-radius: 999px; background: var(--accent-pale); overflow: hidden; }
.team-places-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-hi), var(--accent)); transition: width 0.6s cubic-bezier(.2,.8,.2,1); }
.team-places-track.full { background: #FBEBC8; }
.team-places-track.full i { background: linear-gradient(90deg, #F5C451, #E0A21B); }
.team-card .team-list { border-top: 1px solid var(--border); }
.team-card .team-list:empty { display: none; }
.team-card .team-row { padding: 12px 0; }
.team-card .team-row:last-child { border-bottom: none; }
.team-face {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent2); border: 1px solid var(--accent-edge);
  font: 800 calc(12.5px * var(--ts)) 'Inter', sans-serif;
}
.team-face.owner { background: linear-gradient(145deg, var(--accent-hi), var(--accent2)); color: #fff; border-color: transparent; }
.team-face.pending { background: var(--surface2); color: var(--text3); border-style: dashed; border-color: var(--border2); }
.team-card + .team-more { width: 100%; margin-top: 12px; }
.team-invite-card { padding: 14px 14px 10px; }
.team-invite-card .team-invite { padding: 0; }
.team-invite-card .team-help { padding: 10px 0 2px; }

/* Your sign-in: who's signed in on top, then a card each. */
.signin-who { display: flex; align-items: center; gap: 14px; padding: 16px 14px; }
.signin-who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.signin-who-name { font: 700 calc(16px * var(--ts)) 'Inter', sans-serif; color: var(--text); overflow-wrap: anywhere; }
.signin-who .signin-email { margin: 0; font-size: calc(13px * var(--ts)); font-weight: 500; color: var(--text2); }
.signin-email-note { margin: 8px 2px 0; }
.menu-card .signin-line { margin: 0; padding-top: 14px; }
.menu-card > .signin-line + .settings-row-desc { padding: 8px 0 14px; }
.menu-card.signin-pass { padding: 6px 14px 14px; margin-top: 0; }
.chem-card-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent2); border: 1px solid var(--accent-edge);
}