:root {
  --lake-deep: #0F3B47;
  --lake-mid: #1B5A6B;
  --lake-soft: #E6F0F2;
  --sand: #D8B888;
  --sand-warm: #C9A66B;
  --cream: #FAF6EF;
  --cream-warm: #F2E9D8;
  --stone: #6B6660;
  --charcoal: #1F2A2E;
  --leaf: #4A6B3E;
  --rust: #B85C38;
  /* Rust is the warm accent used all over the app, so it cannot also mean
     "act on this". This is a true red, kept for things actually waiting on a
     person -- open issues, restock requests, notes from Cindy. */
  --alert: #C62828;
  --alert-soft: rgba(198,40,40,.09);
  /* The one bright colour in the app. It marks where you are in the tab bar
     and nothing else, so it never has to compete with itself. */
  --spark: #22C55E;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Entering a 4-digit PIN means four fast taps in the same small area, which
   iOS reads as double-tap-to-zoom -- so the second digit zooms the page
   instead of registering. `manipulation` turns off double-tap zoom while
   leaving pinch-zoom and scrolling alone, so nothing is taken away from
   someone who needs to magnify the screen. */
button, label, select, a, [role="button"], input[type="file"] { touch-action: manipulation; }
.pin-key, .pin-pad { touch-action: manipulation; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  background: var(--cream);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: contain;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
input, textarea { font-family: inherit; font-size: inherit; }

 
.boot-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--lake-deep) 0%, var(--lake-mid) 100%);
  color: white;
}
.boot-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  margin-bottom: 16px;
}
.boot-name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.boot-sub {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-top: 4px;
}

 
/* People -> Recent sign-ins: a date heading per day, and the full date on every
   row so a cropped screenshot still says when. */
.signin-day {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone);
  margin: 16px 0 6px;
}
.signin-day:first-child { margin-top: 4px; }
.signin-id { margin-left: 7px; font-size: 10px; color: var(--stone); opacity: .7; }

.signin-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0F3B47 0%, #1B5A6B 55%, #2A7488 100%);
  color: white;
  padding: 0 16px;
}
.signin-top {
  padding-top: 32px;
  text-align: center;
  flex-shrink: 0;
}
.signin-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signin-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}
.signin-heading {
  font-size: 24px;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.signin-sub {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
}

 
.pin-dots {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 22px;
}
.pin-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  transition: background .15s, transform .15s, border-color .15s;
}
.pin-dot.filled {
  background: white;
  border-color: white;
  transform: scale(1.1);
}
.pin-dot.error {
  border-color: rgba(255, 120, 90, 0.9);
  background: rgba(255, 120, 90, 0.9);
  animation: pinShake 0.4s ease;
}
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

 
.signin-error {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 200, 180, 0.95);
  min-height: 18px;
}
.signin-error.locked { color: rgba(255, 220, 110, 0.95); }

 
.pin-pad {
  margin: 22px auto 0;
  max-width: 290px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0 8px;
}
.pin-key {
  aspect-ratio: 1 / 1;
  min-height: 58px;
  background: rgba(255,255,255,.12);
  color: white;
  border-radius: 999px;
  font-size: 26px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  transition: background .08s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:active:not(:disabled) {
  background: rgba(255,255,255,.28);
  transform: scale(0.94);
}
.pin-key svg { width: 22px; height: 22px; }
.pin-spacer { aspect-ratio: 1 / 1; }

 
/* margin-top:auto pushed this to the floor of the screen, leaving it stranded
   far below the keypad it belongs to. It sits under the keys now, and at a
   size someone can actually read -- it is the only instruction on the screen
   for a person who cannot get in. */
.signin-footer {
  margin-top: 18px;
  padding: 0 0 18px;
  text-align: center;
  flex-shrink: 0;
}
.signin-help {
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.78;
  max-width: 300px;
  margin: 0 auto;
}
.signin-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  opacity: 0.85;
}
.signin-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

 
.signedin-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--lake-deep) 0%, var(--lake-mid) 100%);
  color: white;
  text-align: center;
  padding: 24px;
}
.signedin-checkmark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
.signedin-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.signedin-name {
  font-size: 26px;
  font-weight: 500;
  margin-top: 6px;
}
.signedin-role {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}
.signedin-meta {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 24px;
  line-height: 1.5;
  max-width: 280px;
}
.signedin-signout {
  margin-top: 32px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  opacity: 0.7;
  text-decoration: underline;
  padding: 8px 16px;
}

 
.boot-error {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.boot-error-mark {
  font-size: 32px;
  color: var(--rust);
  margin-bottom: 12px;
}
.boot-error-msg {
  font-size: 14px;
  color: var(--charcoal);
  max-width: 320px;
}

 
.today-loading {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cream);
}
.today-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(15,59,71,.15);
  border-top-color: var(--lake-deep);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.today-loading-msg {
  margin-top: 12px;
  font-size: 13px;
  color: var(--stone);
}
@keyframes spin { to { transform: rotate(360deg); } }

.today-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.today-header {
  padding: 20px 24px 8px 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.today-header-left { flex: 1; }
.today-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.today-heading {
  font-family: -apple-system, 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 4px 0 4px;
  color: var(--charcoal);
}
.today-location {
  font-size: 12px;
  color: var(--stone);
}
.today-signout {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: white;
  color: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15,59,71,.05);
  flex-shrink: 0;
}
.today-signout:active { background: var(--cream-warm); }

.today-body {
  flex: 1;
  padding: 16px 16px 100px;
  overflow-y: auto;
}

.today-card {
  background: white;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,59,71,.04), 0 4px 16px -8px rgba(15,59,71,.10);
  margin-bottom: 14px;
  overflow: hidden;
}
.card-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 14px 16px 0;
}

 
.stats-card { padding-bottom: 14px; }
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 12px 16px 0;
}
.stat {
  text-align: center;
  padding: 4px 0;
}
.stat-num {
  font-size: 26px;
  font-weight: 600;
  color: var(--lake-deep);
  letter-spacing: -0.02em;
}
.stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 2px;
}
.stat-warn .stat-num { color: var(--rust); }

 
.job-card-hero {
  padding: 18px 18px 14px;
  background: linear-gradient(135deg, var(--lake-deep), var(--lake-mid));
  color: white;
  position: relative;
}
.job-card-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(255,255,255,.18);
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.job-card-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.job-card-cta {
  display: block;
  width: calc(100% - 32px);
  margin: 14px 16px;
  padding: 14px;
  background: var(--sand-warm);
  color: var(--charcoal);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}
.job-card-cta:active { transform: scale(0.99); }

 
.deep-clean-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px dashed var(--stone);
  border-radius: 16px;
  text-align: left;
}
.deep-clean-entry:active { transform: scale(0.99); }
.deep-clean-entry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sand-warm);
  color: var(--charcoal);
  flex-shrink: 0;
}
.deep-clean-entry-text { flex: 1; }
.deep-clean-entry-title { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.deep-clean-entry-sub { font-size: 12px; color: var(--stone); margin-top: 2px; }
.deep-clean-entry-chev { color: var(--stone); flex-shrink: 0; }
.scheduled-job .res-date { flex-shrink: 0; min-width: 40px; text-align: center; }

 
.sched-row { width: 100%; text-align: left; cursor: pointer; border: none; }
.res-date-deep { background: linear-gradient(135deg, #C96A3C, var(--rust)); }
.res-pill-deep { background: rgba(184,92,56,.14); color: var(--rust); }

 
.cal-card { background: white; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,59,71,.04), 0 4px 16px -8px rgba(15,59,71,.10); padding: 14px; margin-bottom: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-month { font-size: 15px; font-weight: 700; color: var(--charcoal); }
.cal-nav { width: 32px; height: 32px; border-radius: 8px; background: var(--cream-warm); color: var(--lake-deep); font-size: 18px; line-height: 1; }
.cal-nav:active { transform: scale(0.96); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow-row { margin-bottom: 6px; }
.cal-dow { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--stone); text-transform: uppercase; }
.cal-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--charcoal); }
.cal-empty { visibility: hidden; }
.cal-booked { background: rgba(46,158,91,.16); color: #24714A; }
.cal-blocked { background: rgba(107,102,96,.20); color: var(--stone); }
.cal-deep { background: var(--rust); color: #fff; cursor: pointer; }
.cal-today { box-shadow: inset 0 0 0 2px var(--lake-deep); }
.cal-legend { display: flex; gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(15,59,71,.06); }
.cal-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--stone); }
.cal-dot { width: 12px; height: 12px; border-radius: 4px; }
.cal-dot-book { background: rgba(46,158,91,.42); }
.cal-dot-deep { background: var(--rust); }

 
.empty-card {
  padding: 28px 20px;
  text-align: center;
}
.empty-card-sm { padding: 18px 16px; }
.empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.empty-icon-svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--cream-warm);
  color: var(--lake-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}
.empty-sub {
  font-size: 12px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.5;
}
.empty-sub code {
  background: var(--cream-warm);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

 
.today-section {
  margin-top: 8px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 10px;
}
.section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--lake-deep);
}

 
.res-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.res-row {
  background: white;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(15,59,71,.04);
}
.res-date {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--lake-mid), var(--lake-deep));
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}
 
.res-date.res-date-deep {
  background: linear-gradient(135deg, #E07A3E, #B85C38);
}
.res-date-mon {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  opacity: 0.85;
}
.res-date-day {
  font-size: 16px;
  font-weight: 700;
  margin-top: -2px;
}
.res-detail { flex: 1; min-width: 0; }
.res-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-meta {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
}
.res-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.res-pill-book {
  background: rgba(15,59,71,.10);
  color: var(--lake-deep);
}
.res-pill-block {
  background: rgba(184,92,56,.12);
  color: var(--rust);
}

 
/* This bar used to be the same cream as the page behind it, which is why it
   was easy to miss -- it never read as a surface, only as more page. White
   plus a lifted shadow is what separates it. */
.tab-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(15,59,71,.06);
  box-shadow: 0 -3px 16px rgba(15,42,46,.10);
  display: flex;
  justify-content: space-around;
  padding: 9px 0 5px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 600;
  color: var(--stone);
  min-width: 60px;
}
/* Where you are, as a filled pill rather than a slightly darker word. */
.tab.tab-active {
  color: #fff;
  background: var(--spark);
  box-shadow: 0 2px 8px rgba(34,197,94,.35);
}
.tab { border-radius: 13px; transition: background .14s ease, color .14s ease; }
.tab-active .tab-ic svg { stroke-width: 2.3; }
/* The unread badge is red and would sit straight on the green pill, so it
   gets a white ring to hold the two apart. */
.tab-active .tab-badge { box-shadow: 0 0 0 2px #fff; }

 
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--charcoal);
  color: white;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
}
.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

 
.job-card-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* .job-card-pill carries its own margin-bottom for when it stands alone. In
   this row that margin pushed it up off the status pill's centre line -- the
   green sat visibly lower than the grey. */
.job-card-pill-row .job-card-pill { margin-bottom: 0; }
.job-card-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sand-warm);
  color: var(--charcoal);
  padding: 4px 10px;
  border-radius: 999px;
}
.job-card-meta {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}
.job-card-status-done {
  background: var(--leaf);
  color: white;
}
.job-card-done {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(74,107,62,.12);
  color: var(--leaf);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

 
.job-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.job-header {
  display: flex;
  align-items: center;
  padding: 16px 16px 8px;
  gap: 12px;
}
.job-back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  box-shadow: 0 1px 2px rgba(15,59,71,.05);
}
.job-back:active { background: var(--cream-warm); }
.job-header-title {
  flex: 1;
  text-align: center;
}
.job-header-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lake-mid);
}
.job-header-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 2px;
}
.job-header-spacer { width: 38px; }

