@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');

:root {
  --bg:        #D6E4EF;
  /* Daylight keeps the intro's look: white cards with a soft blue edge.
     --frame is the field border, --card-edge the edge of each section
     card. The heavy black frames and amber dashes only appear in the dark
     screen (body.dark-screen), where safety amber reads 11.5:1 on black. */
  --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;
}

/* ── ACCESSIBILITY MODES ── */

/* Dark screen: for subfloors, roof voids and night work. Most colours
   come from the tokens above, so this swaps the tokens; the rules after
   it cover the few light tints that are written out. Signature pads stay
   white so the ink reads. */
body.dark-screen {
  color-scheme: dark;
  --bg:        #06090D;
  --surface:   #10161D;
  --surface2:  #161E27;
  --surface3:  #1D2733;
  --text:      #E8EEF4;
  --text2:     #B4C2CF;
  --text3:     #93A3B3;
  --border:    #2A3644;
  --border2:   #3B4959;
  --silver:    #7F8E9D;
  --yellow-text: #FFB000;
  --risk:      #FF5A4F;
  --green:     #4ADE80;
  --green-rgb: 74,222,128;
  --accent2:   #7DA2FF;
  --pink-text: #FF7AB0;
  --frame:     #FFB000;
  --need:      #FFB000;
}
body.dark-screen.high-contrast { --border: #5B6B7C; --border2: #7A8C9E; --text2: #D4DEE7; --text3: #B4C2CF; }
body.dark-screen .choice-panel { box-shadow: inset 0 0 0 1px var(--border2); }
body.dark-screen .risk-high   { background: rgba(255,90,79,0.16);  color: #FF8A80; border-color: rgba(255,90,79,0.5); }
body.dark-screen .risk-medium { background: rgba(255,176,0,0.14);  color: #FFC53D; border-color: rgba(255,176,0,0.5); }
body.dark-screen .risk-low    { background: rgba(var(--green-rgb),0.14); color: var(--green); border-color: rgba(var(--green-rgb),0.5); }
body.dark-screen header { background: var(--surface); border-bottom-color: var(--border); box-shadow: none; }
body.dark-screen .section-tabs { background: var(--surface2); border-bottom-color: var(--border); }
body.dark-screen .report-header { border-bottom-color: var(--border); }
body.dark-screen .report-title h2 { color: var(--text); }
body.dark-screen .report-body { background: var(--bg); }
body.dark-screen .report-section { border: 3px solid var(--frame); border-radius: 6px; box-shadow: none; }
body.dark-screen .section-header { background: #000000; border-bottom: 2px solid var(--frame); }
body.dark-screen .section-header h3, body.dark-screen .section-header h3 .sec-num { color: #FFFFFF; }
body.dark-screen .section-header .sec-badge { background: transparent; border-color: currentColor; }
body.dark-screen .section-header .sec-badge.done    { color: var(--green); }
body.dark-screen .section-header .sec-badge.partial { color: #FFC53D; }
body.dark-screen .section-header .sec-badge.empty   { color: #B4C2CF; }
body.dark-screen #jobPanel:not(.menu-page-active) { border: 3px solid var(--frame); border-radius: 6px; }
body.dark-screen .field-val, body.dark-screen #jobPanelBody .job-input, body.dark-screen #reportBody .job-input { border-width: 2px; border-radius: 4px; }
body.dark-screen .field-val:not(.filled):not(.choice-source) { border-style: dashed; }
body.dark-screen .drawer-subhead { background: #000000; color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--frame); }
body.dark-screen .field-val, body.dark-screen #jobPanelBody .job-input, body.dark-screen #reportBody .job-input { border-color: #5B6B7C; background: #000000; }
body.dark-screen .field-val:not(.filled):not(.choice-source) { border-color: var(--need); }
body.dark-screen .field-val.filled { border-color: #E8EEF4; background: #000000; }
body.dark-screen .section-photo-widget { border-color: var(--border2); }
body.dark-screen .obs-zone-btn:not(.active) { background: var(--surface2); border-color: var(--border2); color: var(--text2); }
body.dark-screen .obs-zone-panel-header { background: var(--surface2); border-bottom-color: var(--border); }
body.dark-screen .warn-note:not(.note-good),
body.dark-screen .toast.toast-error { background: rgba(255,90,79,0.12); }
body.dark-screen .send-review-tile.tone-bad  { background: rgba(255,90,79,0.10); }
body.dark-screen .send-review-tile.tone-warn,
body.dark-screen .send-review-gaps          { background: rgba(255,176,0,0.10); }
body.dark-screen .send-review-tile.tone-good { background: rgba(var(--green-rgb),0.10); }
body.dark-screen .pill-green { background: rgba(var(--green-rgb),0.14); color: var(--green); }
.icon-sun { display: none; }
body.dark-screen #darkScreenBtn .icon-moon { display: none; }
body.dark-screen #darkScreenBtn .icon-sun { display: block; }
body.dark-screen #darkScreenBtn { color: var(--tone-warn, #FFB000); }

/* Text size */
body.text-size-large { font-size: 1.12em; }
body.text-size-xl { font-size: 1.28em; }

/* 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: 16px; }
body.large-touch .notes-toggle { width: 52px; }
body.large-touch .section-tab { min-height: 52px; padding: 14px 18px; font-size: 14px; }
body.large-touch .job-input { min-height: 52px; padding: 14px 13px; font-size: 15px; }
body.large-touch #jobPanelBody .job-input, body.large-touch #reportBody .job-input { min-height: 56px; font-size: 16px; }
body.large-touch .job-action-btn,
body.large-touch .extract-btn,
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); }
body.large-touch .saved-item-delete { width: 44px; height: 44px; }

/* ── 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.6s 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: 38px;
  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: 38px;
  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.
   Both fit inside the 2.2s the splash stays up. */
@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: 15.5px;
  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: 11px;
  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;
}

.splash-loading {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 200px;
}

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

.splash-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hi) 70%, var(--pink));
  border-radius: 99px;
  animation: splashProgress 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}

@keyframes splashProgress {
  to { width: 100%; }
}

.splash-status {
  font-size: 11.5px;
  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); }
/* "Your business" opens the sign-up form over the app (openBusinessForm) */
#onboardScreen.ob-edit { position: fixed; inset: 0; z-index: 900; }
#onboardScreen.ob-edit .ob-steps { display: none; }
#onboardScreen.ob-edit .ob-setup-only, #onboardScreen:not(.ob-edit) .ob-edit-only { display: none; }
.ob-cancel { text-align: center; width: 100%; margin-top: 4px; }
.ob-cancel[hidden] { display: none; }
.ob-demo-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-demo-text {
  font-size: 13px;
  color: var(--text3);
  text-align: center;
  line-height: 1.6;
  transition: color 0.3s;
}
.ob-demo-text.active { color: var(--text); }
.ob-checklist { display: flex; flex-direction: column; gap: 10px; }
.ob-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.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: 11px;
  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:24px; font-weight:800; letter-spacing:1.5px; color:#F4F8FB; }
.auth-tagline { font-size:14px; 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 stays light in dark mode too: reset the tokens inside it. */
  --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:23px; font-weight:700; color:#0D1117; letter-spacing:-0.4px; margin:0; }
.auth-subtitle { font-size:14px; color:#4A5D70; margin-top:-8px; line-height:1.5; }
.auth-field { display:flex; flex-direction:column; gap:7px; }
.auth-label { font-size:12px; 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:16px; 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:13px; 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:14px; 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:13px; 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:16px; 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; justify-content:space-between; gap:8px; margin:-4px -6px 0; }
.auth-link { background:none; border:none; color:var(--accent2); font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; padding:0 6px; transition:color 0.15s; min-height:44px; }
.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: 12px; 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, .menu-footer a, .drawer-legal a { display:inline-block; padding:14px 2px; margin:-14px 0; }

/* ── MAIN MENU (platform hub) ── */
#mainMenu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  background: var(--bg);
  animation: menuFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.menu-shell {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.menu-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-logo-icon {
  color: var(--accent2);
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),0.5));
}

.menu-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}

.menu-tagline {
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.menu-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}

.menu-tile.live {
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 24px rgba(0,0,0,0.25);
}

.menu-tile.live::before { opacity: 1; }

.menu-tile.live:hover,
.menu-tile.live:active {
  border-color: rgba(var(--accent-rgb), 0.6);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb),0.15);
}

.menu-tile.soon {
  opacity: 0.38;
  cursor: default;
}

.menu-tile-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent2);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.menu-tile.live .menu-tile-icon {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}

