:root {
  /* Type */
  --font-family: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Accent */
  --primary: #6c5ce0;
  --primary-hover: #5a49c9;
  --primary-bg: #f1eefc;
  --primary-bg-hover: #e7e2f9;

  /* Neutrals */
  --text: #251f36;
  --text-muted: #6d6683;
  --text-faint: #8b84a3;
  --border: #e7e4f1;
  --surface: #ffffff;
  --surface-sunken: #f8f7fc;
  --surface-hover: #f3f1fb;
  --canvas: #f2f0f8;

  /* Status */
  --success: #2f7d5d;
  --success-bg: #e6f3ec;
  --warning: #8a6417;
  --warning-bg: #f8f0dd;
  --danger: #a03a44;
  --danger-bg: #f9e9ea;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --space-4: 9px;
  --space-7: 16px;

  /* Elevation */
  --shadow-dropdown: 0 10px 30px rgba(52, 38, 110, .13);
  --shadow-modal: 0 24px 60px rgba(38, 28, 80, .28);
  --shadow-panel: -10px 0 34px rgba(52, 38, 110, .14);
  --shadow-shell: 0 1px 2px rgba(52, 38, 110, .05), 0 12px 32px rgba(52, 38, 110, .06);

  /* Quiet-zebra table */
  --zebra: #faf9fd;
  --group-band: #f6f4fc;
  --group-band-text: #7d7695;
  --col-header-text: #4b4460;
  --hairline-body: #f0edf7;
  --hairline-header: #e2ddf0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-header__title h1 {
  margin: 0;
  font-size: 20px;
  color: var(--text);
}

.app-header__meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.app-header__actions {
  display: flex;
  gap: 8px;
}

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-7);
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn--secondary:hover,
.btn--ghost:hover {
  background: var(--surface-hover);
}

.toolbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.toolbar__search {
  flex: 1 1 220px;
  padding: var(--space-4) 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
}

.toolbar__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Top bar directly above each table: page-size selector on the left,
   Download Excel + search on the right. A second, independent page-size
   control from the one Tabulator renders bottom-left of its own footer —
   see createPageSizeSelect in app.js for how the two stay in sync. */
.table-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  flex-wrap: wrap;
}

.table-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-topbar__right .toolbar__search {
  flex: 0 1 220px;
}

.pagesize-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text-muted);
  background: var(--surface);
  cursor: pointer;
}

.toolbar__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 8px;
}

/* Multi-select dropdown filter */
.multiselect {
  position: relative;
}

.multiselect__toggle {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.multiselect__toggle.is-active {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.multiselect__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: 10px;
}

.multiselect__panel.is-open {
  display: block;
}

.multiselect__search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.multiselect__actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.multiselect__actions button {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}

.multiselect__list {
  max-height: 220px;
  overflow-y: auto;
}

.multiselect__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.multiselect__item:hover {
  background: var(--surface-sunken);
}

.multiselect__item input {
  margin: 0;
}

/* Card shell — each tab's toolbar/content/table sits on one rounded,
   softly-shadowed surface floating on the lavender page canvas. */
.pt-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-shell);
  margin: 20px 24px 24px;
}

#property-table,
#subdivision-table,
#suburb-table {
  margin: 8px 0 0;
}

#definitions-table {
  margin: 8px 0 0;
  background: var(--surface);
  overflow: hidden;
}

/* Data Definitions — descriptions/formulas are long-form reference text,
   so unlike every other table here, body cells wrap instead of truncating
   (Tabulator auto-grows row height when a cell's content wraps). */
#definitions-table .tabulator-cell {
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

#definitions-table .tabulator-cell code {
  background: rgba(108, 92, 224, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* vs suburb median: above median (pricier) vs below median (cheaper) */
.pct-above {
  color: var(--danger);
}

.pct-below {
  color: var(--success);
}

/* App shell: header toggle, the left-hand menu and the page beside it
   (app.html; app.js setupAppNav). The menu sits in the page flow on wide
   screens, where the toggle hides it (body.nav-collapsed), and slides over
   the page below 900px (body.nav-open). */
.app-header__lead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.app-nav-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.app-nav-toggle:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.app-layout {
  display: flex;
  align-items: stretch;
}

/* So the menu's panel runs the full window height even beside a short page
   (a Coming soon strategy). Modals and column panels are position: fixed,
   so they're unaffected. */
body.pt-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.pt-app > .app-layout {
  flex: 1 0 auto;
}

.app-nav {
  flex: 0 0 240px;
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.nav-collapsed .app-nav {
  display: none;
}

/* Stays in view while the page scrolls. */
.app-nav__inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px 24px;
}

.app-nav__group,
.app-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.app-nav__group,
.app-nav__link--top {
  color: var(--text);
  font-weight: 600;
}

.app-nav__group:hover,
.app-nav__link:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.app-nav__link.is-active {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}

.app-nav__icon {
  flex: none;
  color: var(--text-faint);
}

.app-nav__link.is-active .app-nav__icon,
.app-nav__group.has-active .app-nav__icon {
  color: var(--primary);
}

.app-nav__chevron {
  flex: none;
  margin-left: auto;
  color: var(--text-faint);
  transition: transform 150ms ease;
}

.app-nav__group[aria-expanded="false"] .app-nav__chevron {
  transform: rotate(-90deg);
}

/* A group's pages, on a guide line under the group's icon; their text
   lines up with the group's label. */
.app-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 18px;
  padding: 0 0 0 9px;
  border-left: 1px solid var(--border);
  list-style: none;
}

.app-nav__sub[hidden] {
  display: none;
}

