/* HomeBase — Material 3 design system (light + dark, responsive, cross-platform).
   One stylesheet for every page. No framework, no CDN (Law 8 / lean). */
:root {
  --m3-primary: #1565C0; --m3-on-primary: #fff;
  --m3-primary-container: #D6E3FF; --m3-on-primary-container: #001B3D;
  --m3-secondary: #535F70; --m3-secondary-container: #D6E3F8;
  --m3-surface: #FDFBFF; --m3-on-surface: #1A1C1E;
  --m3-surface-variant: #DFE2EB; --m3-on-surface-variant: #43474E;
  --m3-surface-container: #F0F1F6; --m3-surface-container-high: #E8EAF0;
  --m3-outline: #73777F; --m3-outline-variant: #C3C7CF;
  --m3-error: #BA1A1A; --m3-error-container: #FFDAD6; --m3-on-error-container: #410002;
  --m3-success: #146C2E; --m3-success-container: #A6F4B0;
  --radius: 16px; --radius-sm: 12px; --radius-xs: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --shadow-2: 0 2px 6px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08);
  --gap: clamp(12px, 3vw, 24px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --m3-primary: #A7C8FF; --m3-on-primary: #00315C;
    --m3-primary-container: #00468B; --m3-on-primary-container: #D6E3FF;
    --m3-secondary: #BBC7DB; --m3-secondary-container: #3B4858;
    --m3-surface: #1A1C1E; --m3-on-surface: #E3E2E6;
    --m3-surface-variant: #43474E; --m3-on-surface-variant: #C3C7CF;
    --m3-surface-container: #1E2022; --m3-surface-container-high: #282A2D;
    --m3-outline: #8D9199; --m3-outline-variant: #43474E;
    --m3-error: #FFB4AB; --m3-error-container: #93000A; --m3-on-error-container: #FFDAD6;
    --m3-success: #8BD99A; --m3-success-container: #005321;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--m3-surface); color: var(--m3-on-surface);
  min-height: 100dvh; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: var(--gap); }
.narrow { max-width: 440px; }

/* Top app bar */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--gap); background: var(--m3-surface-container);
  border-bottom: 1px solid var(--m3-outline-variant);
}
.appbar .brand { font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.appbar .brand .dot { width: 28px; height: 28px; border-radius: 8px; background: var(--m3-primary); color: var(--m3-on-primary); display: grid; place-items: center; font-size: 15px; }
.appbar .brand img.dot { object-fit: contain; background: transparent; border-radius: 0; }
.brandlogo { display: block; max-width: 210px; width: 60%; height: auto; margin: 4px auto 14px; }
.appbar .spacer { flex: 1; }

h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin: .2em 0 .4em; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 1.2em 0 .5em; }
.muted { color: var(--m3-on-surface-variant); }
.center { text-align: center; }

/* Card */
.card {
  background: var(--m3-surface-container); border-radius: var(--radius);
  padding: clamp(16px, 4vw, 24px); box-shadow: var(--shadow-1);
  border: 1px solid var(--m3-outline-variant);
}
.card + .card { margin-top: var(--gap); }

/* Fields — outlined M3 text fields */
.field { position: relative; margin: 14px 0; }
.field label { display: block; font-size: .8rem; color: var(--m3-on-surface-variant); margin-bottom: 6px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px; font-size: 1rem; font-family: inherit;
  background: var(--m3-surface); color: var(--m3-on-surface);
  border: 1.5px solid var(--m3-outline); border-radius: var(--radius-sm);
  outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--m3-primary); border-width: 2px; padding: 13.5px; }