.menu-tile.soon .menu-tile-icon {
  background: var(--surface2);
  color: var(--text3);
  border-color: var(--border);
  box-shadow: none;
}

.menu-tile-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}

.menu-tile-desc {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
  line-height: 1.4;
}

.menu-tile-icon, .menu-tile-name, .menu-tile-desc { pointer-events: none; }

.menu-tile-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.menu-tile-arrow {
  flex-shrink: 0;
  color: var(--accent2);
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}

.menu-tile.live:hover .menu-tile-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.menu-tile-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text3);
  background: var(--surface3);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 99px;
}

.menu-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.2px;
  line-height: 2;
}
.menu-footer a {
  color: var(--text3);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.15);
}
.menu-footer a:hover { color: var(--accent2); }

/* ── 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;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-logo-icon {
  width: 26px;
  height: 26px;
  background: linear-gradient(145deg, var(--accent2), var(--accent));
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.35);
}

.app-logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}

.header-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.08);
}

.header-job {
  font-size: 11.5px;
  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: 10px;
  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: 10px;
  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: 11px;
  font-weight: 700;
  color: var(--green);
  margin-left: -2px;
}

.progress-ring-text {
  position: absolute;
  font-size: 7px;
  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;
}
.drawer-back[hidden] { display: none; }


/* 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: 11px;
  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: 14px;
  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: 12px;
  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 {
  font-size: 11.5px;
  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: 14px;
  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; }
/* Job details: big fields for gloves, in the same soft card style as the
   rest of the app (the heavy frame is dark screen only). */
#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: 15px; 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); }
.saved-search-input { margin-bottom: 10px; }

.drawer-legal {
  padding: 14px 8px 4px;
  text-align: center;
  font-size: 11.5px;
  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: 12px;
  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: 11px;
  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-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 14px 0;
  border-top: 1px solid var(--border);
}

.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: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.job-action-btn.save {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent2);
}
.job-action-btn.save:hover { background: rgba(var(--accent-rgb), 0.16); }

.job-action-btn.new {
  white-space: nowrap;
}
.job-action-btn.new:hover { border-color: var(--accent); color: var(--accent2); }

.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 12px;
  font-size: 11.5px;
  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); }

/* Saved Reports */
.saved-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.saved-empty {
  font-size: 12px;
  color: var(--text3);
  padding: 8px 2px;
  line-height: 1.5;
}

/* Settings panel. One page in the menu, in groups: Display, Voice, Your data. */
.settings-group-title {
  padding: 16px 0 2px;
  font-size: 11px;
  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: 12px; }
.settings-row[hidden] { display: none; }
.settings-row-desc .settings-inline-link[hidden] { display: none; }
.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: 12.5px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.learned-note { display: block; font-size: 11px; color: var(--text3); }
.learned-list .learned-remove { flex: none; font-size: 12.5px; }
.learned-empty { font-size: 11.5px; 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: 13px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 2px;
}

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

.billing-explainer {
  padding: 12px 14px;
  margin: 4px 0 6px;
  border-radius: 10px;
  background: var(--surface2, rgba(0,0,0,0.03));
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2, var(--text));
}
.billing-explainer-title { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 4px; }
.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: 13px;
  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); }

.saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.saved-item:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.04); }

.saved-item-info { flex: 1; min-width: 0; }

.saved-item-address {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-item-meta {
  font-size: 10px;
  color: var(--text2);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.saved-item-risk {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
  text-transform: uppercase;
}
.saved-item-risk.HIGH   { background: rgba(192,57,43,0.15); color: var(--risk); }
.saved-item-risk.MEDIUM { background: rgba(255,182,72,0.15); color: var(--yellow-text); }
.saved-item-risk.LOW    { background: rgba(var(--green-rgb),0.15); color: var(--green); }
.saved-item-risk.none   { background: var(--surface2); color: var(--text3); }

.saved-item-pending {
  color: var(--yellow-text);
  font-weight: 700;
}
.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; }
.saved-item-unsynced { color: var(--yellow-text); font-weight: 700; }
.saved-archived { padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.saved-archived .link-btn { display: inline; min-height: 0; padding: 0; font-size: inherit; font-weight: 700; }

.saved-item-delete {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.saved-item-delete:hover { background: rgba(192,57,43,0.12); color: var(--risk); }

/* ── 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: 13px;
  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: 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[hidden] { display: none; }
.pocket-shield span {
  background: var(--surface); color: var(--text2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; 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: 13px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

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

.voice-popover-close {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 14px;
  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: 11px;
  font-weight: 800;
  line-height: 20px;
  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: 13px; 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: 13px;
  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.js: 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: 11.5px;
  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: 13px; }
.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: 12px; 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: 13px;
  line-height: 1.5;
  color: var(--text2);
}
.transcript-done[hidden] { display: none; }
.transcript-done-label { font-size: 11px; 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: 11px;
  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: 11px;
  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: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent2);
  margin-bottom: 6px;
}
.cleanup-panel-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 8px;
}
.cleanup-panel-note {
  font-size: 11px;
  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: 12px;
  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: 12px;
  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: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.pending-notes-btn:disabled { opacity: 0.6; cursor: default; }
.pending-notes-details summary {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text3);
  cursor: pointer;
}
.pending-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 11.5px;
  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: 12px;
  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: 13px;
  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: 11px;
  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%;
}

.report-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid #D0DCE8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  background: transparent;
}
.report-title { min-width: 0; }

.report-title h2 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.4px; color: #0A1929; }
.report-title p  { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 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;
  padding: 16px 16px;
  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: 13.5px;
  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: 10px;
  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: 13px;
  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: 13px;
  font-weight: 600;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-hint { font-size: 9px; 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: 12px;
  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: 10.5px;
  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: 9px;
  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: 12px;
  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: 15px;
  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: 16px; /* 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: 16px;
  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:11px; 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:11px; 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:11.5px; 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); }
body.dark-screen .warn-note.note-good { background: rgba(var(--green-rgb),0.12); 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: 12px;
  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); }

/* Job completion (COMPLETED JOBS in js/app.js) */
.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: 12px;
}
.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-banner .issue-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.issue-attention { margin: 8px 0 2px 18px; padding: 0; color: var(--yellow-text); font-weight: 600; line-height: 1.6; }
.issue-links { display: flex; gap: 14px; flex-wrap: wrap; }
.issue-links:empty { display: none; }
.issue-amend-form { margin-top: 10px; }
.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: 16px;
  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; }
.saved-item-quote { padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.saved-item-quote.good { background: rgba(var(--green-rgb),0.12); color: var(--green); }
.saved-item-quote.bad { background: rgba(192,57,43,0.1); color: var(--risk); }
.saved-item-quote.wait, .saved-item-quote.warn { background: rgba(212,146,10,0.12); color: var(--yellow-text); }
.issue-quote-answer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text2); }
.issue-quote-answer.good span { color: var(--green); font-weight: 600; }
.issue-quote-answer.wait span, .issue-quote-answer.warn span { color: var(--yellow-text); font-weight: 600; }
.saved-item-status {
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 700;
  background: var(--border);
  color: var(--text2);
}
.saved-item-status.ready { background: rgba(var(--accent-rgb),0.12); color: var(--accent2); }
.saved-item-status.sent { background: rgba(212,146,10,0.12); color: var(--yellow-text); }
.saved-item-status.complete { background: rgba(var(--green-rgb),0.12); color: var(--green); }
.saved-item-status.amending { background: rgba(212,146,10,0.12); color: var(--yellow-text); }

