/* ============================================================
   Curburb — the curb-appeal log for your block.
   Deep road teal + doorstep orange on warm cream (from the logo).
   Type: Bricolage Grotesque (display) / Public Sans (UI) / IBM Plex Mono (data)
   ============================================================ */

:root {
  /* curburb palette — sampled from the logo */
  --teal: #0E6A65;
  --teal-deep: #0A4B47;
  --teal-ink: #13302C;
  --teal-bright: #15958A;
  --orange: #EF6F18;
  --orange-bright: #FF8E42;
  --orange-deep: #C25708;
  --green: #3E9B2A;
  --green-bright: #6FC93D;
  --green-deep: #2E7D22;
  --amber: #C77F06;
  --danger: #B3261E;

  --paper: #FAF8F0;
  --surface: #FFFFFF;
  --ink: var(--teal-ink);
  --muted: #5A6B67;
  --line: #DCDFD6;
  --line-teal: #C7DCD7;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(10, 60, 56, .07), 0 8px 24px rgba(10, 60, 56, .08);
  --shadow-lift: 0 2px 6px rgba(10, 60, 56, .10), 0 16px 40px rgba(10, 60, 56, .14);
  --maxw: 720px;

  --font-display: "Bricolage Grotesque", "Public Sans", -apple-system, sans-serif;
  --font-logo: "Baloo 2", "Bricolage Grotesque", sans-serif; /* the rounded logo lettering */
  --font-ui: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; overflow-x: clip; } /* breakout house photo must not cause sideways scroll */
html { height: 100%; }
/* min- (not fixed) height: a fixed 100% box-sizes the bottom padding away, so
   long views (dashboard) scrolled flush against the tab bar with no gap */
body { min-height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(110px + env(safe-area-inset-bottom)); /* clear the tab bar + FAB bulge */
  line-height: 1.5;
  /* warm paper with faint survey contours */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cg fill='none' stroke='%230E6A65' stroke-opacity='.045' stroke-width='1.4'%3E%3Cpath d='M-20 70 Q 60 30 140 70 T 300 70'/%3E%3Cpath d='M-20 130 Q 70 95 150 130 T 300 124'/%3E%3Cpath d='M-20 196 Q 60 160 140 196 T 300 190'/%3E%3Cpath d='M-20 252 Q 76 220 152 252 T 300 248'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Disclaimer ribbon ---------- */
.disclaimer {
  background: var(--teal-deep);
  color: #C3DEDA;
  border-bottom: 3px solid var(--orange);
  font-size: 12.5px;
  padding: 8px 42px 8px 16px;
  position: relative;
  letter-spacing: .1px;
}
.disclaimer strong { color: #fff; }
.disclaimer button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; font-size: 20px; line-height: 1;
  color: #C3DEDA; cursor: pointer; padding: 4px 8px;
}
.disclaimer[hidden] { display: none; }

/* ---------- App bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(239, 111, 24, .20) 0%, transparent 42%),
    linear-gradient(160deg, var(--teal-bright) 0%, var(--teal) 46%, var(--teal-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 14px rgba(10, 60, 56, .35);
}
/* "Viewing As Resident" mode banner — a slim band under the top bar, shown only
   while a board/manager/admin previews the resident view. Warm amber so it reads as
   a temporary mode, distinct from the teal app bar. */
.viewas-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 18px;
  background: #FCEAD7;
  color: #9A4410;
  border-bottom: 1px solid rgba(239, 111, 24, .30);
  font-size: 13px; font-weight: 600; line-height: 1;
}
.viewas-bar[hidden] { display: none; }
.viewas-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.viewas-left svg { width: 16px; height: 16px; flex: none; }
.viewas-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
.viewas-exit {
  flex: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid rgba(239, 111, 24, .55);
  background: #fff; color: #B4470E;
}
.viewas-exit:active { transform: scale(.98); }
.viewas-exit:disabled { opacity: .6; cursor: default; }
.viewas-exit:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.appbar-title { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.appbar-title img { width: 34px; height: 34px; border-radius: 9px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.wordmark {
  font-family: var(--font-logo);
  font-weight: 700; font-size: 21px; letter-spacing: .2px; line-height: 1.05;
}
.wordmark em { font-style: normal; color: var(--orange-bright); }
/* Copyright mark appended to the curburb wordmark — inherits the logo color, muted + superscript */
.logo-c { font-size: .5em; font-weight: 700; vertical-align: super; opacity: .62; margin-left: 1px; letter-spacing: 0; text-transform: none; }
/* Community subtitle in the top-bar wordmark: hidden until signed in, so the
   logged-out sign-in / apply pages never reveal the real community name. */
.wordmark .wm-sub { display: none; }
body.signed-in .wordmark .wm-sub { display: block; }
/* Capture: minimal teal link to switch to the common-area pin flow (shown only before a house address is picked) */
.cap-common-link { display: block; text-align: center; margin-top: 10px; color: var(--teal); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cap-common-link[hidden] { display: none; }
/* Capture: detect-first home picker (auto-listed nearest homes at the top) */
.addr-suggest { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.addr-suggest:empty { display: none; }
.addr-suggest-label, .addr-suggest-msg { font-size: 13px; color: var(--muted); margin: 2px 0; }
.addr-loading { font-size: 13px; color: var(--muted); padding: 8px 2px; display: flex; align-items: center; gap: 9px; }
.addr-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--teal); border-right-color: transparent; border-radius: 50%; animation: addr-spin .7s linear infinite; }
@keyframes addr-spin { to { transform: rotate(360deg); } }
.addr-home {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  border: 1.5px solid var(--teal-bright); background: #fff; color: var(--ink);
  border-radius: 12px; padding: 11px 14px; font-size: 15px; font-weight: 600;
  transition: background .12s ease, transform .08s ease;
}
.addr-home:hover { background: #E8F4F2; }
.addr-home:active { transform: scale(.985); }
.addr-home-dist { font-size: 12.5px; font-weight: 600; color: var(--teal); white-space: nowrap; }
/* the stacked row of picker actions (detect / manual / common) */
.cap-addr-actions { margin-top: 12px; }
.cap-addr-actions .btn-line { width: 100%; }
.cap-manual-link {
  display: block; width: 100%; text-align: center; margin-top: 10px;
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
  color: var(--teal); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.cap-manual-link[hidden] { display: none; }
#addr-picker[hidden] { display: none; }
/* parcel card header: the picked address + a Change link */
.parcel-card .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.parcel-card .pc-addr { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.parcel-card .pc-change {
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; white-space: nowrap;
  color: var(--teal); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.wordmark small {
  display: block; font-family: var(--font-ui); font-weight: 500;
  font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-top: 1px;
}

/* centered section title — logo lettering; hidden on narrow phones where the
   wordmark + auth buttons already fill the bar (the active tab shows the section) */
.appbar-page {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-logo); font-weight: 700; font-size: 30px; line-height: 1;
  color: rgba(255,255,255,.95); letter-spacing: .4px; white-space: nowrap;
  pointer-events: none; display: none;
}
@media (min-width: 640px) { .appbar-page { display: block; } }

/* top-bar account area — Sign In / Sign Up signed out, name chip signed in */
.appbar-actions { display: flex; align-items: center; gap: 8px; }
.appbar-actions a { text-decoration: none; white-space: nowrap; }
.appbar-user {
  display: inline-flex; align-items: center; gap: 0;
  color: #fff; font-size: 13px; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px;
  padding: 3px;
  transition: background .15s ease;
}
.appbar-user:hover { background: rgba(255,255,255,.1); }
.appbar-user b {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(160deg, var(--orange-bright) 0%, var(--orange) 70%);
}

/* ---------- Notification bell + panel ---------- */
.notif { position: relative; display: flex; }
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  transition: background .15s ease;
}
.notif-bell:hover { background: rgba(255,255,255,.12); }
.notif-bell .bi { width: 21px; height: 21px; }
.notif-badge {
  position: absolute; top: 0; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: #E2445C; color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--teal-deep);
}
.notif-badge[hidden] { display: none; }

/* dark panel — same family as the app bar, one register deeper */
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: 372px; max-width: calc(100vw - 16px); box-sizing: border-box;
  max-height: min(560px, calc(100dvh - 140px));
  display: flex; flex-direction: column;
  background: linear-gradient(172deg, #17413C 0%, var(--teal-ink) 62%);
  color: #E9F2EF;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  animation: notif-in .18s cubic-bezier(.2,.7,.25,1) backwards;
  z-index: 40;
}
@keyframes notif-in { from { opacity: 0; transform: translateY(-6px); } }
.notif-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .notif-panel { animation: none; } }
@media (max-width: 480px) {
  .notif-panel { position: fixed; left: 8px; right: 8px; top: 64px; width: auto; }
}
.notif-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.notif-head h3 {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff;
}
.notif-readall {
  border: 0; background: transparent; color: #8FBDB5;
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
}
.notif-readall:hover { color: #fff; background: rgba(255,255,255,.08); }
.notif-x {
  border: 0; background: transparent; color: #8FBDB5;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.notif-x:hover { color: #fff; }
.notif-list {
  overflow-y: auto; padding: 2px 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.notif-item {
  /* Grid (not flex) so the middle column is minmax(0,1fr): it reliably shrinks and
     wraps its text on every engine. Flex min-width:0 can fail to constrain on some
     mobile browsers, letting the text run off the panel. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: start;
  padding: 11px 12px; border-radius: 12px;
  background: rgba(255,255,255,.045);
  text-decoration: none; color: inherit;
  transition: background .15s ease;
}
.notif-item:hover { background: rgba(255,255,255,.10); }
.notif-item.unseen { background: rgba(21,149,138,.17); }
.notif-item.unseen:hover { background: rgba(21,149,138,.26); }

/* Pinned "Needs Your Approval" group at the top of the bell (management only). */
.notif-pin-group { padding: 2px 12px 8px; border-bottom: 1px solid rgba(255,255,255,.08); margin: 0 4px 4px; }
.notif-pin-head { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #F2B07A; padding: 4px 2px 6px; }
.notif-pin { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.notif-pin-main {
  flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 11px; text-decoration: none; color: inherit;
  background: rgba(239,111,24,.16); transition: background .15s ease;
}
.notif-pin-main:hover { background: rgba(239,111,24,.27); }
.notif-pin-ico { flex: 0 0 auto; display: flex; color: #F2B07A; }
.notif-pin-ico .bi { width: 18px; height: 18px; }
.notif-pin-body { min-width: 0; display: flex; flex-direction: column; }
.notif-pin-title { font-size: 13px; font-weight: 700; color: #fff; }
.notif-pin-sub { font-size: 12px; color: #BFD3CE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-pin-dismiss {
  flex: 0 0 auto; border: 0; background: transparent; color: #8FBDB5;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 7px; border-radius: 8px;
}
.notif-pin-dismiss:hover { color: #fff; background: rgba(255,255,255,.08); }
.notif-pin.is-dismissed .notif-pin-main { opacity: .5; }
/* avatar color carries the submission kind — concern red, accolade green, notice amber */
.notif-ava {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14.5px; color: #fff;
}
.ava-concern  { background: #D9453A; }
.ava-accolade { background: var(--green); }
.ava-notice   { background: var(--amber); }
/* Send Back flow: a manager's request to the submitter (amber = attention) and the
   submitter's reply back to the manager (teal = neutral). */
.ava-sendback { background: var(--amber); }
.ava-response { background: var(--teal); }
/* white-space: normal RESETS the app bar's inherited `nowrap` (inheritance follows
   the DOM, and the panel is a descendant of the bar even though it renders detached),
   which was forcing the notification text onto one clipped line. This is the real fix. */
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.notif-actor {
  font-size: 11.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: #fff;
  overflow-wrap: anywhere; word-break: break-word;
}
.notif-actor i { font-style: normal; font-weight: 600; color: #8FBDB5; text-transform: none; letter-spacing: 0; }
.notif-text { font-size: 13.5px; color: #DDEAE6; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
.notif-ctx { font-size: 12px; color: #8FBDB5; margin-top: 3px; overflow-wrap: anywhere; word-break: break-word; }
.notif-meta {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #8FBDB5; padding-top: 2px;
}
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #E2445C; }
.notif-empty { text-align: center; padding: 30px 18px 26px; color: #8FBDB5; }
.notif-empty .bi { width: 26px; height: 26px; opacity: .6; }
.notif-empty p { margin: 8px 0 0; font-size: 13px; }

/* ---------- View ---------- */
.view { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px; }

/* Capture's last element is the full-width Submit button, which lands dead-center
   under the Capture FAB. The body's 110px bottom padding barely clears the fixed
   tab bar, but the FAB bulges ~120px up (higher on notched phones, where the tab
   bar's own safe-area padding lifts it), so the Submit button sat behind it and
   couldn't be scrolled clear. Extra bottom room on this route only lifts it above
   the FAB without adding dead space to the pages that were already fine. */
.view[data-route="capture"] { padding-bottom: 72px; }

/* staggered entrance for freshly rendered views */
.view > * { animation: rise .42s cubic-bezier(.2,.7,.25,1) backwards; }
.view > *:nth-child(2) { animation-delay: .06s; }
.view > *:nth-child(3) { animation-delay: .12s; }
.view > *:nth-child(4) { animation-delay: .18s; }
.view > *:nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view > *, .tab.active .tab-ico, .parcel-card, .veil, .modal, .toast, .map-sheet, .lightbox { animation: none; } }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: space-around;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-teal);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 18px rgba(10,60,56,.06);
}
/* Home is a full-screen launcher: hide the bottom bar (and its Capture FAB) + reclaim the bottom padding */
/* Home now shows the bottom bar + FAB like every other page (default padding clears it). */

/* Welcome / community landing (#/welcome) — the logged-out invite-only gate */
body.on-welcome .tabbar { display: none; }
body.on-welcome { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.welcome-gate { max-width: 440px; margin: 0 auto; padding: 30px 2px 24px; }
.wg-hero { text-align: center; margin: 6px 0 20px; }
.wg-logo { font-family: var(--font-logo); font-weight: 700; font-size: 44px; line-height: 1; color: var(--teal); }
.wg-logo span { color: var(--orange); }
.wg-tag { margin: 12px auto 0; max-width: 360px; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.wg-card select { width: 100%; }
.wg-actions { margin-top: 16px; }
.wg-actions .btn, .wg-actions .btn-line { flex: 1 1 0; }
.wg-note { margin-top: 14px; }

/* ---------- Home (#/home) — warm civic launcher ----------
   Baloo 2 greeting with a doorstep-orange accent; gradient icon chips encode intent
   (teal = explore, orange = act, calm = settings); staggered page-load reveal. */
.home { padding: 6px 2px 0; }
.home-hero { margin: 12px 4px 22px; }
.home-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 11px;
  font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--teal);
  animation: home-in .5s cubic-bezier(.2,.7,.3,1) backwards; }
.home-hero-eyebrow svg { width: 15px; height: 15px; }
.home-hero-title { margin: 0; font-family: var(--font-logo); font-weight: 700; font-size: 31px; line-height: 1.12;
  letter-spacing: -.3px; color: var(--teal-ink); animation: home-in .5s cubic-bezier(.2,.7,.3,1) .05s backwards; }
.home-hero-accent { color: var(--orange); }

.home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.home-tile { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px 14px 15px;
  border-radius: 20px; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line-teal); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  animation: home-in .44s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i) * 45ms + .1s); }
.home-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(125% 80% at 100% 0, rgba(20,149,138,.07), transparent 58%); }
.home-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.home-tile:active { transform: scale(.98); }
.home-tile-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 15px; color: #fff; background: linear-gradient(150deg, var(--teal-bright), var(--teal-deep));
  box-shadow: 0 6px 14px rgba(10,60,56,.22); }
.home-tile-ico svg { width: 25px; height: 25px; }
.home-tile.tone-act .home-tile-ico { background: linear-gradient(150deg, var(--orange-bright), var(--orange-deep));
  box-shadow: 0 6px 14px rgba(194,87,8,.24); }
.home-tile.tone-calm .home-tile-ico { background: linear-gradient(150deg, #7E908B, var(--teal-ink));
  box-shadow: 0 6px 14px rgba(19,48,44,.2); }
.home-tile-label { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: var(--teal-ink); line-height: 1.1; }
.home-tile-desc { font-size: 12px; line-height: 1.34; color: var(--muted); }
@keyframes home-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .home-hero-eyebrow, .home-hero-title, .home-tile { animation: none; } }

/* ---------- Settings hub-and-spoke ----------
   Reuses the home-tile component for the category tiles so the hub matches the
   rest of the app. The identity block + spoke surface share the card's radius,
   border, shadow, and padding. */
.settings-hub { padding: 2px 0 0; }
.set-identity { display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-teal); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 15px; margin-bottom: 14px;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; }
.set-identity:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.set-identity:active { transform: scale(.985); }
.set-identity-av { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .5px;
  background: linear-gradient(150deg, var(--teal-bright), var(--teal-deep));
  box-shadow: 0 6px 14px rgba(10,60,56,.22); }
.set-identity-av svg { width: 22px; height: 22px; }
.set-identity-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-identity-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--teal-ink);
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-identity-email { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-identity .pill.role { flex: 0 0 auto; }
.set-identity-go { flex: 0 0 auto; display: inline-flex; color: var(--teal-bright); }
.set-identity-go svg { width: 20px; height: 20px; }

/* slightly deeper press on the settings tiles, per the hub-and-spoke spec */
.settings-grid .home-tile:active { transform: scale(.97); }
.settings-grid.no-enter .home-tile { animation: none; }

/* the spoke (expanded tile) surface — the FLIP transform target. Animations only
   touch transform/opacity; the morph panel masks early scale distortion and sits
   behind the (relatively-positioned) cards. */
.spoke-surface { position: relative; transform-origin: top left; }
.spoke-surface > .card { position: relative; z-index: 1; }
.spoke-morph { position: absolute; inset: 0; z-index: 0; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow); opacity: 0; pointer-events: none; }
/* reduced motion: no expand/collapse or stagger — a plain instant cross-fade
   between the hub and the spoke instead (opacity only, no movement) */
@keyframes set-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .spoke-morph { display: none; }
  .settings-hub, .spoke-surface { animation: set-fade 140ms ease-out both; }
}

.tab {
  flex: 1; text-align: center; padding: 8px 4px 9px; text-decoration: none;
  color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  position: relative; transition: color .15s ease;
}
.tab-ico { height: 23px; }
.tab-ico svg { display: block; width: 23px; height: 23px; }
.tab .ico-fill, .tab.active .ico-line { display: none; }
.tab.active .ico-fill { display: block; }
.tab.active .tab-ico { animation: tab-pop .2s ease; }
@keyframes tab-pop { 40% { transform: scale(1.14); } }
.tab.active { color: var(--teal); }
.tab.active:not(.tab-fab)::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px;
  background: linear-gradient(90deg, var(--orange-bright), var(--orange));
  border-radius: 0 0 4px 4px;
}

/* center Capture FAB — orange button on a semi-circle extrusion of the bar */
.tab-fab .tab-ico {
  width: 52px; height: 52px; margin-top: -36px; margin-bottom: 6px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.28) 0%, transparent 46%),
    linear-gradient(160deg, var(--orange-bright) 0%, var(--orange) 55%, var(--orange-deep) 100%);
  box-shadow: 0 4px 10px rgba(194,87,8,.36), 0 1px 3px rgba(10,60,56,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tab-fab .tab-ico svg { width: 26px; height: 26px; }
.tab-fab::after {
  /* the bar bulging up behind the button */
  content: ""; position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-teal);
  box-shadow: 0 -5px 14px rgba(10,60,56,.07);
  z-index: -1;
}
.tab-fab:active .tab-ico { transform: scale(.93); }
.tab-fab.active { color: var(--orange-deep); }
.tab-fab.active .tab-ico {
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.24) 0%, transparent 46%),
    linear-gradient(160deg, var(--orange) 0%, var(--orange-deep) 70%);
  box-shadow: 0 3px 9px rgba(194,87,8,.45), inset 0 1px 4px rgba(0,0,0,.16);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.card h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 20px; letter-spacing: .1px;
  color: var(--teal);
}
.card .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 700; font-size: 13px; margin: 15px 0 5px; letter-spacing: .2px; color: var(--teal); text-transform: capitalize; }
label .hint { font-weight: 400; color: var(--muted); display: block; font-size: 12px; margin-top: 2px; text-transform: none; letter-spacing: 0; }
input[type=text], input[type=date], input[type=time], input[type=datetime-local], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: 11px 12px; font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 11px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=date], input[type=time] { min-width: 0; } /* date/time intrinsic width can overflow .row on narrow phones */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E6A65' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 88px; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(21, 149, 138, .16);
}
input[readonly] { background: #F0F2EE; color: var(--muted); cursor: default; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.field-note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Parcel / owner card ---------- */
.parcel-card {
  margin-top: 14px;
  border: 1.5px solid var(--line-teal);
  border-left: 5px solid var(--orange);
  border-radius: 12px;
  background: linear-gradient(180deg, #FDFBF4 0%, #FAF1E6 100%);
  padding: 13px 14px 12px;
  animation: rise .3s cubic-bezier(.2,.7,.25,1) backwards;
}
.parcel-card .pc-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 3px;
}
.parcel-card .pc-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600; color: var(--teal); line-height: 1.2;
}
.parcel-card .pc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.parcel-card .pc-meta { font-size: 12px; color: var(--muted); margin-top: 7px; }
.parcel-card .pc-lot {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: .4px;
}
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid;
}
.badge-own { color: var(--green-deep); border-color: var(--green); background: rgba(111, 201, 61, .12); }
.badge-abs { color: var(--amber); border-color: var(--amber); background: rgba(199, 127, 6, .08); }
.badge-ten { color: var(--teal-bright); border-color: var(--line-teal); background: rgba(21, 149, 138, .07); }