.job-body {
  flex: 1;
  padding: 12px 16px 100px;
  overflow-y: auto;
}

 
.job-progress-card {
  padding: 16px;
  margin-bottom: 14px;
}
.job-progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.job-progress-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.job-progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--lake-deep);
  letter-spacing: -0.02em;
}
.ring-lbl {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: -2px;
}
.job-progress-meta { flex: 1; }
.prop-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
}
.prop-stats {
  font-size: 12px;
  color: var(--stone);
  margin-top: 2px;
}
.prop-pills {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.prop-pill {
  font-size: 10px;
  font-weight: 600;
  background: var(--cream-warm);
  color: var(--charcoal);
  padding: 3px 8px;
  border-radius: 999px;
}
.job-reservation-line {
  font-size: 11px;
  color: var(--stone);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,59,71,.08);
}

 
.view-toggle {
  display: flex;
  gap: 4px;
  background: white;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(15,59,71,.04);
  margin-bottom: 6px;
}
.view-toggle-btn {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
  border-radius: 8px;
}
.view-toggle-btn.active {
  background: var(--lake-deep);
  color: white;
}
.view-toggle-hint {
  font-size: 10px;
  color: var(--stone);
  padding: 0 4px 12px;
}

 
.zones-section { margin-top: 4px; }
.section-title-lg { padding-bottom: 8px; padding-left: 4px; }
.zones-list { display: flex; flex-direction: column; gap: 8px; }
.zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,59,71,.04);
  width: 100%;
  text-align: left;
}
.zone-row:active { background: var(--cream-warm); }
.zone-row.zone-done .zone-icon {
  background: var(--leaf);
  color: white;
}
.zone-row.zone-active {
  border: 1.5px solid var(--lake-deep);
}
.zone-row.zone-active .zone-icon {
  background: var(--lake-deep);
  color: white;
}
.zone-row.zone-pending .zone-icon {
  background: var(--cream-warm);
  color: var(--stone);
}
.zone-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.zone-text { flex: 1; min-width: 0; }
.zone-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
}
.zone-progress {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
}
.zone-row.zone-active .zone-progress {
  color: var(--lake-mid);
  font-weight: 600;
}
.zone-chev { color: var(--stone); flex-shrink: 0; }

 
.report-issue-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(184,92,56,.10);
  color: var(--rust);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.review-submit-btn {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--lake-deep);
  color: white;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.review-submit-btn:active { transform: scale(0.99); }
.review-submit-hint {
  font-size: 10px;
  color: var(--stone);
  text-align: center;
  margin-top: 6px;
}
 
.start-job-btn {
  width: 100%;
  margin: 4px 0 0;
  padding: 15px;
  border-radius: 12px;
  background: var(--rust);
  color: white;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.start-job-btn:active { transform: scale(0.99); }
.start-job-hint {
  font-size: 11px;
  color: var(--stone);
  text-align: center;
  margin-top: 6px;
  margin-bottom: 4px;
}

 
.issue-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,42,46,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background .26s ease, backdrop-filter .26s ease;
}
.issue-backdrop.issue-open {
  background: rgba(15,42,46,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.issue-sheet {
  background: var(--cream);
  border-radius: 24px 24px 0 0;
  padding: 12px 22px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  max-height: 92vh;
  overflow-y: auto;
}
.issue-backdrop.issue-open .issue-sheet { transform: translateY(0); }
.issue-grabber {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #D8D2C4;
  margin: 0 auto 14px;
}
.issue-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.issue-head-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(184,92,56,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.issue-head-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.issue-head-sub {
  font-size: 12px;
  color: var(--stone);
  margin-top: 1px;
}
.issue-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stone);
  margin: 18px 0 8px;
}
.issue-sev {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.issue-sev-btn {
  padding: 10px 4px;
  border-radius: 10px;
  background: var(--cream-warm);
  color: var(--stone);
  font-size: 13px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.issue-sev-btn.active {
  background: rgba(217,168,107,.18);
  color: #8B6D3F;
  border-color: var(--sand-warm);
}
.issue-sev-btn[data-sev="urgent"].active {
  background: rgba(184,92,56,.14);
  color: var(--rust);
  border-color: var(--rust);
}
.issue-select-wrap {
  position: relative;
}
.issue-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: white;
  border: 1px solid #E8E0CE;
  border-radius: 10px;
  padding: 13px 38px 13px 14px;
  font-size: 15px;
  color: var(--charcoal);
}
.issue-select-chev {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone);
  pointer-events: none;
}
.issue-textarea {
  width: 100%;
  background: white;
  border: 1px solid #E8E0CE;
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--charcoal);
  resize: none;
  line-height: 1.45;
}
.issue-textarea:focus {
  outline: none;
  border-color: var(--lake-mid);
}
.issue-textarea-error {
  border-color: var(--rust);
  background: rgba(184,92,56,.04);
}
.issue-photo-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--stone);
}
.issue-photos { margin-top: 8px; }
.issue-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.issue-photo-strip:not(:empty) { margin-bottom: 10px; }
.issue-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--cream-warm); flex-shrink: 0; }
.issue-thumb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 999px; background: var(--charcoal); color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.issue-add-photo { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--cream-warm); color: var(--charcoal); border: none; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }
.issue-add-photo:active { opacity: .7; }
.issue-submit {
  width: 100%;
  margin-top: 18px;
  padding: 15px;
  border-radius: 14px;
  background: var(--lake-deep);
  color: white;
  font-size: 15px;
  font-weight: 600;
  transition: transform .12s, background .2s, opacity .2s;
}
.issue-submit:active { transform: scale(0.99); }
.issue-submit-urgent { background: var(--rust); }
.issue-submit-busy { opacity: 0.6; }
.issue-cancel {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--stone);
}

 
.review-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.review-body {
  flex: 1;
  padding: 8px 16px 120px;
  overflow-y: auto;
}
.review-card { padding: 16px; margin-bottom: 12px; }
.review-card-title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--charcoal);
  margin-bottom: 10px;
}
.review-card-overline {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--stone);
}
.review-stat { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.review-stat-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rs-icon-green { background: rgba(74,107,62,.15); color: var(--leaf); }
.rs-icon-lake  { background: rgba(15,59,71,.10); color: var(--lake-deep); }
.rs-icon-rust  { background: rgba(184,92,56,.12); color: var(--rust); }
.review-stat-main { font-size: 14px; font-weight: 600; color: var(--charcoal); }
.review-stat-sub { font-size: 11px; color: var(--stone); margin-top: 1px; }

.review-photos-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.review-count-pill {
  font-size: 11px; font-weight: 600;
  background: var(--cream-warm); color: var(--charcoal);
  padding: 3px 10px; border-radius: 999px;
}
.rs-add-btn {
  width: 100%; padding: 12px; border-radius: 12px;
  background: var(--lake-deep); color: white;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rs-add-btn:active { transform: scale(0.99); }
.rs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 12px;
}
.rs-grid:empty { display: none; }
.rs-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.rs-thumb-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.rs-thumb-video {
  width: 100%; height: 100%;
  background: var(--lake-deep);
  display: flex; align-items: center; justify-content: center;
}
.rs-thumb-x {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 999px;
  background: white; color: var(--charcoal);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
}
.rs-stamp-note { font-size: 10px; color: var(--stone); margin-top: 12px; line-height: 1.4; }
.rs-stamp-note strong { color: var(--charcoal); font-weight: 600; }

.review-notes-wrap { margin: 0 2px 12px; }
.rs-notes {
  width: 100%; margin-top: 8px;
  background: white; border: 1px solid #E8E0CE; border-radius: 12px;
  padding: 12px 14px; font-size: 15px; color: var(--charcoal);
  resize: none; line-height: 1.45;
}
.rs-notes:focus { outline: none; border-color: var(--lake-mid); }
.review-opt { color: var(--stone); font-weight: 400; }

.rs-order-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.rs-order-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: rgba(201,166,107,.18);
  display: flex; align-items: center; justify-content: center;
}
.rs-order-text { flex: 1; }
.rs-order-title { font-size: 14px; font-weight: 600; color: var(--charcoal); }
.rs-order-sub { font-size: 11px; color: var(--stone); margin-top: 1px; }
.rs-order-chev { color: var(--stone); }