/* 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: 12px;
  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: 12.5px;
  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: 15px; 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: 12px;
  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: 13px;
  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: 14px; 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: 11px; 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: 26px; 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: 14.5px; 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: 13px; 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: 11px; 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: 19px; line-height: 24px;
  font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.agr-step .job-field, .agr-step .job-row { margin: 0; }
.agr-hint {
  margin: -4px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(255,182,72,0.12); color: var(--yellow-text);
}
.agr-hint[hidden] { display: none; }
.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: 13px; font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums;
}
.agr-clause-title { margin: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.agr-doc p { margin: 0; font-size: 14.5px; 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: 12.5px; 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: 14.5px; 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: 18px; 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: 13px; color: #94a3b8; }
.agreement-sig-actions { display: flex; align-items: center; justify-content: space-between; margin-top: -6px; }
.agr-sig-by { font-size: 12.5px; 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: 13px; 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: 11px; 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: 14px; 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: 12.5px; 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: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.agr-signed-meta { margin-top: 4px; font-size: 13.5px; 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; }
#agreementView .agr-doc + .extract-btn { margin-top: 22px; }
#agreementView .link-btn { align-self: center; margin-top: 6px; }
/* 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: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sheet-sec-title {
  margin: 3px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 19px; line-height: 24px;
  font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.sheet-sec-sub { margin: 3px 0 0; font-size: 13px; 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: 13px; 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: 14px; 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:not(.dark-screen) .sheet-folds .sheet-fold {
  background: var(--surface); border: 1px solid var(--border2); box-shadow: 0 1px 3px rgba(13,40,60,0.08);
}
body:not(.dark-screen) .sheet-folds .sheet-fold > summary { background: none; }
body:not(.dark-screen) .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:not(.dark-screen) .sheet-folds .sheet-fold[open] > summary { border-bottom-color: var(--border2); }
.sheet-folds .sheet-fold .fgroup-icon { background: var(--accent-wash); color: var(--accent2); }
body.dark-screen .sheet-folds .sheet-fold .fgroup-icon { background: rgba(var(--accent-rgb),0.18); color: var(--accent-glow); }
.sheet-folds .job-field-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
body:not(.dark-screen) .sheet-folds .job-input { background: var(--surface); border: 1.5px solid var(--border2); border-radius: 10px; }
body:not(.dark-screen) .sheet-folds .job-input:hover { border-color: #A9BACB; }
body.dark-screen .sheet-folds .job-input { background: var(--bg); border-color: var(--border2); }
.sheet-folds .job-input::placeholder { color: #6B7C8E; }
body:not(.dark-screen) .sheet-secs > .sheet-voice { background: var(--accent-wash); border-color: var(--accent-edge); }
body:not(.dark-screen) .sheet-secs > .sheet-voice .sheet-voice-hint { color: var(--text2); }
body.dark-screen .sheet-folds .job-input::placeholder { color: #75879A; }
.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; }
body.dark-screen .fold-tick { color: #000; }
.sheet-folds .sheet-more > summary { color: var(--text); }

/* Check before sending */
.send-review-label {
  margin-top: 6px;
  font-size: 10.5px;
  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: 14px; font-weight: 700; color: var(--text); }
.send-review-email { font-size: 13px; color: var(--text2); word-break: break-all; }
.send-review-warn { font-size: 12.5px; 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: 13.5px; font-weight: 700; color: var(--text); }
.send-review-file-meta { font-size: 12px; 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: 10.5px; font-weight: 600; color: var(--text3); }
.send-review-tile strong { font-size: 12.5px; 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: 12px; font-weight: 700; color: var(--text2); }
.send-review-list { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; 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: 13px; line-height: 1.5; }
.send-review-cancel { align-self: center; margin-top: 2px; }
.signoff-agreement { font-size: 12px; color: var(--text3); line-height: 1.5; }
.signoff-agreement.signed { color: var(--green); font-weight: 600; }
.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: 1px dashed var(--border);
  border-radius: 6px;
  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: 12px;
  font-style: italic;
  pointer-events: none;
}

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

.signature-status {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.signature-status.signed { color: var(--green); }

.signature-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0 14px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 44px;
}
.signature-clear-btn:hover { border-color: var(--accent); color: var(--accent2); }

/* Photo attachment grid */
.photo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 4px;
}
.photo-count { font-size: 11.5px; color: var(--text2); }
.photo-count.at-cap { color: var(--yellow-text); font-weight: 600; }
.add-photo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  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; }

.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: 11px;
  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: 10px;
  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: 10px;
  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: 12px;
  border: 1px dashed var(--border);
  border-radius: 9px;
}
.empty-state { margin: 8px 0; color: var(--text2); font-size: 13px; 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.js). */
.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; }
/* Daylight: white cards on a light panel, each with a coloured edge, and
   the picked one filled in its colour. The dark screen swaps in the black
   panel (body.dark-screen .choice-panel below). */
.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;
}
body.dark-screen .choice-panel {
  --act-panel:   #10161D;
  --act-steel:   #5B6B7C;
  --act-ink:     #E8EEF4;
  --act-dim:     #A9B6C3;
  --act-card:    transparent;
  --tone-neutral:#E8EEF4;
  border-radius: 6px;
}
body.dark-screen .choice-card { border-width: 3px; border-radius: 4px; }
body.dark-screen .choice-card.tone-neutral { --tone-ink: #10161D; }
.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: 15px;
  /* 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, 15px);
  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: 12px;
  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;
}
body.dark-screen .choice-card::before { display: block; }
body.dark-screen .choice-card::before { left: -3px; top: -3px; bottom: -3px; width: 6px; border-radius: 4px 0 0 4px; }
.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; }
body.text-size-large .choice-card-code,
body.text-size-xl .choice-card-code { font-size: clamp(12px, 18cqi, 14px); }

/* 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 app.js. */
.select-cards-source { display: none !important; }
.select-cards .choice-card { min-height: 65px; }
.select-cards .choice-card-code { font-size: clamp(12px, 18cqi, 14px); }
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: 14px;
  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: 12px;
  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: 12px;
  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: 11.5px;
  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: 13px;
  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: 14px; 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: 10px;
  animation: findingsReveal 0.35s ease;
}
.system-verify-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.system-verify-header .icon { color: var(--accent2); }
.system-verify-hint {
  font-size: 11px;
  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: 11.5px;
  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: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

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

.finding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  animation: findingsReveal 0.3s ease;
}

.finding-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.finding-card-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.finding-card-label small { font-size: 12px; font-weight: 500; color: var(--text3); }
.finding-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.finding-activity-chip {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.finding-activity-chip.ACTIVE   { background: rgba(192,57,43,0.15); color: var(--risk); }
.finding-activity-chip.INACTIVE { background: rgba(255,182,72,0.15); color: var(--yellow-text); }
.finding-activity-chip.NONE     { background: rgba(var(--green-rgb),0.12); color: var(--green); }
.finding-activity-chip.unset    { background: var(--surface3); color: var(--text3); }

.finding-remove-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.finding-remove-btn:hover { color: var(--risk); }

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

.findings-add-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 14px 14px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: calc(100% - 28px);
  transition: border-color 0.15s, color 0.15s;
  min-height: 44px;
}
.findings-add-btn:hover { border-color: var(--accent); color: var(--accent2); }
.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 { 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[hidden] { display: none; }
.nothing-found-btn svg { flex: none; }
.nothing-found-btn strong { display: block; font-size: 15px; font-weight: 700; }
.nothing-found-btn small { display: block; margin-top: 2px; font-size: 12.5px; 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: 16px; }

/* ── 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));
}

.dash-hero { padding: 18px 0 18px; }
.dash-hero-date {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent2);
}
.dash-hero-title {
  margin: 6px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
}
.dash-hero-title b { font-weight: 700; color: var(--accent2); }

.dash-tabs {
  position: relative;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 10px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text3); cursor: pointer;
  white-space: nowrap; transition: color 0.2s;
}
/* The count sits in a small pill; This job has none, so its pill hides. */
.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: 11.5px; font-weight: 700; background: var(--surface2); 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: -4px; border-radius: 8px; }
.dash-tab.active { color: var(--text); }
.dash-tab.active span { background: rgba(var(--accent-rgb), 0.14); color: var(--accent2); }
.dash-tab-line {
  position: absolute; left: 0; bottom: 0; width: 0; height: 2.5px;
  border-radius: 99px; background: var(--accent);
  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: 46px; margin: 16px 0 14px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text3); box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  transition: border-color 0.15s, box-shadow 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: 15px; color: var(--text);
}