.app-nav__sub .app-nav__link {
  padding: 7px 10px;
  font-size: 13.5px;
}

/* A strategy that isn't built yet: greyed, tagged "Soon", and opens a
   one-line placeholder page. */
.app-nav__link--soon {
  gap: 6px;
  color: var(--text-faint);
}

.app-nav__link--soon .app-nav__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The page itself says Coming soon, so the open one drops its tag (its
   bold label needs the room). */
.app-nav__link--soon.is-active .app-nav__soon {
  display: none;
}

.app-nav__soon {
  flex: none;
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
}

/* Sets the reference pages (Data Table, Data Definitions) apart from the
   Suburb Finder → Strategies → Shortlist journey above them. */
.app-nav__divider {
  height: 1px;
  margin: 10px 10px 8px;
  background: var(--border);
}

/* min-width: 0 lets a wide table scroll inside its card rather than
   widening the page. */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* The page's name above its card, e.g. "Suburb Finder / Shortlist". */
.app-main__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 20px 24px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.app-main__crumb {
  color: var(--text-muted);
  font-weight: 500;
}

.app-main__crumb::after {
  content: "/";
  margin-left: 8px;
  color: var(--text-faint);
}

.app-main__crumb[hidden] {
  display: none;
}

.app-main .pt-shell {
  margin-top: 14px;
}

.app-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(37, 31, 54, .32);
}

.app-nav-backdrop[hidden] {
  display: none;
}

@media (max-width: 899px) {
  .app-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 95;
    width: min(280px, 86vw);
    border-right: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }

  .nav-open .app-nav {
    transform: none;
    visibility: visible;
    box-shadow: 10px 0 34px rgba(52, 38, 110, .18);
    transition: transform 200ms ease;
  }

  .app-nav__inner {
    position: static;
    max-height: none;
    height: 100%;
  }

  .app-header {
    padding: 12px 16px;
  }

  .app-main__title {
    margin: 16px 16px 0;
  }

  .app-main .pt-shell {
    margin: 12px 16px 16px;
  }
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.toolbar--wrap {
  align-items: center;
}

/* Sub-tabs inside a listing's modal (Profitability / Cashflow). The tool's
   own pages are picked from the left-hand menu instead; .subtab-panel is
   still how the pages of Suburb Finder, Strategies and Shortlist are shown
   and hidden. */
.subtabs {
  display: flex;
  gap: 4px;
  padding: 10px 24px 0;
  border-bottom: 1px solid var(--border);
}

.subtabs__btn {
  border: none;
  background: none;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--font-family);
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.subtabs__btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.subtabs__btn.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.subtab-panel {
  display: none;
}

.subtab-panel.is-active {
  display: block;
}

.subdivision-note {
  margin: 14px 24px;
  padding: 14px 16px;
  background: #f8f6fe;
  border: 1px solid #e4dff4;
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 1.65;
  color: #5f5878;
}

.subdivision-note code {
  background: rgba(108, 92, 224, 0.08);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 4px;
}

/* A strategy that isn't built yet: what it will show, in one line. */
.strategy-soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 24px 32px;
}

.strategy-soon p {
  margin: 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.strategy-soon__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

/* A strategy page's "Suburbs" select: All, or My shortlisted suburbs. */
.suburb-scope {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}


/* Range (min/max) filter */
.rangefilter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rangefilter__label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.rangefilter__input {
  width: 90px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
}

/* Assumption fields (Strategies › Assumptions; a modal until 2026-10-03) */
.assumptions-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.assumptions-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.assumptions-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.assumptions-field input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-family: var(--font-family);
  color: var(--text);
}