.review-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: white; padding: 14px 16px;
  border-top: 1px solid rgba(15,59,71,.08);
}
.rs-submit-btn {
  width: 100%; padding: 16px; border-radius: 14px;
  background: var(--lake-deep); color: white;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px -2px rgba(15,59,71,.3);
}
.rs-submit-btn:active { transform: scale(0.99); }
.rs-back-link {
  width: 100%; margin-top: 8px; padding: 6px;
  font-size: 12px; font-weight: 600; color: var(--stone);
}

 
.rs-progress {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,42,46,0);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.rs-progress.rs-progress-show { background: rgba(15,42,46,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.rs-progress-box {
  background: white; border-radius: 18px; padding: 28px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.rs-progress-msg { font-size: 14px; font-weight: 500; color: var(--charcoal); }

 
.submitted-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.submitted-hero {
  background: linear-gradient(180deg, var(--lake-deep) 0%, var(--lake-mid) 100%);
  color: white; text-align: center;
  padding: 64px 24px 48px; border-radius: 0 0 32px 32px;
}
.submitted-check {
  width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 999px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}
.submitted-overline {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.15em; opacity: 0.8;
}
.submitted-title { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; }
.submitted-blurb { font-size: 14px; opacity: 0.85; margin-top: 8px; max-width: 260px; margin-left: auto; margin-right: auto; }
.submitted-summary { margin: -24px 24px 0; position: relative; z-index: 2; padding: 20px; }
.submitted-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 14px; }
.submitted-stat-lbl { font-size: 11px; color: var(--stone); }
.submitted-stat-val { font-size: 22px; font-weight: 600; color: var(--lake-deep); margin-top: 2px; letter-spacing: -0.01em; }
.submitted-stat-val.val-rust { color: var(--rust); }
.submitted-stat-sm { font-size: 13px; color: var(--stone); font-weight: 500; }
.submitted-partial { margin-top: 14px; font-size: 12px; color: var(--rust); font-weight: 500; }
.submitted-footer { margin-top: auto; padding: 16px; }

 
/* This block is the only thing on the home screen asking to be acted on
   rather than reporting state, so it stops looking like a quiet chip and
   starts looking like an alert. */
.owner-needs {
  margin-bottom: 18px;
  background: var(--alert-soft);
  border: 2px solid var(--alert);
  border-radius: 16px;
  padding: 14px 16px 16px;
}
.owner-needs .card-overline {
  color: var(--alert); font-size: 12.5px; font-weight: 800; letter-spacing: .13em;
}
.owner-needs-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.owner-need-chip {
  font-size: 16.5px; font-weight: 800;
  padding: 13px 18px; border-radius: 12px;
  color: #fff;
}
.owner-need-chip:active { transform: scale(.97); }
/* Issues are red; restock is amber. Both loud, but a missing sponge should
   not read as loudly as a broken water heater. */
.chip-issue { background: var(--alert); }
.chip-restock { background: #A87C2E; }

.feed-list { display: flex; flex-direction: column; gap: 8px; }
.feed-card {
  display: flex; align-items: center; gap: 12px;
  background: white; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(15,42,46,.06);
}
.feed-tappable:active { background: var(--cream-warm); }
.feed-status-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.feed-status-dot.fs-done { background: var(--leaf); }
.feed-status-dot.fs-active { background: var(--sand-warm); }
.feed-status-dot.fs-upcoming { background: #C4BDAE; }
.feed-body { flex: 1; min-width: 0; }
.feed-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.feed-title { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.feed-when { font-size: 11px; font-weight: 600; flex-shrink: 0; }
.feed-when.fs-done { color: var(--leaf); }
.feed-when.fs-active { color: #8B6D3F; }
.feed-when.fs-upcoming { color: var(--stone); }
.feed-meta { font-size: 12px; color: var(--stone); margin-top: 3px; }
.feed-chev { color: var(--stone); flex-shrink: 0; }

 
.owner-review-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ors-val { font-size: 20px; font-weight: 600; color: var(--lake-deep); letter-spacing: -0.01em; }
.ors-val.val-rust { color: var(--rust); }
.ors-lbl { font-size: 10px; color: var(--stone); margin-top: 2px; }
.owner-review-provider { font-size: 13px; color: var(--stone); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15,42,46,.07); }
.owner-notes-text { font-size: 14px; color: var(--charcoal); margin-top: 8px; line-height: 1.5; }

.owner-issue-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-start; }
.owner-issue-sev { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.sev-urgent { background: rgba(184,92,56,.14); color: var(--rust); }
.sev-needs { background: rgba(217,168,107,.2); color: #8B6D3F; }
.sev-fyi { background: var(--cream-warm); color: var(--stone); }
.owner-issue-zone { font-size: 12px; font-weight: 600; color: var(--charcoal); }
.owner-issue-desc { font-size: 13px; color: var(--stone); margin-top: 2px; line-height: 1.4; }

 
.ni-go-issues { cursor: pointer; }
.ni-go-issues:active { opacity: .7; }
.issue-card { align-items: flex-start; gap: 10px; text-align: left; }
.issue-card-main { flex: 1; min-width: 0; }
.issue-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.issue-card-zone { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-top: 7px; }
.issue-card-desc { font-size: 13px; color: var(--stone); margin-top: 2px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.issue-card-meta { font-size: 11px; color: var(--stone); margin-top: 6px; }
.issue-card .feed-chev { margin-top: 2px; }

.issue-status { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.ist-open   { background: rgba(184,92,56,.12); color: var(--rust); }
.ist-ack    { background: rgba(217,168,107,.22); color: #8B6D3F; }
.ist-prog   { background: rgba(27,90,107,.14); color: var(--lake-mid); }
.ist-ordered{ background: rgba(201,166,107,.28); color: #7A5C22; }
.ist-done   { background: rgba(62,124,90,.16); color: #3E7C5A; }
.ist-closed { background: var(--cream-warm); color: var(--stone); }

 
.issue-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.issue-detail-desc { font-size: 16px; color: var(--charcoal); line-height: 1.5; margin-top: 12px; }
.issue-detail-meta { font-size: 12px; color: var(--stone); margin-top: 8px; }
.issue-linked-job { display: block; width: 100%; text-align: left; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(15,42,46,.07); background: none; border-left: none; border-right: none; border-bottom: none; }
.issue-linked-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); }
.issue-linked-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--lake-deep); }
.issue-linked-job:active { opacity: .6; }

.issue-note-input { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(15,42,46,.14); border-radius: 10px; font-size: 14px; color: var(--charcoal); font-family: inherit; resize: vertical; }
.issue-note-input:focus { outline: none; border-color: var(--lake-mid); }
.issue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.issue-act-btn { flex: 1 1 calc(50% - 4px); min-width: 120px; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit; border: 1.5px solid transparent; cursor: pointer; }
.issue-act-btn:disabled { opacity: .5; }
.issue-act-btn.is-saving { opacity: .6; }
.ia-neutral { background: var(--cream-warm); color: var(--charcoal); }
.ia-resolve { background: var(--lake-deep); color: white; }
.ia-wontfix { background: white; color: var(--stone); border-color: rgba(107,102,96,.3); }

 
.cl-issues-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: white; border: none; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(15,42,46,.06); margin-top: 12px; cursor: pointer; }
.cl-issues-card:active { background: var(--cream-warm); }
.cl-issues-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(184,92,56,.12); color: var(--rust); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cl-issues-body { flex: 1; min-width: 0; }
.cl-issues-title { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.cl-issues-sub { font-size: 12px; color: var(--stone); margin-top: 2px; }

 
.issue-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rust); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

 
.cl-supplies-icon { background: rgba(15,59,71,.10); color: var(--lake-deep); }
.ni-go-restock { cursor: pointer; }

.supply-hint { font-size: 13px; color: var(--stone); padding: 2px 4px 12px; line-height: 1.4; }
.supply-group { margin-bottom: 16px; }
.supply-cat-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lake-mid); padding: 0 4px 6px; }
.supply-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: white; border: none; border-radius: 12px; padding: 13px 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(15,42,46,.06); cursor: pointer; }
.supply-row:active { background: var(--cream-warm); }
.supply-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #D9D2C4; color: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s ease, border-color .12s ease; }
.supply-name { flex: 1; min-width: 0; font-size: 15px; color: var(--charcoal); }
.supply-low-tag { font-size: 11px; font-weight: 700; color: var(--rust); flex-shrink: 0; }
.supply-flagged { background: rgba(184,92,56,.06); box-shadow: inset 0 0 0 1.5px rgba(184,92,56,.35); }
.supply-flagged .supply-check { background: var(--rust); border-color: var(--rust); color: #fff; }
.supply-flagged .supply-name { font-weight: 600; }

.order-row { display: flex; align-items: center; gap: 12px; background: white; border-radius: 12px; padding: 13px 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(15,42,46,.06); }
.order-row-ordered { opacity: .85; }
.order-main { flex: 1; min-width: 0; }
.order-name { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.order-sub { font-size: 12px; color: var(--stone); margin-top: 2px; }
.order-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ord-btn { border: none; border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ord-btn-primary { background: var(--lake-deep); color: #fff; }
.ord-btn-primary:active { background: var(--lake-mid); }
.ord-btn-ghost { background: var(--cream-warm); color: var(--lake-mid); }
.ord-btn-ghost:active { background: #E7DCC8; }
.order-row-ordered .ord-btn-primary { background: var(--sand-warm); }

 
.perf-card { margin: 12px 16px 0; font-variant-numeric: tabular-nums; }
.perf-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(15,42,46,.06); font-size: 13px; color: var(--stone); }
.perf-row:last-child { border-bottom: none; }
.perf-row strong { color: var(--charcoal); font-size: 14px; }
.perf-row-sub { opacity: .7; font-size: 12px; }

 
.issue-linked-static { opacity: .9; }
.msg-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-height: 340px; overflow-y: auto; }
.msg-empty { font-size: 13px; color: var(--stone); text-align: center; padding: 16px 8px; }
.msg-row { display: flex; }
.msg-row.msg-mine { justify-content: flex-end; }
.msg-row.msg-theirs { justify-content: flex-start; }
.msg-bubble { max-width: 80%; padding: 9px 12px; border-radius: 14px; }
.msg-mine .msg-bubble { background: var(--lake-deep); color: #fff; border-bottom-right-radius: 4px; }
.msg-theirs .msg-bubble { background: var(--cream-warm); color: var(--charcoal); border-bottom-left-radius: 4px; }
.msg-sender { font-size: 11px; font-weight: 700; color: var(--lake-mid); margin-bottom: 2px; }
.msg-body { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.msg-time { font-size: 10px; margin-top: 3px; opacity: .65; }
.msg-mine .msg-time { color: #fff; text-align: right; }
.msg-theirs .msg-time { color: var(--stone); }

 
.msg-composer { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15,42,46,.07); }
.msg-input { flex: 1; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(15,42,46,.14); border-radius: 12px; font-size: 14px; font-family: inherit; color: var(--charcoal); resize: none; max-height: 120px; }
.msg-input:focus { outline: none; border-color: var(--lake-mid); }
/* Was also called .msg-send, which a later full-width rule overrode -- the
   icon button stretched across the row and squeezed the text box down to two
   letters. Different button, different name. */
.msg-send-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--lake-deep); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.msg-send-icon:disabled { opacity: .5; }

.owner-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.owner-photo-cell { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--cream-warm); }
.owner-photo-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.owner-photo-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.owner-photo-spin { width: 18px; height: 18px; border: 2px solid rgba(15,59,71,.15); border-top-color: var(--lake-deep); border-radius: 50%; animation: spin 0.8s linear infinite; }
.owner-photo-video { width: 100%; height: 100%; background: var(--lake-deep); display: flex; align-items: center; justify-content: center; }
.owner-drive-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--lake-deep); }

 
#ptr { position: fixed; top: calc(env(safe-area-inset-top)); left: 50%; z-index: 1500; transform: translateX(-50%) translateY(-64px); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,.7,.3,1), opacity .18s ease; }
#ptr.ptr-dragging { transition: opacity .12s ease; }
.ptr-spinner { width: 42px; height: 42px; border-radius: 999px; background: #fff; box-shadow: 0 3px 12px rgba(15,42,46,.20); display: flex; align-items: center; justify-content: center; color: var(--lake-mid); transition: color .15s ease; }
#ptr.ptr-ready .ptr-spinner { color: var(--rust); }
#ptr.ptr-refreshing .ptr-spinner svg { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

 
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.lb-img { width: 92vw; height: 80vh; background-size: contain; background-position: center; background-repeat: no-repeat; }
.lb-close { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.lb-counter { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: white; font-size: 13px; font-weight: 500; opacity: 0.85; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

 
.checklist-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.checklist-header {
  display: flex;
  align-items: center;
  padding: 16px 16px 8px;
  gap: 12px;
}
.checklist-body {
  flex: 1;
  padding: 8px 16px 100px;
  overflow-y: auto;
}

 
.zone-hero {
  background: linear-gradient(135deg, var(--lake-deep), var(--lake-mid));
  color: white;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: background .3s;
}
.zone-hero.zone-hero-done {
  background: linear-gradient(135deg, var(--leaf), #3a5630);
}
.zone-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}
.zone-hero-overline {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.8;
}
.zone-hero-count {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.zone-hero-pct {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.zone-hero-bar {
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  overflow: hidden;
}
.zone-hero-bar-fill {
  height: 100%;
  background: var(--sand-warm);
  border-radius: 999px;
  transition: width .25s ease-out;
}

 
.quick-action-bar {
  background: var(--cream-warm);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.quick-action-text {
  font-size: 12px;
  color: var(--charcoal);
}
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--leaf);
  color: white;
  white-space: nowrap;
}
.quick-action-btn:active { transform: scale(0.97); }

 
.check-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,59,71,.04);
  cursor: pointer;
  transition: opacity .15s, background .1s;
}
.check-row:active { background: var(--cream-warm); }
.check-row.check-done { opacity: 0.55; }
.check-row.check-done .check-text { text-decoration: line-through; text-decoration-color: var(--stone); }
.check-row.check-done .check-detail { text-decoration: line-through; text-decoration-color: var(--stone); }

.checkbox {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid #C9C2B5;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .12s, border-color .12s;
}
.check-svg {
  color: white;
  opacity: 0;
  transition: opacity .12s;
}
.check-row.check-done .checkbox {
  background: var(--lake-deep);
  border-color: var(--lake-deep);
}
.check-row.check-done .check-svg { opacity: 1; }

.check-body {
  flex: 1;
  min-width: 0;
}
 
.item-flag-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  opacity: 0.45;
  margin-top: -2px;
}
.item-flag-btn:active { background: rgba(184,92,56,.12); color: var(--rust); opacity: 1; }

/* ---- items that cannot be ticked without a photo.
   The camera sits where the eye already goes for the flag button, and turns
   green the moment its picture lands, so "what is left" is readable from
   across the room without reading a word. */
.item-cam-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--alert);
  background: var(--alert-soft);
  margin-top: -2px;
}
.item-cam-btn:active { opacity: .6; }
.item-cam-btn.is-ok { color: var(--leaf); background: rgba(74,107,62,.12); }
.req-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--alert);
  background: var(--alert-soft);
  padding: 2px 7px; border-radius: 5px;
}
.req-tag.is-ok { color: var(--leaf); background: rgba(74,107,62,.12); }
.check-noreason {
  margin-top: 4px;
  font-size: 12px; font-style: italic;
  color: var(--stone);
}
.check-needs-photo { border-left: 3px solid var(--alert); }

/* ---- the list of what is still missing, shown at submit */
.mp-zone { margin-bottom: 12px; }
.mp-zone-head {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone);
  margin: 0 0 5px;
}
.mp-row {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 5px;
  border-radius: 9px;
  background: var(--alert-soft);
  color: var(--charcoal);
  font-size: 13px; line-height: 1.35;
}
.mp-row:active { opacity: .6; }

/* ---- the house map.
   Cindy's own 3D floor plans with a labelled pill on each area. Pills, not
   invisible hotspots: the plans are drawn at a slight angle, so a hidden
   rectangle is guesswork nobody can see to correct -- and the pill puts the
   room's name and count on the plan, which is the reason to look at a map. */
.map-open-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px;
  margin: 0 0 12px;
  border-radius: 11px;
  background: var(--lake-soft);
  color: var(--lake-deep);
  font-size: 13px; font-weight: 600;
}
.map-open-btn:active { opacity: .65; }