.dash-list {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.06);
}
.dash-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  width: 100%; padding: 14px 12px 14px 14px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background 0.15s;
}
.dash-row + .dash-row { border-top: 1px solid var(--border); }
.dash-row:hover, .dash-row:active { background: rgba(var(--accent-rgb), 0.05); }
.dash-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-row-addr {
  font-size: 15px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-row-sub { font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-status { font-weight: 600; color: var(--text2); }
.dash-row.todo .dash-row-status { color: var(--accent2); }
.dash-row.waiting .dash-row-status { color: var(--yellow-text); }
.dash-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dash-row-total { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.dash-row-date { font-size: 12.5px; color: var(--text3); }
.dash-row-chev { color: var(--text3); opacity: 0.7; }

.dash-ring circle { fill: none; stroke: var(--border); stroke-width: 3.2; stroke-linecap: round; }
.dash-ring circle.done { stroke: var(--accent); }
.dash-ring circle.now { stroke: rgba(var(--accent-rgb), 0.4); }
.dash-ring circle.bad { stroke: var(--risk); }
.dash-ring circle.skip { stroke: var(--accent); opacity: 0.4; }
.dash-ring text { font-size: 9.5px; font-weight: 700; fill: var(--text2); font-family: 'Inter', sans-serif; font-feature-settings: 'tnum'; }
.dash-ring .tick { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.dash-none { margin: 0; padding: 36px 12px; text-align: center; font-size: 14px; color: var(--text3); }
.dash-empty { padding-top: 4px; }
.dash-list.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: 12px; 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: 23px; 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: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.dash-detail-facts dd { margin: 4px 0 0; font-size: 14.5px; 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: 10.5px; 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: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.dash-next-hint { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text2); text-wrap: pretty; }
.dash-next .dash-detail-primary { margin-top: 14px; }

.dash-detail-section {
  display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3);
}
.dash-detail-section span + span { letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; color: var(--text2); }

/* The side line: numbered dots, ticked when done, joined by a line that fills in blue. */
.dash-timeline { list-style: none; margin: 0; padding: 0; }
.dash-timeline li { position: relative; padding: 0 0 10px 40px; }
.dash-timeline li:last-child { padding-bottom: 0; }
.dash-timeline li::before {
  content: ''; position: absolute; left: 11px; top: 30px; bottom: 2px; width: 2px;
  border-radius: 2px; background: var(--border);
}
.dash-timeline li:last-child::before { display: none; }
.dash-timeline li.done::before { background: var(--accent); }
.dash-timeline-dot {
  position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 99px;
  border: 2px solid var(--border); background: var(--surface); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: var(--text3); font-variant-numeric: tabular-nums;
}
.dash-timeline li.done .dash-timeline-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-timeline li.now .dash-timeline-dot { border-color: var(--accent); color: var(--accent2); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16); }
.dash-timeline li.bad .dash-timeline-dot { background: var(--risk); border-color: var(--risk); color: #fff; }
.dash-timeline li.skip .dash-timeline-dot { border-style: dashed; }
.dash-timeline li.skip { opacity: 0.75; }
.dash-timeline-btn {
  position: relative; display: block; width: 100%; padding: 9px 36px 9px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  min-height: 52px; box-sizing: border-box; transition: border-color 0.15s, background 0.15s;
}
.dash-timeline li.now .dash-timeline-btn { border-color: rgba(var(--accent-rgb), 0.45); }
.dash-timeline-btn:hover, .dash-timeline-btn:focus-visible { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.45); outline: none; }
.dash-timeline-btn:active { background: rgba(var(--accent-rgb), 0.12); }
.dash-timeline-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); }
.dash-timeline-label { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.dash-timeline-text { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text3); }
.dash-timeline li.done .dash-timeline-text { color: var(--accent2); }
.dash-timeline li.now .dash-timeline-text { color: var(--text2); }
.dash-timeline li.bad .dash-timeline-text { color: var(--risk); }
.dash-timeline li.now .dash-timeline-label { color: var(--accent2); }

.dash-detail-primary {
  width: 100%; min-height: 50px; border: 0; border-radius: 14px;
  background: var(--accent-grad);
  color: #fff; font: inherit; font-size: 15px; 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: 14px; font-weight: 600; cursor: pointer;
}
.dash-detail-links:empty { display: none; }

/* Re-inspections due (js/reinspection.js): a calendar badge in the ring's place. */
.reinspect-badge {
  width: 36px; height: 36px; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,182,72,0.16); color: var(--yellow-text);
}
.reinspect-row.overdue .reinspect-badge { background: rgba(192,57,43,0.12); color: var(--risk); }
.reinspect-row.reminded .reinspect-badge { background: rgba(var(--accent-rgb), 0.12); color: var(--accent2); }
.reinspect-row .dash-row-status { color: var(--yellow-text); }
.reinspect-row.overdue .dash-row-status { color: var(--risk); }
.reinspect-row.reminded .dash-row-status { color: var(--accent2); }
.reinspect-row .dash-row-total { font-size: 13.5px; }
.dash-detail-chip.overdue { background: rgba(192,57,43,0.12); color: var(--risk); }
.dash-next .dash-detail-links { margin-top: 10px; }
.reinspect-note { margin: 12px 2px 0; font-size: 13px; 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: 14.5px; line-height: 1.5; resize: vertical; }
.reinspect-form + .reinspect-note + .dash-detail-actions { margin-top: 16px; }

/* A step's preview inside the sheet. */
.dash-peek-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 12px; }
.dash-peek-back, .dash-peek-full {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 99px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.dash-peek-back { margin-left: -8px; border: none; background: none; color: var(--accent2); }
.dash-peek-full { border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
.dash-peek-kicker { font-size: 12.5px; color: var(--text3); }
.dash-peek-title { margin: 2px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }
.dash-peek-status { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--text2); }
.dash-peek-status.done { color: var(--accent2); }
.dash-peek-status.now { color: var(--accent2); }
.dash-peek-status.bad { color: var(--risk); }
.dash-peek-body { margin: 16px 0 20px; padding: 14px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); }
.dash-peek-rows { display: grid; grid-template-columns: minmax(92px, auto) 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.dash-peek-rows dt { color: var(--text3); }
.dash-peek-rows dd { margin: 0; color: var(--text); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dash-peek-sub { margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); }
.dash-peek-none { margin: 0; font-size: 13.5px; color: var(--text3); }
.dash-peek-warn { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--yellow-text); }
.dash-peek-num { margin-bottom: 8px; font-size: 12.5px; color: var(--text3); }
.dash-peek-lines { list-style: none; margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.dash-peek-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; color: var(--text); }
.dash-peek-lines strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-peek-totals { margin: 0; padding: 0; border: none; }
.dash-peek-totals li { color: var(--text2); }
.dash-peek-totals li.grand { color: var(--text); font-size: 15px; font-weight: 700; }
.dash-peek-sig { display: block; margin-top: 12px; max-width: 200px; max-height: 70px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* 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-list.fade-in, .dash-none.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: 11px;
  color: var(--yellow-text);
  line-height: 1.5;
}

.asb-icon { flex-shrink: 0; font-size: 13px; }
.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: 13px;
  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: 15px; flex-shrink: 0; }
/* A toast with a button (Undo) takes taps; plain toasts let them through. */
.toast.toast-has-action { pointer-events: auto; padding-right: 8px; }
.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 13px '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 app.js). */
.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: 12.5px;
  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: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; }