.field .hint { font-size: .75rem; color: var(--m3-on-surface-variant); margin-top: 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; font-size: .95rem; font-weight: 600; font-family: inherit;
  border: none; border-radius: 100px; cursor: pointer; min-height: 48px;
  background: var(--m3-primary); color: var(--m3-on-primary); transition: filter .15s, box-shadow .15s;
  width: 100%;
}
.btn:hover { filter: brightness(1.06); box-shadow: var(--shadow-2); }
.btn:active { filter: brightness(.94); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.tonal { background: var(--m3-secondary-container); color: var(--m3-on-surface); }
.btn.outline { background: transparent; color: var(--m3-primary); border: 1.5px solid var(--m3-outline); }
.btn.text { background: transparent; color: var(--m3-primary); min-height: 40px; padding: 8px 12px; width: auto; }
.btn.sm { min-height: 40px; padding: 8px 16px; font-size: .85rem; width: auto; }

/* Chips (pipeline stages) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: 100px; font-size: .8rem; font-weight: 600;
  background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant);
  border: 1px solid var(--m3-outline-variant); cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--m3-primary-container); color: var(--m3-on-primary-container); border-color: transparent; }
.chip .n { opacity: .7; margin-left: 4px; }

/* Lead list */
.lead {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--m3-surface); border: 1px solid var(--m3-outline-variant);
  border-radius: var(--radius-sm); margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .15s;
}
.lead:hover { box-shadow: var(--shadow-1); }
.lead .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--m3-primary-container); color: var(--m3-on-primary-container); display: grid; place-items: center; font-weight: 700; flex: none; }
.lead .grow { flex: 1; min-width: 0; }
.lead .name { font-weight: 600; }
.lead .sub { font-size: .82rem; color: var(--m3-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: var(--m3-secondary-container); color: var(--m3-on-surface); white-space: nowrap; }
.badge.type { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }

/* Toast / banners */
.banner { padding: 12px 16px; border-radius: var(--radius-sm); margin: 12px 0; font-size: .9rem; }
.banner.err { background: var(--m3-error-container); color: var(--m3-on-error-container); }
.banner.ok { background: var(--m3-success-container); color: var(--m3-on-surface); }
.hidden { display: none !important; }

/* Explain-everything expandable (Constitution Law 7) */
details.explain { margin-top: 8px; border-radius: var(--radius-xs); background: var(--m3-surface-container-high); padding: 4px 12px; }
details.explain summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--m3-primary); padding: 8px 0; list-style: none; }
details.explain summary::-webkit-details-marker { display: none; }
details.explain summary::before { content: "ⓘ "; }
details.explain[open] summary::before { content: "▾ "; }
details.explain .body { font-size: .85rem; color: var(--m3-on-surface-variant); padding: 0 0 10px; }

/* FAB */
.fab {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 18px; border: none; cursor: pointer;
  background: var(--m3-primary); color: var(--m3-on-primary); font-size: 26px;
  box-shadow: var(--shadow-2); z-index: 20;
}

/* Modal sheet */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; display: grid; place-items: end center; }
.sheet { background: var(--m3-surface); width: 100%; max-width: 560px; border-radius: 28px 28px 0 0; padding: 22px; max-height: 92dvh; overflow: auto; animation: rise .2s ease; }
@media (min-width: 600px) { .scrim { place-items: center; } .sheet { border-radius: 28px; } }
@keyframes rise { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet h2 { margin-top: 0; }
.row { display: flex; gap: 12px; } .row > * { flex: 1; }

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat { background: var(--m3-surface-container-high); border-radius: var(--radius-sm); padding: 14px; }
.stat .v { font-size: 1.6rem; font-weight: 700; }
.stat .k { font-size: .78rem; color: var(--m3-on-surface-variant); }

.scanbtn { display: flex; align-items: center; gap: 10px; justify-content: center; }
input[type=file] { display: none; }

/* Rental application section titles */
.secttl { font-weight: 700; font-size: .95rem; margin: 18px 0 2px; color: var(--m3-primary); border-top: 1px solid var(--m3-outline-variant); padding-top: 14px; }

/* Referral star tracker */
.startrack { display: flex; gap: 10px; justify-content: center; margin: 14px 0 6px; font-size: 2.1rem; line-height: 1; }
.startrack .s.on { filter: none; }
.startrack .s.off { filter: grayscale(1); opacity: .28; }