/* Which of the three kinds of job the map is standing on. */
.hm-kinds { display: flex; gap: 6px; margin: 0 0 10px; }
.hm-kind {
  flex: 1; padding: 8px 4px;
  border-radius: 9px;
  background: var(--cream-warm);
  color: var(--stone);
  font-size: 11.5px; font-weight: 600;
}
.hm-kind.on { background: var(--rust); color: #fff; }
.hm-which-plain { color: var(--stone); }

/* Which job's progress these numbers are. The map follows whatever job is
   open, so without this a checklist opens and there is no telling whether it
   is the walkthrough's list or the deep clean's. */
.hm-which {
  padding: 9px 12px; margin: 0 0 10px;
  border-radius: 10px;
  background: var(--cream-warm);
  font-size: 12px; color: var(--charcoal);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.hm-which span { color: var(--stone); font-weight: 600; white-space: nowrap; }
/* Four levels now, so let them scroll rather than squeeze to nothing. */
.hm-tabs {
  display: flex; gap: 6px; margin: 0 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hm-tabs::-webkit-scrollbar { display: none; }
.hm-tab { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.hm-pin-plain { padding: 3px 7px; }
.hm-tab {
  border-radius: 9px;
  background: var(--cream-warm);
  color: var(--stone);
  font-size: 12px; font-weight: 600;
  padding-top: 9px; padding-bottom: 9px;
}
.hm-tab.on { background: var(--lake-deep); color: #fff; }

.hm-stage {
  position: relative;
  width: calc(100% + 32px);
  margin: 0 -16px 14px;
  overflow: hidden;
  background: var(--cream-warm);
}
/* Outside has no rendering, so the pills sit on plain ground. */
.hm-stage-plain { background: rgba(74,107,62,.10); min-height: 340px; }
/* Only visible when the image behind it failed to load. */
.hm-missing {
  position: absolute; left: 0; right: 0; top: 10px;
  text-align: center; font-size: 11px; color: var(--stone);
}
.hm-stage:not(.hm-stage-plain) .hm-missing { display: none; }
.hm-plan { display: block; width: 100%; height: auto; }
.hm-plan-missing { display: none; }
.hm-pins { position: absolute; inset: 0; }

.hm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 5px;
  border-radius: 6px;
  text-align: center;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  max-width: 30%;
  line-height: 1.1;
}
.hm-pin:active { transform: translate(-50%, -50%) scale(.94); }
.hm-pin-name { display: block; font-size: 9px; font-weight: 700; line-height: 1.1; color: var(--charcoal); }
.hm-pin-count { display: block; font-size: 8.5px; font-weight: 700; color: var(--stone); }
.hm-pin-when { display: block; font-size: 8px; color: var(--leaf); font-weight: 600; }
/* On a bigger screen there is room to read them comfortably. */
@media (min-width: 520px) {
  .hm-pin { padding: 4px 8px; border-radius: 8px; }
  .hm-pin-name { font-size: 12px; }
  .hm-pin-count { font-size: 11px; }
  .hm-pin-when { font-size: 10px; }
}
/* Colour is the state, readable at arm's length without reading the words. */
.hm-pin.hm-todo { border-color: rgba(0,0,0,.18); }
.hm-pin.hm-part { border-color: var(--sand-warm); background: rgba(255,248,235,.96); }
.hm-pin.hm-part .hm-pin-count { color: var(--rust); }
.hm-pin.hm-done { border-color: var(--leaf); background: rgba(238,246,235,.96); }
.hm-pin.hm-done .hm-pin-count { color: var(--leaf); }
.hm-pin.hm-empty { opacity: .5; }
.hm-pin-shed { border-color: var(--lake); background: rgba(235,244,246,.96); }
.hm-pin-shed .hm-pin-count { color: var(--lake-deep); }

.hm-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--stone);
  margin: 0 0 14px;
}
.hm-legend span { display: flex; align-items: center; gap: 5px; }
.hm-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1.5px solid; }
.hm-k-todo { background: #fff; border-color: rgba(0,0,0,.25); }
.hm-k-part { background: rgba(255,248,235,1); border-color: var(--sand-warm); }
.hm-k-done { background: rgba(238,246,235,1); border-color: var(--leaf); }

.hm-floor-name {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone);
  margin: 0 0 8px;
}
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.hm-room {
  min-height: 58px; padding: 12px;
  border-radius: 12px; text-align: left;
  background: var(--cream-warm);
  border: 1px solid rgba(0,0,0,.07);
}
.hm-room:active { opacity: .7; }
.hm-room-name { display: block; font-size: 13px; font-weight: 600; color: var(--charcoal); }
.hm-room-count { display: block; font-size: 12px; color: var(--stone); margin-top: 3px; }
.hm-note { font-size: 12px; color: var(--stone); line-height: 1.45; margin-top: 4px; }

/* ---- findings carried over from a walkthrough */
.followups-section { margin: 22px 0 8px; }
.fu-list { padding: 4px 0; }
.fu-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.fu-row:last-child { border-bottom: none; }
.fu-check {
  flex-shrink: 0; width: 21px; height: 21px; margin-top: 1px;
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.fu-done .fu-check { background: var(--leaf); border-color: var(--leaf); color: #fff; }
/* Ticked but still legible -- a row that vanishes looks like a row that never
   saved, and a mis-tap should be visibly undoable. */
.fu-done { opacity: .55; }
.fu-done .fu-text { text-decoration: line-through; }
.fu-body { flex: 1; min-width: 0; }
.fu-meta { font-size: 11px; color: var(--stone); display: flex; align-items: center; gap: 5px; }
.fu-sev { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--stone); }
.fu-sev.sev-urgent { background: var(--alert); }
.fu-sev.sev-needs { background: var(--rust); }
.fu-sev.sev-fyi { background: var(--sand-warm); }
.fu-text { font-size: 14px; font-weight: 500; line-height: 1.4; margin-top: 2px; }
.fu-stamp { font-size: 11px; color: var(--leaf); font-weight: 600; margin-top: 3px; }
.fu-cam {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--stone); opacity: .5;
}
.fu-cam:active { opacity: 1; background: rgba(0,0,0,.05); }

/* Move a finding between "job to do" and "Cindy buys it" when the first
   call was wrong -- which is common, since you often only learn a part is
   unobtainable once you have looked at it. */
.fu-swap {
  margin-top: 5px; padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.05);
  color: var(--stone);
  font-size: 11px; font-weight: 600;
}
.fu-swap:active { opacity: .6; }
/* Nothing to tick on a purchase, so it shows a basket, not a checkbox. */
.fu-is-order .fu-check {
  border-style: dashed;
  border-color: var(--lake);
  background: var(--lake-soft);
}
.fu-order-list .fu-row { cursor: default; }

/* "What happens next" on the issue sheet */
.issue-next-btn {
  flex: 1; padding: 10px 6px;
  border-radius: 9px;
  background: var(--cream-warm);
  color: var(--stone);
  font-size: 12px; font-weight: 600;
}
.issue-next-btn.active { background: var(--lake-deep); color: #fff; }
.issue-next-hint {
  font-size: 11px; color: var(--stone);
  line-height: 1.4; margin: 6px 0 4px;
}
.check-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.35;
}
 
.water-tag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--lake-mid);
  opacity: 0.4;
}
 
.cadence-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lake-mid);
  background: var(--sand-warm);
  white-space: nowrap;
}

 
.zone-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.zone-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
}
.zone-action-btn:active { transform: scale(0.98); }
.zone-action-flag { background: rgba(184,92,56,.10); color: var(--rust); }
.zone-action-photo { background: rgba(15,59,71,.08); color: var(--lake-deep); }
.zone-photo-count {
  background: var(--lake-deep);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.rs-already {
  font-size: 12px;
  font-weight: 600;
  color: var(--leaf);
  margin-top: 10px;
}
.check-detail {
  font-size: 12px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.4;
}
.ref-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--cream-warm);
  color: var(--lake-deep);
  text-decoration: none;
}

 
.photos-hint {
  margin-top: 18px;
  padding: 12px;
  background: rgba(15,59,71,.05);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--stone);
  font-size: 11px;
  line-height: 1.45;
}
.photos-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--lake-mid); }

 
.checklist-footer {
  position: sticky;
  bottom: 0;
  padding: 12px 16px 16px;
  background: linear-gradient(to top, var(--cream) 60%, transparent);
}
/* Sits above "next zone": she does not work the house in the app's order, so
   picking a room has to be as easy as moving to the next one. */
.pick-zone-btn {
  width: 100%;
  padding: 11px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--cream-warm);
  color: var(--charcoal);
  font-size: 13px; font-weight: 600;
}
.pick-zone-btn:active { opacity: .65; }
.zone-title-btn { background: transparent; text-align: center; }
.zone-title-chev { font-size: 11px; color: var(--stone); }
.zp-list { padding: 4px 0; max-height: 52vh; overflow-y: auto; }
.zp-row {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,.06);
  color: var(--charcoal);
}
.zp-row:last-child { border-bottom: none; }
.zp-row:active { background: rgba(0,0,0,.04); }
.zp-name { flex: 1; font-size: 14px; font-weight: 600; }
.zp-count { font-size: 12px; font-weight: 700; color: var(--stone); }
.zp-row.is-done .zp-count { color: var(--leaf); }
.zp-row.is-here { background: var(--lake-soft); }
.zp-here {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--lake-deep);
}

.next-zone-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--lake-deep);
  color: white;
  font-size: 15px;
  font-weight: 600;
}
.next-zone-btn:active { transform: scale(0.99); }

 
@keyframes skeletonShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton-line,
.skeleton-circle,
.skeleton-row {
  background: linear-gradient(90deg, #E8E1D2 0%, #F2EAD8 50%, #E8E1D2 100%);
  background-size: 200px 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-line { height: 12px; }
.skeleton-line-sm { height: 8px; }
.skeleton-circle { border-radius: 50%; width: 38px; height: 38px; }
.skeleton-row {
  height: 56px;
  margin-bottom: 8px;
  border-radius: 14px;
}

 
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

 
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-bottom: 14px;
}
.home-tile {
  background: white;
  border-radius: 18px;
  padding: 15px 13px 14px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,59,71,.04), 0 4px 16px -8px rgba(15,59,71,.10);
}
.home-tile:active { transform: scale(0.985); }
.tile-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lake-soft); color: var(--lake-deep);
}
.tile-icon-sand { background: rgba(217,168,107,.22); color: #8B6D3F; }
.tile-icon-rust { background: rgba(184,92,56,.13); color: var(--rust); }
.tile-icon-leaf { background: rgba(74,107,62,.13); color: var(--leaf); }
.tile-text { margin-top: 10px; }
.tile-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--charcoal); }
.tile-sub { font-size: 11px; color: var(--stone); margin-top: 2px; line-height: 1.35; }
.tile-badge {
  position: absolute; top: 12px; right: 12px;
  background: var(--rust); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
}

 
.vendor-card { padding: 16px 17px; }
.vendor-top { display: flex; align-items: center; gap: 8px; }
.vendor-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.vendor-pill {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  background: var(--lake-soft); color: var(--lake-deep);
  border-radius: 999px; padding: 3px 8px;
}
.vendor-company { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.vendor-line { font-size: 13.5px; color: var(--charcoal); margin-top: 8px; line-height: 1.45; }
.vendor-desc { color: var(--stone); font-size: 13px; }
.vendor-link { color: var(--lake-mid); text-decoration: none; font-weight: 600; }
.vendor-notes {
  margin-top: 12px; padding: 11px 12px;
  background: rgba(217,168,107,.13);
  border-radius: 12px;
}
.vendor-notes-head {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: #8B6D3F; margin-bottom: 6px;
}
.vendor-note { font-size: 13px; color: var(--charcoal); line-height: 1.45; margin-top: 3px; }
.vendor-note-date { font-size: 11px; color: var(--stone); margin-left: 6px; }
.vendor-addnote-btn {
  margin-top: 12px; font-size: 13px; font-weight: 600;
  color: var(--lake-mid); padding: 8px 0;
}
.vendor-addnote-form { margin-top: 10px; }
.vendor-note-input {
  width: 100%; border: 1px solid #E8E0CE; border-radius: 10px;
  padding: 11px 12px; font-size: 15px; color: var(--charcoal);
  resize: none; line-height: 1.45;
}
.vendor-note-input:focus { outline: none; border-color: var(--lake-mid); }
.vendor-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.vendor-cancel { font-size: 13.5px; font-weight: 600; color: var(--stone); padding: 9px 14px; }
.vendor-save {
  font-size: 13.5px; font-weight: 600; color: #fff;
  background: var(--lake-deep); border-radius: 10px; padding: 9px 18px;
}
.vendor-save:disabled { opacity: .5; }


 
.order-thumb {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
  background: var(--cream-warm); flex-shrink: 0; margin-right: 11px;
}
.supply-thumb {
  width: 28px; height: 28px; border-radius: 7px; object-fit: cover;
  background: var(--cream-warm); flex-shrink: 0; margin-right: 9px;
}
.order-qty { font-size: 12px; color: var(--stone); font-weight: 500; margin-left: 6px; }
.order-vendor { font-size: 11.5px; color: var(--stone); margin-top: 3px; }
.order-buy {
  display: inline-block; margin-top: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--lake-mid);
  text-decoration: none;
}
.order-buy:active { opacity: .6; }


 
.check-thumb {
  display: block; margin-top: 8px;
  width: 92px; height: 92px; border-radius: 10px; object-fit: cover;
  background: var(--cream-warm); border: 1px solid rgba(15,59,71,.08);
}
.check-thumb:active { opacity: .75; }
.img-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,42,46,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.img-overlay img { max-width: 100%; max-height: 100%; border-radius: 10px; }


 
.zone-pending-banner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(184,92,56,.10);
  border: 1px solid rgba(184,92,56,.30);
  color: var(--rust); font-size: 13.5px; font-weight: 600;
  text-align: left;
}
.zone-pending-cta { text-decoration: underline; }


 
.zone-uploading-chip {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 900;
  background: rgba(15,59,71,.92); color: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 20px -6px rgba(15,59,71,.5);
}


 
.zone-uploading-chip {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 900;
  display: flex; align-items: center; gap: 11px;
  background: var(--rust); color: #fff;
  font-size: 13px; line-height: 1.35;
  padding: 12px 15px; border-radius: 14px;
  box-shadow: 0 8px 24px -6px rgba(184,92,56,.55);
}
.zone-uploading-chip .zuc-text b { font-weight: 700; }
.zuc-spin {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}


 
.zone-photo-hint {
  font-size: 11.5px; line-height: 1.45; color: var(--stone);
  margin: 8px 2px 2px; 
}


 
.supply-section { margin-bottom: 22px; }
.supply-section-head {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--charcoal); margin: 4px 2px 2px;
}
.supply-section-blurb {
  font-size: 12px; color: var(--stone); line-height: 1.45;
  margin: 0 2px 10px;
}


 
.recent-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-align: left; width: 100%; }
.recent-row-warn { border-left: 3px solid var(--rust); }
.recent-main { flex: 1; }
.recent-date { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--stone); }
.recent-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
.recent-meta { font-size: 12px; color: var(--stone); margin-top: 3px; }
.recent-nophoto { color: var(--rust); font-weight: 600; }


 
/* The cleaner's version of the same idea: things Cindy is waiting on. Same
   loudness, so neither party can scroll past what is being asked of them. */