.ai-keep-btn[hidden] { display: none; }
@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: 12px; 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 {
  position: absolute; top: 40px; right: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13,17,23,0.16);
  padding: 12px;
  z-index: 300;
  display: none;
}
.profile-dropdown.open { display: block; }
.profile-dropdown-name { font-size: 13px; font-weight: 700; color: var(--text); }
.profile-dropdown-email { font-size: 12px; 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: 11.5px; color: var(--text2); }
.profile-dropdown-divider { height: 1px; background: var(--border); margin: 10px 0; }
.profile-dropdown-item[hidden] { display: none; }
.profile-dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 8px; background: none; border: none; border-radius: 7px;
  color: var(--text2); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s;
  min-height: 44px;
}
.profile-dropdown-item:hover { background: var(--surface2); color: var(--accent2); }
.profile-dropdown-item.profile-signout:hover { color: var(--risk); background: rgba(192,57,43,0.08); }

/* ── SECTION PHOTO WIDGET ── */
.section-photo-hint { font-size: 12px; color: var(--text3); padding: 8px 12px 0; }
.section-photo-widget {
  margin: 8px 14px 4px;
  border: 1px solid #B8CDE0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,40,80,0.04);
}
.section-photo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.section-photo-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}
.section-photo-header-left svg { color: var(--accent2); }
.section-photo-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
}
.section-photo-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: 6px;
  color: var(--accent2);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 44px;
}
.section-photo-add-btn:hover { background: rgba(var(--accent-rgb),0.18); }
.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 {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
}
.field-label:has(.field-hint) { flex-wrap: wrap; }
.field-hint { flex-basis: 100%; font-size: 11.5px; 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: 12.5px; color: var(--text3); line-height: 1.45; }
.access-intro .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: 15px; font-weight: 700; color: var(--text); line-height: 1.25; }
.access-group-title small { font-size: 12px; font-weight: 400; color: var(--text3); line-height: 1.4; }
.access-count { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 12px; 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: 15px; 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: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.access-item-state::after { content: '›'; font-size: 16px; 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: 13.5px; 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: 14px; 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: 16px; 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-photo .photo-remove-btn { justify-self: start; }
.spot-photo-add { align-self: flex-start; font-size: 13px; min-height: 32px; }
.access-item-why.missing { color: var(--yellow-text); font-weight: 600; }
.access-hint { margin-top: 6px; font-size: 12px; 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:12px; color:var(--text2); line-height:1.6; }


.obs-zone-label { font-size: 11px; 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: 12px;
  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: 10.5px;
  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: 10.5px; 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: 12px;
  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: 20px; 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: 14px; font-weight: 600; color: var(--text); }
.area-sum-state { flex: none; font-size: 12px; 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: 12px; 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: 11.5px; 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); }
body.dark-screen .area-status-btn.status-na { background: rgba(147,163,179,0.2); }
.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: 11.5px; 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: 12px; 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; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); font-size: 13px; color: var(--text2); line-height: 1.4; }
.area-finding-prompt .link-btn { flex: none; }
.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); }
.moisture-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.moisture-row .photo-caption-input { flex: 1; min-width: 0; }
.moisture-row .moisture-reading { flex: 0 0 80px; }
.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:12px; }
.high-risk-prompt-text strong { color: var(--yellow-text); font-size: 12.5px; }
.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: 11px; 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: 12.5px;
  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: 12px;
  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: 11px;
  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: 12px;
  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: 11.5px;
  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: 14px; flex-shrink: 0; margin-top: 1px; }
.species-flag-text { color: var(--text); font-size: 11.5px; }
.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: 11.5px !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: 10px;
  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: 11.5px;
  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: 12px;
  font-weight: 700;
  color: var(--text);
}

.intel-treatment-type {
  font-size: 9.5px;
  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: 11px;
  color: var(--text2);
  line-height: 1.5;
}

.intel-treatment-toxicity {
  font-size: 10px;
  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: 11px;
  color: var(--text2);
  line-height: 1.5;
  padding: 2px 0;
}