/* ---------- Segmented control (Concern / Notice / Accolade) ---------- */
.seg {
  display: flex; gap: 0; margin: 4px 0 2px;
  border: 1.5px solid var(--line-teal); border-radius: 12px; overflow: hidden;
  background: #F2F4F0;
}
.seg button {
  flex: 1; padding: 10px 8px; border: 0; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--muted); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s ease, color .15s ease;
}
.seg button.active:first-child { background: linear-gradient(165deg, #D9453A, var(--danger)); color: #fff; }
.seg button.active:last-child { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; }
/* notice sits mid-seg — map yellow, dark text for contrast */
.seg button.active[data-kind="notice"] { background: linear-gradient(165deg, #F2C42F, #DFA90D); color: #4A3802; }
/* location toggle (House / Common Area) — teal active on both sides */
#f-loctype button.active { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; }

/* ---------- Dashboard ---------- */
.dash-h {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin: 19px 0 5px;
}
.vchart { max-width: 520px; margin-top: 4px; }
.vchart svg { display: block; width: 100%; height: auto; }
.vc-val { font-family: var(--font-mono); font-size: 9px; font-weight: 600; fill: var(--muted); }
.vc-val.vc-last { fill: var(--orange-deep); font-weight: 700; }
.vc-yr { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }
.vc-series { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .6px; }
.bar-row { display: grid; grid-template-columns: minmax(86px, 118px) 1fr auto; gap: 9px; align-items: center; margin-top: 7px; font-size: 12.5px; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.bar-track { height: 9px; background: #EEF1EA; border-radius: 99px; overflow: hidden; }
.bar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-bright), var(--teal)); border-radius: 99px; }
.bar-val { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.split-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin-top: 14px; }
.split-bar i { background: linear-gradient(90deg, var(--teal-bright), var(--teal)); }
.split-bar b { background: linear-gradient(90deg, var(--orange-bright), var(--orange)); }
/* kind split: concerns red / notices yellow / accolades green (map colors) */
.split-kind i { background: linear-gradient(90deg, #D9453A, var(--danger)); }
.split-kind u { background: linear-gradient(90deg, #F0C02C, #D9A410); }
.split-kind b { background: linear-gradient(90deg, #58B53C, var(--green-deep)); }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot-teal { background: var(--teal-bright); }
.dot-orange { background: var(--orange); }
.dot-red { background: #D9453A; }
.dot-gold { background: #D6A21A; }
.dot-yellow { background: #F0C02C; }
.dot-green { background: #58B53C; }
/* dashboard: audit-coverage ring */
.cov-ring-wrap { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cov-ring { width: 80px; height: 80px; flex: none; }
.cov-ring-pct { font-family: var(--font-display); font-size: 19px; font-weight: 800; fill: var(--teal-ink); }
.cov-ring-n { font-size: 22px; font-weight: 800; color: var(--teal-ink); line-height: 1.1; }
.cov-ring-n span { font-size: 14px; font-weight: 600; color: var(--muted); }
.cov-ring-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* dashboard: oldest-open list */
.dash-oldest { display: flex; align-items: baseline; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line-teal); text-decoration: none; }
.dash-oldest:last-child { border-bottom: 0; }
.dash-old-addr { font-weight: 700; font-size: 13px; color: var(--teal-ink); flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-old-cat { font-size: 12px; color: var(--muted); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-old-age { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--orange-deep); flex: none; margin-left: auto; }

/* inline button/segment icons */
.bi { width: 17px; height: 17px; flex-shrink: 0; }
.seg .bi { width: 15px; height: 15px; }
.bi-xs { width: 11px; height: 11px; vertical-align: -1.5px; } /* inside pills / captions */

/* ---------- Buttons ---------- */
.btn, .btn-ghost, .btn-danger, .btn-danger-solid, .btn-line, .btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  border-radius: 12px; padding: 12px 16px; border: 1.5px solid transparent;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn {
  background: linear-gradient(165deg, var(--teal-bright) 0%, var(--teal) 70%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(14, 106, 101, .35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn:hover { box-shadow: 0 4px 14px rgba(14, 106, 101, .42), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:active { transform: scale(.985); }
.btn-line { background: #fff; color: var(--teal); border-color: var(--teal); }
.btn-line:active { transform: scale(.985); background: #EEF6F4; }
/* "Detect Nearby Houses" GPS shortcut on the capture form — a soft teal radar ping
   so it catches the eye without nagging (echoes the "you are here" loc-pulse ring).
   Pure box-shadow = no layout shift; the ring rests between pulses. */
#btn-gps { animation: gps-ping 2.6s ease-out infinite; }
@keyframes gps-ping {
  0%   { box-shadow: 0 0 0 0 rgba(14, 106, 101, .34); }
  55%  { box-shadow: 0 0 0 7px rgba(14, 106, 101, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 106, 101, 0); }
}
@media (prefers-reduced-motion: reduce) { #btn-gps { animation: none; } }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn-cta { background: #fff; color: var(--teal); border-color: #fff; padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn-cta:active { transform: scale(.97); }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
/* Solid danger — the more severe action (e.g. Permanently Delete) vs the outlined
   .btn-danger (reversible Delete Submission). */
.btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger-solid:hover { filter: brightness(.95); }
.btn-danger-solid:active { transform: scale(.985); }
.btn[disabled], .btn-danger-solid[disabled] { opacity: .5; cursor: not-allowed; }
/* Hard-delete modal: the "also delete in SBB" opt-in checkbox row. */
.hd-check { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0;
  font-size: 13px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.hd-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--danger); }
.btn-block { width: 100%; }
.btn-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-bar > * { flex: 1; min-width: 130px; }

/* ---------- Photos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-teal); background: #EDF0E8; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
/* tappable photos on the submission detail open the lightbox */
button.photo-thumb { padding: 0; cursor: pointer; appearance: none; font: inherit; display: block; }
button.photo-thumb:hover img, button.photo-thumb:focus-visible img { transform: scale(1.05); }

/* ---------- Photo lightbox (enlarge + download submitted photos) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(8,20,18,.93);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: lb-fade .18s ease; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 88px); object-fit: contain;
  border-radius: 8px; box-shadow: 0 10px 44px rgba(0,0,0,.55); }
.lightbox-bar { position: absolute; top: 0; left: 0; right: 0; display: flex;
  justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
.lightbox-count { color: rgba(255,255,255,.88); font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.lightbox-actions { display: flex; gap: 8px; margin-left: auto; }
.lb-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1; }
.lb-btn:hover { background: rgba(255,255,255,.28); }
.lb-btn .bi { width: 19px; height: 19px; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.15); color: #fff;
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; }
.lightbox-nav:hover { background: rgba(255,255,255,.28); }
.lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
/* Date + address caption (never clock time) so an enlarged photo is self-documenting */
.lightbox-cap { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100% - 120px);
  padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.photo-thumb button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(10,60,56,.72); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }

/* ---------- "Already logged here" heads-up at submit time ---------- */
.dupe-list { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
.dupe-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-teal); border-radius: 10px; background: #F7FAF8; text-decoration: none; color: inherit; transition: background .12s ease, border-color .12s ease; }
.dupe-item:hover { background: #EFF5F2; border-color: var(--teal-bright); }
.dupe-item:active { transform: scale(.99); }
.dupe-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dupe-go { flex-shrink: 0; color: #9aa3ab; display: inline-flex; align-items: center; }
.dupe-go .bi { width: 18px; height: 18px; }
.dupe-cat { font-weight: 700; font-size: 14px; color: var(--teal); display: flex; align-items: center; gap: 6px; }
.dupe-when { font-size: 12px; color: var(--muted); }
/* per-item "days until action is due" countdown in the heads-up */
.dupe-due { font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: var(--teal); margin-top: 1px; }
.dupe-due.dupe-due-now { color: #b91c1c; }
/* probationary-period countdown on a recently-closed heads-up row */
.dupe-prob { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: #9A6E03; margin-top: 2px; }
/* "Recently Closed (Within 180 Days)" section in the heads-up. SBB-history rows have
   no Curburb report to open, so they render static (no hover/press affordance). */
.dupe-subhead { font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--teal); margin: 14px 0 0; }
.dupe-item-static { cursor: default; }
.dupe-item-static:hover { background: #F7FAF8; border-color: var(--line-teal); }
.dupe-item-static:active { transform: none; }
/* A probationary row: the openable report link fills the row, with a small
   amber "Recurrence" button pinned right that re-escalates without navigating. */
.dupe-item-recur { gap: 8px; }
.dupe-item-recur:active { transform: none; }
.dupe-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.dupe-open:active { transform: scale(.99); }
/* Still-in-probation closed row: the WHOLE tile is a button that opens the Report
   A Recurrence window (reset native button chrome; keep the .dupe-item look). */
.dupe-recur-tile { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* Street View + original-violation-photo side-by-side inside the recurrence modal. */
.recur-sbs { margin: 12px 0; }
.recur-label { display: block; margin-top: 4px; }
.dupe-recur-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 11px; box-sizing: border-box;
  background: #FFF8EC; border: 1px solid #E4C77A; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700; color: #8A6300; line-height: 1;
  cursor: pointer; white-space: nowrap;
}
.dupe-recur-btn:hover { background: #FCEFD2; border-color: #D9B65E; }
.dupe-recur-btn:active { transform: scale(.97); }
.dupe-recur-btn .bi-xs { width: 14px; height: 14px; }

/* ---------- Rapid Shot review (#/shot/<id>) ----------
   The "review phase" of a Rapid Shot: the snapped photo, the address/owner, then the
   open items already on file at that home, each with Skip / Escalate / Close. */
.shot-review-photo { display: block; width: 100%; border-radius: 14px; border: 1px solid var(--line-teal); margin-bottom: 12px; }
.shot-addr { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.shot-logged { margin-top: 14px; }
.shot-items { display: flex; flex-direction: column; gap: 8px; }
.shot-item { border: 1px solid var(--line-teal); border-radius: 12px; background: #F7FAF8; padding: 11px 13px; }
.shot-item-cat { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--teal); }
.shot-item-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.shot-item-meta.is-due { color: #b91c1c; font-weight: 800; letter-spacing: .2px; }
.shot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.shot-actions .btn-line { flex: 1 1 auto; width: auto; min-width: 0; padding: 9px 11px; font-size: 13px; }
.shot-actions .shot-close-btn { color: var(--green-deep); border-color: var(--green); }
.shot-actions .shot-close-btn:active { background: #EEF7EA; }
.shot-filenew { display: flex; width: 100%; margin-top: 14px; }
/* Once there are items to reconcile, filing new is the secondary path. */
.shot-filenew-secondary { background: #fff; color: var(--teal); border-color: var(--teal); box-shadow: none; }
.shot-discard { display: block; margin: 12px auto 0; padding: 4px; background: none; border: none;
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.shot-discard:disabled { opacity: .5; cursor: default; }
/* Resident To-Do (bounced-back reports): a simple stacked list + the manager's
   "what's needed" note rendered as an amber quote under each row. */
.todo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.todo-note { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #8A6300;
  background: #FFF8EC; border-left: 3px solid #E4C77A; padding: 6px 9px; border-radius: 6px; }

/* "Send Back To Submitter" (Needs Info) cards on the submission detail. */
.ni-card { border-left: 4px solid var(--teal); }
.ni-card-ask { border-left-color: var(--amber); background: #FFFBF4; }
.ni-note { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--line-teal); background: #F7FAF8; border-radius: 0 8px 8px 0; font-size: 14px; color: #374151; white-space: pre-wrap; }
.ni-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-teal); border-radius: 10px; font: inherit; font-size: 14px; resize: vertical; min-height: 64px; }
.ni-textarea:focus { outline: none; border-color: var(--teal-bright); }

/* ---------- Submission detail: hero photo + prev/next stepping ---------- */
.sub-hero { position: relative; display: block; width: 100%; margin-top: 10px; padding: 0;
  border: 1px solid var(--line-teal); border-radius: 14px; overflow: hidden; background: #EDF0E8;
  cursor: zoom-in; appearance: none; font: inherit; }
.sub-hero img { display: block; width: 100%; max-height: 62vh; object-fit: cover; transition: transform .25s ease; }
.sub-hero:hover img, .sub-hero:focus-visible img { transform: scale(1.02); }
.sub-hero-zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(10,60,56,.62); color: #fff; }
.sub-hero-zoom .bi { width: 17px; height: 17px; }
/* Hero photo download — mirrors the enlarge zoom control, parked bottom-left */
.sub-hero-wrap { position: relative; margin-top: 10px; }
.sub-hero-wrap .sub-hero { margin-top: 0; }
.sub-hero-dl { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; z-index: 2;
  background: rgba(10,60,56,.62); color: #fff; }
.sub-hero-dl:hover { background: rgba(10,60,56,.82); }
.sub-hero-dl .bi { width: 17px; height: 17px; }

/* prev/next arrows — desktop (mouse) only; touch devices use a horizontal swipe */
.sub-nav-arrow { display: none; }
.view > .sub-nav-arrow { animation: none; } /* fixed-position: keep out of the view's entrance transform */
@media (hover: hover) and (pointer: fine) {
  .sub-nav-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-teal);
    background: var(--surface); color: var(--teal); box-shadow: var(--shadow); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .12s ease, transform .12s ease; }
  .sub-nav-arrow:hover { background: #EAF3F2; }
  .sub-nav-arrow:active { transform: translateY(-50%) scale(.94); }
  .sub-nav-arrow .bi { width: 22px; height: 22px; }
  .sub-nav-prev { left: max(12px, calc(50vw - 472px)); }
  .sub-nav-next { right: max(12px, calc(50vw - 472px)); }
}

/* ---------- Log list ---------- */
.list-controls { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.list-controls select, .list-controls input { flex: 1; min-width: 120px; }

/* ---- Unified Log filter controls: search bar + house#/street/type/obs + date range.
   Every control shares one height/border/radius/color/font so the bar reads as a set. ---- */
.log-search { display: block; width: 100%; margin: 0 0 8px; }
/* Split search: keyword box grows, narrow CB-# box beside it (one row). Both keep
   the shared .log-search look; .log-cb rule follows .log-search so its width wins. */
.log-search-row .log-search { margin: 0; flex: 1 1 0; width: auto; min-width: 0; }
.log-search-row .log-cb { flex: 0 0 38%; min-width: 104px; }
.log-search,
.list-controls input.log-filter,
.list-controls select.log-filter,
.log-dates .log-date-field input {
  height: 42px; padding: 0 12px; font-size: 14px; font-weight: 500; font-family: inherit;
  color: var(--ink); background: #fff; border: 1.5px solid var(--line-teal); border-radius: 11px; box-sizing: border-box;
}
.log-search, .list-controls .log-filter { appearance: none; -webkit-appearance: none; }
.list-controls .log-filter { flex: 1 1 calc(50% - 4px); min-width: 0; }
.list-controls select.log-filter {
  cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E6A65' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.log-search::placeholder, .log-filter::placeholder { color: var(--muted); font-weight: 500; }
.log-search:focus,
.list-controls .log-filter:focus,
.log-dates .log-date-field input:focus {
  outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(21, 149, 138, .16);
}
/* Date-range row — "Time Frame" label, preset, and From/To all share one row and
   wrap gracefully on narrow phones (min-widths set the wrap points). */
.log-dates { align-items: center; }
.log-kind-row { align-items: center; }
.log-tf-label { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.log-dates .log-preset { flex: 1 1 auto; min-width: 132px; }
.log-kind-row .log-kind { flex: 1 1 auto; min-width: 132px; }
.log-date-field { flex: 1 1 auto; min-width: 150px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted); }
.log-date-field input { flex: 1; min-width: 0; }
.log-dates-clear { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--teal-ink);
  background: none; border: 0; padding: 4px; cursor: pointer; text-decoration: underline; }

/* ---- Multi-select filters (Type + Observations): chip control + checkbox panel.
   Each takes its own full-width row (like the date preset) so the dropdown panel is
   full width with no viewport overflow, and chips have room. ---- */
.log-ms { position: relative; flex: 1 1 100%; min-width: 0; max-width: 420px; }
.ms-control { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px 0 12px; box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--line-teal); border-radius: 11px; cursor: pointer; overflow: hidden; }
.ms-control:focus { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(21, 149, 138, .16); }
.ms-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; flex: 1; min-width: 0; overflow: hidden; }
.ms-placeholder { color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-chip { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; max-width: 100%; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--teal-ink); background: #EAF3F2;
  border: 1px solid var(--line-teal); border-radius: 999px; padding: 2px 4px 2px 9px; }
.ms-x { flex-shrink: 0; border: 0; background: transparent; color: var(--teal); font-size: 12px; line-height: 1; cursor: pointer; padding: 0 3px; }
.ms-caret { flex-shrink: 0; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
.ms-control[aria-expanded="true"] .ms-caret { transform: rotate(-135deg); }
.ms-panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1.5px solid var(--line-teal); border-radius: 12px; box-shadow: var(--shadow-lift);
  padding: 5px; max-height: 300px; overflow: auto; }
.ms-opt { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--teal-ink); cursor: pointer; }
.ms-opt:hover { background: rgba(20, 113, 105, .08); }
.ms-opt input { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--teal); }
.ms-empty { padding: 10px; font-size: 13px; color: var(--muted); }

/* Filters disclosure: a button on the primary row toggles an inline panel that
   holds the less-used controls (Type / Origin / Observations + Time Frame).
   The panel sits in normal flow, so the multi-select dropdowns behave as usual. */
/* Primary row stays on ONE line: a narrow House # box on the left, the Street
   dropdown filling the middle, and the small square Filters icon pinned right. */
.log-primary-row { flex-wrap: nowrap; align-items: center; }
.log-primary-row .log-num { flex: 0 0 90px; }
.log-primary-row .log-street { flex: 1 1 auto; min-width: 0; }
.log-filters-btn {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--line-teal); border-radius: 11px;
  color: var(--teal-ink); cursor: pointer;
}
.log-filters-btn:focus-visible { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(21, 149, 138, .16); }
.log-filters-btn.has-active { border-color: var(--teal-bright); color: var(--teal); }
.log-filters-btn .lf-ico { width: 19px; height: 19px; }
/* Active-filter count: a small corner bubble on the icon. */
.log-filters-badge {
  position: absolute; top: -6px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--teal); color: #fff;
  border: 1.5px solid #fff;
  font-size: 10.5px; font-weight: 800; line-height: 1;
}
.log-filters-panel[hidden] { display: none; }

/* Sort control: a small square button (mirrors the Filters button) that opens a
   tiny popup with Newest First (default) / Oldest First. Sits just left of Filters.
   The wrapper is positioned so the popup anchors to the button's right edge. */
.log-sort { position: relative; flex: 0 0 auto; }
.log-sort-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--line-teal); border-radius: 11px;
  color: var(--teal-ink); cursor: pointer;
}
.log-sort-btn:focus-visible { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(21, 149, 138, .16); }
.log-sort-btn.has-active { border-color: var(--teal-bright); color: var(--teal); }
.log-sort-btn .ls-ico { width: 19px; height: 19px; }
.log-sort-panel { position: absolute; z-index: 60; top: calc(100% + 4px); right: 0;
  min-width: 168px; background: #fff; border: 1.5px solid var(--line-teal); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 5px; }
.log-sort-panel[hidden] { display: none; }
.ls-opt { position: relative; display: flex; align-items: center; width: 100%;
  padding: 9px 12px 9px 32px; border: 0; background: transparent; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--teal-ink); text-align: left; }
.ls-opt:hover { background: rgba(20, 113, 105, .08); }
.ls-opt[aria-checked="true"] { color: var(--teal); }
.ls-opt[aria-checked="true"]::before { content: ''; position: absolute; left: 13px; top: 50%;
  width: 6px; height: 11px; margin-top: -7px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Count line + global Clear All Filters button */
.log-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.log-meta-row .small { margin: 0; }
.log-clear-all { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--teal);
  background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; }
.entry {
  display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line-teal);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit; align-items: center;
  transition: transform .12s ease, box-shadow .15s ease;
}
.entry:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.entry-thumb { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; background: #EDF0E8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; }
.entry-main { flex: 1; min-width: 0; }
.entry-main .cat { font-weight: 700; font-size: 15px; color: var(--teal); }
.entry-main .meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-esc { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 700; color: #9a3412; }
.entry-esc .bi { width: 13px; height: 13px; }

/* date-group header in the Log */
.log-group { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .3px; margin: 18px 2px 9px; }
.log-group:first-of-type { margin-top: 4px; }

/* "Show board & manager changes" toggle (management only) */
.log-toggle { display: flex; align-items: center; gap: 8px; margin: -4px 2px 12px; font-size: 13px;
  font-weight: 600; color: var(--teal-ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.log-toggle input { width: auto; margin: 0; accent-color: var(--teal); }

/* Activity rows in the Log feed — lighter than report cards so changes read as
   secondary to the reports themselves. The whole row links to the report. */
.act-log-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; margin-bottom: 10px;
  border-radius: 12px; border: 1px dashed var(--line-teal); background: rgba(20, 113, 105, .04);
  text-decoration: none; color: inherit; }
a.act-log-row { transition: background .12s ease; }
a.act-log-row:hover { background: rgba(20, 113, 105, .09); }
.act-log-dot, .hist-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--teal); }
.act-dot-green  { background: var(--green); }
.act-dot-orange { background: var(--orange); }
.act-dot-teal   { background: var(--teal-bright); }
.act-log-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.act-log-label { font-weight: 700; font-size: 13.5px; color: var(--teal-ink); }
.act-log-meta { font-size: 12px; color: var(--muted); }

/* Event rows lead with a photo thumbnail (the photo taken at the event, else the
   violation's newest photo, else a ▤ placeholder) and trail with the CB-# stamp.
   With a thumbnail the status dot moves inline, just before the label text. */
.act-log-row.has-thumb { align-items: center; }
.ev-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  background: #EDF0E8; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 20px; }
.act-log-row.has-thumb .pill.reported { flex-shrink: 0; align-self: center; }
/* When the CB-# and SBB-# pills stack, keep both flush-right; the rule above would
   otherwise center the narrower CB-# over the wider SBB-# (they read as centered). */
.act-log-row.has-thumb .cb-stack .pill.reported { align-self: flex-end; }
.act-log-label .act-log-dot { display: inline-block; width: 8px; height: 8px;
  margin: 0 6px 1px 0; vertical-align: middle; }
/* Right-edge stack of the CB-#/SBB-# stamps on a log row. margin-left:auto pushes
   it to the far right edge on wide screens too (phone already sits at the edge). */
.ev-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; margin-left: auto; }

/* "Archived" marker on a folded-in deleted report (admin Log view). Title Case,
   muted; the whole row is gently de-emphasized so it reads as past/removed. */
.ev-arch { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 800;
  letter-spacing: .3px; color: #767D8A; border: 1px solid #C2C7CF; background: #F1F1F2;
  border-radius: 999px; padding: 0 7px; vertical-align: middle; }
.act-log-row.is-arch { opacity: .68; }

/* Log timeline — collapsible month sections */
.log-month { margin: 0; }
.log-month-hd { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit;
  color: var(--teal-ink); cursor: pointer; padding: 10px 12px; margin: 16px 0 10px;
  background: rgba(20, 113, 105, .06); border: 1px solid var(--line-teal); border-radius: 12px; }
.log-month-hd:hover { background: rgba(20, 113, 105, .1); }
.log-month:first-child .log-month-hd { margin-top: 4px; }
.log-month-name { flex: 1 1 auto; font-weight: 800; font-size: 13.5px; letter-spacing: .2px; }
.log-month-count { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--muted);
  background: rgba(255, 255, 255, .6); border-radius: 999px; padding: 1px 9px; }
.log-month-chev { flex-shrink: 0; width: 8px; height: 8px; margin-left: 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; opacity: .6; }
.log-month-hd[aria-expanded="true"] .log-month-chev { transform: rotate(45deg); }
.log-month-body[hidden] { display: none; }

/* Per-report change History (in the submission detail) */
.hist { list-style: none; margin: 6px 0 0; padding: 0; }
.hist-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hist-item:last-child { border-bottom: 0; padding-bottom: 0; }
.hist-text { min-width: 0; }
.hist-label { display: block; font-weight: 700; font-size: 13.5px; color: var(--teal-ink); }
.hist-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ---------- Status pills (county-stamp style) ---------- */
.pill {
  display: inline-block; font-size: 10px; font-weight: 800; padding: 4px 10px;
  border-radius: 6px; letter-spacing: 1.4px; text-transform: uppercase;
  border: 1.5px solid; background: transparent;
}
.pill.draft    { color: #5A6B67; border-color: #ABB2BF; background: #F2F3F5; }
.pill.ready    { color: var(--amber); border-color: var(--amber); background: #FDF6E7; }
.pill.reported { color: #3D6CC8; border-color: #3D6CC8; background: #EDF2FC; }
/* CB-# with the SBB/Vantaca violation number stacked beneath it, same pill style */
.cb-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pill.resolved { color: var(--green-deep); border-color: var(--green); background: #EFF8E8; }
.pill.closed   { color: #767D8A; border-color: #C2C7CF; background: #F1F1F2; }
/* kind pills follow the map colors: accolade green, notice yellow (concern is unmarked) */
.pill.accolade { color: var(--green-deep); border-color: var(--green); background: #EFF8E8; }
.pill.notice   { color: #8F6E08; border-color: #E5B61F; background: #FCF6DC; }
.pill.role     { color: var(--teal); border-color: var(--teal-bright); background: #EAF3F2; }
.pill.esc-req  { color: #9a3412; border-color: #e7a977; background: #fdf2e7; }

/* ---------- Escalation To-Do ---------- */
.esc-req-text { color: #9a3412; font-weight: 600; font-size: 12px; }

/* SBB escalation history — read-only animated vertical timeline (modal).
   Centered ladder of enforcement steps; done + current are full color, future steps
   are grayed and sit below. Three chevrons pulse downward (staggered) between steps
   to lead the eye. The current step carries a cure-period countdown pill. */
.sbb-tl { display: flex; flex-direction: column; align-items: center; margin: 16px 0 4px; }
.sbb-tl-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.sbb-tl-dot {
  width: 15px; height: 15px; border-radius: 50%; margin-bottom: 5px; box-sizing: border-box;
  background: #fff; border: 2.5px solid var(--line);
}
.sbb-tl-label { font-weight: 800; font-size: 16px; line-height: 1.15; color: var(--muted); }
.sbb-tl-stage { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: .7; }
.sbb-tl-date { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
/* completed steps = full color */
.sbb-tl-done .sbb-tl-dot { background: var(--teal); border-color: var(--teal); }
.sbb-tl-done .sbb-tl-label { color: var(--teal-ink); }
/* current step = emphasized, pulsing ring */
.sbb-tl-current .sbb-tl-dot {
  width: 17px; height: 17px; background: var(--teal); border-color: var(--teal);
  animation: sbbTlPulse 2.1s ease-out infinite;
}
.sbb-tl-current .sbb-tl-label { color: var(--teal-ink); }
.sbb-tl-current .sbb-tl-stage { color: var(--teal); opacity: 1; }
/* future steps = visible but grayed and below */
.sbb-tl-future { opacity: .42; }
/* cure-period countdown under the current step */
.sbb-tl-count {
  margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--teal);
  background: rgba(14, 106, 101, .1); padding: 4px 12px; border-radius: 999px;
}
.sbb-tl-count-due { color: var(--amber); background: rgba(199, 127, 6, .12); }
.sbb-tl-count-final { color: var(--muted); background: transparent; padding: 4px 0; }
/* the three downward chevrons between steps */
.sbb-tl-chev { display: flex; flex-direction: column; align-items: center; margin: 4px 0; }
.sbb-tl-chev-i { display: block; line-height: 0; margin-top: -7px; color: var(--teal); animation: sbbTlChev 1.5s ease-in-out infinite; }
.sbb-tl-chev-i:first-child { margin-top: 0; }
.sbb-tl-chev-i svg { width: 20px; height: 20px; display: block; stroke-width: 2.4; }
.sbb-tl-chev-1 { animation-delay: .18s; }
.sbb-tl-chev-2 { animation-delay: .36s; }
@keyframes sbbTlChev {
  0%, 100% { opacity: .15; transform: translateY(-2px); }
  50%      { opacity: .85; transform: translateY(2px); }
}
@keyframes sbbTlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 106, 101, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(14, 106, 101, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 106, 101, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sbb-tl-chev-i, .sbb-tl-current .sbb-tl-dot { animation: none; }
  .sbb-tl-chev-i { opacity: .5; }
}

/* The To-Do button reuses .notif / .notif-bell so it matches the bell exactly. */

.todo-intro { background: #fdf6ef; border-color: #f0d9c4; }
.todo-h { margin: 18px 2px 8px; font-size: 14px; font-weight: 800; color: var(--teal-ink); letter-spacing: .2px; }
.todo-h-count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: #E2445C; color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.todo-item { padding: 12px 14px; }
.todo-main { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.todo-thumb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
  background: #eee; border: 1px solid var(--line);
}
.todo-thumb-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #9aa3ab; font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; line-height: 1.25; padding: 4px;
}
.todo-body { min-width: 0; flex: 1; }
.todo-addr { font-weight: 700; font-size: 15px; color: var(--teal-ink); }
.todo-step { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--teal); margin: 2px 0; }
.todo-step.todo-req { color: #9a3412; display: block; } /* no icon → let long request lines wrap */
.todo-step .sbb-badge { width: 18px; height: auto; }
.todo-age { font-size: 12px; color: #6b7280; }
.todo-actions { margin-top: 10px; }
.todo-actions .btn, .todo-actions .btn-line { width: 100%; }
.todo-empty { color: #6b7280; font-size: 14px; }

/* Pinned approval items at the TOP of the To-Do (account requests + resident
   submissions awaiting approval). Orange accent; Dismiss demotes for this viewer. */
.todo-pin { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--orange); }
.todo-pin .todo-main { flex: 1; min-width: 0; }
.todo-pin-dismiss { flex: 0 0 auto; align-self: center; }
.todo-pin.is-dismissed { opacity: .56; }

/* The button that switches between the board To-Do and the manager's
   "Pending With SBB" queue. */
.todo-switch { display: block; text-align: center; margin-top: 22px; }

/* Aging-request watchdog: a request that's waited past the threshold for SBB. */
.todo-overdue { color: #b91c1c; font-weight: 800; font-size: 12px; margin: 2px 0; }
.dash-awaiting { color: #b45309; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.dash-awaiting .bi { width: 14px; height: 14px; flex-shrink: 0; }

/* Watch list: a collapsible section at the bottom with its own (teal) count. */
.todo-watch { margin-top: 18px; }
.todo-watch-sum {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 14px; font-weight: 800; color: var(--teal-ink); letter-spacing: .2px;
  padding: 8px 2px; display: flex; align-items: center; gap: 8px;
}
.todo-watch-sum::-webkit-details-marker { display: none; }
.todo-watch-sum::before { content: '\25B8'; color: #9aa3ab; font-size: 13px; transition: transform .15s ease; }
.todo-watch[open] .todo-watch-sum::before { transform: rotate(90deg); }
.todo-h-count-watch { background: var(--teal); box-shadow: none; }
.todo-watch-body { margin-top: 6px; }
.todo-watch-step { color: var(--teal); display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; margin: 2px 0; }
.todo-watch-step .sbb-badge { width: 18px; height: auto; }
.todo-watch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-watch-actions .btn-line { flex: 1 1 45%; width: auto; }

/* The violation (what the item actually is) on a To-Do row + the chevron that
   signals the whole card opens the action page. */
.todo-violation { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 1px 0 2px; }
.todo-link { align-items: center; transition: border-color .12s ease, box-shadow .12s ease; }
.todo-link:hover { border-color: var(--line-teal); box-shadow: 0 3px 12px rgba(14,106,101,.12); }
.todo-go { flex-shrink: 0; color: #9aa3ab; display: inline-flex; align-items: center; }
.todo-go .bi { width: 20px; height: 20px; }

/* ---------- To-Do action page (escalate / resolve) ---------- */
.act-seg { margin: 2px 0 16px; }
/* Escalate (left) reads as the warning action — orange; Resolved (right) green. */
#act-outcome button.active:first-child { background: linear-gradient(165deg, var(--orange-bright), var(--orange)); color: #fff; }
#act-outcome button.active:last-child  { background: linear-gradient(165deg, var(--green-bright), var(--green)); color: #fff; }
#act-outcome button[disabled] { opacity: .45; cursor: not-allowed; }

.act-violation {
  border: 1.5px solid var(--line-teal); border-left: 5px solid var(--orange);
  border-radius: 12px; background: linear-gradient(180deg, #FDFBF4 0%, #FAF1E6 100%);
  padding: 12px 14px; margin-bottom: 6px;
}
.act-vhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.act-vtitle { font-size: 17px; margin: 0; color: var(--teal-ink); flex: 1 1 auto; min-width: 0; }
.act-vhead .pill { flex-shrink: 0; }
.act-kv { grid-template-columns: 110px 1fr; margin: 10px 0 0; }
.act-stepdd { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-weight: 700; color: var(--teal); }
.act-stepdd .act-next { color: var(--orange-deep); }

.act-label { display: block; margin: 18px 0 2px; font-weight: 700; font-size: 13px; color: var(--teal-ink); }

/* The violation timeline — the resident's SBB history for this item, oldest first. */
.act-timeline { list-style: none; margin: 6px 0 2px; padding: 0; position: relative; }
.act-timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 10px; width: 2px; background: var(--line-teal); }
.act-tl { position: relative; display: flex; gap: 12px; padding: 0 0 12px 0; }
.act-tl:last-child { padding-bottom: 0; }
.act-tl-dot { position: relative; z-index: 1; flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: #fff; border: 2.5px solid var(--line-teal); }
.act-tl-dot.act-tl-sbb { border-color: var(--teal); }
.act-tl.is-current .act-tl-dot { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 3px rgba(239,111,24,.18); }
.act-tl-body { min-width: 0; }
.act-tl-label { font-weight: 700; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.act-tl-label .sbb-badge { height: 18px; }
.act-tl-cur { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--orange-deep); background: #fdeede; border-radius: 99px; padding: 1px 7px; }
.act-tl-date { font-size: 12px; color: var(--muted); margin-top: 1px; }

.act-photos { margin-top: 6px; }

/* Resolved variant of the primary action button (green instead of teal). */
.btn-resolve { background: linear-gradient(165deg, var(--green-bright) 0%, var(--green) 70%); box-shadow: 0 2px 8px rgba(46,125,34,.32), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-resolve:hover { box-shadow: 0 4px 14px rgba(46,125,34,.4), inset 0 1px 0 rgba(255,255,255,.18); }

/* ---------- Create a Route ---------- */
.todo-route-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none; }

/* route picker */
.rt-pick-bar { display: flex; gap: 8px; margin-top: 8px; }
.rt-pick-bar .btn-line { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; width: auto; min-width: 0; }
.rt-pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rt-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.rt-pick:hover { border-color: var(--line-teal); }
.rt-pick-cb { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--teal); margin: 0; }
.rt-pick-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-teal); }
.rt-pick-empty { background: #EDF0E8; }
.rt-pick-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rt-pick-addr { font-weight: 700; font-size: 14px; color: var(--teal-ink); }
.rt-pick-label { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-pick-tag, .rt-next-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 99px; flex-shrink: 0; }
.rt-pick-due { color: #9a3412; background: #fdeede; }
.rt-pick-watch { color: var(--teal); background: #e7f2f0; }
.rt-start-bar { position: sticky; bottom: 0; padding: 14px 0 6px; background: linear-gradient(transparent, var(--paper) 28%); }
.rt-start-bar .btn { width: 100%; }

/* tappable street picker map: faint backdrop + bold item streets + item dots */
.rt-streetmap { height: 240px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-teal); background: #16302D; margin-top: 10px; touch-action: manipulation; }
.rt-streetmap svg { width: 100%; height: 100%; display: block; }
.rt-sm-bg path { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rt-sm-street { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .12s; }
.rt-sm-street.sel-all { stroke: var(--orange); }
.rt-sm-street.sel-some { stroke: #f0b07a; }
.rt-sm-hit { fill: none; stroke: transparent; stroke-width: 28; stroke-linecap: round; pointer-events: stroke; cursor: pointer; vector-effect: non-scaling-stroke; }
/* font-size + stroke-width are set per-map as SVG attributes (computed from zoom) so labels stay legible at any extent */
.rt-sm-label { fill: #F4FAF8; font-weight: 800; font-family: var(--font-ui); letter-spacing: .2px; paint-order: stroke; stroke: #16302D; stroke-linejoin: round; pointer-events: none; }
.rt-sm-label textPath { text-anchor: middle; }
.rt-sm-dot { stroke: #16302D; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .45; pointer-events: none; }
.rt-sm-dot.sel { opacity: 1; stroke: #fff; }
.rt-sm-dot-due { fill: var(--orange); }
.rt-sm-dot-watch { fill: #5ec6b8; }
/* DEMO route picker (rt-sm-aerial): big red dots over the real aerial, no schematic. */
.rt-sm-dot-demo { fill: #e5372b; stroke: #fff; stroke-width: 2.5; opacity: .95; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.rt-sm-dot-demo.sel { opacity: 1; fill: #ff5238; stroke: #0B2422; stroke-width: 3.5; }

/* street-grouped picker list */
.rt-pick-group { display: flex; flex-direction: column; gap: 8px; }
.rt-pick-group + .rt-pick-group { margin-top: 4px; }
.rt-pick-street { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--teal); padding: 2px 2px 0; }
.rt-pick-street-n { font-size: 11px; font-weight: 800; color: var(--muted); background: #EDF0E8; border-radius: 99px; padding: 1px 7px; }

/* route navigation */
.rt-nav { display: flex; flex-direction: column; gap: 12px; }
.rt-top { display: flex; justify-content: space-between; align-items: center; }
.rt-progress { font-size: 12px; font-weight: 700; color: var(--muted); }
.rt-next { text-align: center; }
.rt-next-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.rt-next-addr { font-size: 23px; font-weight: 800; color: var(--teal-ink); line-height: 1.15; }
.rt-next-label { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.rt-next-done { font-size: 20px; font-weight: 800; color: var(--green-deep); text-align: center; }

/* Route walk (rt-nav-route): freeze the stop header (backlink + progress + address +
   violation) just below the app bar so the house/violation you're on stays on screen
   while the photos, map, and actions scroll beneath. Scoped so the Random Audit
   (shares .rt-nav / .rt-next* / .rt-actions / .rt-step-row) is untouched.
   top is the app-bar height — tune on device if it clips or leaves a gap. */
.rt-frozen {
  position: sticky; top: 58px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 8px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.rt-nav-route .rt-next-addr { font-size: 21px; }
/* Compacted action buttons on the walk — smaller than the app-wide 12px/15px. */
.rt-nav-route .rt-actions { gap: 7px; }
.rt-nav-route .rt-act-photo, .rt-nav-route .rt-oc, .rt-nav-route .rt-step { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.rt-nav-route .rt-step-row { margin-bottom: 6px; }
/* Skip is the quiet third control in the stepper, not a peer of Next. */
.rt-step-skip { color: var(--muted); border-color: var(--line); }
/* The `.view > *` entrance transform breaks position:sticky on the frozen header
   (a transformed ancestor stops the child sticking to the viewport); the route walk
   opts out so the header locks flush from the first frame. JS sets its exact `top`
   (= app-bar height) and cancels the .view top padding so there is no pre-lock drift. */
.view > .rt-nav-route { animation: none; }

/* Compass arrow + distance overlaid on the top-right of the mini-map (was a large
   stage below the map; shrunk + repositioned to slim the nav screens). */
.rt-mapwrap { position: relative; isolation: isolate; } /* contain the arrow overlay's z-index so it can't paint over the sticky route header */
.rt-arrow-overlay { position: absolute; top: 8px; right: 8px; z-index: 5; perspective: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px;
  padding: 7px 9px 5px; border-radius: 13px; background: rgba(255,255,255,.88);
  border: 1px solid var(--line-teal); box-shadow: var(--shadow-lift); }
.rt-arrow { width: 56px; height: 56px; transform: rotateX(58deg); transform-style: preserve-3d; will-change: transform; }
.rt-arrow-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 5px 6px rgba(0,0,0,.3)); }
.rt-arrow-svg path { fill: var(--orange); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.rt-arrow-here .rt-arrow-svg path { fill: var(--green); }
.rt-arrow-off { opacity: .18; }
.rt-dist { font-size: 15px; font-weight: 800; color: var(--teal-ink); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.1; }
.rt-dist-to { display: none; } /* the address is already in the stop header */

/* Side-by-side Street View + Violation photo (escalation/closure flows), tap-to-enlarge */
.sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.sbs-cell { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line-teal);
  border-radius: 12px; overflow: hidden; background: #EDF0E8; cursor: pointer; appearance: none; text-align: left; }
.sbs-none { cursor: default; }
.sbs-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 128px; background: #EDF0E8; color: var(--muted); }
.sbs-img svg { width: 34px; height: 34px; }
.sbs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbs-cap { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); padding: 5px 8px; background: #fff; }

.rt-compass-note { font-size: 12px; color: var(--muted); text-align: center; background: #fdf6ef; border: 1px solid #f0d9c4; border-radius: 10px; padding: 8px 11px; }

.rt-mini { height: 210px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-teal); background: #16302D; }
.rt-mini svg { width: 100%; height: 100%; display: block; }
.rt-streets path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rt-line { fill: none; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 7 5; opacity: .9; vector-effect: non-scaling-stroke; }
.rt-m circle { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rt-m text { fill: #fff; font: 800 9px var(--font-ui); text-anchor: middle; }
.rt-m-pending circle { fill: #6b7280; }
.rt-m-cur circle { fill: var(--orange); }
.rt-m-done circle { fill: var(--green); }
.rt-user { fill: #2F9AE0; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rt-user-halo { fill: rgba(47,154,224,.28); }
/* faint disc tying fanned-out markers back to one address (several items, same house) */
.rt-m-cluster { fill: rgba(239,111,24,.16); stroke: rgba(239,111,24,.55); stroke-width: 1; vector-effect: non-scaling-stroke; }

.rt-actions { display: flex; flex-direction: column; gap: 8px; }
.rt-act-row { display: flex; gap: 8px; }
.rt-act-row > * { flex: 1; }
.rt-act-photo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rt-outcome { display: flex; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); } /* Escalate + Resolve side by side */
.rt-oc { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 1px; line-height: 1.12; text-align: center; }
.rt-oc-q { font-size: 11px; font-weight: 700; opacity: .82; } /* qualifier line: "Still A Problem" / "Fixed" */
.rt-oc-a { font-size: 14.5px; font-weight: 800; }           /* action line: "Escalate" / "Resolve" */
.rt-oc[disabled] { opacity: .45; cursor: not-allowed; }
.rt-oc-esc { color: #9a3412; border-color: #e7a977; }
.rt-oc-res { color: var(--green-deep); border-color: var(--green); }
.rt-oc-check { color: var(--teal); border-color: var(--teal); }
.rt-finish { width: 100%; text-align: center; text-decoration: none; }
/* End Audit / End Route — quiet secondary control, set apart from the live actions */
.rt-end { width: 100%; margin-top: 6px; color: var(--muted); border-color: var(--line); font-size: 13.5px; }
.rt-end:active { background: #F3F1EC; }
/* prev/next stepping + per-stop handled state */
.rt-step-row { display: flex; gap: 8px; margin-bottom: 8px; }
.rt-step { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rt-step .bi { width: 16px; height: 16px; }
.rt-handled { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #EFF8E8; border: 1px solid var(--green); color: var(--green-deep); font-weight: 700; font-size: 14px; }
.rt-handled .bi { width: 18px; height: 18px; flex-shrink: 0; }
.rt-handled span { flex: 1; }
.rt-redo { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; }
.rt-done-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--green-deep); background: #EFF8E8; border-radius: 99px; padding: 2px 8px; }
.rt-done-badge .bi { width: 12px; height: 12px; }
/* violation photo fills the card strip (route); audit keeps the street-view loader */
.rt-house-card .sv-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the original violation image, its own block under the house card */
.rt-violation-label { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.rt-violation-img { display: block; width: 100%; padding: 0; border: 1px solid var(--line-teal); border-radius: 12px; overflow: hidden; background: #EDF0E8; cursor: pointer; appearance: none; }
.rt-violation-img img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.rt-violation-none { font-size: 13px; color: var(--muted); padding: 10px 0; }
/* the reported violation repeated just above Prev/Next so it's in reach at the bottom */
.rt-violation-lower { margin-bottom: 4px; }
/* "Item X of Y at this address" when one house has several open items on the route */
.rt-next-multi { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--orange-deep); background: #fdeede; border-radius: 99px; padding: 2px 10px; margin-top: 5px; }
/* admin-only route-order diagnostic (collapsed) */
.rt-debug { margin-top: 8px; border: 1px dashed var(--line); border-radius: 10px; padding: 6px 10px; }
.rt-debug summary { font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.rt-debug-pre { font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; background: #F3F1EC; border-radius: 8px; padding: 8px; margin: 8px 0; color: #333; }
.rt-debug-copy { width: auto; padding: 5px 12px; font-size: 12px; }

/* walk/drive toggle (both sides teal) + destination house card on the nav screen */
.rt-mode-seg { margin: 8px 0 0; }
#rt-mode button.active { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; }
.rt-house { margin: 0; }
.rt-house-card { margin-top: 0; }
.rt-house-note { font-size: 12.5px; font-weight: 700; color: var(--orange-deep); margin: 0 0 6px; }

/* To-Do field tools (Create A Route / Random Audit) */
.todo-tools { display: flex; gap: 8px; }
.todo-tool { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; min-width: 0; }
.todo-tool .bi { flex-shrink: 0; }

/* ---------- Random Audit ---------- */
/* label on the left, compact control on the right — keeps each goal on one line */
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: 16px; }
.au-cov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--ink); margin: 0; }
.au-cov input { width: 54px; margin: 0; text-align: center; border-radius: 11px; }
/* a setting with a big title and the control stacked below it */
.au-set { margin-top: 18px; }
.au-set-title { font-size: 16px; font-weight: 800; color: var(--teal-ink); margin-bottom: 7px; }
.au-cad { width: auto; flex: 0 0 auto; margin: 0; }
.au-cad button { padding: 7px 12px; font-size: 13px; }
.au-trip { margin: 4px 0 0; }
/* ID selectors so the teal active wins over the base .seg red(first)/green(last) */
#au-unit button.active, #au-trip button.active, #au-mode button.active { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; }
/* the computed "homes this trip" result */
.au-result { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; padding: 12px 14px; border: 1.5px solid var(--line-teal); border-left: 5px solid var(--orange); border-radius: 12px; background: linear-gradient(180deg, #FDFBF4 0%, #FAF1E6 100%); }
.au-result-n { font-size: 34px; font-weight: 800; color: var(--orange-deep); line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.au-result-l { font-size: 13px; color: var(--ink); }
.au-stat { display: flex; gap: 10px; margin: 12px 0 4px; }
.au-stat > div { flex: 1; background: #F2F4F0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.au-stat-n { display: block; font-size: 22px; font-weight: 800; color: var(--teal-ink); line-height: 1.1; }
.au-stat-l { font-size: 11px; color: var(--muted); }
.au-up { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(165deg, var(--green-bright) 0%, var(--green) 70%); box-shadow: 0 2px 8px rgba(46,125,34,.32), inset 0 1px 0 rgba(255,255,255,.18); }
.au-up:hover { box-shadow: 0 4px 14px rgba(46,125,34,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.au-down { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #9a3412; border-color: #e7a977; }
/* "How many homes today" — the main count control */
.au-today { display: flex; align-items: center; gap: 9px; margin: 6px 0 2px; }
.au-today input { width: 88px; margin: 0; text-align: center; font-size: 24px; font-weight: 800; color: var(--teal-ink); border-radius: 12px; padding: 8px 6px; border: 1.5px solid var(--line-teal); }
.au-today span { font-size: 15px; font-weight: 600; color: var(--muted); }
/* short bulleted intro */
.au-intro { margin: 0 0 12px; padding-left: 18px; color: var(--muted); }
.au-intro li { font-size: 13.5px; line-height: 1.5; margin: 2px 0; }
/* coverage stats now live on the main screen (out of Advanced) */
.au-stat-main { margin: 12px 0 16px; }
/* collapsible Advanced Settings (collapsed by default) — a clearly tappable, bordered
   accordion button + body, with a chevron that flips open */
.au-adv { margin: 16px 0 2px; }
.au-adv-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px; color: var(--teal-ink); letter-spacing: .2px; padding: 11px 14px; border: 1.5px solid var(--line-teal); border-radius: 12px; background: rgba(20, 113, 105, .05); }
.au-adv-sum::-webkit-details-marker { display: none; }
.au-adv-sum::after { content: '\25BE'; color: var(--teal); font-size: 13px; transition: transform .18s ease; }
.au-adv[open] .au-adv-sum { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.au-adv[open] .au-adv-sum::after { transform: rotate(180deg); }
.au-adv-body { border: 1.5px solid var(--line-teal); border-top: 0; border-radius: 0 0 12px 12px; padding: 4px 14px 14px; }

/* "X days ago" caption under each photo on the submission detail. */
.photo-age { font-size: 12px; color: #6b7280; margin: 4px 0 2px; text-align: center; }
.photo-cell .photo-age { margin-top: 4px; }

/* Cure-period setting row. */
.cure-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cure-row input { width: 90px; margin: 0; }
.cure-unit { color: #6b7280; font-weight: 600; }
.cure-row .btn { margin-left: auto; }
/* AI Questions ledger (admin-only Settings page) */
.aiq-list { margin-top: 6px; }
.aiq-item { padding: 10px 0; border-top: 1px solid var(--line, #e5e7eb); }
.aiq-item:first-child { border-top: 0; padding-top: 2px; }
.aiq-q { font-size: 14.5px; color: var(--ink, #1f2937); line-height: 1.4; }
.aiq-meta { margin-top: 3px; font-size: 12px; color: var(--muted, #6b7280); }
.pill.resolved { color: #5A6B67; border-color: #9FB3AE; background: #EEF2F0; }
/* SBB logo badge = submitted by SBB into their system, which starts the
   courtesy/violation-notice process (board/manager/admin only) */
.sbb-badge { height: 22px; width: auto; display: inline-block; vertical-align: middle; }
/* Small inline SBB-portal logo shown immediately right of the submitter name on a
   Log/report tile (icon-only; ~15px so it sits on the name line). */
.sbb-name-logo { height: 15px; width: auto; margin-left: 5px; vertical-align: middle; }
/* logo + SBB's step/date, kept together so they wrap as one unit */
.sbb-tag  { display: inline-flex; align-items: center; gap: 6px; }
.sbb-meta { font-size: 10px; font-weight: 700; color: #5A6B67; white-space: nowrap; letter-spacing: .2px; }

/* Submission-detail header: title on its own line (wraps naturally at any
   length, incl. long SBB-adopted labels), status badges in a wrapping row
   beneath it. Replaces the old space-between row that squeezed long titles
   into a one-word-per-line sliver next to a non-shrinking badge group. */
.sub-head { margin-bottom: 4px; }
.sub-head h2 { margin: 0 0 9px; }
.sub-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* trailing badges on a Log entry: SBB logo next to the CB-#### stamp, with
   SBB's step/date on its own line right below */
.entry-pills    { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.entry-pill-row { display: flex; flex-direction: row; align-items: center; gap: 6px; }

/* Stacked entry (house-profile History): the category title takes the full width
   and the CB-#### stamp + SBB badge/step wrap in a row beneath it (mirrors the
   submission-detail header's .sub-head/.sub-badges), so a long label like
   "Other (Specify In Description)" never collides with the trailing badges. */
.entry-stack { align-items: flex-start; }
.entry-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }

/* ---------- Cloud: Submitted log tab + user management ---------- */
.seg-log { margin: 0 0 12px; }
/* the capture seg colors by position (concern red / accolade teal) — here both are teal */
.seg-log button.active:first-child,
.seg-log button.active:last-child { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; }

.user-row { padding: 12px 0; border-top: 1px solid var(--line); }
.user-row:first-of-type { border-top: 0; }
.user-row .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Applicant name + Account Verified/Flagged pill: center the pill against the
   name (it's inline-block, so it'd otherwise sit on the baseline) and give it air. */
.appr-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appr-progress { font-size: 12px; font-weight: 700; color: var(--orange-deep); margin-top: 3px; }

/* All Users table (admin) — horizontal scroll on narrow screens */
.table-scroll { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
  padding: 0 12px 6px 0; border-bottom: 1.5px solid var(--line-teal);
}
.users-table td {
  padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-teal);
  vertical-align: middle; white-space: nowrap;
}
.users-table tr:last-child td { border-bottom: 0; }
.users-table td:nth-child(2) { font-family: var(--font-mono); font-size: 11.5px; }
.users-table td:last-child { text-align: right; padding-right: 0; }
.users-table select { width: auto; padding: 6px 30px 6px 10px; font-size: 13px; }
.users-table .user-acct {
  width: 116px; padding: 5px 8px; font-size: 12.5px;
  font-family: var(--font-mono); border-radius: 8px;
}
/* Account # cell — display value + pencil that swaps in the input on click. */
.acct-cell { display: inline-flex; align-items: center; gap: 6px; }
.acct-cell .acct-display { font-family: var(--font-mono); font-size: 12.5px; }
.acct-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.acct-edit-btn:hover { background: #EEF6F4; color: var(--teal); }
.acct-edit-btn:active { transform: scale(.92); }
.acct-edit-btn .bi { width: 15px; height: 15px; }
.acct-cell.editing .acct-display, .acct-cell.editing .acct-edit-btn { display: none; }
.users-table .badge { font-size: 11px; }
.users-table .btn-line, .users-table .btn-danger { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }
.users-table .btn-danger { margin-left: 6px; }

/* Dashboard community photo — fills the slot the accolades carousel vacated. */
.dash-hero {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-teal);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

/* ---------- Recent Accolades carousel (Home, formerly Dashboard) ---------- */
.acc-card-wrap { overflow: hidden; }
.home-acc { margin-top: 10px; }
.acc-eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0 0 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--green-deep);
}
.acc-eyebrow .bi-xs { width: 15px; height: 15px; }
.acc-carousel { overflow: hidden; position: relative; }
.acc-track { display: flex; width: max-content; }
.acc-anim .acc-track { animation: acc-scroll var(--acc-dur, 30s) linear infinite; }
.acc-carousel:hover .acc-track,
.acc-carousel:focus-within .acc-track,
.acc-paused .acc-track { animation-play-state: paused; }
@keyframes acc-scroll { to { transform: translateX(-50%); } }
.acc-card {
  flex: 0 0 auto; width: 184px; margin-right: 12px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; border: 1px solid var(--line-teal);
  border-radius: 13px; overflow: hidden; background: #fff;
}
.acc-card-img { width: 100%; height: 112px; object-fit: cover; display: block; background: #EDF0E8; }
.acc-card-noimg { display: flex; align-items: center; justify-content: center; color: var(--green-deep); }
.acc-card-noimg .bi { width: 30px; height: 30px; }
.acc-card-body { padding: 9px 11px; }
.acc-card-label { font-weight: 700; font-size: 13px; line-height: 1.25; }
.acc-card-addr { font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .acc-carousel { overflow-x: auto; }
  .acc-anim .acc-track { animation: none; }
}
.entry-main .cat.cat-acc { color: var(--green-deep); }
.entry-main .cat.cat-not { color: #8F6E08; }

/* ---------- Detail ---------- */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 7px 14px; font-size: 14px; margin: 14px 0; }
.kv dt { color: var(--muted); font-weight: 700; font-size: 12.5px; letter-spacing: .2px; padding-top: 1px; }
.kv dd { margin: 0; }
.kv a { color: var(--teal-bright); }

/* ---------- Community manager card ---------- */
.cm-head { display: flex; align-items: center; gap: 14px; margin: 12px 0 2px; }
.cm-logo { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.cm-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.cm-title { color: var(--muted); font-size: 13px; }
.cm-kv { margin-bottom: 2px; }
.cm-kv dd { word-break: break-word; }

.timeline { list-style: none; padding: 0; margin: 10px 0 0; }
.timeline li { font-size: 13px; color: var(--muted); padding: 5px 0 5px 16px; border-left: 2.5px solid var(--line-teal); margin-left: 4px; }
.timeline li strong { color: var(--teal); }

/* ---------- Empty state ---------- */
.empty { text-align: center; color: var(--muted); padding: 52px 20px; }
.empty .big { font-size: 42px; opacity: .35; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--teal-deep); color: #fff; padding: 11px 18px; border-radius: 11px; font-size: 14px; z-index: 20;
  box-shadow: var(--shadow-lift); max-width: 90%;
  border-left: 4px solid var(--orange-bright);
  animation: rise .25s ease backwards;
}
.toast[hidden] { display: none; }

/* Post-submit "Submitted" pill: rises from below the viewport to sit above the tab
   bar, holds ~3s, then drops back down (the .show class toggles the slide). */
.submit-pill {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translate(-50%, 240px); opacity: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 28px rgba(8,20,18,.32); z-index: 45; pointer-events: none;
  transition: transform .42s cubic-bezier(.18,.78,.28,1), opacity .42s ease;
}
.submit-pill .bi { width: 18px; height: 18px; }
.submit-pill.show { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .submit-pill { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* ---------- Return-To-Audit / Return-To-Route button ----------
   A small circular shortcut pinned just under the header on the right, NOT a full-
   width bottom bar. It wiggles briefly every ~5s so it stays noticeable without
   taking over the screen. Shown only when an audit/route is saved and you've stepped
   away from the live walk. */
.resume-bar {
  position: fixed; top: calc(60px + env(safe-area-inset-top)); right: 12px; left: auto; bottom: auto;
  z-index: 6; display: flex; pointer-events: none;
}
.resume-bar[hidden] { display: none; }
body.has-resume { padding-bottom: 0; } /* circle floats top-right → no bottom space to reserve */
.resume-chip {
  pointer-events: auto; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer; text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--teal-bright) 0%, var(--teal) 50%, var(--teal-deep) 100%);
  box-shadow: var(--shadow-lift); border: 2px solid var(--orange-bright);
  transform-origin: 50% 50%;
  animation: resumeWiggle 5s ease-in-out infinite;
}
.resume-chip:active { animation: none; transform: scale(.93); }
.resume-ico { display: flex; flex: none; }
.resume-ico svg { width: 20px; height: 20px; }
.resume-word { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; line-height: 1; }
.resume-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--orange-bright); border-radius: 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* Rests still for most of the 5s cycle, then a quick wiggle in the last ~0.7s. */
@keyframes resumeWiggle {
  0%, 86%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(-10deg); }
  90% { transform: rotate(8deg); }
  92% { transform: rotate(-7deg); }
  94% { transform: rotate(5deg); }
  96% { transform: rotate(-3deg); }
  98% { transform: rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .resume-chip { animation: none; } }

/* ---------- Welcome modal (first visit) ---------- */
.veil {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(19, 48, 44, .52);
  /* No backdrop-filter here: a blur() compositing over the live GPU-tiled satellite map
     (a modal opened from the map sheet) is an iOS Safari flicker trigger, the same class
     build 279 removed from the map-sheet close button. The darker scrim alone separates
     the modal from the content behind it. */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  animation: veil-in .2s ease backwards;
}
@keyframes veil-in { from { opacity: 0; } }
.veil[hidden] { display: none; }
.modal {
  width: 100%; max-width: 470px; max-height: calc(100dvh - 40px);
  overflow: auto; margin: 0; padding: 22px;
  animation: sheet-up .3s cubic-bezier(.2,.7,.25,1) backwards;
}
@media (min-width: 640px) { .veil { align-items: center; } }
.modal-x { position: absolute; top: 10px; right: 8px; }
.welcome-eyebrow {
  margin: 0 0 2px; font-size: 10px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--orange-deep);
}
.modal h2 { font-size: 24px; }
/* Branded confirm dialog (replaces the native confirm() popup). Compact, centered. */
.confirm-modal { max-width: 400px; text-align: center; padding: 24px 22px; }
.confirm-modal .confirm-title { font-size: 19px; margin: 0 0 8px; color: var(--ink); }
.confirm-modal .confirm-body { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.confirm-modal .confirm-actions { margin-top: 20px; }
/* logo lockup in place of a text heading */
.welcome-logo { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.welcome-logo img { width: 44px; height: 44px; border-radius: 11px; filter: drop-shadow(0 1px 2px rgba(10,60,56,.25)); }
.welcome-logo .wordmark-ink {
  font-family: var(--font-logo); font-weight: 700; font-size: 31px;
  letter-spacing: .2px; color: var(--teal); line-height: 1;
}
.welcome-logo .wordmark-ink em { font-style: normal; color: var(--orange); }
.welcome-list { list-style: none; padding: 0; margin: 12px 0; }
.welcome-list li { padding: 5px 0 5px 27px; position: relative; }
.welcome-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315958A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.8 10A10 10 0 1 1 17 3.34'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Neighborhood map (Esri satellite imagery) ---------- */
.map-card {
  position: relative;
  background: #122220;
  border: 1px solid var(--line-teal);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  height: calc(100dvh - 240px); min-height: 340px;
  -webkit-user-select: none; user-select: none; /* dragging the map must not select labels */
}
#map-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map-svg:active { cursor: grabbing; }
.road-label {
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  fill: #fff; paint-order: stroke; stroke: rgba(13, 21, 36, .72); stroke-width: 2.6px;
  text-anchor: middle; dominant-baseline: central;
  letter-spacing: 1.4px; text-transform: uppercase; pointer-events: none;
}
.lot rect { cursor: pointer; stroke: rgba(255,255,255,.92); stroke-width: 1; transition: filter .12s ease; }
.lot:hover rect { filter: brightness(.93) drop-shadow(0 0 2px rgba(14,106,101,.55)); }
/* lots wear the live signals only (see lotGroup in app.js): drafted yellow,
   reported concern red, reported accolade green; resolved/closed read empty.
   A lot carrying 2+ signals striped into vertical bands under a frame rect. */
.lot-empty rect    { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.6); }
.lot-draft rect, .band-draft       { fill: #F0C02C; }
.lot-concern rect, .band-concern   { fill: #D9453A; }
.lot-accolade rect, .band-accolade { fill: #58B53C; }
.lot-multi > rect { fill: transparent; } /* bands beneath supply the color; rect is frame + tap target */
.lot .lot-band { stroke: none; }
/* mgmt-only ownership borders (admin/board/manager) — same convention as the
   dashboard split: teal = owner-occupied, orange = landlord-owned. Direct-child
   rect only, so striped bands keep stroke:none; house numbers stay white. */
.lot.own-owner > rect    { stroke: var(--teal-bright); stroke-width: 1.4; }
.lot.own-landlord > rect { stroke: var(--orange); stroke-width: 1.4; }
.lot-num {
  font-family: var(--font-mono); font-size: 5.2px; font-weight: 700; letter-spacing: .2px;
  fill: #fff; paint-order: stroke; stroke: rgba(13, 21, 36, .6); stroke-width: 1px;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.lot-badge { fill: #14322F; stroke: rgba(255,255,255,.9); stroke-width: .7; pointer-events: none; }
.lot-count { font-size: 4.2px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* compact pill hugging the top-left corner — the map underneath stays visible */
.map-legend {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  border: 1px solid var(--line-teal);
  border-radius: 10px; padding: 6px 11px; font-size: 11px;
  color: var(--muted); pointer-events: none; font-weight: 600;
}
.legend-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid #B9C2AE; }
.legend-chip i.lot-draft    { background: #F0C02C; border-color: #B8860B; }
.legend-chip i.lot-concern  { background: #D9453A; border-color: var(--danger); }
.legend-chip i.lot-accolade { background: #58B53C; border-color: #2E7D22; }
/* border-convention swatches (mgmt only) — hollow chip, the border IS the signal */
.legend-chip i.bd-owner    { background: rgba(255,255,255,.55); border: 2px solid var(--teal-bright); }
.legend-chip i.bd-landlord { background: rgba(255,255,255,.55); border: 2px solid var(--orange); }
.map-attrib {
  position: absolute; right: 9px; bottom: 8px; pointer-events: none;
  font-size: 10px; letter-spacing: .2px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
/* embedded pin-drop map in the capture form (shorter than the full Map tab) */
.map-card.pin-map { height: 300px; min-height: 0; margin-top: 6px; }
#pin-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
/* audit "choose the area" circle (drawn in meter-space, dragged to move) */
.au-map { margin-top: 4px; }
/* on wider screens the satellite picker was stretching the full column — keep it a
   focused, less letterboxed size, centered under the controls */
@media (min-width: 640px) { .au-map { max-width: 480px; margin-inline: auto; } }
.audit-circle { fill: rgba(239, 111, 24, .14); stroke: #EF6F18; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
/* circle picker: the whole map drags/pans — houses aren't clickable here, so don't
   show the lot pointer (hand) that the main map uses. A locked (cover-all) circle
   just pans. */
.pin-map.circle-mode #pin-svg { cursor: grab; }
.pin-map.circle-mode #pin-svg:active { cursor: grabbing; }
.pin-map.circle-mode .lot rect { cursor: inherit; }
.audit-circle.locked { cursor: inherit; }
.pin-marker { position: absolute; transform: translate(-50%, -100%); pointer-events: none; z-index: 6; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.pin-marker svg { width: 30px; height: 34px; display: block; }
/* "you are here" — a small blue dot with a pulsing ring, constant pixel size */
.loc-marker { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }
.loc-marker .loc-dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: #1A8CFF; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.loc-marker .loc-ring {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: rgba(26,140,255,.35);
  animation: loc-pulse 2s ease-out infinite;
}
@keyframes loc-pulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .loc-marker .loc-ring { animation: none; opacity: 0; } }
/* common-area submission pins on the main map (mgmt) */
.place-pin circle { stroke: #fff; stroke-width: 1; cursor: pointer; }
.place-pin.k-concern circle { fill: #D9453A; }
.place-pin.k-accolade circle { fill: #58B53C; }
.place-pin.k-notice circle { fill: #F0C02C; }
/* lot popup — the full house profile in a scroll container */
.map-sheet {
  position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom));
  max-width: calc(var(--maxw) - 32px); margin: 0 auto; z-index: 15;
  max-height: min(72dvh, calc(100dvh - 170px));
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow-lift);
  border-left: 5px solid var(--orange);
  animation: sheet-up .28s cubic-bezier(.2,.7,.25,1) backwards;
  /* Own compositing context so scrolling the sheet over the live-tiling map behind it
     doesn't force the map to re-composite each frame (an iOS Safari flicker source). Not
     will-change/translateZ, which pin extra layers and add memory pressure. */
  isolation: isolate;
}
@keyframes sheet-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.map-sheet[hidden] { display: none; }
.map-sheet h2 { font-size: 19px; }
/* close button stays visible while the profile scrolls */
.sheet-x {
  position: sticky; top: 2px; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 -32px auto;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--surface);
  /* Solid (not translucent + blur): a sticky backdrop-filter scrolling over the live
     satellite-tiling map behind the sheet triggers an iOS Safari compositor flicker.
     The button sits over the opaque profile cards, so a solid surface reads cleanly. */
  font-size: 21px; line-height: 1; color: var(--muted); cursor: pointer;
  box-shadow: 0 1px 4px rgba(10,60,56,.18);
}
.sheet-x:hover { color: var(--ink); }
/* ‹ › neighbor arrows — side by side directly under the photo circle (which
   sits at top:8 right:8, 124px wide in the sheet); a hidden placeholder keeps
   the pair centered when one end of the street drops off */
.sheet-nav {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  border: 1.5px solid var(--line-teal); background: var(--surface);
  color: var(--teal); cursor: pointer;
  box-shadow: 0 1px 4px rgba(10,60,56,.12);
}
.sheet-nav:hover { border-color: var(--teal); color: var(--ink); }
.sheet-nav .bi { width: 20px; height: 20px; }
.sheet-nav-empty { visibility: hidden; }
/* profile sections render as bordered sub-cards inside the popup */
.sheet-profile .card { box-shadow: none; border: 1.5px solid var(--line-teal); margin: 10px 0 0; }
.sheet-profile .card:first-child { margin-top: 0; }
.btn-ghost-dark { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 8px; }

/* ---------- House profile ---------- */
.house-hero { position: relative; }
/* Compact header: the address + "Property Details" link sit in a text column beside a fixed
   photo, with the neighbor ‹ › arrows stacked under the photo (map-sheet only). No reserved
   min-height — the property/value content that used to fill this card now lives in the popup,
   so the card sizes to its content instead of leaving a void. */
.house-hero-top { display: flex; align-items: center; gap: 16px; }
.hero-text { flex: 1 1 auto; min-width: 0; }
.house-hero h2 { font-size: 22px; margin: 0 0 4px; line-height: 1.14; text-wrap: balance; overflow-wrap: break-word; }
.hero-media { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.house-photo {
  width: 104px; height: 104px; border-radius: 50%;
  border: 4px solid var(--teal);
  background: linear-gradient(180deg, #FDFBF4 0%, #FAF1E6 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--line-teal); overflow: hidden;
  box-shadow: 0 2px 6px rgba(10,60,56,.14), 0 8px 20px rgba(10,60,56,.15);
}
.house-photo.abs { border-color: var(--orange); }
.house-photo svg { width: 44px; height: 44px; }
.house-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* neighbor ‹ › arrows: centered under the photo, in normal flow (map-sheet only) */
.house-nav { display: flex; justify-content: center; gap: 10px; }
/* rectangular Street View strip — capture parcel card + map sheet */
.sv-strip {
  width: 100%; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--line-teal);
  background: linear-gradient(180deg, #FDFBF4 0%, #FAF1E6 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--line-teal); margin: 8px 0;
}
.sv-strip svg { width: 36px; height: 36px; }
.sv-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parcel-card .sv-strip { margin: 0 0 10px; }
@media (min-width: 640px) {
  .house-hero-top { gap: 22px; }
  .house-hero h2 { font-size: 26px; }
  .house-photo { width: 128px; height: 128px; border-width: 5px; }
  .house-photo svg { width: 52px; height: 52px; }
}
/* assessed-value sparkline: rides below the photo on phones, pulls up into the
   hero's open left side (cleared by .house-hero-top's min-height) on wide screens.
   (Legacy hero placement — the sparkline now lives in the Property Details popup as
   .pd-spark; these rules are kept harmless in case any other view reuses the class.) */
.house-spark { max-width: 460px; margin-top: 12px; }
.house-spark .dash-h { margin: 0 0 3px; }
@media (min-width: 640px) { .house-spark { margin-top: -150px; } }

/* Property Details affordance (in the hero, under the address) + popup content (build 280) */
.house-details-link {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 5px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--teal); cursor: pointer;
}
.house-details-link:hover { text-decoration: underline; }
.house-details-link svg { width: 14px; height: 14px; }
.house-photo[role="button"] { cursor: pointer; }
.pd-spark { max-width: 100%; margin: 2px 0 14px; }
.pd-spark .dash-h { margin: 0 0 3px; }
.pd-owner { margin-top: 4px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 13px; }
.fact {
  border: 1.5px solid var(--line-teal); border-radius: 11px; padding: 9px 11px 8px;
  background: linear-gradient(180deg, #FDFBF4 0%, #FAF1E6 100%);
}
.fact-v { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--teal); }
.fact-l { font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.deed-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 2px; }
.deed-table th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
  padding: 0 10px 5px 0; border-bottom: 1.5px solid var(--line-teal);
}
.deed-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-teal); vertical-align: top; }
.deed-table tr:last-child td { border-bottom: 0; }
.deed-table td:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.deed-table td:last-child { color: var(--muted); }
/* audit history result cell: 👍 all-clear (teal) / 👎 reported|not-reported (orange) */
.auh-res { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; }
.auh-res .bi-xs { flex: none; }
.auh-clear { color: var(--teal); }
.auh-flag { color: var(--orange); }
.owner-name {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--teal); line-height: 1.2; margin-top: 4px;
}
.owner-name + .pc-row { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Chips (GPS suggestions) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.chips:empty { display: none; }
.chip {
  border: 1.5px solid var(--teal-bright); color: var(--teal-bright); background: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .12s ease, transform .08s ease;
}
.chip:hover { background: #E8F4F2; }
.chip:active { transform: scale(.96); }

/* multi-select category chips on the capture/edit form */
.cat-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px; }
.cat-chip {
  border: 1.5px solid var(--line-teal); color: var(--ink); background: #fff;
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.cat-chip:hover { background: #F0F6F4; }
.cat-chip:active { transform: scale(.97); }
.cat-chip.selected { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); border-color: var(--teal); color: #fff; }

/* ---------- Category rows (Settings) ---------- */
.cat-item { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cat-item input { flex: 1; min-width: 0; }
.cat-item .ref { flex: 0 0 130px; font-family: var(--font-mono); font-size: 13px; }
.cat-item button { flex: 0 0 auto; }
.cat-move { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.cat-up, .cat-down { width: 28px; height: 19px; padding: 0; border: 1px solid var(--line-teal);
  background: var(--surface); color: var(--teal); border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.cat-up:hover, .cat-down:hover { background: #EAF3F2; }
.cat-up:active, .cat-down:active { transform: scale(.92); }
.cat-up .bi, .cat-down .bi { width: 13px; height: 13px; }

/* ---------- Back links above sub-pages ---------- */
.backlink {
  display: inline-block; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--teal); text-decoration: none; letter-spacing: .2px;
}
.backlink:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ============================================================
   Settings → Access & Roles — the permission map (management view)
   ============================================================ */
.access-card { animation: accUp .34s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes accUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .access-card { animation: none; } }

/* role legend — one color-keyed card per role */
.role-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.role-card {
  border: 1px solid var(--line-teal); border-left-width: 4px; border-radius: 12px;
  padding: 10px 12px; background: var(--surface);
}
.role-card.role-guest    { border-left-color: #ABB2BF; }
.role-card.role-resident { border-left-color: var(--teal-bright); }
.role-card.role-board    { border-left-color: var(--teal); }
.role-card.role-admin    { border-left-color: var(--orange); }
.role-card .role-chip { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.role-card p { margin: 5px 0 0; font-size: 12px; color: var(--muted); line-height: 1.35; }

/* state legend above the matrices */
.perm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.perm-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* the permission matrix */
.perm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-table th, .perm-table td { padding: 9px 4px; text-align: center; border-bottom: 1px solid var(--line-teal); }
.perm-table thead th {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); vertical-align: bottom; border-bottom: 1.5px solid var(--line-teal);
  border-top: 3px solid transparent;
}
.perm-table thead th.col-guest { border-top-color: #ABB2BF; }
.perm-table thead th.col-res   { border-top-color: var(--teal-bright); }
.perm-table thead th.col-bm    { border-top-color: var(--teal); }
.perm-table thead th.col-admin { border-top-color: var(--orange); }
.perm-table th.perm-cap, .perm-table td.perm-cap { text-align: left; }
.perm-table td.perm-cap { width: 44%; font-weight: 600; color: var(--ink); line-height: 1.25; padding-left: 0; }
.perm-table tbody tr:last-child td { border-bottom: 0; }
.perm-table tbody tr { transition: background .12s ease; }
.perm-table tbody tr:hover { background: rgba(14, 106, 101, .05); }
/* faint column tint so each column reads as a unit (densest = admin) */
.perm-table td.col-bm    { background: rgba(14, 106, 101, .035); }
.perm-table td.col-admin { background: rgba(14, 106, 101, .07); }

/* matrix cell glyphs: filled = full, ring = own-only, dash = none */
.pdot { display: inline-block; vertical-align: middle; width: 13px; height: 13px; border-radius: 50%; }
.pdot.pdot-yes { background: var(--teal-bright); box-shadow: 0 0 0 3px rgba(21, 149, 138, .16); }
.pdot.pdot-own { background: #fff; border: 2.5px solid var(--amber); width: 12px; height: 12px; }
.pdot.pdot-no  { width: 9px; height: 2px; border-radius: 1px; background: var(--line); }

/* anonymous explainer */
.anon-card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--teal); margin: 16px 0 6px; }
.anon-list { list-style: none; padding: 0; margin: 0; }
.anon-list li { position: relative; padding: 4px 0 4px 24px; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.anon-list li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 5px; height: 9px; border: solid var(--green-deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.anon-strong {
  margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); font-weight: 600;
  border-left: 3px solid var(--orange); padding: 2px 0 2px 12px;
}

/* good-to-know notes */
.acc-notes { margin: 6px 0 0; padding-left: 18px; }
.acc-notes li { font-size: 13px; color: var(--muted); line-height: 1.4; margin-bottom: 7px; }
.acc-notes li:last-child { margin-bottom: 0; }

/* ============================================================
   Wide screens (≥960px) — the phone layout is the design; this
   block only scales the chrome up and lets views use the room.
   ============================================================ */
@media (min-width: 960px) {
  /* --- app bar & tab bar, almost doubled --- */
  .appbar { padding: 24px 32px; }
  .viewas-bar { padding: 9px 32px; font-size: 14px; }
  .appbar-title { gap: 15px; }
  .appbar-title img { width: 60px; height: 60px; border-radius: 15px; }
  .wordmark { font-size: 34px; }
  .wordmark small { font-size: 13px; letter-spacing: 3.4px; margin-top: 3px; }
  .appbar-page { font-size: 64px; }
  .appbar-actions { gap: 10px; }
  .appbar .btn-ghost, .appbar .btn-cta { font-size: 15px; padding: 10px 18px; border-radius: 12px; }
  .appbar-user { font-size: 15px; padding: 4px; gap: 0; }
  .appbar-user b { width: 34px; height: 34px; font-size: 16px; }

  .tab { font-size: 13px; padding: 13px 6px 14px; gap: 4px; }
  .tab-ico { height: 34px; }
  .tab-ico svg { width: 34px; height: 34px; }
  .tab.active:not(.tab-fab)::before { left: 30%; right: 30%; height: 4px; }
  .tab-fab .tab-ico { width: 74px; height: 74px; margin-top: -50px; margin-bottom: 8px; }
  .tab-fab .tab-ico svg { width: 36px; height: 36px; }
  .tab-fab::after { width: 96px; height: 96px; top: -50px; }

  body { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  body.has-resume { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(135px + env(safe-area-inset-bottom)); }
  .submit-pill { bottom: calc(135px + env(safe-area-inset-bottom)); }
  .resume-bar { top: calc(120px + env(safe-area-inset-top)); right: 20px; bottom: auto; }
  .resume-chip { width: 64px; height: 64px; }
  .resume-ico svg { width: 24px; height: 24px; }
  .resume-word { font-size: 10px; }
  .map-sheet { bottom: calc(125px + env(safe-area-inset-bottom)); max-height: min(70dvh, calc(100dvh - 260px)); }
  .map-card { height: calc(100dvh - 350px); min-height: 420px; }

  /* --- let views breathe: wide canvas instead of one narrow column --- */
  .view { max-width: 1160px; padding: 26px 32px; }

  /* forms and detail pages keep a comfortable reading column */
  .view[data-route="capture"], .view[data-route="entry"], .view[data-route="reset"],
  .view[data-route="invite"], .view[data-route="audit"], .view[data-route="settings"][data-sub] { max-width: 780px; }
  .view[data-route="house"], .view[data-route="submission"] { max-width: 840px; }
  .view[data-route="settings"][data-sub="users"] { max-width: 1060px; } /* room for the users table */

  /* dashboard + settings: cards flow two-up, masonry style */
  .view[data-route="dashboard"], .view[data-route="settings"]:not([data-sub]) {
    column-count: 2; column-gap: 18px;
  }
  .view[data-route="dashboard"] > *, .view[data-route="settings"]:not([data-sub]) > * {
    break-inside: avoid; margin-bottom: 18px;
  }
  /* the settings hub is one self-managing section (identity + tile grid), so it
     opts out of the masonry columns and keeps a comfortable centered width */
  .view[data-route="settings"]:not([data-sub]) { column-count: 1; max-width: 720px; }

  /* log: a single chronological column (date-grouped), not a tile grid */
  .view[data-route="log"] { max-width: 780px; }
}

/* ---------- Print report ---------- */
@media print {
  .appbar, .tabbar, .disclaimer, .btn-bar, #toast, .veil { display: none !important; }
  body { background: #fff; padding: 0; }
  .view { max-width: none; }
  .card { box-shadow: none; border: none; }
  .card h2 { color: #000; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .no-print { display: none !important; }
}

/* ---- Audit-session breakdown (tap a row in the #/audit history list) ---- */
.audit-sessions .au-sess-row { cursor: pointer; }
.audit-sessions .au-sess-row:hover td { background: var(--paper); }
.audit-sessions .au-sess-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.au-sess-go { width: 1.4em; text-align: right; color: var(--muted); white-space: nowrap; }
.au-sess-scroll { max-height: 54vh; overflow: auto; margin-top: 6px; }
.au-sess-table th { position: sticky; top: 0; background: var(--surface); }

/* ---- Bottom-bar customizer (Settings → Bottom Bar) ---- */
.tabcfg { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 8px; align-items: center; margin: 6px 0 12px; }
.tabcfg .tabcfg-sel { margin: 0; }
.tabcfg-fab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--orange-deep); }
.tabcfg-fab svg { width: 22px; height: 22px; }
.tabcfg-fab small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
@media (max-width: 480px) {
  .tabcfg { grid-template-columns: 1fr 1fr; }
  .tabcfg-fab { display: none; }
}

/* ---------- Your HOA (#/hoa): governing documents reader + manager ---------- */
.hoa { max-width: var(--maxw); margin: 0 auto; }
.hoa-hero { padding: 4px 2px 14px; }
.hoa-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.hoa-eyebrow svg { width: 16px; height: 16px; }
.hoa-title { font-family: var(--font-logo); font-size: 30px; line-height: 1.05; margin: 0 0 6px; color: var(--ink); }
.hoa-sub { color: var(--muted); font-size: 14px; margin: 0; max-width: 52ch; }

/* Ask Curburb assistant */
.hoa-ask { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 6px 0 18px; }
.hoa-ask-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }
.hoa-ask-spark { display: flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: var(--teal); color: #fff; }
.hoa-ask-spark svg { width: 19px; height: 19px; }
.hoa-ask-title { font-family: var(--font-logo); font-weight: 800; font-size: 16px; color: var(--ink); }
.hoa-ask-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.hoa-ask-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.hoa-ask-log:empty { display: none; }
.hoa-q { align-self: flex-end; max-width: 85%; background: var(--teal); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.hoa-a { align-self: flex-start; max-width: 92%; background: var(--paper); color: var(--ink); padding: 11px 14px; border-radius: 14px 14px 14px 4px; font-size: 13.7px; line-height: 1.56; }
.hoa-a p { margin: 0 0 8px; }
.hoa-a p:last-child { margin-bottom: 0; }
.hoa-a strong { font-weight: 700; }
.hoa-a-h { font-weight: 700; margin: 8px 0 4px; }
.hoa-a-h:first-child { margin-top: 0; }
.hoa-a ul { margin: 4px 0 8px; padding-left: 18px; }
.hoa-a li { margin: 0 0 4px; }
.hoa-a-disc { font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 8px !important; }
.hoa-a-error { background: #FBE9E7; color: var(--danger); }
.hoa-a-loading { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hoa-typing { display: inline-flex; gap: 3px; }
.hoa-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: hoa-blink 1.2s infinite both; }
.hoa-typing i:nth-child(2) { animation-delay: .2s; }
.hoa-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes hoa-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.hoa-ask-form { display: flex; gap: 8px; align-items: flex-end; }
#hoa-ask-input { flex: 1; resize: none; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 16px; font-family: var(--font-ui); line-height: 1.4; background: var(--surface); color: var(--ink); max-height: 140px; }
#hoa-ask-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14, 106, 101, .12); }
#hoa-ask-send { flex: 0 0 44px; height: 44px; border: none; border-radius: 12px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#hoa-ask-send svg { width: 20px; height: 20px; }
#hoa-ask-send:disabled { opacity: .5; }

/* Dashboard "Ask Curburb" banner — a full-width prompt spanning the screen at the
   top of the dashboard (demo only). Taps through to the Your HOA page's Ask box. */
.dash-ask { width: 100%; background: linear-gradient(135deg, var(--teal) 0%, #0B4B47 100%); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 16px; margin: 0 0 14px; }
.dash-ask-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.dash-ask-spark { display: flex; flex: 0 0 34px; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; }
.dash-ask-spark svg { width: 18px; height: 18px; }
.dash-ask-title { font-family: var(--font-logo); font-weight: 800; font-size: 16px; color: #fff; }
.dash-ask-sub { font-size: 12.7px; color: rgba(255,255,255,.86); line-height: 1.42; margin-top: 1px; }
.dash-ask-form { display: flex; gap: 8px; align-items: center; }
.dash-ask-form input { flex: 1; min-width: 0; border: none; border-radius: 11px; padding: 12px 14px; font-size: 16px; font-family: var(--font-ui); background: #fff; color: var(--ink); }
.dash-ask-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.dash-ask-form button { flex: 0 0 44px; height: 44px; border: none; border-radius: 11px; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s; }
.dash-ask-form button:hover { background: #ff7d28; }
.dash-ask-form button svg { width: 20px; height: 20px; }

/* Ask Curburb search bar — plain pill at the very top of the dashboard (demo + prod) */
.dash-askbar {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--line-teal); border-radius: 999px;
  padding: 5px 5px 5px 15px; box-shadow: var(--shadow);
}
.dash-askbar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,106,101,.15), var(--shadow); }
.dash-askbar-ico { display: flex; flex: 0 0 auto; color: var(--muted); }
.dash-askbar-ico svg { width: 18px; height: 18px; }
.dash-askbar input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 16px; font-family: var(--font-ui); color: var(--ink); padding: 9px 0;
}
.dash-askbar input::placeholder { color: var(--muted); }
.dash-askbar button {
  flex: 0 0 40px; height: 40px; border: none; border-radius: 999px; background: var(--orange);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s;
}
.dash-askbar button:hover { background: #ff7d28; }
.dash-askbar button svg { width: 20px; height: 20px; }

/* One-shot Ask popup */
.ask-modal { max-width: 560px; }
.ask-modal-q { font-weight: 700; font-size: 16px; color: var(--teal-ink); margin: 2px 34px 12px 2px; line-height: 1.35; }
.ask-modal-body { max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ask-modal .hoa-a { max-width: 100%; background: transparent; padding: 0; border-radius: 0; font-size: 14.5px; line-height: 1.6; }
.ask-modal .hoa-a-loading { padding: 6px 0; }
.ask-modal .hoa-a-error { background: #FBE9E7; color: var(--danger); padding: 11px 14px; border-radius: 10px; }
.ask-modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.ask-modal-foot .ask-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; padding: 9px 16px; font-size: 14px; }
.ask-modal-foot .ask-act svg { width: 17px; height: 17px; }

.hoa-h2 { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px 2px; }

.hoa-doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow); }
.hoa-doc > summary, .hoa-node > summary { list-style: none; cursor: pointer; }
.hoa-doc > summary::-webkit-details-marker, .hoa-node > summary::-webkit-details-marker { display: none; }
.hoa-doc > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; }
.hoa-doc-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.hoa-doc-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hoa-doc[open] > summary { border-bottom: 1px solid var(--line); }
.hoa-doc-body { padding: 8px 12px 14px; }

.hoa-node { margin: 1px 0; }
.hoa-node > summary { padding: 9px 8px; font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 9px; }
.hoa-node > summary:hover { background: var(--paper); }
.hoa-node-body { padding: 2px 2px 4px 12px; margin: 0 0 4px 9px; border-left: 2px solid var(--line-teal); }
.hoa-l3 > summary { font-weight: 500; color: var(--muted); }
.hoa-num { color: var(--teal); font-weight: 800; margin-right: 5px; }
.hoa-text { font-size: 13.5px; line-height: 1.58; color: var(--ink); padding: 2px 4px 4px; }
.hoa-text p { margin: 0 0 9px; }
.hoa-text p:last-child { margin-bottom: 0; }
.hoa-text strong { font-weight: 700; }

.hoa-official { font-size: 12px; color: var(--muted); font-style: italic; margin: 14px 2px 4px; }

.hoa-cm { margin: 2px 0 16px; }

/* ---------- Messaging (#/messages) ---------- */
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
.msg-head .btn { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 8px 14px; font-size: 14px; }
.msg-head .btn svg { width: 16px; height: 16px; }

.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-teal); border-radius: 14px;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
}
.msg-row:active { transform: scale(.995); }
.msg-row.msg-unread { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.msg-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-row-title { font-weight: 700; font-size: 15px; color: var(--teal-ink); }
.msg-clip { display: inline-flex; align-items: center; color: var(--muted); margin-left: -2px; } /* attachment indicator on reply tiles */
.msg-row.msg-unread .msg-row-title { font-weight: 800; }
.msg-row-sub { font-size: 12.5px; color: var(--muted); }
.msg-row-preview { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.msg-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.msg-row-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }

.msg-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.msg-tag-resident_mgmt { background: #E6F2F0; color: var(--teal-deep); }
.msg-tag-resident_board { background: #E6F2F0; color: var(--teal-deep); }
.msg-tag-internal { background: #EDEAF6; color: #5946A8; }
.msg-tag-announcement { background: #FDEBDD; color: var(--orange-deep); }
.msg-tag-report { background: #E9EEF0; color: #3D5560; }

.msg-empty { text-align: center; padding: 30px 18px; }
.msg-empty svg { width: 34px; height: 34px; color: var(--teal); opacity: .7; }
.msg-empty p { margin: 8px 0 0; }

.msg-thread-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
/* No inner scroller: the thread flows in the page's single scroll context so the
   sticky appbar (top) and fixed tab bar (bottom) never trap messages mid-column. */
.msg-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }
.msg-bubble-row { display: flex; justify-content: flex-start; }
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble { max-width: 80%; background: var(--surface); border: 1px solid var(--line-teal); border-radius: 14px; padding: 8px 12px; }
.msg-bubble-row.mine .msg-bubble { background: var(--teal); border-color: var(--teal); color: #fff; }
.msg-bubble-meta { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.msg-bubble-row.mine .msg-bubble-meta { color: rgba(255,255,255,.85); }
.msg-bubble-body { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
/* Homeowner-reply photos mirrored from SBB (0036): thumbnail grid inside a bubble, tap to enlarge. */
.msg-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-photo { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 10px; }
.msg-photo img { width: 88px; height: 88px; object-fit: cover; display: block; border-radius: 10px; border: 1px solid var(--line-teal); }
.msg-photo:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.msg-bubble-row.mine .msg-photo img { border-color: rgba(255,255,255,.4); }

.msg-composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.msg-composer .btn { width: auto; padding: 10px 18px; flex-shrink: 0; }
.msg-input { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); resize: vertical; }
.msg-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.msg-readonly { text-align: center; margin-top: 12px; }

.msg-field { margin-top: 4px; }
.msg-text, .msg-select { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.msg-text:focus, .msg-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.msg-type-pick { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.msg-type-opt { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.msg-type-opt input { accent-color: var(--teal); width: 17px; height: 17px; }

/* ---------- Rapid Capture ---------- */
/* Capture-mode toggle: both sides teal when active (override the seg's red first-child). */
.cap-mode-seg { margin: 0 0 6px; }
.cap-mode-seg button.active:first-child,
.cap-mode-seg button.active:last-child { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; }
.cap-rapid-note { margin: 2px 2px 8px; }
.cap-rapid-bar { margin-top: 12px; }
.cap-rapid-review { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--teal-deep); text-decoration: none; }
.cap-rapid-review:hover { text-decoration: underline; }

/* Home tile count badge (Rapid Shots waiting). */
.home-tile-badge { position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(150deg, var(--orange-bright), var(--orange-deep)); box-shadow: 0 2px 5px rgba(0,0,0,.18); }

/* Rapid Shots list (#/rapid). */
.rapid-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 2px; }
.rapid-list { display: flex; flex-direction: column; gap: 8px; }
.rapid-row { display: flex; align-items: stretch; gap: 8px; }
.rapid-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--line-teal); border-radius: 14px; text-decoration: none; color: inherit; }
.rapid-row-main:hover { border-color: var(--teal); }
.rapid-row-main:active { transform: scale(.99); }
.rapid-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-teal); }
.rapid-thumb-empty { background: #EDF0E8; display: inline-block; }
.rapid-row-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rapid-row-addr { font-weight: 700; font-size: 14.5px; color: var(--teal-ink); }
.rapid-row-when { font-size: 12.5px; color: var(--muted); }
.rapid-row-go { flex-shrink: 0; color: var(--muted); display: inline-flex; }
.rapid-row-go svg { width: 18px; height: 18px; }
.rapid-row-rm { flex-shrink: 0; width: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.rapid-row-rm:hover { border-color: var(--danger); color: var(--danger); }
.rapid-empty { text-align: center; }
.rapid-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 16px; color: #fff; background: linear-gradient(150deg, var(--orange-bright), var(--orange-deep)); }
.rapid-empty-ico svg { width: 26px; height: 26px; }

/* ---------- Mailings: certified letters, templates, PostGrid key (no-feed, build 241) ---------- */
/* Shared text inputs / textareas in the letters UI */
.lt-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; color: var(--ink); background: #fff; margin: 2px 0 4px; }
.lt-input:focus { outline: none; border-color: var(--teal-bright); box-shadow: 0 0 0 3px var(--line-teal); }
.lt-body { min-height: 220px; resize: vertical; line-height: 1.5; font-size: 14px; }

/* Merge-tag insert chips */
.lt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.lt-chips-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.lt-ins { border: 1px solid var(--line-teal); background: #F3F8F7; color: var(--teal-deep);
  font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.lt-ins:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Live letter preview iframe (editor + send modal) */
.lt-preview { width: 100%; height: 360px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin: 4px 0 6px; }

/* Step coverage chips on the templates card */
.lt-coverage { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.lt-chip { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #fff; }
.lt-chip-on { border-color: var(--teal); color: var(--teal-deep); background: #E9F4F2; }

/* Template list rows */
.lt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lt-row .btn-bar { margin: 0; flex: 0 0 auto; }
.lt-row-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.lt-row-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lt-on { color: var(--teal); font-weight: 600; }

/* PostGrid key card status pill */
.pgk-status { margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgk-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .2px; }

/* Send-letter modal mode note */
.sl-testnote, .sl-livenote { font-size: 12.5px; font-weight: 600; padding: 8px 11px; border-radius: 10px; margin: 4px 0 10px; }
.sl-testnote { background: #E9F4F2; color: var(--teal-deep); border: 1px solid var(--line-teal); }
.sl-livenote { background: #FEF3E7; color: #9A5A16; border: 1px solid #F3D9BC; }

/* "Certified Letter Mailed" record lines (enforcement card + timelines) */
.enf-letters { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 4px; }
.enf-letter { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--teal-deep); font-weight: 600; }
.enf-letter-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; }
.act-tl-letter, .sbb-tl-letter { display: block; font-size: 12px; font-weight: 600; color: var(--teal); margin-top: 3px; }

/* ---------- Portal Features (#/portal): per-community module control plane ---------- */
.feature-group-h { margin: 18px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.feature-row { display: flex; align-items: center; gap: 14px; }
.feature-row-main { flex: 1 1 auto; min-width: 0; }
.feature-row-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.feature-row-desc { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.feature-row-dep { font-size: 12px; font-weight: 600; color: var(--orange); margin-top: 5px; }
.feature-preset { border-left: 3px solid var(--teal); }
.feature-preset-grid { display: grid; gap: 8px; }
.feature-preset-btn { text-align: left; border: 1px solid var(--line); background: none; border-radius: 12px; padding: 11px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; width: 100%; transition: border-color .15s ease; }
.feature-preset-btn:hover { border-color: var(--teal); }
.feature-preset-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.feature-preset-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.feature-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.feature-row-side { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.feature-status { font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.feature-status.is-on { color: var(--teal-deep); background: rgba(14,106,101,.12); }
.feature-status.is-off { color: var(--muted); background: rgba(90,107,103,.12); }
.feature-status.is-included { color: var(--teal); background: rgba(14,106,101,.08); }
.feature-toggle { position: relative; width: 46px; height: 27px; border-radius: 999px; border: none; background: var(--line); cursor: pointer; padding: 0; flex: 0 0 auto; transition: background .18s ease; }
.feature-toggle.is-on { background: var(--teal); }
.feature-toggle:disabled { opacity: .55; cursor: default; }
.feature-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.feature-toggle.is-on .feature-knob { transform: translateX(19px); }

/* Notifications (#/settings/notifications) — per-channel toggles on a feature-row */
.notif-channels { gap: 16px; }
.notif-channel { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.notif-channel-label { font-size: 11px; font-weight: 600; letter-spacing: .02em; opacity: .6; }

/* ---------- Finances (#/finance) — hub + per-property ledger ---------- */
.fin-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fin-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fin-stat { border: 1px solid var(--line-teal); border-radius: 12px; padding: 12px 13px; background: #fff; }
.fin-stat-val { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .2px; color: var(--ink); line-height: 1.1; }
.fin-stat.orange .fin-stat-val { color: var(--orange-deep); }
.fin-stat.red .fin-stat-val { color: var(--danger); }
.fin-stat.green .fin-stat-val { color: var(--green-deep); }
.fin-stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; }

.fin-section-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 2px 8px; }
.fin-h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }

.btn-cta-sm, .btn-line-sm { border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 700; border: 1.5px solid var(--teal); cursor: pointer; white-space: nowrap; }
.btn-cta-sm { background: linear-gradient(165deg, var(--teal-bright), var(--teal)); color: #fff; border-color: var(--teal); }
.btn-cta-sm:active { transform: scale(.97); }
.btn-line-sm { background: #fff; color: var(--teal); }
.btn-line-sm:active { transform: scale(.97); background: #EEF6F4; }

.fin-assess-card { display: flex; flex-direction: column; gap: 12px; }
.fin-assess-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fin-assess-row + .fin-assess-row { border-top: 1px solid var(--line); padding-top: 12px; }
.fin-assess-row.is-inactive { opacity: .62; }
.fin-assess-main { min-width: 0; flex: 1 1 auto; }
.fin-assess-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.fin-assess-meta { font-size: 13px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }
.fin-assess-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.fin-assess-actions { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; justify-content: flex-end; }

.fin-filter { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.fin-fbtn { border: 1.5px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.fin-fbtn.is-on { border-color: var(--teal); color: var(--teal); background: #EAF3F2; }

.fin-prop-card { padding: 4px 0; }
.fin-prop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.fin-prop-row:last-child { border-bottom: none; }
.fin-prop-row:active { background: #F3F7F5; }
.fin-prop-addr { font-size: 14.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-prop-side { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.fin-prop-bal { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.fin-prop-bal.is-owed { color: var(--orange-deep); }
.fin-prop-bal.is-credit { color: var(--green-deep); }

.fin-badge { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fin-badge.is-delq { color: var(--danger); background: #FBEAE8; }
.fin-badge.is-owes { color: var(--orange-deep); background: #FDEFE2; }
.fin-badge.is-credit { color: var(--green-deep); background: #EFF8E8; }

/* Ledger detail */
.fin-ledger-head { text-align: center; }
.fin-ledger-addr { font-size: 15px; font-weight: 700; color: var(--ink); }
.fin-ledger-balance { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: .3px; color: var(--ink); margin-top: 6px; line-height: 1.05; }
.fin-ledger-balance.is-owed { color: var(--orange-deep); }
.fin-ledger-balance.is-credit { color: var(--green-deep); }
.fin-ledger-ballabel { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: 2px; }
.fin-ledger-actions { justify-content: center; }
.fin-ledger-list { padding: 2px 0; }
.fin-empty { margin: 0; padding: 18px 16px; text-align: center; }
.fin-ledger-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fin-ledger-row:last-child { border-bottom: none; }
.fin-ledger-row.is-voided { opacity: .55; }
.fin-ledger-row.is-voided .fin-amt { text-decoration: line-through; }
.fin-ledger-main { min-width: 0; flex: 1 1 auto; }
.fin-ledger-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-ledger-date { font-size: 13px; color: var(--muted); }
.fin-ledger-desc { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.fin-ledger-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fin-ledger-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.fin-amt { font-family: var(--font-mono); font-size: 14.5px; font-weight: 700; }
.fin-amt.is-owed { color: var(--orange-deep); }
.fin-amt.is-credit { color: var(--green-deep); }
.fin-run { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.fin-void { border: none; background: none; color: var(--danger); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 0; margin-top: 2px; }

.fin-type-badge { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.fin-type-badge.t-charge, .fin-type-badge.t-late_fee { color: var(--orange-deep); background: #FDEFE2; }
.fin-type-badge.t-payment { color: var(--green-deep); background: #EFF8E8; }
.fin-type-badge.t-credit { color: var(--teal); background: #EAF3F2; }
.fin-type-badge.t-adjustment { color: #5A6B67; background: #EEF0EC; }

/* Issue modal — scope + checklist */
.fin-scope { display: flex; gap: 16px; margin-top: 6px; }
.fin-radio, .fin-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.fin-radio input, .fin-check input { width: 18px; height: 18px; accent-color: var(--teal); margin: 0; }
.fin-checklist { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; }
.fin-check { padding: 5px 0; font-weight: 500; font-size: 13.5px; }

@media (min-width: 560px) { .fin-summary { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) { .fin-summary.cols-2 { grid-template-columns: repeat(2, 1fr); } .fin-summary.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.fin-year { display: flex; align-items: center; gap: 8px; }
.fin-year-lbl { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--teal); min-width: 46px; text-align: center; }
.fin-bva-head, .fin-bva-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 8px; padding: 9px 14px; align-items: center; }
.fin-bva-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.fin-bva-row { border-bottom: 1px solid var(--line); font-size: 14px; }
.fin-bva-row:last-child { border-bottom: none; }
.fin-bva-row.is-total { font-weight: 700; }
.fin-bva-head .num, .fin-bva-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-bva-row .num.pos { color: var(--green-deep); }
.fin-bva-row .num.neg { color: var(--danger); }

/* Online Payments (Stripe Connect, Chunk 3) */
.fin-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fin-pay-on { color: var(--green-deep); font-weight: 700; }
.fin-badge.is-test { color: var(--teal); background: #EAF3F2; }
#fin-pl-url { font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- Committees (#/committees) ---------- */
.cm-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cm-card-title { min-width: 0; }
.cm-name { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-desc { margin: 4px 0 0; color: #5A6B67; font-size: 13px; }
.cm-card-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cm-btn { width: auto; min-width: 0; padding: 6px 10px; font-size: 12px; }
.cm-roster { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.cm-member { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid #EEF1F0; }
.cm-member:first-child { border-top: 0; }
.cm-member-name { font-weight: 600; font-size: 14px; }
.cm-chair { flex: 0 0 auto; }
.cm-member-actions { margin-left: auto; display: flex; gap: 6px; }
.cm-add { margin-top: 12px; }
.cm-inactive { opacity: .68; }
.cm-empty { margin: 4px 0 0; }

/* ---------- Architectural Requests (#/arc) ---------- */
.arc-group-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5A6B67; margin: 18px 0 8px; }
.arc-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.arc-thumb { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: #EEF1F0; }
.arc-noimg { display: flex; align-items: center; justify-content: center; color: #9AA6A2; }
.arc-noimg svg { width: 24px; height: 24px; }
.arc-card-body { min-width: 0; flex: 1 1 auto; }
.arc-card-top { display: flex; align-items: center; gap: 8px; }
.arc-type { font-size: 12px; color: #5A6B67; }
.arc-card-title { font-weight: 600; font-size: 15px; margin: 3px 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-card-sub { font-size: 12px; color: #7A857F; }
.arc-detail-top { display: flex; align-items: center; gap: 8px; }
.arc-desc-full { margin: 12px 0 0; white-space: pre-wrap; line-height: 1.5; }
.arc-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.arc-gallery-item { display: block; }
.arc-gallery-item img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; }
.arc-note { border-left: 3px solid var(--amber); }
.arc-note-h { font-weight: 700; font-size: 13px; }
.arc-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.arc-prev { position: relative; }
.arc-prev img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.arc-prev-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }

/* ---------- Violation Fines (#/fines) ---------- */
.fine-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.fine-list .fine-row:first-child { border-top: 0; padding-top: 0; }
.fine-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF1F0; }
.fine-row-main { min-width: 0; flex: 1 1 auto; }
.fine-row-addr { font-weight: 600; font-size: 14px; }
.fine-row-desc { font-size: 13px; color: #5A6B67; margin-top: 2px; }
.fine-row-date { font-size: 12px; color: #7A857F; margin-top: 2px; }
.fine-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.fine-voided { opacity: .55; }
.fine-voided .fine-amt { text-decoration: line-through; }

/* ---------- Amenities (#/amenities) ---------- */
.am-card { padding-top: 0; padding-bottom: 0; }
.am-card-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 14px 0; }
.am-thumb { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: #EEF1F0; }
.am-noimg { display: flex; align-items: center; justify-content: center; color: #9AA6A2; }
.am-noimg svg { width: 24px; height: 24px; }
.am-card-body { min-width: 0; flex: 1 1 auto; }
.am-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-type { font-size: 12px; color: #5A6B67; }
.am-card-title { font-weight: 600; font-size: 15px; margin: 3px 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-card-sub { font-size: 12px; color: #7A857F; }
.am-card-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 0 14px; }
.am-hero { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }
.am-detail-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-rules { margin-top: 12px; }
.am-rules-h { font-weight: 700; font-size: 13px; }
.am-mgmt-bar { flex-wrap: wrap; }
.am-group-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #5A6B67; margin: 18px 0 8px; }
.am-res { display: flex; align-items: flex-start; gap: 12px; }
.am-res-main { min-width: 0; flex: 1 1 auto; }
.am-res-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-res-when { font-weight: 600; font-size: 14px; margin-top: 4px; }
.am-res-sub { font-size: 12px; color: #7A857F; margin-top: 2px; }
.am-res-notes { font-size: 13px; color: #5A6B67; margin-top: 6px; white-space: pre-wrap; }
.am-res-note { font-size: 13px; color: #5A6B67; margin-top: 6px; }
.am-res-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.am-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.am-check input { width: auto; margin: 0; }
.am-rv-times { display: flex; gap: 10px; margin-top: 10px; }
.am-rv-times > div { flex: 1 1 0; min-width: 0; }
.am-prev-wrap { margin-top: 8px; }
.am-prev img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; }
/* Availability calendar */
.am-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.am-cal-title { font-weight: 700; font-size: 15px; }
.am-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: #7A857F; margin-bottom: 4px; }
.am-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.am-cal-cell { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; color: var(--ink); background: #F5F7F6; }
.am-cal-empty { background: transparent; }
.am-cal-past { color: #B7C0BC; background: transparent; }
.am-cal-open { cursor: pointer; background: #E5F1EF; color: var(--teal-deep); font-weight: 600; }
.am-cal-open:hover { background: #D5E8E5; }
.am-cal-booked .am-cal-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.am-cal-hint { margin: 10px 0 0; }

/* ---------- Meetings (#/meetings) ---------- */
.mt-card-link { display: block; text-decoration: none; color: inherit; }
.mt-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-type { font-size: 12px; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: .03em; }
.mt-when { font-size: 12px; color: #7A857F; margin-left: auto; }
.mt-card-title { font-weight: 600; font-size: 16px; margin: 4px 0 1px; }
.mt-card-sub { font-size: 12px; color: #7A857F; }
.mt-cancelled .mt-card-title { text-decoration: line-through; opacity: .7; }
.mt-counts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #7A857F; margin-top: 8px; }
.mt-count-yes { color: var(--green-deep); font-weight: 600; }
.mt-rsvp { display: flex; gap: 6px; margin-top: 10px; }
.mt-rsvp-btn { flex: 1 1 0; padding: 8px 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mt-rsvp-btn:hover { border-color: var(--teal); }
.mt-rsvp-on.mt-rsvp-yes { background: var(--green); border-color: var(--green); color: #fff; }
.mt-rsvp-on.mt-rsvp-maybe { background: var(--amber); border-color: var(--amber); color: #fff; }
.mt-rsvp-on.mt-rsvp-no { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.mt-card-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.mt-join { text-decoration: none; }
.mt-mgmt-bar { flex-wrap: wrap; }
.mt-form-row { display: flex; gap: 10px; margin-top: 10px; }
.mt-form-row > div { flex: 1 1 0; min-width: 0; }
.mt-roster-grp { margin-top: 8px; }
.mt-roster-h { font-weight: 700; font-size: 13px; }
.mt-roster-names { font-size: 13px; color: #5A6B67; margin-top: 2px; }