.reminders-card {
  padding: 15px 16px 16px;
  border: 2px solid var(--alert);
  border-left-width: 6px;
  background: var(--alert-soft);
}
.reminders-head {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--alert); margin-bottom: 11px;
}
.reminder-row { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; }
.reminder-row + .reminder-row { border-top: 1px solid rgba(15,59,71,.07); }
/* Done, but still there. A note that disappears on tap leaves no way to tell
   what it said, and no way back from a mis-tap. */
.reminder-done { opacity: .45; }
.reminder-done .reminder-title { text-decoration: line-through; }
.reminder-done .reminder-tick {
  background: var(--leaf); border-color: var(--leaf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
}
.reminder-tick {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--sand-warm); border-radius: 7px; background: transparent;
}
.reminder-done { opacity: .45; }
.reminder-done .reminder-tick { background: var(--sand-warm); }
.reminder-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--charcoal); }
.reminder-detail { font-size: 12.5px; color: var(--stone); margin-top: 2px; line-height: 1.45; }

 
.rem-title, .rem-detail {
  width: 100%; border: 1px solid #E8E0CE; border-radius: 10px;
  padding: 12px 13px; font-size: 15px; color: var(--charcoal);
  resize: none; line-height: 1.45; margin-bottom: 10px;
}
.rem-title:focus, .rem-detail:focus { outline: none; border-color: var(--lake-mid); }
.rem-send {
  width: 100%; padding: 14px; border-radius: 12px;
  background: var(--lake-deep); color: #fff; font-size: 15px; font-weight: 600;
}
.rem-send:disabled { opacity: .6; }


 
.inv-outstanding {
  background: rgba(184,92,56,.10); border: 1px solid rgba(184,92,56,.28);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 14px; color: var(--rust);
}
.inv-card { padding: 15px 16px; }
.inv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.inv-date { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--stone); }
.inv-amount { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-top: 3px; }
.inv-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.inv-paid { background: rgba(74,107,62,.14); color: var(--leaf); }
.inv-due { background: rgba(184,92,56,.13); color: var(--rust); }
.inv-note { font-size: 13px; color: var(--stone); margin-top: 8px; line-height: 1.45; }
.inv-link { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--lake-mid); text-decoration: none; }
.inv-pay-btn {
  width: 100%; margin-top: 12px; padding: 12px; border-radius: 11px;
  background: var(--lake-deep); color: #fff; font-size: 14.5px; font-weight: 600;
}
.inv-add { padding: 16px; }
.inv-add-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.inv-in {
  width: 100%; border: 1px solid #E8E0CE; border-radius: 10px;
  padding: 12px 13px; font-size: 15px; color: var(--charcoal); margin-bottom: 9px;
}
.inv-in:focus { outline: none; border-color: var(--lake-mid); }
.inv-send {
  width: 100%; padding: 13px; border-radius: 11px;
  background: var(--sand-warm); color: var(--charcoal); font-size: 15px; font-weight: 600;
}
.inv-send:disabled { opacity: .6; }


 
.led-month {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: #fff; border: 1px solid #E8E0CE; border-radius: 10px;
  padding: 11px 13px; font-size: 15px; color: var(--charcoal); margin-bottom: 14px;
}
.led-totals { padding: 16px; }
.led-total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 5px 0; color: var(--stone); }
.led-total-row b { color: var(--charcoal); font-size: 15px; font-weight: 600; }
.led-grand { border-top: 1px solid rgba(15,59,71,.10); margin-top: 6px; padding-top: 11px; }
.led-grand span { color: var(--charcoal); font-weight: 600; }
.led-grand b { font-size: 22px; letter-spacing: -0.02em; }
.led-paid { border-left: 3px solid var(--leaf); }
.led-paid-tag {
  margin-top: 12px; text-align: center; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--leaf);
}
.led-pay-btn {
  width: 100%; margin-top: 13px; padding: 13px; border-radius: 11px;
  background: var(--lake-deep); color: #fff; font-size: 15px; font-weight: 600;
}
.led-list { padding: 4px 14px 10px; }
.led-head { display: flex; gap: 8px; padding: 12px 0 8px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--stone); border-bottom: 1px solid rgba(15,59,71,.08); }
.led-row { display: flex; gap: 8px; padding: 11px 0; border-bottom: 1px solid rgba(15,59,71,.06); }
.led-row:last-child { border-bottom: none; }
.led-left { flex: 1; min-width: 0; }
.led-date { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--stone); }
.led-desc { font-size: 13.5px; color: var(--charcoal); margin-top: 2px; line-height: 1.4; }
.led-desc-extra { color: var(--rust); }
.led-receipt { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--lake-mid); text-decoration: none; }
.led-amt { width: 74px; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.led-amt-extra { color: var(--rust); }
.led-empty { padding: 18px 0; text-align: center; font-size: 13px; color: var(--stone); }
.led-add { padding: 16px; }
.led-add-head { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.led-add-btn {
  width: 100%; padding: 13px; border-radius: 11px;
  background: var(--sand-warm); color: var(--charcoal); font-size: 15px; font-weight: 600;
}
.led-add-btn:disabled { opacity: .6; }


.led-pdf-btn {
  width: 100%; margin-top: 9px; padding: 12px; border-radius: 11px;
  background: var(--cream-warm); color: var(--charcoal); font-size: 14px; font-weight: 600;
}
.led-pdf-btn:disabled { opacity: .6; }


.sup-pdf-btn {
  width: 100%; margin-bottom: 14px; padding: 12px; border-radius: 11px;
  background: var(--cream-warm); color: var(--charcoal); font-size: 14px; font-weight: 600;
}
.sup-pdf-btn:disabled { opacity: .6; }


/* ---- People (who can sign in) ---- */
.person-card { padding: 14px 16px; }
.person-off { opacity: .55; }
.person-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.person-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.person-you { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
              color: var(--lake-mid); background: var(--lake-soft); border-radius: 999px; padding: 2px 7px; }
.person-meta { font-size: 12.5px; color: var(--stone); margin-top: 3px; }
.person-edit { font-size: 13px; font-weight: 600; color: var(--lake-mid); padding: 8px 4px; }
.person-add-btn {
  width: 100%; margin: 4px 0 14px; padding: 13px; border-radius: 12px;
  background: var(--cream-warm); color: var(--charcoal); font-size: 15px; font-weight: 600;
}
.p-active-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--charcoal); margin: 2px 0 4px; }

.person-contact { font-size: 12px; color: var(--stone); margin-top: 2px; }
.person-contact-missing { color: var(--rust); }

/* ---- Viewing as the cleaner (owner support mode) ---- */
.person-actions { display: flex; align-items: center; gap: 4px; }
.person-viewas {
  font-size: 13px; font-weight: 600; color: var(--charcoal);
  background: var(--cream-warm); border-radius: 9px; padding: 7px 11px;
}
body.viewing-as { padding-bottom: 52px; }
.viewas-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--charcoal); color: #fff;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  font-size: 13.5px;
}
.viewas-bar b { font-weight: 700; }
.viewas-exit {
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 13px; font-weight: 600; border-radius: 9px; padding: 8px 13px;
  white-space: nowrap;
}

/* ---- Sign-in history ---- */
.person-lastseen { font-size: 12px; color: var(--stone); margin-top: 2px; }
.signin-section { margin-top: 20px; }
.signin-list { background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,59,71,.04), 0 4px 16px -8px rgba(15,59,71,.10); }
.signin-row { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 11px 15px; border-bottom: 1px solid rgba(15,59,71,.06); font-size: 13.5px; }
.signin-row:last-child { border-bottom: none; }
.signin-who { font-weight: 600; color: var(--charcoal); }
.signin-bad .signin-who { color: var(--rust); font-weight: 600; }
.signin-when { font-size: 12px; color: var(--stone); white-space: nowrap; }
.signin-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--stone); }

.vendor-editcontact-btn {
  display: block; margin-top: 12px; font-size: 13px; font-weight: 600;
  color: var(--lake-mid); padding: 8px 0;
}
.vendor-contact-form { margin-top: 10px; }
.vendor-nocontact {
  font-size: 12px; color: var(--rust); margin-top: 6px;
}

/* ---- House notes ---- */
.house-notes-section { margin-top: 26px; }
.hn-card { padding: 15px 16px; }
.hn-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hn-body { font-size: 13.5px; color: var(--stone); margin-top: 5px; line-height: 1.5; white-space: pre-wrap; }
.hn-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--lake-mid); text-decoration: none; }
.hn-when { font-size: 11.5px; color: #8B6D3F; margin-top: 7px; }
.hn-edit { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--lake-mid); padding: 6px 0; }
.hn-form { margin-top: 4px; }