.intel-prompt-item::before {
  content: '→';
  color: var(--accent2);
  flex-shrink: 0;
  font-size: 10px;
  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,
.saved-item: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: 12.5px; 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: 16px; font-weight: 800; color: var(--text); }
.did-it-send-text { margin: 8px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.did-it-send-btns { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.photo-source-btns { margin-top: 14px; }
.move-status { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text); }
.move-steps { margin: 0 0 14px; padding-left: 20px; font-size: 13px; 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; }
#moveOverlay .did-it-send-btns [hidden] { display: none; }
.doc-sent-lines { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.doc-sent { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text2); }
.doc-sent strong { font-weight: 700; }
.doc-sent.sent strong { color: var(--green); }
.doc-sent.stale strong { color: var(--yellow-text); }
.doc-sent.unsent strong { color: var(--text3, var(--text2)); }

/* 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: 15px; font-weight: 700; color: var(--text); }
.extract-summary-label { font-size: 12px; 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: 14px; text-align: left; cursor: pointer;
}
.extract-blank-btn span { color: var(--text2); font-size: 18px; }
.extract-summary-done { font-size: 13px; 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: 14px; 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: 14px; 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. The dark screen (body.dark-screen)
   keeps its own near-black rules, which win on specificity. */
: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:not(.dark-screen) { background: var(--backdrop); background-color: #070B10; }
body:not(.dark-screen) #splash,
body:not(.dark-screen) #mainMenu,
body:not(.dark-screen) #quoteScreen { background: var(--backdrop); background-color: #070B10; color-scheme: dark; }
body:not(.dark-screen) .splash-logo,
body:not(.dark-screen) .menu-logo-text { color: var(--on-ink); }
body:not(.dark-screen) .menu-tagline,
body:not(.dark-screen) .menu-footer,
body:not(.dark-screen) .menu-footer a { color: var(--on-ink2); }
body:not(.dark-screen) .menu-logo-icon { color: var(--accent-hi); }
body:not(.dark-screen) .menu-tile { border-color: transparent; box-shadow: 0 18px 44px rgba(0,0,0,0.45); }

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

/* Cards on the backdrop: white, no edge line, a soft shadow for lift. */
body:not(.dark-screen) .report-section,
body:not(.dark-screen) #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:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .agreement-banner.signed { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); }
/* Link sent: it's on the client now, so amber rather than the red "get it signed". */
body:not(.dark-screen) .agreement-banner.waiting { background: rgba(212,146,10,0.1); border-color: var(--yellow); color: var(--yellow-text); box-shadow: none; }
body:not(.dark-screen) .agreement-banner.waiting .agreement-banner-btn { background: transparent; border-color: currentColor; color: inherit; box-shadow: none; }
body:not(.dark-screen) .issue-banner { background: #FFFFFF; border-color: transparent; box-shadow: 0 14px 36px rgba(0,0,0,0.35); }
body:not(.dark-screen) .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, and the
   dark screen keeps its own plain look. */
: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:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .report-section .section-header h3 .sec-num { color: rgb(var(--glow-ink)); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body:not(.dark-screen) .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: 15px;
  }
}
/* Cards inside a section (findings, area rows, access groups) take the
   same fading line under their heading. */
body:not(.dark-screen) .finding-card-header,
body:not(.dark-screen) .obs-zone-panel[open] > .obs-zone-panel-header,
body:not(.dark-screen) .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;
}
body:not(.dark-screen) .finding-card-header { background: linear-gradient(135deg, rgba(var(--glow),0.10), rgba(var(--glow),0) 70%), var(--surface2); }
/* A picked answer glows in its own colour (red, amber, green or grey). */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  body:not(.dark-screen) .choice-card:has(input:checked),
  body:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .app-logo-icon,
body:not(.dark-screen) .auth-logo-icon,
body:not(.dark-screen) .menu-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);
}
body:not(.dark-screen) .menu-logo-icon {
  width: 46px; height: 46px; border-radius: 13px; justify-content: center; filter: none;
  box-shadow: 0 0 34px rgba(var(--glow-hi),0.35), 0 8px 22px rgba(var(--glow),0.25), inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(var(--accent-deep-rgb),0.35);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body:not(.dark-screen) .app-logo-name,
  body:not(.dark-screen) .auth-logo-name,
  body:not(.dark-screen) .menu-logo-text {
    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));
  }
  body:not(.dark-screen) .menu-logo-text { font-size: 34px; }
}
/* A fine blue line under the top bars, fading out to the right. */
body:not(.dark-screen) header,
body:not(.dark-screen) .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;
}
/* Home screen: brighter tagline between two fading lines, glowing tiles. */
body:not(.dark-screen) .menu-tagline { color: #CFEFEB; font-size: 11px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
body:not(.dark-screen) .menu-tagline::before,
body:not(.dark-screen) .menu-tagline::after { content: ''; flex: 0 1 40px; min-width: 10px; height: 1px; background: linear-gradient(90deg, rgba(var(--glow-hi),0), rgba(var(--glow-hi),0.8)); }
body:not(.dark-screen) .menu-tagline::after { transform: scaleX(-1); }
@media (max-width: 360px) {
  body:not(.dark-screen) .menu-tagline { white-space: normal; }
  body:not(.dark-screen) .menu-tagline::before, body:not(.dark-screen) .menu-tagline::after { display: none; }
}
body:not(.dark-screen) .menu-tile.live {
  border-style: solid; border-width: 3px 0 0;
  border-image: linear-gradient(90deg, rgb(var(--glow)), rgb(var(--glow-hi)) 45%, rgba(var(--glow-hi),0)) 1;
  clip-path: inset(0 round 14px);
  background: linear-gradient(135deg, rgba(var(--glow),0.12) 0%, rgba(var(--glow-hi),0.04) 45%, rgba(var(--glow),0) 75%), var(--surface);
}
body:not(.dark-screen) .menu-grid { filter: drop-shadow(0 -8px 22px rgba(var(--glow),0.35)); }
body:not(.dark-screen) .menu-tile.live .menu-tile-icon,
body:not(.dark-screen) .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:not(.dark-screen) .drawer-group-label { display: flex; align-items: center; gap: 10px; color: rgb(var(--glow-ink)); }
body:not(.dark-screen) .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:not(.dark-screen) .choice-card.tone-neutral:has(input:checked),
body:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .mic-fab:not(.recording):not(.open) svg { filter: drop-shadow(0 1px 1px rgba(var(--accent-deep-rgb),0.5)); }
body:not(.dark-screen) .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:not(.dark-screen) .choice-card { transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s, transform 0.08s; }
#invasiveDetailsWrap[hidden] { display: none; }

/* 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: 13px; }
.areas-mark-all[hidden] { display: none; }
.area-result-label { padding: 0 12px 6px; font-size: 12px; 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: 12px; 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-where { padding: 0 12px 12px; font-size: 12.5px; color: var(--text3); }
.area-where .link-btn { display: inline; min-height: 0; margin: 0; padding: 0; font-size: inherit; }
.area-status-btn { font-size: 12px; line-height: 1.2; }

/* Areas on a side line, like a job's steps: a dot per area shows its status
   (tick, amber tick for limits, cross, dash for not applicable, or its
   number while unmarked), and the line turns blue past each marked area. */
.areas-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; width: 100%; margin-top: 2px; }
.areas-bar > * { white-space: nowrap; }
.areas-progress { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); font-variant-numeric: tabular-nums; }
#areaChecklist { gap: 10px; }
.area-node { position: relative; padding-left: 30px; }
.area-node::before {
  content: ''; position: absolute; left: 9px; top: 36px; bottom: -24px; width: 2px;
  border-radius: 2px; background: var(--border); transition: background 0.2s;
}
.area-node:last-child::before { display: none; }
.area-node[class*="area-node-"]::before { background: rgba(var(--accent-rgb), 0.55); }
.area-node-dot {
  position: absolute; left: 0; top: 14px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 99px;
  border: 2px solid var(--border); background: var(--surface); color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.area-node-inspected .area-node-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.area-node-partial .area-node-dot { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.area-node-not .area-node-dot { background: var(--risk); border-color: var(--risk); color: #fff; }
.area-node-na .area-node-dot { border-style: dashed; border-color: var(--text3); color: var(--text2); font-size: 13px; }
.area-node.open .area-node-dot { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16); }
.area-node:not([class*="area-node-"]).open .area-node-dot { border-color: var(--accent); color: var(--accent2); }

/* Inside an open area: one card, sections split by hairlines, no boxes in boxes. */
#areaChecklist .obs-zone-panel { border-radius: 12px; }
#areaChecklist .obs-zone-panel[open] { background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px -6px rgba(15,23,42,0.10); }
#areaChecklist .area-sum-name { font-size: 14.5px; letter-spacing: -0.01em; }
#areaChecklist .area-status { gap: 5px; padding: 12px 10px; }
#areaChecklist .area-status-btn { padding: 7px 2px; font-size: 11.5px; letter-spacing: -0.01em; white-space: nowrap; }
#areaChecklist .area-result-label { padding: 0 12px 8px; }
#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 { padding: 8px 0 12px; }
#areaChecklist .area-where { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
@media (min-width: 900px) { #areaChecklist .area-status, #areaChecklist .area-result { max-width: 640px; } }

/* 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: 14px; font-weight: 600; color: var(--text); }
.addr-suggest-area { font-size: 12px; color: var(--text2); }
.addr-suggest-credit { padding: 5px 12px 6px; font-size: 10.5px; 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[hidden] { display: none; }
.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: 13px; 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: 12px; 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: 15px; font-weight: 600; cursor: pointer;
}
.photo-viewer-markup[hidden] { display: none; }

/* ── 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[hidden] { display: none; }
.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: 16px; 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: 15px; 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: 12.5px; color: #FFD60A; text-align: center; }
.photo-markup-note[hidden] { display: none; }
.photo-markup-label { display: flex; gap: 8px; padding: 8px 12px 0; }
.photo-markup-label[hidden] { display: none; }
.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: 16px;
}
.photo-markup-hint { text-align: center; font-size: 13px; 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: 13px; 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; }

/* ── 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. The dark screen keeps its plain look. */
body:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .voice-popover-title { font-size: 15px; letter-spacing: -0.2px; color: rgb(var(--glow-ink)); }
body:not(.dark-screen) #voicePopoverTitleText { color: var(--text); }
body:not(.dark-screen) .voice-popover-close { border-radius: 50%; border-color: transparent; background: rgba(var(--glow),0.08); color: var(--text2); }
body:not(.dark-screen) .toggle-switch.on { background: linear-gradient(180deg, var(--accent-hi), var(--accent-deep)); }
body:not(.dark-screen) .toggle-switch.on::after { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

body:not(.dark-screen) .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: 15px;
  font-weight: 700;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(var(--glow),0.14);
}
body:not(.dark-screen) .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:not(.dark-screen) .voice-btn:hover { border-color: rgba(var(--glow),0.7); background: linear-gradient(180deg, #FFFFFF 0%, rgba(var(--glow-hi),0.2) 100%); }
body:not(.dark-screen) .voice-btn.recording { border-color: rgba(215,38,30,0.55); background: linear-gradient(180deg, #FFFFFF 0%, #FFE9E7 100%); color: #9B1C1C; }
body:not(.dark-screen) .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:not(.dark-screen) .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:not(.dark-screen) .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: 14px;
  line-height: 1.55;
  color: var(--text3);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
body:not(.dark-screen) .transcript-box.active { color: var(--text); background: #FFFFFF; border-color: rgba(var(--glow),0.55); }
body:not(.dark-screen) .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:not(.dark-screen) .extract-btn {
  min-height: 52px;
  border-radius: 14px;
  font-size: 15px;
  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:not(.dark-screen) .extract-btn:disabled { opacity: 0.4; box-shadow: none; }
body:not(.dark-screen) .ai-bar { justify-content: center; border: 0; background: transparent; padding: 2px 10px 0; font-size: 11.5px; color: var(--text3); }
body:not(.dark-screen) .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:not(.dark-screen) .next-section-btn,
body:not(.dark-screen) .cleanup-apply-btn,
body:not(.dark-screen) .profile-btn,
body:not(.dark-screen) .issue-banner .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:not(.dark-screen) .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: 26px; fill: #dc2626 !important; }
.compass-l { font-size: 20px; }
.compass-s { font-size: 12px; 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: 13px; 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; font-size: 17px; }
.compass-body .extract-btn[hidden] { display: none; }

/* ── 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 12px '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; }
.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 10.5px 'Inter', sans-serif;
  box-shadow: 0 0 0 2px rgb(14,24,33);
}
.tab-count[hidden] { display: none; }
.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 9.5px '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:not(.dark-screen) .tabbar .mic-fab:not(.recording):not(.open) { color: var(--accent-ink); }
body:not(.dark-screen) .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 13px '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; }
}
/* While recording the screen is locked, the tabs 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, plain on the dark screen. */
.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 19px 'Space Grotesk', sans-serif; letter-spacing: -0.2px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(.dark-screen) .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:not(.dark-screen) .page-topbar-title { color: var(--on-ink); }
body:not(.dark-screen) .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 12px 'Inter', sans-serif;
}
body:not(.dark-screen) .page-topbar .topbar-account { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-ink); }

/* 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:not(.dark-screen) .dashboard-overlay,
body:not(.dark-screen) .job-overlay,
body:not(.dark-screen) .sidebar:not(.on-page) { background: var(--backdrop); background-color: #070B10; color-scheme: dark; }
body:not(.dark-screen) .dash-hero-date { color: var(--accent-glow); }
body:not(.dark-screen) .dash-hero-title { color: var(--on-ink); }
body:not(.dark-screen) .dash-hero-title b { color: var(--pink); }
body:not(.dark-screen) .dash-tabs { border-bottom-color: rgba(255,255,255,0.1); }
body:not(.dark-screen) .dash-tab { color: var(--on-ink2); }
body:not(.dark-screen) .dash-tab.active { color: var(--on-ink); }
body:not(.dark-screen) .dash-tab span { background: rgba(255,255,255,0.1); color: var(--on-ink2); }
body:not(.dark-screen) .dash-tab.active span { background: rgba(var(--accent-glow-rgb),0.18); color: var(--accent-glow); }
body:not(.dark-screen) .dash-tabs.searching .dash-tab.active { color: var(--on-ink2); }
body:not(.dark-screen) .dash-tab-line { background: var(--accent-glow); box-shadow: 0 0 10px rgba(var(--glow-hi),0.6); }
body:not(.dark-screen) .dash-none,
body:not(.dark-screen) .dash-search,
body:not(.dark-screen) .dash-list { border-color: transparent; box-shadow: 0 14px 36px rgba(0,0,0,0.35); }
body:not(.dark-screen) .sidebar:not(.on-page) .drawer-group-label { color: var(--accent-glow); }
body:not(.dark-screen) .sidebar:not(.on-page) .drawer-group-label::after { background: linear-gradient(90deg, rgba(var(--glow-hi),0.6), rgba(var(--glow-hi),0)); }
body:not(.dark-screen) .sidebar:not(.on-page) .drawer-legal,
body:not(.dark-screen) .sidebar:not(.on-page) .drawer-legal a { color: var(--on-ink2); }

/* ── MENU: ACCOUNT ── who's signed in, at the top of the menu. */
.menu-account {
  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);
}
.menu-account-who { display: flex; align-items: center; gap: 12px; }
.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 15px 'Inter', sans-serif;
}
.menu-account-text { min-width: 0; }
.menu-account .profile-dropdown-name { font-size: 15px; }
.menu-account-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.menu-account-actions .profile-dropdown-item { width: auto; flex: 1; justify-content: center; min-height: 40px; border: 1px solid var(--border); border-radius: 10px; }
.sidebar.on-page .menu-account { display: none; }

/* 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 13px '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: 11px; 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: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.finish-next-text small { font-size: 12.5px; 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 13.5px 'Inter', sans-serif; color: var(--accent2); cursor: pointer;
}
.finish-next-pdf:disabled { opacity: 0.4; cursor: not-allowed; }
body.dark-screen .finish-next-btn { border: 2px solid var(--border2); }
body.dark-screen .finish-next-btn.primary { background: var(--accent-glow); color: #000000; box-shadow: none; }
body.dark-screen .finish-next-btn.primary .finish-next-icon { background: rgba(0,0,0,0.12); color: #000000; }
body.dark-screen .finish-next-btn.primary small, body.dark-screen .finish-next-btn.primary .finish-next-chev { color: rgba(0,0,0,0.75); }

/* The certificate on the quote's Treatment step, and its Email button lit when arriving from the dashboard. */
.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: 13.5px; font-weight: 700; color: var(--text); }
.qp-cert-text { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text2); }
.qp-cert-to { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text3); }
.qp-cert .quote-step-actions { margin-top: 10px; }
.qp-cert-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 { animation: none; } }

.dash-search[hidden] { display: 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: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.rec-lines-head small { font-size: 12px; 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: 12.5px; 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: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[hidden] { display: none; }
.rec-lines-added li { position: relative; padding-left: 16px; font-size: 13px; 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. */
.section-tabs { gap: 2px; padding: 6px 8px; }
.section-tab {
  flex: 1 1 auto; min-width: 0;
  flex-direction: column; justify-content: center; gap: 4px;
  padding: 7px 6px; font-size: 11.5px; 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: 13px; }
}
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 and
   at sign-off. */
#reportBody:not([data-step="property"]):not([data-step="finish"]) > #agreementBanner { display: none !important; }

/* 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:not(.dark-screen) .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:not(.dark-screen) .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 15px 'Space Grotesk', sans-serif; letter-spacing: -0.2px; color: var(--text); }
.fgroup-sub {
  font-size: 12.5px; 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: 11px; 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-chev { flex-shrink: 0; color: var(--text3); transition: transform 0.2s ease; }
.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:not(.dark-screen) .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; }
body.dark-screen .report-section.grouped > details.fgroup { border-width: 2px; box-shadow: none; }

/* Sub-headings inside a group: a blue bullet, the topic, a fading rule. */
.fsub {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 8px;
  font-size: 11.5px; 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; min-height: 44px; padding: 0 2px; font-size: 13px; 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: 12.5px; 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-add-btn,
.report-section.grouped > details.fgroup > .findings-none { margin-left: 8px; margin-right: 8px; width: auto; }
.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: 11.5px; 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 app.js) */
.sheet-voice { margin: 10px 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, rgba(0,0,0,0.1)); background: var(--surface2); }
.sheet-voice-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--accent, #1a7f6e); background: transparent; color: var(--accent2, var(--accent)); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.sheet-voice-btn:disabled { opacity: .6; cursor: default; }
.sheet-voice[data-state="listening"] .sheet-voice-btn { background: var(--accent, #1a7f6e); color: #fff; animation: sheetVoicePulse 1.4s ease-in-out infinite; }
@keyframes sheetVoicePulse { 50% { box-shadow: 0 0 0 6px rgba(var(--accent-deep-rgb),0.18); } }
.sheet-voice-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text3); }
.sheet-voice-text { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.sheet-voice[data-state="listening"] .sheet-voice-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .sheet-voice[data-state="listening"] .sheet-voice-btn { animation: none; } }

/* ── LAST VISIT: an address inspected before ── */
body:not(.dark-screen) .agreement-banner.last-visit-banner, .agreement-banner.last-visit-banner { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent2); box-shadow: none; }
body.dark-screen .agreement-banner.last-visit-banner { border-color: rgba(var(--accent-rgb),0.45); background: rgba(var(--accent-rgb),0.1); color: var(--accent2); }
.last-visit-skip { flex-shrink: 0; padding: 0 6px; min-height: 32px; font-size: 12px; font-weight: 700; color: inherit; opacity: 0.8; }
.last-visit-skip[hidden] { display: none; }
.agreement-banner[hidden] { display: none; }
body:not(.dark-screen) .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: 12px; 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: 14px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.last-visit-cols small { display: block; font-size: 11px; 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: 12.5px; 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; }
.settings-row[hidden], .auth-field[hidden] { display: none; }

/* Your team */
.team-places { padding: 4px 0 8px; font-size: 12.5px; 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: 13px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.team-row-sub { font-size: 11.5px; color: var(--text3); overflow-wrap: anywhere; }
.team-row-pending .team-row-name { color: var(--text2); }
.team-row-btn { flex: none; font-size: 12.5px; }
.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; }
.team-more[hidden] { display: none; }

/* ── 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: 13px; }
  .dash-tab span { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
  .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 { padding: 18px 0 4px; }
.job-hero .dash-detail-chip { margin-bottom: 8px; }
.job-hero-addr { margin: 0; font: 700 26px/1.15 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: var(--text); }
.job-hero-sub { margin: 6px 0 0; font-size: 15px; 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: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.job-steps .dash-timeline-btn { min-height: 58px; }
.job-pdf { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.job-pdf-lede { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text2); }
.job-pdf-list { margin: 0 0 12px; padding: 0 0 0 20px; }
.job-pdf-list li { padding: 5px 0; font-size: 14px; color: var(--text); }
.job-pdf-list li strong { display: block; font-weight: 650; }
.job-pdf-list li span { display: block; font-size: 12.5px; color: var(--text3); }
.job-pdf-note { margin: 0 0 12px; font-size: 13px; color: var(--text3); }
.job-pdf .job-pdf-btn:disabled { opacity: 0.6; cursor: default; }
.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 .job-actions, .job-page .sync-status { padding-left: 16px; padding-right: 16px; }
.job-page .sync-status { padding-bottom: 14px; }
body:not(.dark-screen) .job-hero-addr { color: var(--on-ink); }
body:not(.dark-screen) .job-hero-sub,
body:not(.dark-screen) .job-section-head { color: var(--on-ink2); }
body:not(.dark-screen) .job-section-head { color: var(--accent-glow); }
body:not(.dark-screen) .job-steps .dash-timeline-btn { border-color: transparent; box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
/* The job page sits on dark ink: a see-through hover would take the card's
   white away and its dark title with it (and touch keeps hover after a tap). */
body:not(.dark-screen) .job-steps .dash-timeline-btn:hover,
body:not(.dark-screen) .job-steps .dash-timeline-btn:focus-visible { background: var(--surface); border-color: rgba(var(--accent-rgb), 0.45); }
body:not(.dark-screen) .job-steps .dash-timeline-btn:active { background: var(--surface2, var(--surface)); }
body:not(.dark-screen) .job-steps li::before { background: rgba(255,255,255,0.18); }
body:not(.dark-screen) .job-steps li.done::before { background: var(--accent-hi); }
body:not(.dark-screen) .job-steps .dash-timeline-dot { border-color: rgba(255,255,255,0.3); background: #0F1A23; color: var(--on-ink2); }
body:not(.dark-screen) .job-steps li.done .dash-timeline-dot { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-ink); }
body:not(.dark-screen) .job-steps li.now .dash-timeline-dot { border-color: var(--accent-glow); color: var(--accent-glow); box-shadow: 0 0 0 4px rgba(var(--accent-glow-rgb),0.18); }
body:not(.dark-screen) .job-page #jobPanel { border-color: transparent; box-shadow: 0 14px 36px rgba(0,0,0,0.35); }

/* ── DOCUMENT STRIP ──
   At the top of the report and the quote: back to the job's page, then the
   job's documents, the one on show lit. Scrolls sideways on a small phone. */
.doc-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px 8px; }
.doc-strip::-webkit-scrollbar { display: none; }
.doc-strip:empty { display: none; }
.doc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 13px; border-radius: 17px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  font: 600 13px 'Inter', sans-serif; cursor: pointer; white-space: nowrap;
}
.doc-chip.done::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--accent); }
.doc-chip.here { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.doc-chip.here.done::after { background: rgba(255,255,255,0.85); }
.doc-chip-job { padding-left: 8px; color: var(--text); }
body:not(.dark-screen) .doc-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--on-ink2); }
body:not(.dark-screen) .doc-chip-job { color: var(--on-ink); }
body:not(.dark-screen) .doc-chip.done::after { background: var(--accent-glow); }
body:not(.dark-screen) .doc-chip.here { background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%); border-color: transparent; color: var(--accent-ink); }
body:not(.dark-screen) .doc-chip.here.done::after { background: var(--accent-ink); }
.doc-strip-bar { flex-shrink: 0; }
body:not(.dark-screen) .doc-strip-bar { background: var(--ink); }
/* The strip names the document, so the report's own title line steps aside. */
.report-header .report-title { display: none; }
.report-header { padding: 0; }
.report-header .doc-strip { flex: 1; min-width: 0; }