.assumptions-field__help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.assumptions-group-label {
  margin: 8px 0 -6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.assumptions-group-label:first-child {
  margin-top: 0;
}

.assumptions-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

/* Strategies › Assumptions: the page around those fields. */
.assumptions-page {
  max-width: 760px;
  padding: 20px 24px 24px;
}

.assumptions-page__heading {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.assumptions-page__intro {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.assumptions-page .assumptions-field input {
  max-width: 220px;
}

.assumptions-page .assumptions-actions {
  justify-content: flex-start;
}

/* Estimated subdivision profit */
.profit-positive {
  color: var(--success);
  font-weight: 600;
}

.profit-negative {
  color: var(--danger);
  font-weight: 600;
}

/* Confidence badge (comp-count-backed) */
.confidence-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.confidence-high {
  background: var(--success-bg);
  color: var(--success);
}

.confidence-medium {
  background: var(--warning-bg);
  color: var(--warning);
}

.confidence-low {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Modals (Subdivision drill-down, assumptions, Suburb Finder compare and
   live-listing). Full-screen since 2026-09-29 (user-requested: the 720px
   dialog squeezed the editable cost calc into a clutter) and only the ✕
   closes them — there is no backdrop to click, the dialog IS the screen. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface);
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 100;
  padding: 0;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-dialog {
  background: var(--surface);
  border-radius: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.modal-dialog--wide {
  width: 100%;
}

/* Suburb comparison table (Suburb Finder — Compare) */
.compare-table-scroll {
  overflow-x: auto;
}

.compare-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

.compare-table th,
.compare-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  z-index: 1;
}

.compare-table thead th:first-child {
  z-index: 2;
}

.compare-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-sunken);
}

.compare-table tbody td {
  font-variant-numeric: tabular-nums;
}

.compare-table tbody tr:nth-child(even) td,
.compare-table tbody tr:nth-child(even) th {
  background: var(--zebra);
}

.compare-table .compare-group-row th {
  background: var(--group-band);
  color: var(--group-band-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
}

.compare-table td.compare-remove {
  text-align: center;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
}

.compare-table td.compare-remove:hover {
  color: var(--danger);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.modal-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.modal-body {
  padding: 16px 32px 32px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-empty {
  color: var(--text-muted);
  font-size: 13px;
}

.modal-note {
  color: var(--text-faint);
  font-size: 12.5px;
  margin: 4px 0 10px;
}

/* One for-sale listing within a suburb's drill-down */
.listing-card {
  border: 1px solid #ece9f5;
  border-radius: var(--radius-lg);
  margin: 10px 0;
  overflow: hidden;
  background: #fdfcff;
}

.listing-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.listing-card__summary:hover {
  background: var(--surface-hover);
}

.listing-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.listing-card__address {
  font-weight: 600;
  color: var(--text);
}

.listing-card__meta {
  font-size: 12.5px;
  color: var(--text-faint);
}

.listing-card__view-link {
  font-size: 12.5px;
  color: var(--primary);
  text-decoration: none;
  width: fit-content;
}

.listing-card__view-link:hover {
  text-decoration: underline;
}

.listing-card__profit {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.listing-card__detail {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

.listing-card__detail[hidden] {
  display: none;
}

/* Candidate deep-dive (see buildListingDetailElement): Land & zoning and
   Site conditions side by side, then Subdivision costs and the comparables
   each spanning the full width. One column when the window is narrow. */
.listing-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 48px;
}

@media (min-width: 1000px) {
  .listing-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-detail__col--calc,
  .listing-detail__col--comps {
    grid-column: 1 / -1;
  }
}

.listing-detail__col {
  min-width: 0;
}

.listing-detail__calc,
.listing-detail__zoning {
  font-size: 13px;
  margin: 12px 0;
}

.listing-detail__calc-row,
.listing-detail__total,
.listing-detail__zoning > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
}

.listing-detail__calc-row > span:first-child {
  min-width: 0;
}

.listing-detail__zoning > div > span:first-child {
  color: var(--text-faint);
}

.listing-detail__hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  text-transform: none;
}

/* One editable cost/revenue line (land surveyor, service connections,
   stamp duty %, other costs, ...) — the label stays plain text, the value
   side holds a small live-editable input plus the dollar amount it
   currently works out to. */
.listing-detail__calc-row > span:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.listing-detail__calc-input {
  width: 110px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  font-size: 12.5px;
  font-family: var(--font-family);
  color: var(--text);
  text-align: right;
}

.listing-detail__calc-amount {
  min-width: 100px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.listing-detail__actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Shortlist star on a candidate card (Subdivision modal) */
.listing-card__star {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-faint);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}

.listing-card__star:hover {
  color: #d97706;
  background: var(--surface-hover);
}

.listing-card__star.is-on {
  color: #f59e0b;
}

/* The ☆ column of the Subdivision table (same star as the listing modal). */
.tabulator .tabulator-cell.sd-star-col {
  padding-left: 2px;
  padding-right: 2px;
  text-overflow: clip;
}

.tabulator .sd-star-col .listing-card__star {
  font-size: 17px;
  padding: 0 4px;
}

/* A listing opened from a table row: its card stays open, so the summary
   isn't a toggle. */
.listing-card--open .listing-card__summary {
  cursor: default;
}

.listing-card--open .listing-card__summary:hover {
  background: none;
}

/* "Lots after subdivision" row above the cost lines */
.calc-lots {
  margin: 4px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.calc-lots__hint {
  display: block;
  margin: 2px 0 0;
}

.listing-detail__ai-summary {
  font-size: 13px;
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: #f8f7fd;
  border: 1px solid #ece9f5;
  border-radius: var(--radius-md);
  list-style: none;
}

.listing-detail__ai-summary li {
  position: relative;
  padding-left: 14px;
  margin: 4px 0;
}

.listing-detail__ai-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

.listing-detail__total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 6px !important;
  font-weight: 600;
}

.listing-detail h4 {
  margin: 14px 0 2px;
  font-size: 13px;
  color: var(--text);
}

.comps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.comps-table th,
.comps-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.comps-table a {
  color: var(--primary);
  text-decoration: none;
}

.comps-table a:hover {
  text-decoration: underline;
}

/* Column visibility panel (Data Table tab) — slide-in from the right */
.column-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  z-index: 90;
  display: flex;
  flex-direction: column;
}

.column-panel[hidden] {
  display: none;
}

.column-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.column-panel__header h3 {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

.column-panel__actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.column-panel__groups {
  overflow-y: auto;
  padding: 4px 0;
}

.column-panel__group {
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}

.column-panel__group summary {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  color: var(--text);
}

.column-panel__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.column-panel__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.column-panel__item:hover {
  background: var(--surface-sunken);
}

.column-panel__item input {
  margin: 0;
}

/* Saved filters / saved shortlists: the Save + Load buttons */
.saved-bar {
  display: flex;
  gap: 8px;
}

.saved-dropdown {
  position: relative;
}

.saved-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  width: 300px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: 6px;
}

.saved-dropdown__panel.is-open {
  display: block;
}

.saved-dropdown__empty {
  margin: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Investment Score badges (Capital Growth / Cashflow / Lower Risk / Overall)
   — fixed server-side scores, no user weight panel any more. */
.pt-score {
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pt-score-high {
  background: var(--success-bg);
  color: var(--success);
}

.pt-score-mid {
  background: var(--warning-bg);
  color: var(--warning);
}

.pt-score-low {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Cashflow tab */
.cashflow-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  padding: 18px 24px;
  align-items: start;
}

.cashflow-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cashflow-inputs__group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fdfcff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cashflow-inputs__group h4 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cashflow-inputs__group label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.cashflow-inputs__group input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-family: var(--font-family);
  color: var(--text);
}

.cashflow-outputs {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 18px;
}

.cashflow-outputs h4,
.cashflow-projection-wrap h4,
.cashflow-scenarios h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.cashflow-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.cashflow-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cashflow-stat__label {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

.cashflow-stat__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cashflow-stat__value.is-positive { color: var(--success); }
.cashflow-stat__value.is-negative { color: var(--danger); }

.cashflow-save {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cashflow-save input {
  flex: 1 1 auto;
}

.cashflow-projection-wrap,
.cashflow-scenarios {
  padding: 0 24px 24px;
}

.cashflow-table-scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.cashflow-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

.cashflow-table th,
.cashflow-table td {
  padding: 8px 16px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cashflow-table th:first-child,
.cashflow-table td:first-child {
  text-align: left;
}

.cashflow-table thead th {
  position: sticky;
  top: 0;
  background: var(--group-band);
  color: var(--group-band-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cashflow-table tbody tr:nth-child(even) td {
  background: var(--zebra);
}

.cashflow-scenario-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #fdfcff;
}

.cashflow-scenario-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.cashflow-scenario-card__meta {
  font-size: 12.5px;
  color: var(--text-muted);
}

.cashflow-scenario-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cashflow-scenarios-empty {
  font-size: 13px;
  color: var(--text-muted);
}

.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 2px;
}

.saved-item:hover {
  background: var(--surface-sunken);
}

.saved-item__name {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  color: var(--text);
}

.saved-item__delete {
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}

.saved-item__delete:hover {
  color: var(--danger);
}

/* hTag-style nested filter builder (Suburb Finder tab) */
.querybuilder {
  margin: 4px 24px 16px;
}

.qb-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.qb-group--nested {
  background: var(--surface-sunken);
  margin: 4px 0;
}

.qb-group-body {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.qb-combinator {
  flex: 0 0 auto;
  width: 40px;
  border: 1px solid var(--primary);
  color: var(--primary-hover);
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 8px 0;
}

.qb-combinator:hover {
  background: var(--primary-bg-hover);
}

.qb-rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.qb-row-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-row-wrap > .qb-group {
  flex: 1 1 auto;
  min-width: 0;
}

.qb-rule {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.qb-select {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
  background: var(--surface);
  color: var(--text);
}

.qb-value {
  display: flex;
  gap: 6px;
}

.qb-value-input {
  width: 140px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
}

.qb-value-input--text {
  width: 200px;
}

.qb-row-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}

.qb-btn-icon {
  width: 30px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1;
}

.qb-btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.qb-add {
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Column picker — collapsible sections of fields, one per column group
   (qbCreateFieldPicker in app.js), in place of a native <select>. */
.qb-field-picker {
  position: relative;
}

.qb-field-picker__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 240px;
  max-width: 320px;
  text-align: left;
  cursor: pointer;
}

.qb-field-picker__toggle:hover {
  border-color: var(--primary-bg-hover);
}

.qb-field-picker__toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qb-field-picker__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 0 3px 3px 0;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
}

.qb-field-picker__panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 96px); /* stays inside the card at phone width */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: 10px;
}

.qb-field-picker__panel.is-open {
  display: block;
}

.qb-field-picker__search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text);
  margin-bottom: 8px;
}

.qb-field-picker__search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* position: relative makes this the offsetParent scrollToOpenSection
   measures sections against. */
.qb-field-picker__list {
  position: relative;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qb-field-picker__section + .qb-field-picker__section {
  margin-top: 2px;
}

/* Sticky, so an open section's name stays in view while scrolling its
   columns; each sticks only within its own section. The white strip under
   it hides the sliver of a column scrolling beneath a stuck heading. */
.qb-field-picker__section-toggle {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 4px 0 var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.qb-field-picker__section-toggle:hover {
  background: var(--surface-hover);
}

.qb-field-picker__section-toggle[aria-expanded="true"] {
  background: var(--primary-bg);
  color: var(--primary-hover);
}

.qb-field-picker__chevron {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.qb-field-picker__section-toggle[aria-expanded="true"] .qb-field-picker__chevron {
  transform: rotate(45deg);
}

.qb-field-picker__section-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* The section holding the rule's current column, marked even when closed */
.qb-field-picker__section-toggle.has-selection .qb-field-picker__section-name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--primary);
  vertical-align: middle;
}

.qb-field-picker__count {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.qb-field-picker__section-toggle[aria-expanded="true"] .qb-field-picker__count {
  background: var(--surface);
  color: var(--primary-hover);
}

.qb-field-picker__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 6px 16px;
}

.qb-field-picker__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.qb-field-picker__item:hover,
.qb-field-picker__item:focus-visible {
  background: var(--surface-sunken);
}

.qb-field-picker__item.is-selected {
  background: var(--primary-bg);
  color: var(--primary-hover);
  font-weight: 600;
}

.qb-field-picker__item.is-selected::after {
  content: "✓";
  font-size: 12px;
}

.qb-field-picker__empty {
  margin: 8px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   Tabulator — "Quiet zebra": hairline structure only (no full grid), zebra
   stripe carries row separation, comfortable density, tabular numerals, and
   a pinned identity column (Suburb / Address — see the `frozen: true` column
   defs in app.js). In the body, group boundaries are hairlines from the
   `pt-group-start` cssClass on every cell of the first column in each group
   (buildGroupedColumns / buildGroupedSuburbColumns in app.js) — never a full
   vertical grid. The header is rounded shapes on white rather than
   Tabulator's stock grey grid (2026-10, user-requested): a lavender pill per
   group title and a soft rounded tile per column title.
   ───────────────────────────────────────────────────────────────────────── */
.tabulator {
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 13.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tabulator .tabulator-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-header);
}

.tabulator .tabulator-cell {
  border-right: none;
}

/* Same selectors as Tabulator's own grey fill, #aaa dividers and grey hover
   (equal specificity, later in the cascade, so these win). Solid white, not
   transparent, so a frozen header column still covers what scrolls under it. */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: var(--surface);
  border-right: none;
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
  border-top: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 13px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--col-header-text);
}

/* Titles centred in their tiles — what Tabulator's columnHeaderVertAlign:
   "middle" does inline, set once here for every table. */
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) {
  justify-content: center;
}