/* List / Calendar switch on the "Coming up" section ---------------------- */
.up-toggle { display: flex; gap: 2px; background: var(--cream-warm); border-radius: 9px; padding: 2px; }
.up-toggle-btn {
  border: 0; background: transparent; color: var(--stone);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
}
.up-toggle-btn.on { background: #fff; color: var(--lake-deep); box-shadow: 0 1px 2px rgba(15,59,71,.10); }
.up-cal-card { margin-top: 10px; }
.cal-dot-block { background: rgba(107,102,96,.45); }

/* ==========================================================================
   Square home tiles, grouped
   ========================================================================== */
.tile-group { margin-bottom: 18px; }
.tile-group-head {
  font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
  color: var(--charcoal);
  margin: 0 2px 11px;
}
.tile-grid-sq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-sq {
  background: white; border: 0; border-radius: 17px;
  /* Square on a phone, where this is used. aspect-ratio alone would grow the
     tiles absurdly tall on a laptop, so the height is capped. */
  aspect-ratio: 1 / 1;
  min-height: 104px; max-height: 126px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 8px 4px; position: relative; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,59,71,.04), 0 4px 16px -8px rgba(15,59,71,.10);
}
.home-sq:active { transform: scale(0.97); }
.home-sq .tile-icon { width: 62px; height: 62px; border-radius: 19px; }
.home-sq .tile-icon svg { width: 30px; height: 30px; }
.sq-title {
  font-size: 10px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center; color: var(--stone);
}
.tab-ic { position: relative; display: inline-flex; }
.tab-badge {
  position: absolute; top: -4px; right: -8px;
  background: var(--alert); color: #fff;
  font-size: 10.5px; font-weight: 800; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   Profile
   ========================================================================== */
.prof-who { display: flex; align-items: center; gap: 13px; padding: 16px; }
.prof-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lake-soft); color: var(--lake-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
}
.prof-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.prof-role { font-size: 12px; color: var(--stone); margin-top: 1px; }
.prof-notif { padding: 16px; margin-top: 12px; }
.prof-notif-row { margin-top: 4px; }
.prof-save {
  width: 100%; margin-top: 10px; padding: 11px;
  border: 0; border-radius: 12px; background: var(--lake-deep); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.prof-row {
  width: 100%; margin-top: 12px; padding: 16px;
  background: white; border: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer; color: var(--charcoal);
  box-shadow: 0 1px 2px rgba(15,59,71,.04), 0 4px 16px -8px rgba(15,59,71,.10);
}
.prof-row-title { font-size: 14.5px; font-weight: 600; }
.prof-row-sub { font-size: 11.5px; color: var(--stone); margin-top: 2px; }
.prof-signout .prof-row-title { color: var(--rust); }

/* ==========================================================================
   Messages: compose + what she sent
   ========================================================================== */
.msg-compose { padding: 16px; margin-bottom: 16px; }
.msg-compose textarea {
  width: 100%; margin-top: 8px; padding: 11px 12px;
  border: 1px solid rgba(15,59,71,.12); border-radius: 12px;
  font: inherit; font-size: 14px; resize: vertical; background: var(--cream-warm);
}
/* Recipient picker. Hidden entirely when there is only one cleaner -- an
   unchangeable dropdown is worse than no dropdown. */
/* Cindy's own notes about a person. Boxed off and labelled so there is no
   doubt it is private -- writing something personal into a form that might be
   shown to the person is a mistake worth designing against. */
.p-private {
  margin-top: 14px; padding: 13px 14px;
  background: var(--lake-soft); border-radius: 12px;
}
.p-private-head { font-size: 13px; font-weight: 700; color: var(--lake-deep); }
.p-private-hint { font-size: 12px; line-height: 1.45; color: var(--stone); margin: 3px 0 10px; }
.p-private .inv-in { background: #fff; }
.p-note { font-family: inherit; resize: vertical; }

/* Sits above the supply list while anything is flagged and unsent. It is a
   bar rather than a row in the page because she is scrolling a long closet
   list and should never have to hunt for the way to report it. */
.supply-send-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid rgba(15,59,71,.07);
  box-shadow: 0 -3px 16px rgba(15,42,46,.10);
  padding: 11px 16px 14px;
}
.supply-send-count {
  font-size: 12.5px; font-weight: 600; color: var(--stone);
  text-align: center; margin-bottom: 8px;
}

/* Edit belongs at the corner of the card, not stacked into the middle of
   what you are reading. */
.vendor-top { display: flex; align-items: center; gap: 8px; }
.vendor-top .vendor-name { flex: 1; min-width: 0; }
.vendor-edit-top {
  flex: none; border: 1px solid rgba(15,59,71,.16); background: #fff;
  color: var(--lake-deep); font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.vendor-edit-top:active { background: var(--cream-warm); }
.vc-private-row { margin-top: 4px; }

/* Quiet version for a month with nothing unusual: still says so, because
   silence and "I have not loaded" look the same. */
.month-extras-none { border-left-color: rgba(15,59,71,.14); }
.month-extras-none .mx-head { color: var(--stone); }

/* The month's extras, above the room list. Sand: unusual, not urgent. */
.month-extras { padding: 14px 16px 12px; border-left: 4px solid var(--sand-warm); margin-bottom: 12px; }
.mx-head { font-size: 13px; font-weight: 800; color: #8B6D3F; text-transform: uppercase; letter-spacing: .1em; }
.mx-sub { font-size: 12.5px; color: var(--stone); margin: 3px 0 10px; line-height: 1.45; }
.mx-row { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.mx-row + .mx-row { border-top: 1px solid rgba(15,59,71,.07); }
.mx-tick {
  flex: none; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  border: 2px solid rgba(15,59,71,.22); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.mx-done .mx-tick { background: var(--leaf); border-color: var(--leaf); }
.mx-txt { flex: 1; font-size: 14.5px; line-height: 1.4; }
.mx-done .mx-txt { opacity: .5; text-decoration: line-through; }
.mx-zone { display: block; font-size: 11.5px; font-weight: 700; color: var(--lake-mid); margin-top: 2px; }

/* Companion items. Rust, because arriving without them is the failure this
   exists to prevent. */
.order-pairs {
  font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--rust);
  background: rgba(184,92,56,.10); border-radius: 8px;
  padding: 5px 9px; margin-top: 5px; display: inline-block;
}
.cs-pairs { background: var(--cream-warm); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.cs-pair-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cs-pair-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid rgba(15,59,71,.16); border-radius: 999px;
  padding: 5px 6px 5px 11px; font-size: 12.5px; color: var(--charcoal);
}
.cs-pair-x {
  border: 0; background: transparent; color: var(--stone);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 3px;
}
.cs-pairs .inv-in { margin-bottom: 0; background: #fff; }

/* The schedules that consume this item, on the item itself. */
.cs-sched { background: var(--cream-warm); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.cs-sched-row { display: flex; gap: 10px; padding: 6px 0; align-items: baseline; }
.cs-sched-row + .cs-sched-row { border-top: 1px solid rgba(15,59,71,.08); }
.cs-sched-when { flex: none; width: 92px; font-size: 11.5px; font-weight: 700; color: var(--lake-deep); }
.cs-sched-txt { flex: 1; font-size: 13px; line-height: 1.4; color: var(--charcoal); }
.cs-sched-sub { display: block; font-size: 11.5px; color: var(--stone); margin-top: 1px; }
.cs-sched-add {
  display: block; width: 100%; margin-top: 9px; padding: 10px;
  border: 1px dashed rgba(15,59,71,.28); background: #fff; border-radius: 10px;
  color: var(--lake-deep); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* On the cleaner's list: where it lives, her note, and a thumbnail of the
   actual shelf she can tap to enlarge. */
.supply-where { display: block; font-size: 11.5px; font-weight: 600; color: var(--lake-mid); margin-top: 1px; }
.supply-note { display: block; font-size: 11.5px; color: var(--stone); line-height: 1.35; margin-top: 1px; }
.supply-where-photo { flex: none; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; display: block; }
.supply-where-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.where-lightbox { align-items: center; justify-content: center; padding: 20px; }
.where-lightbox img { max-width: 100%; max-height: 85vh; border-radius: 12px; }

/* The where-it-lives photo, sitting with the location it explains. */
.cat-photo-where { margin: 2px 0 12px; flex-wrap: wrap; }
.cat-photo-hint {
  flex-basis: 100%; font-size: 11.5px; line-height: 1.45;
  color: var(--stone); margin-top: 6px;
}

/* Reads as a sentence: Warn [2] [months] ahead. */
.tk-lead-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tk-lead-row .inv-in { margin: 0; }
.tk-lead-n { width: 74px; flex: none; text-align: center; }
.tk-lead-u { flex: 1; min-width: 0; }
.tk-lead-lbl { font-size: 14px; color: var(--charcoal); flex: none; }

/* A heads-up, not a task. Sand rather than red: nothing is late, something is
   approaching, and the point is that there is still time to order what it
   needs. */
.upcoming-card { padding: 13px 15px 14px; border-left: 4px solid var(--sand-warm); }
.upcoming-head {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: #8B6D3F; margin-bottom: 9px;
}
.upcoming-row { display: flex; gap: 11px; padding: 7px 0; align-items: baseline; }
.upcoming-row + .upcoming-row { border-top: 1px solid rgba(15,59,71,.07); }
.upcoming-when { flex: none; width: 88px; font-size: 12px; font-weight: 700; color: #8B6D3F; }
.upcoming-what { flex: 1; font-size: 14px; line-height: 1.4; color: var(--charcoal); }
.upcoming-needs { display: block; font-size: 12px; color: var(--stone); margin-top: 2px; }

.ct-item-vid { color: var(--rust); font-size: 11px; vertical-align: 1px; }
/* Marks a task the cleaner cannot tick without a photo. */
.ct-item-cam { color: var(--alert); font-size: 10px; vertical-align: 2px; }
/* Says what a walkthrough is, before anyone treats it as another cleaning. */
.ct-walk-note { padding: 14px 16px; border-left: 3px solid var(--leaf); }
.ct-walk-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ct-walk-body { font-size: 13px; line-height: 1.45; color: var(--stone); }
/* The way into the actual job from the list screen. */
.ct-open-job {
  display: block; width: 100%;
  margin-top: 12px; padding: 13px;
  border-radius: 11px;
  background: var(--lake-deep); color: #fff;
  font-size: 14px; font-weight: 600;
}
.ct-open-job:active { opacity: .8; }
.ct-open-hint { font-size: 11.5px; color: var(--stone); line-height: 1.4; margin-top: 7px; }

/* Anything else still open. One job gets the big card; these stay reachable
   without filling the screen and reading as "you have three jobs today". */
.job-more { margin: 10px 0 4px; }
.job-more-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stone);
  margin: 0 0 6px 2px;
}
.job-more-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 13px; margin-bottom: 6px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  text-align: left;
  color: var(--charcoal);
}
.job-more-row:active { opacity: .65; }
.job-more-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.job-more-when { font-size: 11.5px; color: var(--stone); white-space: nowrap; }
.job-more-when.is-late { color: var(--alert); font-weight: 700; }
/* When nothing has been started, the jobs are a genuine choice, so give them
   equal weight instead of promoting one and demoting the rest. */
.job-choose .job-more-head { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--charcoal); font-weight: 700; margin-bottom: 9px; }
.job-choose .job-more-row { padding: 16px 15px; border-color: rgba(0,0,0,.12); }
.job-choose .job-more-name { font-size: 15px; }

/* The update notice. It used to be a slim bar at the top, which people
   scrolled past for hours while working on a stale copy. In front of the app
   now, with the consequence spelled out. */
.update-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,59,71,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: updIn .18s ease;
}
@keyframes updIn { from { opacity: 0 } to { opacity: 1 } }
.update-card {
  background: #fff;
  border-radius: 18px;
  padding: 26px 22px 18px;
  max-width: 340px; width: 100%;
  text-align: center;
  box-shadow: 0 14px 44px rgba(0,0,0,.28);
}
.update-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--lake-soft); color: var(--lake-deep);
  display: flex; align-items: center; justify-content: center;
}
.update-title { font-size: 19px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; }
.update-body { font-size: 14px; line-height: 1.5; color: var(--stone); margin-bottom: 20px; }
.update-modal .update-bar-btn {
  display: block; width: 100%;
  padding: 15px;
  border-radius: 12px;
  background: var(--lake-deep); color: #fff;
  font-size: 16px; font-weight: 700;
}
.update-modal .update-bar-btn:active { opacity: .82; }
.update-later {
  display: block; width: 100%;
  margin-top: 10px; padding: 11px;
  background: transparent; color: var(--stone);
  font-size: 13px; font-weight: 600;
}

/* Cancelling a job, and putting it back. Never a delete -- a job called off
   by mistake at 6am should be one tap to restore, not a phone call. */
.job-cancel-btn {
  display: block; width: 100%;
  margin: 18px 0 4px; padding: 12px;
  border-radius: 11px;
  background: transparent;
  border: 1px solid rgba(198,40,40,.35);
  color: var(--alert);
  font-size: 13px; font-weight: 600;
}
.job-cancel-btn:active { background: var(--alert-soft); }
.cx-list { padding: 4px 0; }
.cx-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cx-row:last-child { border-bottom: none; }
.cx-body { flex: 1; min-width: 0; opacity: .6; }
.cx-name { font-size: 13.5px; font-weight: 600; text-decoration: line-through; }
.cx-when { font-size: 11.5px; color: var(--stone); }
.cx-restore {
  flex-shrink: 0; padding: 7px 13px;
  border-radius: 8px;
  background: var(--lake-soft); color: var(--lake-deep);
  font-size: 12px; font-weight: 700;
}
.cx-restore:active { opacity: .6; }
.collapse-head { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.collapse-chev { color: var(--stone); font-size: 13px; transition: transform .18s ease; }
.is-closed .collapse-chev { transform: rotate(-90deg); }

/* Search and Select share a row; Rename sits beside its heading. */
.cat-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; position: sticky; top: 0; z-index: 5; }
.cat-filter { margin-bottom: 12px; position: sticky; top: 52px; z-index: 5; }
.cat-tools .cat-search { margin: 0; flex: 1; min-width: 0; }
.cat-select-btn, .cat-rename {
  flex: none; border: 1px solid rgba(15,59,71,.16); background: #fff;
  color: var(--lake-deep); font-size: 12.5px; font-weight: 600;
  padding: 9px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.cat-rename { padding: 4px 11px; font-size: 11.5px; }
.cat-head-row { display: flex; align-items: center; gap: 8px; }
.cat-head-row .collapse-head { flex: 1; min-width: 0; }

/* In select mode a tap picks the row rather than opening it, so the tick has
   to be obvious or the mode is invisible. */
#root.picking .cat-row { position: relative; }
#root.picking .cat-row::after {
  content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px; border-radius: 6px;
  border: 2px solid rgba(15,59,71,.28); background: #fff;
}
#root.picking .cat-row.is-picked::after {
  background: var(--lake-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--lake-deep);
}
#root.picking .cat-row .feed-chev { display: none; }
.cat-movebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid rgba(15,59,71,.07);
  box-shadow: 0 -3px 16px rgba(15,42,46,.10);
  padding: 11px 16px 14px;
}
.cat-movecount { font-size: 12.5px; font-weight: 600; color: var(--stone); text-align: center; margin-bottom: 8px; }
.cat-moveacts { display: flex; gap: 8px; }
.cat-moveacts button { flex: 1; }

/* The thing a task uses, offered on the task itself. She is holding the bottle
   when she notices it is low; making her find it in a 48-item list later is
   how it gets forgotten. */
