/* Brokers Bestie · Look B, Charcoal + Teal (chosen 2026-10-22).
   Codes are always dark numbers on bright yellow: the one thing that must read
   in full sun at a gate. Status colors mean the same thing on every screen. */

:root {
  --ink: #1f2326;
  --ink-2: #4a5154;
  --mute: #5f676a;
  --bg: #eef0ef;
  --card: #ffffff;
  --line: #d5dad8;
  --line-soft: #e4e8e6;
  --teal: #19c3b1;
  --teal-on-dark: #2fd8c5;
  --teal-text: #0b7a6e;
  --teal-tint: #e3f6f3;
  --code: #ffe066;
  --done: #14917f;
  --pending: #b34700;
  --pending-tint: #fdf0e3;
  --alert: #d8333a;
  --well: #1f6fd1;
  --septic: #8b5a2b;
  --occ-o: #d62828;
  --occ-v: #1a7f45;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tall: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --nav-h: 68px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
a { color: var(--teal-text); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.app { max-width: 560px; margin: 0 auto; }

/* Header */
.top { background: var(--ink); color: #fff; padding: calc(12px + env(safe-area-inset-top)) 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--tall); font-weight: 800; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.brand-name span { color: var(--teal-on-dark); }
.back { color: #fff; display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; font-size: 15px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--teal-on-dark); text-transform: uppercase; }
.title { font-family: var(--tall); font-weight: 700; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.sub { font-size: 14px; color: #c5ccc9; }
.top .sub b { color: #fff; }
.bar { height: 4px; background: var(--teal); }
.search { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border-radius: 8px; padding: 0 12px; height: 46px; }
.search input { flex: 1; background: transparent; border: 0; color: #fff; outline: none; font-size: 16px; }
.search input::placeholder { color: #b9c1be; }
.mode { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 3px; background: var(--teal-on-dark); color: var(--ink); letter-spacing: .04em; white-space: nowrap; }
.mode.off { background: #4a5154; color: #fff; }

/* Layout */
.wrap { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.label { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.label.accent { color: var(--teal-text); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.card.pad { padding: 14px; }
.list > * { border-bottom: 1px solid var(--line-soft); }
.list > *:last-child { border-bottom: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 52px; color: var(--ink); width: 100%; background: none; border: 0; text-align: left; }
.row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t { font-size: 16px; font-weight: 600; }
.row .s { font-size: 13px; color: var(--ink-2); }
.muted { color: var(--ink-2); font-size: 14px; }
.small { font-size: 13px; color: var(--ink-2); }
.num { font-family: var(--tall); font-weight: 700; }
.empty { padding: 18px 14px; color: var(--ink-2); font-size: 15px; text-align: center; }
.hint { font-size: 13px; color: var(--ink-2); }
.note-box { background: var(--teal-tint); border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0; padding: 10px 12px; font-size: 14px; }
.warn-box { background: var(--pending-tint); border-left: 3px solid var(--pending); border-radius: 0 10px 10px 0; padding: 10px 12px; font-size: 14px; }

/* Codes: the reason the app exists */
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.code { background: var(--code); color: var(--ink); border: 0; border-radius: 8px; padding: 8px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.code .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 6px; }
.code .v { font-family: var(--tall); font-weight: 800; font-size: 32px; line-height: 1; word-break: break-word; }
.code .w { font-size: 13px; }
.code.none .v { font-size: 20px; }

/* Badges */
.badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dot { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dot.w { background: var(--well); }
.dot.s { background: var(--septic); }
.occ { font-family: var(--sans); font-weight: 800; font-size: 20px; } /* not the tall face: its O reads as a zero */
.occ.O { color: var(--occ-o); }
.occ.V { color: var(--occ-v); }
.occ.q { color: var(--mute); }
.top .occ.O { color: #ff6b6b; }
.top .occ.V { color: #4fd18b; }
.top .occ.q { color: #c5ccc9; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; background: var(--teal-on-dark); color: var(--ink); }
.pill.escrow { background: var(--code); }
.pill.closed, .pill.cancelled { background: #c5ccc9; }
.pill.tour { background: #ffffff; }
.ok { color: var(--done); font-weight: 600; }
.wait { color: var(--pending); font-weight: 600; }

/* Buttons */
.btn { min-height: 48px; border-radius: 10px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 600; font-size: 15px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-align: center; }
.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.teal { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.btn.red { background: var(--alert); color: #fff; border-color: var(--alert); }
.btn.green { background: var(--done); color: #fff; border-color: var(--done); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.block { width: 100%; }
.btn.big { min-height: 60px; font-size: 18px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 0; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; }
.action.dark { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Quick add tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); cursor: pointer; text-align: center; }
.tile.on { border: 2px solid var(--ink); }
.tile .ic { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--teal-on-dark); }
.tile .ic.y { background: var(--code); color: var(--ink); }
.tile .ic.t { background: var(--teal); color: var(--ink); }
.tile .ic.r { background: var(--alert); color: #fff; }

/* Tabs and chips */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.tab { flex-shrink: 0; min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--ink); background: var(--card); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink); }
.tab.on { background: var(--ink); color: #fff; }

/* Checkbox rows */
.check { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; color: #fff; }
.check.on { background: var(--done); border-color: var(--done); }
.done-text { color: var(--mute); text-decoration: line-through; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea { min-height: 48px; border: 1px solid #b9c1be; border-radius: 8px; padding: 10px 12px; background: #fff; font-size: 16px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input.codein { font-family: var(--tall); font-weight: 700; font-size: 22px; background: #fffbe6; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.switch input { width: 24px; height: 24px; accent-color: var(--ink); }
.photo-pick { width: 96px; height: 96px; border-radius: 10px; border: 2px dashed #b9c1be; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--ink-2); cursor: pointer; overflow: hidden; flex-shrink: 0; }
.photo-pick img { width: 100%; height: 100%; object-fit: cover; }
.thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--line-soft); flex-shrink: 0; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; }
.stat .n { font-family: var(--tall); font-weight: 800; font-size: 30px; line-height: 1; }
.stat .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c5ccc9; }

/* Tour stops */
.stop { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.stop.shown { border: 2px solid var(--done); }
.stop-head { display: flex; gap: 12px; align-items: flex-start; }
.stop-time { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; text-align: center; }
.stop-time .num { line-height: 1.05; }
.occ-word { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.stop-time .num { font-size: 20px; }
.leg { font-size: 13px; font-style: italic; color: var(--ink-2); text-align: center; }
.code-pill { display: inline-flex; gap: 8px; align-items: baseline; background: var(--ink); border-radius: 4px; padding: 5px 10px; align-self: flex-start; }
.code-pill .k { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--code); }
.code-pill .v { font-family: var(--tall); font-weight: 800; font-size: 22px; color: #fff; }
.access-box { background: var(--code); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* Safety */
.timer { font-family: var(--tall); font-weight: 800; font-size: 76px; line-height: 1; text-align: center; }

/* Bottom nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.nav-in { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--nav-h); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.nav a.on { color: var(--ink); }
.nav a.on svg { color: var(--teal-text); }

/* Sheet + toast */
.sheet-back { position: fixed; inset: 0; background: rgba(15, 18, 20, .55); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--bg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; z-index: 50; max-width: calc(100% - 32px); }
.offline { background: var(--pending); color: #fff; text-align: center; font-size: 13px; padding: 6px; font-weight: 600; }

@media (min-width: 600px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; background: var(--bg); }
}

/* Drag to reorder a tour's stops. The handle alone takes the gesture, so the
   rest of the list still scrolls under a finger. */
.drag { width: 40px; height: 44px; border: 0; background: none; color: var(--mute); display: inline-flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; flex-shrink: 0; }
.rleg.dragging { background: var(--teal-tint); outline: 2px solid var(--teal); position: relative; z-index: 2; }

/* Nothing may push the page sideways on a phone, whatever text size the
   phone is set to (Sara's Android cut cards off, 2026-10-23). Text wraps;
   a pair of buttons stacks when the two won't fit side by side. */
.wrap > *, .card, .stop, .row .grow { min-width: 0; max-width: 100%; }
.stop, .stop *, .row .t, .row .s, .label, .title { overflow-wrap: anywhere; }
.btn { white-space: normal; line-height: 1.2; }
.stop .btns, .wrap > .btns { display: flex; flex-wrap: wrap; }
.stop .btns > *, .wrap > .btns > * { flex: 1 1 130px; }
.code-pill { flex-wrap: wrap; max-width: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Tell Bestie: the mic that is on every screen without its own form. */
.fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 19; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 26px; background: var(--ink); color: #fff; font: 700 15px/1 var(--sans, inherit); box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; }
.fab svg { color: var(--teal-on-dark); }
.fab[hidden] { display: none; }
.wrap { padding-bottom: 140px; } /* room to scroll the last card clear of Tell Bestie */
/* Once you scroll, Tell Bestie shrinks to a round mic so it covers less. */
.fab.mini { padding: 0; width: 52px; justify-content: center; }
.fab.mini span { display: none; }

/* MLS sheet pages */
.pages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.page { position: relative; width: 72px; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.page img { width: 100%; height: 100%; object-fit: cover; }
.page .pdf { font: 700 14px/1 var(--tall); letter-spacing: .06em; color: var(--ink-2); }
.page .x { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 13px; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.row.pick { cursor: pointer; }
.row.pick input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--teal-text); }
.row.pick select { margin-top: 6px; width: 100%; min-height: 40px; }

/* Calendar and the morning briefing */
.cal-row { align-items: center; }
.cal-time { width: 64px; flex-shrink: 0; font-size: 17px; line-height: 1.1; }
.cal-time.allday { font: 700 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.k-date .cal-time.allday { color: var(--pending, #b35300); }
.done-row { opacity: .55; }
.cal-pick { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.cal-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.brief .brief-date { font: 700 22px/1.1 var(--tall); text-transform: uppercase; }
.brief-facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-weight: 600; }

/* ---------- One colour per kind of thing (Sara, 2026-10-24) ----------
   Same meaning on every screen, always with its word beside it. Yellow stays
   for codes only. */
:root {
  --k-showing: #0b7a6e;
  --k-appt: #2457b8;
  --k-deadline: #b85508;
  --k-late: #c8262e;
  --k-closing: #1d7a43;
  --k-todo: #6b7478;
  --k-prep: #6a3fb5;
}
.c-showing { --k: var(--k-showing); }
.c-appt { --k: var(--k-appt); }
.c-deadline { --k: var(--k-deadline); }
.c-late { --k: var(--k-late); }
.c-closing { --k: var(--k-closing); }
.c-todo { --k: var(--k-todo); }
.row[class*="c-"] { box-shadow: inset 5px 0 0 var(--k); }
.ktag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 3px; background: var(--k); color: #fff; font: 700 10px/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.cal-time.allday { color: var(--k, var(--ink-2)); }

/* Filter chips */
.filters { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 19px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); }
.prop-filter, .sortby select { min-height: 40px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); padding: 0 10px; font: 500 15px var(--sans); color: var(--ink); max-width: 100%; }
.sortby { display: flex; align-items: center; gap: 10px; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sortby select { flex: 1; text-transform: none; letter-spacing: 0; }

/* Property status: the same five colours everywhere */
.pill.listing { background: var(--teal-on-dark); color: var(--ink); }
.pill.prep { background: var(--k-prep); color: #fff; }
.pill.escrow { background: var(--k-deadline); color: #fff; }
.pill.tour { background: var(--k-appt); color: #fff; }
.pill.closed, .pill.cancelled { background: #c5ccc9; color: var(--ink); }
.pill.sm { font-size: 10px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.row.st-listing { box-shadow: inset 5px 0 0 var(--teal); }
.row.st-prep { box-shadow: inset 5px 0 0 var(--k-prep); }
.row.st-escrow { box-shadow: inset 5px 0 0 var(--k-deadline); }
.row.st-tour { box-shadow: inset 5px 0 0 var(--k-appt); }
.row.st-closed, .row.st-cancelled { box-shadow: inset 5px 0 0 #c5ccc9; }

/* ---------- the lockbox buddy: showing reactions, safety face ---------- */
.react-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.react { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 88px; min-width: 0; padding: 8px 2px; border: 2px solid var(--line, #d6dbd9); border-radius: 14px; background: #fff; color: var(--ink); font: 700 12px/1.15 var(--sans, inherit); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.react span { overflow-wrap: anywhere; }
.react[aria-pressed="true"] { background: #FFF3C9; border-color: #202428; }
.react svg { overflow: visible; transform-origin: 50% 80%; }
.stop-react { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-soft, #e3e7e5); border-radius: 12px; background: #FFF9E6; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.stop-react svg { flex: none; }
.ok-face { display: flex; justify-content: center; }
.ok-face svg { animation: bbBreathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.bb-on.react[data-k="love"] svg { animation: bbBeat .6s ease 1; }
.bb-on.react[data-k="love"] .bb-heart { animation: bbBeat .6s ease 2; transform-box: fill-box; transform-origin: center; }
.bb-on.react[data-k="like"] svg { animation: bbNod .5s ease 1; }
.bb-on.react[data-k="maybe"] svg { animation: bbTilt .7s ease 1; }
.bb-on.react[data-k="nope"] svg { animation: bbShake .45s ease 1; }
.bb-on.react[data-k="pricey"] svg { animation: bbShiver .4s linear 1; }
.bb-on.react[data-k="work"] svg { animation: bbDroop .7s ease 1; }
.bb-on.react[data-k="again"] svg { animation: bbPeek .6s ease 1; }
.bb-on.react[data-k="offer"] svg { animation: bbJump .6s cubic-bezier(.3,1.6,.5,1) 1; }
.bb-on.react[data-k="offer"] .bb-spark { animation: bbTwinkle .6s ease 2; transform-box: fill-box; transform-origin: center; }
@keyframes bbBeat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }
@keyframes bbNod { 0%,100% { transform: translateY(0); } 40% { transform: translateY(5px); } }
@keyframes bbTilt { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 70% { transform: rotate(7deg); } }
@keyframes bbShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
@keyframes bbShiver { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes bbDroop { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(4px) scaleY(.93); } }
@keyframes bbPeek { 0%,100% { transform: scale(1); } 40% { transform: scale(1.12) translateY(-3px); } }
@keyframes bbJump { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-12px) rotate(-4deg); } }
@keyframes bbTwinkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(1.4); } }
@keyframes bbBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .react svg, .react svg *, .ok-face svg { animation: none !important; } }
.face-row { display: flex; gap: 2px; flex: none; }
.face-tally { display: flex; flex-wrap: wrap; gap: 8px; }
.tally { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft, #e3e7e5); font-weight: 600; font-size: 14px; }
.tally .num { font-family: var(--tall); font-size: 18px; }
.buyer-home { align-items: flex-start; gap: 12px; }
.buyer-home .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buyer-home a.t { color: var(--ink); }
.face-btn { flex: none; width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; cursor: pointer; }
.face-empty { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 2px dashed #b9c1be; color: #7a8582; font-size: 22px; font-weight: 700; }
.install-head { display: flex; gap: 12px; align-items: center; }
.install-head svg { flex: none; }
.install-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.35; }
[hidden] { display: none !important; }
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--teal, #1FBFAE); color: #10201e; font: 700 15px/1.3 var(--sans, inherit); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
/* a stop's own code, notes, MLS sheet and photo notes, typed on the card */
.stopf { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-soft, #e3e7e5); padding-top: 10px; min-width: 0; }
.stopf .grid2 { gap: 8px; }
.stopf .field input, .stopf .field textarea { min-width: 0; }
.stopf .pages:empty { display: none; }
.stopf .btns .btn { min-height: 44px; }
.sfsave { display: flex; align-items: center; gap: 10px; }
.sfsave .btn { min-height: 44px; padding: 0 22px; }
.stopf-more { width: 100%; }
.stopf-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--teal-ink, #0b7d72); padding: 6px 0; min-height: 32px; }
.stopf-more[open] > summary { margin-bottom: 4px; }
.page .ftag { position: absolute; left: 2px; bottom: 2px; background: #202428; color: #fff; font: 700 10px/1 var(--tall); padding: 3px 5px; border-radius: 4px; letter-spacing: .05em; }
/* each picture with its own note beside it */
.fitems { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fitems:empty { display: none; }
.fitem { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.fitem .page { flex: none; }
.fnote { flex: 1; min-width: 0; display: flex; }
.fnote textarea { width: 100%; min-height: 92px; border: 1px solid #b9c1be; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 15px; resize: vertical; background: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- branding band and the open house kiosk ---------- */
.brandband { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; }
.brandband.big { border-radius: 0 0 18px 18px; padding: 18px 16px calc(18px); padding-top: calc(18px + env(safe-area-inset-top)); }
.card .brandband, #bandprev .brandband { border-radius: 14px; padding-top: 14px; }
.brandlogo { max-height: 56px; max-width: 70%; object-fit: contain; align-self: flex-start; background: #fff; border-radius: 8px; padding: 4px 8px; }
.brandname { font-family: var(--tall); font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; }
.brandagent { display: flex; gap: 12px; align-items: center; }
.headshot { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,.7); }
.brandagent .bn { font-weight: 700; font-size: 18px; }
.brandagent .bs { font-size: 13px; opacity: .9; }
body.kiosk .nav, body.kiosk .fab, body.kiosk .update-bar { display: none !important; }
body.kiosk #view { padding-bottom: 24px; }
.kiosk-main { max-width: 640px; margin: 0 auto; }
.kiosk-head .title { font-family: var(--tall); font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.kiosk-main .field input, .kiosk-main .field select { min-height: 52px; font-size: 18px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg button { min-height: 52px; border: 2px solid var(--line, #c9d0cd); border-radius: 12px; background: #fff; font: 600 17px/1 var(--sans, inherit); color: var(--ink); }
.seg button.on { background: #202428; color: #fff; border-color: #202428; }
.kiosk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }
.kiosk-thanks { text-align: center; padding: 60px 8px; display: flex; flex-direction: column; gap: 12px; font-size: 18px; }
.kiosk-thanks .title { font-family: var(--tall); font-weight: 800; font-size: 40px; text-transform: uppercase; }

/* Today cleanup (2026-10-27): folded filters, one-line install card */
details.filters > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; color: var(--ink-2, var(--ink)); font: 600 14px var(--sans); }
details.filters > summary::-webkit-details-marker { display: none; }
details.filters > summary > span { flex: 1; }
details.filters:not([open]) > summary::after { content: '▾'; }
.chip-clear { border: 0; background: var(--line); color: var(--ink); width: 30px; height: 30px; border-radius: 15px; font-size: 14px; cursor: pointer; }
details.install-slim > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
details.install-slim > summary::-webkit-details-marker { display: none; }
details.install-slim > summary .grow { flex: 1; }
details.install-slim[open] > summary .small { visibility: hidden; }

/* At the door (2026-10-27): black and yellow, big, for bright sun. */
.door { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: #0e1012; color: #fff; padding: calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.door-top { display: flex; justify-content: space-between; align-items: center; }
.door-x { display: inline-flex; align-items: center; gap: 4px; color: #fff; font: 700 17px var(--sans); min-height: 44px; }
.door-n { font: 700 16px var(--tall); letter-spacing: .08em; text-transform: uppercase; color: #cfd6d3; }
.door-addr { font-family: var(--tall); font-weight: 800; font-size: 34px; line-height: 1.02; text-transform: uppercase; }
.door-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.door-tag { border: 2px solid #fff; border-radius: 8px; padding: 4px 10px; font: 700 16px var(--sans); }
.door-tag.o { background: #fff; color: #0e1012; }
.door-tag.ok { border-color: #3ddc97; color: #3ddc97; }
.door-tag.warn { border-color: #ffb547; color: #ffb547; }
.door-codes { display: flex; flex-direction: column; gap: 10px; }
.door-code { background: var(--code, #F5C93E); color: #0e1012; border: 0; border-radius: 14px; padding: 12px 16px 14px; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.door-code .k { font: 700 15px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.door-code .v { font-family: var(--tall); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: .04em; word-break: break-all; }
.door-code .w { font: 600 16px var(--sans); }
.door-none { border: 2px dashed #ffb547; color: #ffb547; border-radius: 14px; padding: 16px; font: 700 18px var(--sans); }
.door-how { background: #1d2124; border-radius: 14px; padding: 4px 16px; font-size: 19px; line-height: 1.35; }
.door-how p { margin: 12px 0; white-space: pre-line; }
.door-agent { display: flex; align-items: center; gap: 8px; font: 600 17px var(--sans); }
.door-agent span { flex: 1; min-width: 0; }
.door-call { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 2px solid #fff; border-radius: 12px; color: #fff; font-weight: 700; }
.door-shown { min-height: 60px; border: 0; border-radius: 14px; background: #fff; color: #0e1012; font: 800 20px var(--sans); cursor: pointer; }
.door-shown.on { background: #3ddc97; }
.door-nav { display: flex; justify-content: space-between; gap: 10px; }
.door-step { flex: 1; text-align: center; min-height: 56px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 14px; color: #fff; font: 800 19px var(--sans); }
.door-step.next { background: var(--teal, #1FBFAE); border-color: var(--teal, #1FBFAE); color: #0e1012; }
.door-drive { text-align: center; color: #cfd6d3; font: 600 16px var(--sans); text-decoration: underline; }
.door-btn { background: var(--code, #F5C93E); border-color: var(--code, #F5C93E); color: #0e1012; font-weight: 800; }

/* One-tap status on the property page (2026-10-27) */
.status-strip .chips { flex-wrap: wrap; overflow: visible; }
.chip.st.on.st-listing { background: var(--teal-on-dark); border-color: var(--teal-on-dark); color: var(--ink); }
.chip.st.on.st-prep { background: var(--k-prep); border-color: var(--k-prep); color: #fff; }
.chip.st.on.st-escrow { background: var(--k-deadline); border-color: var(--k-deadline); color: #fff; }
.chip.st.on.st-tour { background: var(--k-appt); border-color: var(--k-appt); color: #fff; }
.chip.st.on.st-closed, .chip.st.on.st-cancelled { background: #c5ccc9; border-color: #c5ccc9; color: var(--ink); }
.chip.st:disabled { opacity: .55; cursor: default; }
.chip.st.on:disabled { opacity: 1; }
.toast-undo { margin-left: 10px; border: 0; background: var(--code, #F5C93E); color: #0e1012; font: 800 15px var(--sans); border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* Bright sun mode (2026-10-27): Settings → Bright sun. Black on white,
   bigger words, solid lines, so a screen reads outdoors at noon. */
html.hc {
  --ink: #000; --ink-2: #000; --mute: #1a1a1a; --bg: #fff; --card: #fff;
  --line: #000; --line-soft: #333; --teal-text: #00574e; --pending: #8a3200;
}
html.hc, html.hc body { font-size: 18px; }
html.hc .card, html.hc .chip, html.hc .btn, html.hc .field input, html.hc .field select, html.hc .field textarea { border-width: 2px; border-color: #000; }
html.hc .small, html.hc .hint, html.hc .s, html.hc .label { color: #000; }
html.hc .row .t { font-weight: 700; }
html.hc .nav { border-top: 2px solid #000; }
html.hc .nav a { color: #000; }
/* Toasts sit above Tell Bestie, Undo on the same line (2026-10-27) */
.toast { bottom: calc(var(--nav-h) + 78px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toast[hidden] { display: none; }
.toast-undo { margin-left: 0; flex-shrink: 0; }
.toast { min-width: min(340px, calc(100% - 32px)); }

/* ---------- Visual pass (Sara, 2026-10-27: "do your recommendations") ----------
   1. One meaning per colour. Teal is Bestie itself (buttons, links, tabs,
      header line) and nothing else. Calendar KINDS and property STATUSES each
      have their own colours, no colour shared between the two lists:
        kinds:    Showing purple · Appointment blue · Deadline orange ·
                  Closing green · To-do grey
        statuses: My listing rose · Coming soon gold · In escrow brown ·
                  Showing (other agent) slate · Closed / Cancelled grey
   2. One loud button per screen: plain .btn is now a quiet filled button with
      no outline; .btn.dark stays the main action.
   3. More contrast: darker canvas lines, darker small text and labels. */
:root {
  --k-showing: #6d3fc0;
  --s-listing: #b3305f;
  --s-prep: #8a6a00;
  --s-escrow: #7a4a1f;
  --s-tour: #3f4f63;
  --s-closed: #c5ccc9;
  --ink-2: #353b3e;
  --mute: #4a5154;
  --line: #c4cbc8;
  --bg: #e9ecea;
}
.pill.listing { background: var(--s-listing); color: #fff; }
.pill.prep { background: var(--s-prep); color: #fff; }
.pill.escrow { background: var(--s-escrow); color: #fff; }
.pill.tour { background: var(--s-tour); color: #fff; }
.pill.closed, .pill.cancelled { background: var(--s-closed); color: var(--ink); }
.row.st-listing { box-shadow: inset 5px 0 0 var(--s-listing); }
.row.st-prep { box-shadow: inset 5px 0 0 var(--s-prep); }
.row.st-escrow { box-shadow: inset 5px 0 0 var(--s-escrow); }
.row.st-tour { box-shadow: inset 5px 0 0 var(--s-tour); }
.row.st-closed, .row.st-cancelled { box-shadow: inset 5px 0 0 var(--s-closed); }
.chip.st.st-listing.on, .stat-opt.st-listing.on { background: var(--s-listing); border-color: var(--s-listing); color: #fff; }
.chip.st.st-prep.on, .stat-opt.st-prep.on { background: var(--s-prep); border-color: var(--s-prep); color: #fff; }
.chip.st.st-escrow.on, .stat-opt.st-escrow.on { background: var(--s-escrow); border-color: var(--s-escrow); color: #fff; }
.chip.st.st-tour.on, .stat-opt.st-tour.on { background: var(--s-tour); border-color: var(--s-tour); color: #fff; }

.btn { border-color: transparent; background: #dfe3e1; }
.btn:active { background: #d2d7d5; }
.card .btn:not(.dark):not(.teal):not(.red):not(.green):not(.ghost):not(.door-btn) { background: #eef0ef; }
.btn.ghost { background: transparent; }
.card { border-color: var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.label { font-size: 12.5px; }
.sec-head .label, section > .label { color: var(--ink); }
.empty { color: var(--ink-2); }

/* 5. Status as one line that opens */
details.status-pick > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
details.status-pick > summary::-webkit-details-marker { display: none; }
details.status-pick > summary .pill { font-size: 13px; padding: 6px 12px; border-radius: 6px; }
details.status-pick > summary .chg { color: var(--teal-text); font-weight: 700; font-size: 14px; }
details.status-pick[open] > summary .chg { visibility: hidden; }
.stat-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.stat-opt { min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); font: 600 15px var(--sans); color: var(--ink); cursor: pointer; }
.stat-opt:disabled { opacity: .55; }

/* 4. The lockbox buddy in empty states and the greeting */
.buddy-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; text-align: center; color: var(--ink-2); font-size: 15px; }
.buddy-empty svg { width: 64px; height: auto; }
.brief .buddy-hi { float: right; margin: -2px 0 0 8px; }
.brief .buddy-hi svg { width: 44px; height: auto; }
.brief .hi-wrap { display: flex; align-items: center; gap: 10px; }
.brief .buddy-hi { float: none; margin: 0; flex-shrink: 0; }
.brief .buddy-hi svg { width: 34px; }
.brief .hi-wrap { min-width: 0; }
.brief .brief-date { line-height: 1.05; }
.qr-box { background: #fff; border-radius: 14px; padding: 12px; margin: 0 auto; width: min(320px, 80vw); }
.qr-box svg { width: 100%; height: auto; display: block; }
/* First-run welcome (2026-10-27) */
.welcome [data-wface] svg { width: 110px; height: auto; }
.wdots { display: flex; justify-content: center; gap: 8px; margin: 4px 0; }
.wdot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wdot.on { background: var(--teal); }

/* Section headers, each in its own colour (2026-10-27). A header naming a
   kind of thing wears that thing's colour; others take one from the header
   palette (headerHue in app.js). White words on a solid band, so they read
   at a glance and in the sun. */
.label.hd { display: inline-block; width: fit-content; align-self: flex-start; padding: 5px 10px 4px; border-radius: 6px; color: #fff; background: var(--hd, #353b3e); letter-spacing: .12em; line-height: 1.2; }
.label.hd[data-hue="code"] { --hd: #F5C93E; color: #1f2326; }
.label.hd[data-hue="showing"] { --hd: var(--k-showing); }
.label.hd[data-hue="deadline"] { --hd: var(--k-deadline); }
.label.hd[data-hue="closing"] { --hd: var(--k-closing); }
.label.hd[data-hue="todo"] { --hd: var(--k-todo); }
.label.hd[data-hue="appt"] { --hd: var(--k-appt); }
.label.hd[data-hue="listing"] { --hd: var(--s-listing); }
.label.hd[data-hue="escrow"] { --hd: var(--s-escrow); }
.label.hd[data-hue="status"] { --hd: var(--s-tour); }
.label.hd[data-hue="safety"] { --hd: #c8262e; }
.label.hd[data-hue="people"] { --hd: #1f5f8b; }
.label.hd[data-hue="notes"] { --hd: #3f6b2a; }
.label.hd[data-hue="remind"] { --hd: #4b3fa6; }
.label.hd[data-hue="indigo"] { --hd: #3d3a9e; }
.label.hd[data-hue="plum"] { --hd: #7a2d6b; }
.label.hd[data-hue="ocean"] { --hd: #0e6b8a; }
.label.hd[data-hue="forest"] { --hd: #2e6b45; }
.label.hd[data-hue="rust"] { --hd: #9c3d1c; }
.label.hd[data-hue="teal"] { --hd: #0b7a6e; }
.label.hd[data-hue="berry"] { --hd: #a3285a; }
.label.hd[data-hue="olive"] { --hd: #5e6420; }
.sec-head { align-items: center; }
html.hc .label.hd { color: #fff; }
html.hc .label.hd[data-hue="code"] { color: #000; }

/* "What are we doing today?" (2026-10-27): the big choices on Today. */
.do-tiles { gap: 10px; }
.tile.do { padding: 14px 4px 12px; font-size: 13px; min-height: 104px; justify-content: center; }
.tile.do .ic { width: 52px; height: 52px; border-radius: 14px; }
.tile.do .badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--alert); color: #fff; font-size: 12px; line-height: 18px; }