/* Tiles and pills are ::before layers inset from each header cell's edges,
   so the gaps between them never change a column's width — header and body
   cells stay aligned. */
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group)::before {
  content: "";
  position: absolute;
  inset: 5px 3px;
  border-radius: var(--radius-lg);
  background: var(--group-band);
  transition: background 120ms ease;
}

.tabulator .tabulator-header .tabulator-col.pt-select-col::before,
.tabulator .tabulator-header .tabulator-col.sd-star-col::before {
  content: none;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover::before {
  background: var(--primary-bg);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"]::before,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"]::before {
  background: var(--primary-bg-hover);
}

.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] > .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] > .tabulator-col-content {
  color: var(--primary-hover);
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-group > .tabulator-col-content {
  padding: 13px 18px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-hover);
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-group > .tabulator-col-content::before {
  content: "";
  position: absolute;
  inset: 6px 3px 2px;
  border-radius: 999px;
  background: var(--primary-bg);
}

/* Sort arrows in the palette: faint lavender at rest, primary once sorted */
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: #c5bedb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--primary);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover {
    border-bottom-color: var(--primary);
    border-top-color: var(--primary);
  }
}

.tabulator-cell.pt-group-start {
  box-shadow: inset 1px 0 0 var(--hairline-body);
}

.tabulator .tabulator-row {
  background-color: var(--surface);
  min-height: 46px;
}