/* 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); }
body:not(.dark-screen) .job-steps li.done .dash-timeline-dot { background: var(--green-fill); border-color: var(--green-fill); color: #052E14; }
body:not(.dark-screen) .job-steps li.done::before { background: var(--green-fill); }
body:not(.dark-screen) .doc-chip.done::after { background: var(--green-fill); }
::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: 16px; 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: 15px; }
.send-review-warn { font-size: 13px; }
.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: 14.5px; }
.send-review-file-meta { margin-top: 2px; font-size: 12.5px; }
.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: 13px; 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: 12.5px; }
.send-review-tiles { gap: 8px; }
.send-review-tile { padding: 10px 12px; border-radius: 10px; }
.send-review-tile span { font-size: 11px; }
.send-review-tile strong { font-size: 13px; }
.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: 15px; 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: 13.5px; 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);
}
body.dark-screen .send-review-file .link-btn, body.dark-screen .send-review-fixes .link-btn { background: var(--surface2); }

/* Saved reports, refreshed: cards at reading size, with a delete button
   big enough to hit. */
.saved-item { gap: 12px; padding: 14px 10px 14px 16px; border-radius: 14px; background: var(--surface); }
.saved-item:hover { background: var(--accent-wash); }
.saved-item-address { font-size: 15px; letter-spacing: -0.01em; }
.saved-item-meta { margin-top: 4px; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; }
.saved-item-risk, .saved-item-quote, .saved-item-status { font-size: 11px; padding: 2px 8px; border-radius: 99px; }
.saved-item-delete { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
body.dark-screen .saved-item:hover { background: var(--surface2); }

/* ── 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: 13px; font-weight: 650; color: var(--text); line-height: 1.35; }
.pb-row-unit { font-size: 11.5px; color: var(--text3); line-height: 1.4; }
.pb-start { color: #8a5a00; font-weight: 600; }
body.dark-screen .pb-start { color: var(--yellow); }
.pb-price { position: relative; flex: none; width: 104px; }
.pb-dollar { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; 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: 15px; 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-back[hidden] { display: none; }
.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-owner[hidden] { display: none; }
.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: 13px; 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: 11.5px; 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-add[hidden], #chemReset[hidden] { display: none; }
.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: 14px; font-weight: 650; color: var(--text); }
.chem-card-sub { font-size: 11.5px; 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: 13px; 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: 12px; color: #8a5a00; line-height: 1.4; margin-top: 4px; }
body.dark-screen .treat-use-note { color: var(--yellow); }
.treat-use-note[hidden], .treat-keep-rate[hidden] { display: none; }
.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: 13px; 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-card[hidden], #chemNoMatch[hidden] { display: none; }
.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: 12.5px; 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); }
body.dark-screen .chem-doc-exp.soon { color: var(--yellow); }
.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: 13px; 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: 12.5px; color: var(--text3); }
.chem-rates { display: flex; flex-direction: column; gap: 6px; }
.chem-rates:empty { display: none; }
.chem-rate { padding: 6px 0; border-bottom: 1px solid var(--border); }
.chem-rate:last-child { border-bottom: none; }
.chem-rate-use { font-size: 12.5px; color: var(--text2, var(--text)); line-height: 1.4; }
.chem-rate-val { font-size: 13px; font-weight: 650; color: var(--text); }
.chem-rate-val.none { color: #8a5a00; font-weight: 600; }
body.dark-screen .chem-rate-val.none { color: var(--yellow); }
.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: 11px; 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: 14px; 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: 14px; font-weight: 650; color: var(--accent2); text-decoration: underline; text-underline-offset: 3px;
}
/* The tag on its row in Jobs. */
.dash-row-sample {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; vertical-align: 1px;
  background: rgba(var(--pink-rgb), 0.12); color: var(--pink-text);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
/* An empty Jobs list offers the sample. */
.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 19px/1.2 'Space Grotesk', sans-serif; letter-spacing: -0.02em; color: var(--text); }
.dash-sample-text { margin: 6px 0 14px; font-size: 14px; 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; }