.check-supply {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 9px; padding: 8px 10px; text-align: left;
  background: var(--cream-warm); border: 1px solid rgba(15,59,71,.10);
  border-radius: 11px; cursor: pointer; font: inherit;
}
.check-supply:active { background: var(--sand-warm); }
.check-supply.is-flagged { background: rgba(46,158,91,.14); border-color: rgba(46,158,91,.35); }
.check-supply-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
.check-supply-blank { background: rgba(15,59,71,.08); display: block; }
.check-supply-txt { min-width: 0; }
.check-supply-txt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--charcoal); }
.check-supply-txt i { display: block; font-style: normal; font-size: 12px; color: var(--stone); margin-top: 1px; }
.check-supply.is-flagged .check-supply-txt i { color: #1E7A46; font-weight: 600; }

/* "Are they on schedule", answered from the ticks. */
.cs-track { background: var(--lake-soft); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.cs-track .cs-burn-head { color: var(--lake-deep); }
.cs-track-task { font-size: 13.5px; font-weight: 600; color: var(--charcoal); margin: 2px 0 4px; }
/* Late is amber, not red: a deep clean has the whole month, so "overdue" here
   already carries a generous grace period and is still a question. */
.cs-track-late { background: rgba(201,166,107,.24); }
.cs-track-late .cs-burn-head { color: #7A5C22; }
.tk-supply { background: var(--cream-warm); border-radius: 12px; padding: 12px 13px; margin: 4px 0 10px; }
.tk-supply .cs-burn-row .inv-in { background: #fff; }

/* Boxed and labelled, the same as the private contact note -- writing
   something personal into a field that might be shown to the person is a
   mistake worth designing against. */
.cs-ownernote {
  background: var(--lake-soft); border-radius: 12px;
  padding: 12px 13px; margin-bottom: 10px;
}
.cs-ownernote .cs-burn-head { color: var(--lake-deep); }
.cs-ownernote .inv-in { background: #fff; margin-bottom: 0; }
.cs-ownernote .cs-burn-hint { margin: 3px 0 9px; }

.order-note {
  font-size: 12.5px; line-height: 1.4; color: var(--lake-mid);
  background: var(--lake-soft); border-radius: 8px;
  padding: 5px 9px; margin-top: 5px; display: inline-block;
}

/* The two numbers that make a burn rate. Side by side because they only mean
   anything together. */
.cs-burn { background: var(--cream-warm); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.cs-burn-head { font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 8px; }
.cs-burn-row { display: flex; gap: 8px; }
.cs-burn-row .inv-in { flex: 1; min-width: 0; margin: 0; background: #fff; }
.cs-burn-hint { font-size: 11.5px; line-height: 1.45; color: var(--stone); margin-top: 7px; }

/* Shown on the order screen when an order ran out well short. Amber, not red:
   it is a question, not a verdict. */
.burn-flag {
  margin-top: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(201,166,107,.22); color: #7A5C22;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
}

.cat-count {
  font-size: 11px; font-weight: 700; color: var(--stone);
  background: var(--cream-warm); border-radius: 999px; padding: 2px 7px; margin-left: 6px;
}

/* One line per item, however many flavours it has. */
.cat-kinds {
  font-size: 10.5px; font-weight: 700; color: var(--lake-mid);
  background: var(--lake-soft); border-radius: 999px; padding: 2px 7px;
  margin-left: 6px; white-space: nowrap;
}
.cs-variants-hint {
  font-size: 12px; line-height: 1.45; color: var(--stone); margin: -2px 0 4px;
}
.cs-dupe {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  border: 1px solid rgba(15,59,71,.16); background: #fff; border-radius: 12px;
  color: var(--lake-deep); font-size: 14px; font-weight: 600; cursor: pointer;
}
.kind-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 2px; font-size: 15px;
  border-bottom: 1px solid rgba(15,59,71,.07);
}
.kind-row input { width: 20px; height: 20px; flex: none; }
.kind-all { border-bottom: 0; margin-top: 2px; }

/* Collapsible sections. The head is a real button so it is obviously
   tappable, and the chevron turns rather than swapping glyphs. */
.collapse-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; margin: 0 0 8px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.collapse-chev { flex: none; color: var(--stone); transition: transform .16s ease; }
.collapsible.is-closed .collapse-chev { transform: rotate(-90deg); }
.collapsible.is-closed .collapse-head { margin-bottom: 0; }
.today-section.collapsible .collapse-head { padding: 0 2px; }

/* "Already paid." Quiet next to Bill it, because billing is the action and
   dismissing is the correction. */
.bill-skip {
  flex: none; width: 30px; height: 30px; margin-left: 6px;
  border: 0; background: transparent; color: var(--stone);
  font-size: 20px; line-height: 1; border-radius: 999px; cursor: pointer;
}
.bill-skip:active { background: var(--cream-warm); }

/* The preview eye. Lives in the header spacer that every screen already has,
   so it appears in the same corner everywhere rather than moving around. */
.job-header-spacer { display: flex; justify-content: flex-end; align-items: center; }
.preview-as-btn {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(15,59,71,.16); background: #fff;
  color: var(--lake-deep); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.preview-as-btn:active { background: var(--cream-warm); }
/* While previewing, the app is showing someone else's view -- the button that
   got you there would be a lie, and the exit lives in the banner. */
body.viewing-as .preview-as-btn { display: none; }

/* Search boxes on the long lists. Sticky, because the point of searching a
   48-item closet list is that you are already scrolled into it. */
.svc-search, .cat-search {
  position: sticky; top: 0; z-index: 5;
  margin-bottom: 12px;
}
.svc-noresults, .cat-noresults {
  text-align: center; color: var(--stone); font-size: 13.5px; padding: 22px 0;
}

/* What the year looks like, before any contact details. */
.svc-summary { padding: 14px 16px 12px; margin-bottom: 14px; }
.svc-sum-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid rgba(15,59,71,.07);
}
.svc-sum-row:first-of-type { border-top: 0; }
.svc-sum-when {
  flex: none; width: 118px;
  font-size: 12px; font-weight: 700; color: var(--lake-deep);
}
.svc-sum-what { flex: 1; font-size: 13px; line-height: 1.45; color: var(--stone); }

/* The private badge is a button now, so it should not inherit button chrome. */
button.vendor-pill { border: 0; cursor: pointer; font: inherit; }

/* Photograph-the-thing entry point. It sits at the top of the closet list
   because someone holding a bottle should not have to read 48 names in a
   second language first. */
.supply-photo-card {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; margin-bottom: 12px; cursor: pointer;
}
.supply-photo-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--lake-soft); color: var(--lake-deep);
  display: flex; align-items: center; justify-content: center;
}
.supply-photo-title { font-size: 14.5px; font-weight: 700; color: var(--charcoal); }
.supply-photo-sub { font-size: 12.5px; color: var(--stone); margin-top: 2px; }

.si-match {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; margin-top: 8px;
  padding: 13px 14px; border-radius: 12px;
  border: 1px solid rgba(15,59,71,.14); background: #fff; cursor: pointer;
}
.si-match:active { background: var(--cream-warm); }
.si-match-name { font-size: 14.5px; font-weight: 600; color: var(--charcoal); }
/* The confidence is shown so she can tell a real answer from a guess instead
   of trusting whatever happens to be listed first. */
.si-match-conf {
  flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--stone);
}
.supply-id-body { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.supply-id-body .owner-photo-spin { margin: 12px auto; }

/* A private contact should be obvious at a glance, not a pale chip that reads
   like a category. Filled, with a lock, and a line inside the card saying in
   words who cannot see it. */
.vendor-pill-private {
  background: var(--lake-deep); color: #fff;
}
.vendor-pill-private::before { content: "🔒 "; }
.vendor-private-line {
  font-size: 12.5px; line-height: 1.45; color: var(--lake-mid);
  background: var(--lake-soft); border-radius: 9px;
  padding: 7px 10px; margin-top: 8px;
}

.msg-to { margin-bottom: 8px; }

/* Says what happens when the urgent box is left alone. Without it the only
   stated outcome is the emailed one, so leaving it unticked reads like the
   message goes nowhere. */
.msg-otherwise {
  font-size: 12px; line-height: 1.45; color: var(--stone);
  margin-top: 8px; padding-left: 33px;
}

.msg-todo-row {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 11px; font-size: 12.5px; color: var(--charcoal); cursor: pointer;
}
.msg-todo-row input { margin-top: 2px; flex: none; }
.msg-todo-row b { font-weight: 600; display: block; }
.msg-todo-row i { font-style: normal; color: var(--stone); font-size: 11.5px; line-height: 1.4; }
.msg-send {
  width: 100%; margin-top: 12px; padding: 12px;
  border: 0; border-radius: 12px; background: var(--lake-deep); color: #fff;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.msg-send:disabled { opacity: .6; }
.msg-sent { display: flex; align-items: flex-start; gap: 12px; }
.msg-sent-main { flex: 1; min-width: 0; }
.msg-sent-title { font-size: 14px; font-weight: 600; }
.msg-sent-detail { font-size: 12px; color: var(--stone); margin-top: 3px; }
.msg-sent-note { font-size: 12px; color: var(--leaf); margin-top: 4px; }
.msg-sent-meta { font-size: 11px; color: var(--stone); margin-top: 5px; }
.msg-sent-tag {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  background: rgba(217,168,107,.22); color: #8B6D3F;
}
.msg-sent-tag.ok { background: rgba(74,107,62,.13); color: var(--leaf); }
.msg-sent-done .msg-sent-title { color: var(--stone); }

/* ==========================================================================
   A kind of cleaning
   ========================================================================== */
.ct-summary { padding: 16px; }
.ct-sum-row { font-size: 14.5px; font-weight: 600; color: var(--charcoal); }
.ct-sum-dim { font-size: 12.5px; font-weight: 400; color: var(--stone); margin-top: 4px; }
.ct-schedule {
  width: 100%; margin-top: 13px; padding: 11px;
  border: 0; border-radius: 12px; background: var(--lake-deep); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.ct-deep .ct-schedule { background: var(--rust); }
.ct-zones { padding: 4px 6px; }
.ct-zone + .ct-zone { border-top: 1px solid rgba(15,59,71,.06); }
.ct-zone-head {
  width: 100%; padding: 13px 10px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--charcoal); text-align: left;
}
.ct-zone-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--stone);
  background: var(--cream-warm); border-radius: 999px; padding: 2px 8px;
}
.ct-zone-head.ct-open { color: var(--lake-deep); }
.ct-zone-items { padding: 0 10px 12px; }
.ct-item {
  font-size: 12.5px; color: var(--stone); line-height: 1.45;
  padding: 5px 0 5px 14px; position: relative;
}
.ct-item::before {
  content: ''; position: absolute; left: 2px; top: 12px;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(15,59,71,.22);
}

/* ==========================================================================
   Payments: bill a checkout, and the months behind it
   ========================================================================== */
.bill-row { display: flex; align-items: center; gap: 12px; }
.bill-btn {
  flex: none; border: 0; border-radius: 10px; padding: 8px 13px;
  background: var(--lake-deep); color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.bill-form { padding: 16px; margin-bottom: 12px; }
.bf-amts { display: flex; gap: 10px; margin-top: 8px; }
.bf-amts label {
  flex: 1; font-size: 11px; font-weight: 600; color: var(--stone);
  display: flex; flex-direction: column; gap: 4px;
}
.bf-amts input { margin-top: 0; }
.bf-deep-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 11px; font-size: 12.5px; cursor: pointer;
}
.hist-row { display: flex; align-items: center; gap: 12px; }
.hist-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  border: 0; background: none; text-align: left; cursor: pointer; padding: 0;
}
.hist-open .feed-title { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.hist-open .feed-meta { font-size: 11.5px; color: var(--stone); }
.hist-row-paid .hist-total { color: var(--stone); }
.hist-right { flex: none; text-align: right; }
.hist-total { font-size: 15px; font-weight: 700; color: var(--charcoal); }
.hist-tag {
  display: inline-block; margin-top: 4px; border: 0; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 6px 10px; border-radius: 999px;
  background: var(--lake-deep); color: #fff;
}
.hist-tag:active { transform: scale(0.96); }
.hist-tag:disabled { opacity: .6; }
.hist-tag.ok { background: rgba(74,107,62,.14); color: var(--leaf); }

/* ==========================================================================
   Supplies: the catalog
   ========================================================================== */
.supply-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.supply-vendor { font-size: 11px; color: var(--stone); }
.supply-thumb-blank { background: var(--cream-warm); display: block; }
.ord-top-actions { display: flex; gap: 9px; margin-bottom: 14px; }
.ord-top-actions button {
  flex: 1; padding: 11px 8px; border: 0; border-radius: 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--cream-warm); color: var(--lake-deep);
}
.cat-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; background: white; cursor: pointer;
  text-align: left; border-radius: 14px; margin-bottom: 7px;
  box-shadow: 0 1px 2px rgba(15,59,71,.04);
}
.cat-thumb {
  width: 46px; height: 46px; flex: none; border-radius: 11px;
  object-fit: cover; background: var(--cream-warm);
}
.cat-thumb-blank {
  display: flex; align-items: center; justify-content: center;
  color: rgba(15,59,71,.25); font-size: 18px; font-weight: 700;
}
.cat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cat-name { font-size: 14px; font-weight: 600; color: var(--charcoal); }
.cat-vendor { font-size: 11.5px; color: var(--stone); }
.cat-vendor i { font-style: italic; opacity: .75; }
.cat-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,59,71,.35);
  display: flex; align-items: flex-end; justify-content: center;
  overflow-y: auto;
}
.cat-sheet-inner {
  background: var(--cream); width: 100%; max-width: 520px;
  border-radius: 22px 22px 0 0; padding: 20px 18px 28px;
  max-height: 92vh; overflow-y: auto;
}
.cat-photo-box { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.cat-photo {
  width: 84px; height: 84px; flex: none; border-radius: 14px;
  object-fit: cover; background: var(--cream-warm);
}
.cat-photo-blank { border: 1.5px dashed rgba(15,59,71,.18); }
.cat-photo-btn {
  padding: 9px 14px; border-radius: 11px; cursor: pointer;
  background: var(--cream-warm); color: var(--lake-deep);
  font-size: 13px; font-weight: 600;
}
.cs-remove {
  width: 100%; margin-top: 10px; padding: 11px;
  border: 0; border-radius: 12px; background: none; color: var(--rust);
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* "There is a newer version" — a deployed change is invisible until the phone
   reloads, and a home-screen app can sit on an old copy for days. */
.update-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 200;
  background: var(--lake-deep); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 4px 20px -6px rgba(15,59,71,.35);
  padding-top: calc(13px + env(safe-area-inset-top));
}
.update-bar-btn {
  flex: none; border: 0; border-radius: 9px; padding: 8px 15px;
  background: #fff; color: var(--lake-deep);
  font-size: 13px; font-weight: 700; cursor: pointer;
}

/* Language, per person */
.prof-lang { padding: 16px; margin-top: 12px; }
.lang-toggle {
  display: flex; gap: 3px; margin-top: 11px;
  background: var(--cream-warm); border-radius: 11px; padding: 3px;
}
.lang-btn {
  flex: 1; border: 0; background: transparent; color: var(--stone);
  font-size: 13px; font-weight: 600; padding: 9px 8px; border-radius: 9px; cursor: pointer;
}
.lang-btn.on { background: #fff; color: var(--lake-deep); box-shadow: 0 1px 2px rgba(15,59,71,.10); }

.prof-version {
  margin: 20px 2px 8px; text-align: center;
  font-size: 11.5px; color: var(--stone);
}
.prof-check-update {
  display: block; margin: 7px auto 0; border: 0; background: none;
  color: var(--lake-deep); font-size: 12px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* ==========================================================================
   This is a phone app. On a laptop it was stretching to the full window,
   which pushed the tiles far apart and left everything looking unbalanced.
   Hold it to a phone's width and centre it.
   ========================================================================== */
@media (min-width: 620px) {
  .today-screen, .review-screen, .job-screen, .checklist-screen {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .tab-bar, .update-bar, .viewas-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
  }
  .cat-sheet-inner { border-radius: 22px; margin-bottom: 4vh; }
  .cat-sheet { align-items: center; }
}
.ct-nophoto { color: var(--rust); font-weight: 600; }
.ct-visit-nophoto { box-shadow: inset 3px 0 0 var(--rust), 0 1px 2px rgba(15,59,71,.04); }
.rate-row { align-items: center; }
.rate-amt { flex: none; font-size: 15px; font-weight: 700; color: var(--charcoal); }
.led-rates-btn {
  width: 100%; margin-top: 8px; padding: 11px;
  border: 0; border-radius: 12px;
  background: var(--cream-warm); color: var(--lake-deep);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* Category headings, sized to be found at a glance rather than read. */
.supply-cat-head {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--charcoal) !important;
}
.supply-section-head { font-size: 16px; font-weight: 800; color: var(--charcoal); }
.section-title { font-size: 13px; font-weight: 800; }
.ct-plan-btn {
  width: 100%; margin-top: 11px; padding: 11px;
  border: 0; border-radius: 12px; background: var(--lake-deep); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.ct-plan-btn:disabled { opacity: .6; }
.job-card-when { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.95); margin-top: 4px; }
/* The gradient lives on the inner hero, not the card. */
.owner-hero-late .job-card-hero { background: linear-gradient(135deg, #8f3f24, #b85c38); }
.job-card-late { background: rgba(255,255,255,.22); }

/* When a deep-clean task applies */
.ct-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ct-item-text { flex: 1; }
.ct-item-edit { cursor: pointer; }
.ct-item-edit:active { opacity: .6; }
.ct-item-when {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--rust); background: rgba(184,92,56,.10);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.tk-every-row { margin: 12px 0 4px; }
.tk-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.tk-m {
  border: 0; border-radius: 9px; padding: 9px 2px; cursor: pointer;
  background: var(--cream-warm); color: var(--stone);
  font-size: 11.5px; font-weight: 700;
}
.tk-m.on { background: var(--lake-deep); color: #fff; }
.tk-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tk-preset {
  border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  background: var(--cream-warm); color: var(--lake-deep);
  font-size: 11.5px; font-weight: 600;
}
.tk-dim { opacity: .35; pointer-events: none; }
.tk-summary {
  margin-top: 11px; font-size: 12.5px; font-weight: 600; color: var(--lake-deep);
  background: var(--cream-warm); border-radius: 10px; padding: 10px 12px;
}

/* The year ahead, for tasks that only happen in certain months */
.yp-card { padding: 4px 0; }
.yp-row { display: flex; gap: 14px; padding: 12px 16px; align-items: flex-start; }
.yp-row + .yp-row { border-top: 1px solid rgba(15,59,71,.06); }
.yp-month {
  flex: none; width: 96px;
  font-size: 13px; font-weight: 700; color: var(--charcoal);
}
.yp-now { background: rgba(27,90,107,.05); }
.yp-now .yp-month { color: var(--lake-deep); }
.yp-tag {
  display: block; margin-top: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rust);
}
.yp-items { flex: 1; min-width: 0; }
.yp-item { font-size: 13px; color: var(--stone); line-height: 1.45; }
.yp-item + .yp-item { margin-top: 6px; }

/* ==========================================================================
   Calendar colours, the way Cindy reads the month:
     guests in    pale blue   — the house is occupied
     clean day    green       — they are gone, go and clean
     blocked      grey        — held, nothing required
     deep clean   deep blue   — the big one
   Green beats blue on a checkout day because that day's meaning is the work.
   ========================================================================== */
.cal-cleanday {
  background: #2E9E5B;
  color: #fff;
  font-weight: 700;
}
.cal-deepclean {
  background: var(--lake-deep);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
/* The walkthrough is neither cleaning; green so it reads as its own day. */
.cal-walkday { background: var(--leaf); color: #fff; }
.cal-dot-walk { background: var(--leaf); }
.cal-dot-clean { background: #2E9E5B; }
.cal-dot-deepclean { background: var(--lake-deep); }
.cal-today { box-shadow: inset 0 0 0 2px var(--rust); }

/* Supply pictures do the talking — that is the point of having them */
.order-thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: contain; background: #fff; flex: none; }
.order-thumb-blank { background: var(--cream-warm); display: block; }
.supply-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: #fff; flex: none; }
.incoming-row { background: rgba(74,107,62,.06); }
.ord-foot { margin-top: 16px; }
.p-props-head { font-size: 12px; font-weight: 700; color: var(--stone); margin: 12px 0 6px; }
.p-prop { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 0; cursor: pointer; }
.person-props { font-size: 11.5px; color: var(--lake-deep); margin-top: 3px; font-weight: 600; }

/* A class that sets `display` beats the browser's own [hidden] rule, so
   anything hidden in JS stayed on screen. This makes `el.hidden` mean what it
   says everywhere in the app. */
[hidden] { display: none !important; }

/* Date chips follow the calendar's language: green for a turnover, deep blue
   for a deep clean. They were all rust, which said "deep clean" either way. */
.res-date-clean { background: #2E9E5B; color: #fff; }
.res-date-deepclean { background: var(--lake-deep); color: #fff; }
/* The walkthrough: green, because it is neither of the two cleanings and
   should not be mistaken for one at a glance on the calendar. */
.res-date-walk { background: var(--leaf); color: #fff; }
.led-intro { font-size: 13px; color: var(--stone); line-height: 1.5; margin: 0 2px 14px; }
.led-total-head {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 10px;
}
.led-empty-hint { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--lake-deep); }
.p-pay-hint { display: block; font-size: 11px; color: var(--stone); margin-top: 3px; font-weight: 400; }
.person-pay { font-size: 11.5px; color: var(--rust); font-weight: 600; margin-top: 3px; }

/* Past months, grouped by year with the year's own total */
.hist-year { margin-bottom: 18px; }
.hist-year-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 4px 8px; border-bottom: 1px solid rgba(15,59,71,.10); margin-bottom: 9px;
}
.hist-year-label { font-size: 17px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.01em; }
.hist-year-sum { font-size: 12px; color: var(--stone); }
.hist-year-sum b { color: var(--rust); font-weight: 700; }
.cal-sync-btn {
  width: 100%; margin-bottom: 13px; padding: 12px;
  border: 0; border-radius: 12px; background: var(--lake-deep); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.cal-sync-btn:disabled { opacity: .6; }

/* Run an overnight job now */
.prof-jobs { padding: 16px; margin-top: 12px; }
.job-btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.job-run {
  border: 0; border-radius: 11px; padding: 9px 12px; cursor: pointer;
  background: var(--cream-warm); color: var(--lake-deep);
  font-size: 12.5px; font-weight: 600; text-align: left;
}
.job-run i { display: block; font-style: normal; font-size: 10px; color: var(--stone); margin-top: 2px; }
.job-run:disabled { opacity: .5; }
.job-result { margin-top: 11px; font-size: 12.5px; color: var(--stone); min-height: 1em; }
.job-result.ok { color: var(--leaf); font-weight: 600; }
.job-result.bad { color: var(--rust); font-weight: 600; }
.res-pill-clean { background: rgba(46,158,91,.14); color: #24714A; }
.res-pill-walk { background: rgba(74,107,62,.16); color: var(--leaf); }

/* The banner sits over everything, so the app moves down to meet it rather
   than hiding its own header behind it. */
body.has-update-bar .today-screen,
body.has-update-bar .review-screen,
body.has-update-bar .job-screen,
body.has-update-bar .checklist-screen { padding-top: 62px; }
.visit-cancel-btn {
  width: 100%; margin-top: 18px; padding: 12px;
  border: 0; border-radius: 12px; background: none; color: var(--rust);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.msg-send-cleaner {
  width: 100%; margin-top: 12px; padding: 12px;
  border: 0; border-radius: 12px; background: var(--lake-deep); color: #fff;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.msg-send-cleaner:disabled { opacity: .6; }
/* Correcting a Spanish phrase, from the row she is reading */
.item-es-btn {
  flex: none; border: 0; background: none; cursor: pointer;
  color: rgba(15,59,71,.30); padding: 6px 4px; align-self: flex-start;
}
.item-es-btn:active { color: var(--lake-deep); }
/* Notes only Cindy sees, marked so she can tell at a glance */
.hn-private-head { margin-top: 26px; }
.hn-private { box-shadow: inset 3px 0 0 var(--sand-warm), 0 1px 2px rgba(15,59,71,.04); }
/* A coloured day you can act on says so */
.cal-tappable { cursor: pointer; }
.cal-tappable:active { transform: scale(0.92); }

/* Flagging supplies without leaving the review screen */
.qr-list { max-height: 46vh; overflow-y: auto; margin-top: 12px; }
.qr-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 12px 10px; border: 0; background: none; cursor: pointer;
  text-align: left; border-bottom: 1px solid rgba(15,59,71,.06);
}
.qr-check {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid rgba(15,59,71,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.qr-on .qr-check { background: var(--rust); border-color: var(--rust); }
.qr-name { font-size: 14px; color: var(--charcoal); }
.qr-on .qr-name { color: var(--rust); font-weight: 600; }

/* Deleting an issue: quiet, at the bottom of the status card, so it is there
   when wanted and not hit by accident. */
.issue-delete-btn {
  display: block; width: 100%;
  margin-top: 12px; padding: 11px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(198,40,40,.35);
  color: var(--alert);
  font-size: 13px; font-weight: 600;
}
.issue-delete-btn:active { background: var(--alert-soft); }

/* "Cindy will contact you about this" -- shown as soon as the cleaner picks
   "Cindy handles it", so the next step is clear before she sends. */
.issue-next-notice {
  margin: 8px 0 4px; padding: 9px 11px;
  border-radius: 9px;
  background: var(--lake-soft); color: var(--lake-deep);
  font-size: 12.5px; font-weight: 600;
}