.tabulator .tabulator-row.tabulator-row-even {
  background-color: var(--zebra);
}

.tabulator .tabulator-row:hover {
  background-color: var(--surface-hover);
}

/* Must come after the zebra/hover rules above to win the same-specificity
   cascade tie — otherwise a selected even-numbered row silently keeps its
   zebra tint instead of showing as selected. */
.tabulator .tabulator-row.tabulator-selected {
  background-color: var(--primary-bg);
}

.tabulator .tabulator-row.tabulator-selected:hover {
  background-color: var(--primary-bg-hover);
}

.tabulator input[type="checkbox"] {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.tabulator .tabulator-cell {
  padding: 14px 18px;
  font-size: 13.5px;
}

/* Identity column (Suburb / Address) — pinned via `frozen` where the table
   has no column groups (Subdivision; Tabulator refuses `frozen` on a column
   nested in a group), styled via `.pt-identity` alone where it's grouped
   (Data Table, Suburb Finder). Tabulator already makes a frozen cell inherit
   its row's background-color, so zebra + hover coloring carries through
   automatically there; only typography and the divider color need overriding. */
.tabulator .tabulator-cell.tabulator-frozen,
.tabulator .tabulator-cell.pt-identity {
  font-weight: 600;
  white-space: nowrap;
}

.tabulator .tabulator-header .tabulator-frozen,
.tabulator .tabulator-header .tabulator-col.pt-identity {
  font-weight: 600;
}

.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  border-right: 1px solid var(--hairline-body);
}

/* Data Table's "AI Subdivision Notes" column — no per-row detail view in
   this table (unlike the Subdivision tab's listing cards), so the full
   3-point text lives in a native title tooltip; the cell itself is
   single-line and truncated so it doesn't blow out row height. */
.ai-summary-cell {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
  border-right: 1px solid var(--hairline-header);
}

.tabulator .tabulator-placeholder {
  color: var(--text-faint);
  font-family: var(--font-family);
  font-size: 13.5px;
}

.tabulator .tabulator-footer {
  background: var(--zebra);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12.5px;
  padding: 8px 16px;
}

.tabulator .tabulator-footer .tabulator-page,
.tabulator .tabulator-footer .tabulator-page-size {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 12.5px;
}

.tabulator .tabulator-footer .tabulator-page:hover:not(.active):not(:disabled) {
  background: var(--surface-hover);
}

.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* The Data Table's listing modal — its own action row ("View listing ↗" +
   "Download report (PDF)", see openLiveListingModal). */
.livelisting-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}

/* ── Subdivision cost engine (2026-09): schedule cost lines, provenance
   badges, site-condition photos/findings, schedule disclosure ───────── */
.cost-group__title {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  margin-top: 8px;
  padding-bottom: 2px;
}

.cost-line__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cost-line__label small {
  color: var(--text-faint);
  font-size: 11px;
}

.cost-line__tag {
  font-size: 11px;
  color: var(--text-faint);
  min-width: 100px;
  text-align: right;
  cursor: help;
}

.cost-line--photos .cost-line__tag {
  color: #4a56b8;
}

.cost-line--user .listing-detail__calc-input {
  border-color: var(--primary);
}

.cost-line--user .cost-line__tag {
  color: #7c3aed;
}

.cost-lines--na .cost-line {
  opacity: 0.7;
}

/* Unused lines carry no provenance tag, so don't reserve room for one. */
.cost-lines--na .cost-line__tag {
  display: none;
}

.cost-lines__toggle {
  font-size: 12px;
  padding: 2px 8px;
  margin: 4px 0 8px;
}

/* The three schedule groups (site works / services / statutory) as real
   grid columns with room to breathe; they wrap to fewer columns when the
   window can't fit ~320px each. The unused-lines list uses the same grid. */
.cost-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 8px 40px;
  align-items: start;
}

.cost-lines[hidden] {
  display: none;
}

.cost-lines--na {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  margin-top: 4px;
  padding: 8px 14px 12px;
  background: #f8f7fd;
  border: 1px solid #ece9f5;
  border-radius: var(--radius-md);
}

.cost-lines__hint {
  display: block;
  grid-column: 1 / -1;
  margin: 2px 0 4px;
}

.calc-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 48px;
  margin-top: 12px;
}

@media (min-width: 900px) {
  .calc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.calc-summary__col {
  min-width: 0;
}

.listing-detail__risk {
  font-size: 12px;
  color: var(--text-faint);
  margin: 2px 0 8px;
}

/* Comparable evidence under the resale $/lot row: confidence badge plus
   how many comps and how alike their sizes are (hover for the method). */
.listing-detail__evidence {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: 2px 0 8px;
  cursor: help;
}

.listing-detail__evidence-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 2px;
}

.listing-detail__evidence .confidence-badge {
  padding: 1px 7px;
  font-size: 11px;
  margin-right: 4px;
}

.listing-card__unpriced {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
}

.site-findings-details {
  font-size: 13px;
  margin: 4px 0 8px;
}

.site-findings-details summary {
  cursor: pointer;
  color: var(--text-faint);
  font-size: 12px;
}

.source-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.source-measured { background: var(--success-bg); color: var(--success); }
.source-inferred { background: #eef0fb; color: #4a56b8; }
.source-assumed { background: var(--warning-bg); color: var(--warning); }
.source-user { background: #f3e8ff; color: #7c3aed; }
.source-na { background: #f1f1f4; color: var(--text-faint); }

.conf-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f1f1f4;
  color: var(--text-faint);
  font-size: 10.5px;
  margin-left: 4px;
}

.site-photos {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
}

.site-photos a {
  position: relative;
  flex: 0 0 auto;
}

.site-photos img {
  height: 84px;
  width: auto;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  display: block;
  background: #f1f1f4;
}

.site-photos span {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 999px;
}

.site-findings > div {
  cursor: help;
}

.site-note {
  font-size: 13px;
  margin: 6px 0;
  padding: 8px 12px;
  background: #f8f7fd;
  border: 1px solid #ece9f5;
  border-radius: var(--radius-md);
}

.listing-card__profit-base {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
}

.schedule-defaults {
  margin-top: 14px;
  font-size: 13px;
}

.schedule-defaults summary {
  cursor: pointer;
  font-weight: 600;
}

.schedule-defaults__state {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

.schedule-defaults__table {
  max-height: 360px;
  overflow: auto;
}

/* Data Table planning highlight (e.g. NSW "Average lot size control") —
   rides on the address cell; same pill shape as .source-badge. */
.planning-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* In a table cell the address is nowrap and clipped at the column edge, so
   the badge gets its own line under it — both stay fully visible, and only
   badged rows grow. */
.tabulator-cell .planning-badge {
  display: block;
  width: max-content;
  margin: 3px 0 0;
}

/* Data Table rows open the listing modal on click. */
#property-table .tabulator-row {
  cursor: pointer;
}

/* ── Shared planning panel (site/planning_panel.js, 2026-09-30) ──────────
   One component for every state's planning controls (VIC, NSW, ...), in
   the listing modal and the Subdivision tab's VIC lookup. An unavailable
   section is always shown as unavailable, never as "none". */
.livelisting-modal__planning {
  margin: 12px 0 4px;
}

.planning-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--surface);
  font-size: 13px;
}

.planning-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.planning-panel__head h4 {
  margin: 0;
  font-size: 13px;
}

.planning-panel__state {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.planning-panel__alert {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger);
}

.planning-panel__note,
.planning-panel__unavailable {
  margin: 6px 0;
  color: var(--text-muted);
}

.planning-panel__unavailable {
  color: var(--danger);
}

.planning-panel__facts {
  margin: 8px 0;
}

.planning-panel__hint {
  color: var(--text-faint);
  font-size: 11px;
}

.planning-panel__subhead {
  margin: 12px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.planning-panel__lots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.planning-lot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* The council's average-based count is the expected yield: highlighted. */
.planning-lot--average {
  border-color: var(--success);
  background: var(--success-bg);
}

.planning-lot__label {
  font-size: 11px;
  color: var(--text-muted);
}

.planning-lot__value {
  font-size: 16px;
  color: var(--text);
}

.planning-lot__size {
  font-size: 11px;
  color: var(--text-faint);
}

.planning-panel__proposed {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
}

.planning-panel__proposed .planning-panel__subhead {
  margin-top: 0;
  color: var(--warning);
}

.planning-panel__proposed ul,
.planning-panel__flags,
.planning-panel__controls,
.planning-panel__notes {
  margin: 4px 0;
  padding-left: 0;
  list-style: none;
}

.planning-panel__controls li,
.planning-panel__notes li,
.planning-panel__proposed li {
  margin: 3px 0;
}

.planning-panel__notes li {
  color: var(--text-muted);
  font-size: 12px;
}

.planning-flag {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 5px 0;
}

.planning-flag__badge {
  flex-shrink: 0;
  min-width: 70px;
  text-align: center;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.planning-flag--high .planning-flag__badge,
.planning-flag--unavailable .planning-flag__badge {
  background: var(--danger-bg);
  color: var(--danger);
}

.planning-flag--medium .planning-flag__badge,
.planning-flag--proposed .planning-flag__badge {
  background: var(--warning-bg);
  color: var(--warning);
}

.planning-flag--cost .planning-flag__badge {
  background: var(--primary-bg);
  color: var(--primary);
}

.planning-panel__coverage {
  font-size: 11px;
  padding: 0 5px;
  border-radius: var(--radius-sm, 4px);
  background: var(--warning-bg);
  color: var(--warning);
}

.planning-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0;
}

.planning-panel__links a {
  color: var(--primary);
  text-decoration: none;
}

/* Planning rules table (site/planning_rules.js): rule | this property |
   source clause, one row per rule with a value. Stacks on a phone. */
.planning-rules {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-size: 13px;
}

.planning-rules th,
.planning-rules td {
  padding: 6px 12px 6px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border);
}

.planning-rules thead th {
  border-top: 0;
  padding-top: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
}

.planning-rules tbody th {
  width: 26%;
  font-weight: 400;
  color: var(--text-muted);
}

.planning-rules td:nth-child(2) {
  width: 38%;
  color: var(--text);
}

.planning-rules td small {
  display: block;
  margin-top: 2px;
}

.planning-rules a {
  color: var(--primary);
  text-decoration: none;
}

.planning-rules a:hover {
  text-decoration: underline;
}

/* Group headings inside the table (NSW: the lot's controls / complying
   development standards / rules that may also apply). */
.planning-rules tbody .planning-rules__group th {
  width: auto;
  padding-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.planning-rules__group small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Rules that apply only in an area this tool doesn't check (NSW low and
   mid rise housing areas): visibly secondary to the lot's own rules. */
.planning-rules__row--cond > th,
.planning-rules__row--cond > td:nth-child(2) {
  color: var(--text-muted);
}

/* A rule's full text, who can vary it and caveats, collapsed under its value. */
.planning-rules__more {
  margin-top: 3px;
}

.planning-rules__more summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--primary);
}

.planning-rules__more p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* A rule that changes how the lot count works (NSW lot averaging). */
.planning-rules__row--highlight > * {
  background: var(--success-bg);
}

.planning-rules__note {
  font-size: 12px;
}

@media (max-width: 640px) {
  .planning-rules thead {
    display: none;
  }

  .planning-rules,
  .planning-rules tbody,
  .planning-rules tr,
  .planning-rules th,
  .planning-rules td {
    display: block;
    width: auto;
  }

  .planning-rules tbody th,
  .planning-rules td:nth-child(2) {
    width: auto;
  }

  .planning-rules tr {
    padding: 6px 0;
    border-top: 1px solid var(--border);
  }

  .planning-rules th,
  .planning-rules td {
    padding: 1px 0;
    border-top: 0;
  }
}

.planning-panel__refs,
.planning-panel__attribution,
.planning-panel__disclaimer {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-faint);
}

/* The planning panel spans both columns of a Subdivision candidate's detail. */
.listing-detail__col--planning {
  margin: 8px 0;
}

@media (min-width: 1000px) {
  .listing-detail__col--planning {
    grid-column: 1 / -1;
  }
}

/* ── Sign-in gate, account menu and notices (site/auth.js) ─────────────── */

/* Until auth.js confirms a session only the boot screen shows; body starts
   with .pt-auth-pending (app.html) and auth.js removes it. */
.auth-screen {
  display: none;
}

.pt-auth-pending .auth-screen {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 70vh;
  color: var(--text-muted);
  font-size: 14px;
}

.pt-auth-pending .auth-screen p {
  margin: 0;
  max-width: 520px;
  text-align: center;
  line-height: 1.5;
}

.pt-auth-pending > :not(.auth-screen) {
  display: none;
}

.app-header .app-header__actions {
  align-items: center;
  align-self: center;
  gap: 10px;
}

.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pt-pill--primary { background: var(--primary-bg); color: var(--primary); border-color: transparent; }
.pt-pill--success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.pt-pill--warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.pt-pill--danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }

/* auth.js shows/hides these with the `hidden` attribute; their display
   values above would otherwise override it. */
.pt-pill[hidden],
.access-banner[hidden] {
  display: none;
}

/* Trial-ending / payment-failed strip under the header. */
.access-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 13px;
}

.access-banner--danger { background: var(--danger-bg); color: var(--danger); }
.access-banner--success { background: var(--success-bg); color: var(--success); }
.access-banner--info { background: var(--primary-bg); color: var(--primary); }

.access-banner .btn {
  padding: 6px 12px;
  font-size: 12px;
}

/* "Plan & billing": our page inside Clerk's account pop-up (auth.js
   renderPlanPage), laid out like Clerk's own pages — a title, then
   sections with the label on the left. */
.pt-billing {
  color: var(--text);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
}

.pt-billing__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.pt-billing__section {
  display: grid;
  gap: 10px 0;
  padding: 20px 0;
}

/* Clerk's own pages put the label in the first 35%. The plans take the
   full width, under their label. */
@media (min-width: 720px) {
  .pt-billing__section {
    grid-template-columns: 35% minmax(0, 1fr);
  }

  .pt-billing__section--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pt-billing__heading {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.pt-billing__body {
  min-width: 0;
}

.pt-billing__plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.pt-billing__rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px;
  margin: 10px 0 0;
}

.pt-billing__rows dt {
  color: var(--text-muted);
}

.pt-billing__rows dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pt-billing__manage {
  margin-top: 14px;
}

.pt-billing__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.pt-billing__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pt-billing__tile.is-current {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* A fixed height that fits the "Best value" pill, so both prices line up. */
.pt-billing__tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 26px;
  font-size: 14px;
}

.pt-billing__price {
  margin: 4px 0 0;
  color: var(--text-muted);
}

.pt-billing__amount {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pt-billing__detail,
.pt-billing__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.pt-billing__hint {
  margin-top: 10px;
}

.pt-billing__tile .btn {
  width: 100%;
  margin: 8px 0 2px;
}

.pt-billing .btn:disabled {
  color: var(--text-muted);
  background: var(--surface-sunken);
  cursor: default;
}

/* ─────────────────────────────────────────────────────────────────────────
   Strategies › Positively Geared (site/positively_geared.js)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* One colour per strategy (brief): Positively Geared's marks its view. */
  --strategy-positively-geared: #1f7a8c;
}

.pg-unavailable[hidden],
.pg-page[hidden],
.pg-wf__tip[hidden],
.pg-view [hidden] {
  display: none !important;
}

.pg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}

.pg-flagged-count {
  color: var(--text-faint);
}

/* The assumptions strip above the table. */
.pg-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 6px 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: 13px;
  color: var(--text-muted);
}

.pg-strip__field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pg-strip__field input,
.pg-state-costs input {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.pg-strip__suffix {
  color: var(--text-faint);
}

.pg-strip__link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.pg-strip__note {
  margin-left: auto;
  color: var(--text-faint);
  font-size: 12px;
}

.pg-verdict {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.pg-verdict--positive { background: var(--success-bg); color: var(--success); }
.pg-verdict--neutral { background: var(--warning-bg); color: var(--warning); }
.pg-verdict--negative { background: var(--danger-bg); color: var(--danger); }

/* Where a row's rent came from. */
.pg-source {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f1f4;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.pg-source--appraisal,
.pg-source--current_lease { background: var(--success-bg); color: var(--success); }
.pg-source--leased_comps,
.pg-source--bond { background: #eef0fb; color: #4a56b8; }
.pg-source--suburb_median { background: var(--warning-bg); color: var(--warning); }
.pg-source--custom { background: #f3e8ff; color: #7c3aed; }

.pg-muted {
  color: var(--text-faint);
  font-size: 12px;
}

.pg-edited {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #7c3aed;
  font-size: 10.5px;
  font-weight: 600;
}

/* The listing view. */
.pg-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.pg-view__top {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
}

.pg-view__star {
  margin-left: auto;
}

.pg-view__flags:empty {
  display: none;
}

.pg-flag {
  margin: 0 0 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 13px;
  line-height: 1.5;
}

.pg-hero {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--strategy-positively-geared);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.pg-hero__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
}

.pg-hero--positive .pg-hero__value { color: var(--success); }
.pg-hero--negative .pg-hero__value { color: var(--danger); }

.pg-hero__unit {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
}

.pg-hero__text {
  margin-top: 6px;
  max-width: 820px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Yield waterfall: one accent for yields, the faint grey for costs, the
   verdict's status colour (with its label) for the result. */
.pg-waterfall {
  position: relative;
  padding: 10px 14px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pg-waterfall:empty {
  display: none;
}

.pg-wf {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-family);
}

.pg-wf__label { fill: var(--text-muted); font-size: 12.5px; }
.pg-wf__label--strong { fill: var(--text); font-weight: 600; }
.pg-wf__value { fill: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pg-wf__value--strong { fill: var(--text); font-weight: 600; }
.pg-wf__tick { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.pg-wf__zero,
.pg-wf__link { stroke: var(--hairline-header); stroke-width: 1; }
.pg-wf__ref { stroke: var(--text); stroke-width: 2; }
.pg-wf__ref-label { fill: var(--text-muted); font-size: 10.5px; }
.pg-wf__hit { fill: transparent; }
.pg-wf__row { cursor: default; }
.pg-wf__row:hover .pg-wf__hit,
.pg-wf__row:focus .pg-wf__hit { fill: var(--surface-hover); }
.pg-wf__row:focus { outline: none; }
.pg-wf__bar--total { fill: var(--primary); }
.pg-wf__bar--cost { fill: var(--text-faint); }
.pg-wf__bar--positive { fill: var(--success); }
.pg-wf__bar--negative { fill: var(--danger); }
.pg-wf__bar--neutral { fill: var(--warning); }

.pg-wf__tip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-dropdown);
  font-size: 12.5px;
  pointer-events: none;
}

.pg-wf__tip strong { color: var(--text); }
.pg-wf__tip span { color: var(--text-muted); }
.pg-wf__tip .pg-wf__tip-detail { color: var(--text-faint); font-size: 11.5px; }

.pg-view__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

@media (max-width: 900px) {
  .pg-view__grid { grid-template-columns: 1fr; }
  .pg-hero__value { font-size: 34px; }
  .pg-strip__note { margin-left: 0; }
}

.pg-view__card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.pg-view__card h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.pg-view__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pg-rent-inputs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pg-rent-source {
  max-width: 230px;
}

.pg-quote {
  margin: 4px 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.pg-state-costs {
  margin-top: 8px;
}

.assumptions-field select.qb-select {
  max-width: 260px;
}