:root{
  --surface-1:      #fcfcfb;
  --page-plane:     #f2f1ee;
  --card:           #ffffff;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);

  --series-1: #2a78d6;
  --series-2: #1baf7a;
  --series-3: #eda100;
  --series-4: #008300;
  --series-5: #4a3aa7;
  --series-6: #e34948;
  --series-7: #e87ba4;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11,11,11,0.04), 0 8px 24px rgba(11,11,11,0.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --card:           #201f1e;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);

    --series-1: #3987e5;
    --series-2: #199e70;
    --series-3: #c98500;
    --series-4: #1fa31f;
    --series-5: #9085e9;
    --series-6: #e66767;
    --series-7: #d55181;

    --good: #0ca30c;
    --warning: #fab219;
    --critical: #d03b3b;
  }
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page-plane);
  color: var(--text-primary);
  line-height: 1.4;
}

/* Nav */
nav.app-nav{
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 32px 0;
  display:flex;
  gap:10px;
}
nav.app-nav a{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  transition: background .15s, color .15s;
}
nav.app-nav a .he{
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  unicode-bidi: isolate;
}
nav.app-nav a.active{
  background: var(--series-1);
  color: #fff;
  border-color: transparent;
}
nav.app-nav a.active .he{ color: rgba(255,255,255,0.85); }
nav.app-nav a:hover:not(.active){ background: var(--surface-1); }

header.top{
  padding: 20px 32px 20px;
  max-width: 1400px;
  margin: 0 auto;
}
header.top h1{
  font-size: 26px;
  margin: 0 0 2px;
  font-weight: 700;
}
header.top .he-title{
  font-size: 15px;
  color: var(--text-secondary);
  unicode-bidi: isolate;
  display:block;
}
header.top p{
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 720px;
}

.layout{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  aside.dashboard{ position: static !important; order: -1; }
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.card h2{
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.card h2 .badge{
  width: 22px; height:22px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#fff;
  flex: none;
}
.card .he-h2{
  font-size: 12.5px;
  color: var(--text-muted);
  unicode-bidi: isolate;
  display:block;
  margin-bottom: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.field-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
}
@media (max-width: 620px){ .field-grid{ grid-template-columns: 1fr; } }

.sub-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
}
@media (max-width: 620px){ .sub-grid{ grid-template-columns: 1fr; } }

select.method-select{
  width:100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  margin-top:6px;
  font-family: inherit;
}

.field{ display:flex; flex-direction:column; }
.field label{
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.field label .he{
  display:block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  unicode-bidi: isolate;
  margin-top: 1px;
}
.input-wrap{
  position: relative;
  margin-top: 6px;
}
.input-wrap input{
  width: 100%;
  padding: 9px 46px 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s;
}
.input-wrap input.has-unit-toggle{
  padding-right: 56px;
}
.input-wrap select.unit-toggle{
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
}
.input-wrap input:focus{
  outline: none;
  border-color: var(--series-1);
}
.input-wrap input.invalid{
  border-color: var(--critical);
}
.input-wrap .unit{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--text-muted);
  pointer-events: none;
}
.field .error-msg{
  font-size: 11px;
  color: var(--critical);
  margin-top: 3px;
  min-height: 14px;
}

/* Dashboard */
aside.dashboard{
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
@media (max-width: 980px){
  aside.dashboard{ max-height: none; overflow-y: visible; }
}

.stat-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.stat-tile{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.stat-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,11,11,0.08);
}
.stat-tile .label{
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stat-tile .label .he{
  display:block;
  font-size: 11px;
  text-transform: none;
  font-weight: 400;
  color: var(--text-muted);
  unicode-bidi: isolate;
  margin-top:1px;
}
.stat-tile .value{
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-tile.hero{
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--series-1), #1c5cab);
  border: none;
}
.stat-tile.hero .label, .stat-tile.hero .label .he{ color: rgba(255,255,255,0.85); }
.stat-tile.hero .value{ color:#fff; font-size: 30px; }
.stat-tile.hero .value .sub{ font-size: 15px; font-weight:600; margin-left:8px; opacity:.9; }

.stat-tile .value.good{ color: var(--good); }
.stat-tile .value.critical{ color: var(--critical); }

/* Chart blocks */
.chart-block{ margin-top: 18px; }
.chart-block .chart-title{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.chart-block .chart-title .he{
  font-size:11.5px; font-weight:400; color:var(--text-muted); unicode-bidi:isolate; display:block; margin-bottom:10px;
}
.table-toggle{
  background:none;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 10px;
  color: var(--text-secondary);
  cursor: pointer;
  float: right;
  margin-top: -32px;
}
.table-toggle:hover{ background: var(--surface-1); }

.stack-bar{
  display:flex;
  width:100%;
  height: 44px;
  border-radius: 4px;
  overflow:hidden;
  background: var(--gridline);
}
.stack-bar .seg{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 11.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  border-right: 2px solid var(--surface-1);
  transition: width .25s ease;
}
.stack-bar .seg:last-child{ border-right:none; }

.legend{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 12px;
}
.legend .item{ display:flex; align-items:center; gap:6px; color: var(--text-secondary); }
.legend .swatch{ width:10px; height:10px; border-radius:2px; flex:none; }
.legend .amt{ font-weight:700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

table.data-table{
  width:100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 10px;
}
table.data-table th, table.data-table td{
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gridline);
}
table.data-table th{ color: var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; }
table.data-table td{ font-variant-numeric: tabular-nums; }

/* Meter */
.meter-row{ display:flex; gap:14px; margin-top: 18px; flex-wrap: wrap; }
.meter{
  flex:1;
  min-width: 160px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.meter .m-label{ font-size:11.5px; font-weight:600; color: var(--text-muted); text-transform:uppercase; letter-spacing:.02em;}
.meter .m-label .he{ display:block; font-weight:400; text-transform:none; unicode-bidi:isolate; }
.meter .m-value{
  display:flex; align-items:baseline; gap:6px; margin: 6px 0 8px; flex-wrap: wrap;
}
.meter .m-value .num{ font-size:20px; font-weight:700; font-variant-numeric: tabular-nums; }
.meter .m-value .status-pill{
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.track{
  height:8px;
  border-radius:4px;
  background: var(--gridline);
  overflow:hidden;
}
.track .fill{
  height:100%;
  border-radius:4px;
  transition: width .25s ease, background .25s ease;
}

/* Bar rows (returns comparison) */
.bar-rows{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.bar-row{ display:grid; grid-template-columns: 120px 1fr 64px; align-items:center; gap:10px; }
.bar-row .b-label{ font-size:12px; color:var(--text-secondary); }
.bar-row .b-label .he{ display:block; font-size:10.5px; color:var(--text-muted); unicode-bidi:isolate; }
.bar-row .b-track{ height:14px; background:var(--gridline); border-radius:4px; overflow:hidden; }
.bar-row .b-fill{ height:100%; background: var(--series-1); border-radius:4px; transition: width .25s ease; min-width:2px; }
.bar-row .b-val{ font-size:12.5px; font-weight:700; text-align:right; font-variant-numeric: tabular-nums; }

footer.note{
  max-width:1400px;
  margin: 0 auto;
  padding: 0 32px 40px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Accordion (collapsed-by-default detail panel, e.g. Refinance Closing Costs) */
.accordion{
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
}
.accordion-toggle{
  width:100%; display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:var(--card); border:none; cursor:pointer; text-align:left; font-family:inherit;
}
.accordion-toggle-label{ font-size:13px; font-weight:600; flex:1; display:flex; flex-direction:column; color:var(--text-primary); }
.accordion-toggle-label .he{ font-size:11.5px; font-weight:400; color:var(--text-muted); unicode-bidi:isolate; }
.accordion-toggle-summary{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--series-5); white-space:nowrap; }
.accordion-chevron{ transition:transform .15s ease; color:var(--text-muted); flex:none; }
/* Direct-child combinators (not plain descendant) so accordions can nest —
   an outer accordion being open must not force-open inner ones too. */
.accordion.open > .accordion-toggle .accordion-chevron{ transform:rotate(180deg); }
.accordion-panel{ display:none; padding:16px 14px 4px; border-top:1px solid var(--border); }
.accordion.open > .accordion-panel{ display:block; }
.accordion-category{ margin-bottom:18px; }
.accordion-category-title{ font-size:12px; font-weight:700; margin-bottom:10px; color:var(--text-secondary); }
.accordion-category-title .he{ display:block; font-weight:400; font-size:11px; color:var(--text-muted); unicode-bidi:isolate; margin-top:1px; }

/* Closing-document PDF upload (inside a closing-costs accordion) */
.closing-upload-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:16px; border-bottom:1px dashed var(--gridline); }
.closing-upload-btn{
  font-size:12px; font-weight:700; padding:8px 14px; border-radius:999px;
  border:1px solid var(--series-1); background:var(--card); color:var(--series-1);
  cursor:pointer; font-family:inherit; display:inline-flex; flex-direction:column; align-items:center; line-height:1.2;
}
.closing-upload-btn .he{ font-weight:400; font-size:10px; unicode-bidi:isolate; }
.closing-upload-btn:hover{ background:var(--series-1); color:#fff; }
.closing-upload-status{ font-size:11.5px; color:var(--text-muted); }
.closing-upload-status.success{ color:var(--good); }
.closing-upload-status.warning{ color:var(--warning); }
.closing-upload-status.error{ color:var(--critical); }
.input-wrap input.auto-filled{ border-color:var(--good); background:rgba(12,163,12,0.08); }

/* Documents Dashboard (documents.js) — top-level uses the shared .accordion
   pattern above; each category is itself a nested .accordion (toned down
   with .accordion-nested) inside the top panel. */
.accordion-nested{ background:var(--card); margin-bottom:10px; }
.accordion-nested:last-child{ margin-bottom:0; }
.accordion-nested .accordion-toggle{ background:var(--surface-1); padding:10px 12px; }
.accordion-nested .accordion-toggle-label{ font-size:12.5px; }
.accordion-nested .accordion-panel{ padding:12px; }
.doc-no-deal{ font-size:13px; color:var(--text-muted); padding:20px; text-align:center; background:var(--surface-1); border-radius:var(--radius-md); }

.doc-rows{ display:flex; flex-direction:column; gap:10px; }
.doc-row{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; background:var(--surface-1); }
.doc-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.doc-row-label{ font-size:12.5px; font-weight:600; flex:1; min-width:160px; display:flex; align-items:center; gap:6px; }
.doc-source-icon{ flex:none; font-size:12px; }
.doc-row-controls{ display:flex; align-items:center; gap:6px; flex:none; flex-wrap:wrap; }
.doc-category-select, .doc-status-select, .unassigned-category-select{
  border:1px solid var(--border); font-size:10.5px; font-weight:600; border-radius:999px; padding:4px 10px;
  cursor:pointer; appearance:none; -webkit-appearance:none; font-family:inherit; background:var(--card); color:var(--text-primary);
  max-width:180px;
}
.doc-status-select{ border:none; color:#fff; }
.doc-status-select option{ color:#000; background:#fff; }
.doc-row-meta{ font-size:10.5px; color:var(--text-muted); margin-top:4px; }
.doc-row-filename{ font-style:italic; opacity:0.8; }
.doc-row-summary{ line-height:1.4; }
.doc-row-footer{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.doc-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.doc-row-actions button, .doc-row-actions label, .doc-upload-label{
  font-size:11px; padding:5px 12px; cursor:pointer; margin:0;
}
.doc-row-actions button.danger-hover:hover, .doc-row-actions .danger-hover:hover{ background:var(--critical); color:#fff; border-color:transparent; }
.doc-notes-input, .unassigned-title-input{
  flex:1; min-width:160px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text-primary); font-size:11.5px; font-family:inherit;
}
.doc-badge{
  flex:none; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:0.03em; line-height:1.6;
}
.doc-badge .he{ text-transform:none; letter-spacing:normal; }
.doc-badge-ai{ background:rgba(124,58,237,0.15); color:#7c3aed; }
.doc-badge-manual{ background:rgba(107,114,128,0.15); color:var(--text-muted); }
.doc-move-row{
  align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--gridline);
}
.doc-move-row select{
  flex:1; min-width:200px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text-primary); font-size:11.5px; font-family:inherit;
}

/* Gmail/Drive scan panel + Unassigned Documents (docScan.js) */
.scan-panel-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.scan-status{ font-size:12px; color:var(--text-secondary); margin-top:10px; line-height:1.5; }
.scan-error{ font-size:12px; color:var(--critical); margin-top:8px; line-height:1.5; }
.drawer-status-line{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); }
.drawer-status-dot{ width:9px; height:9px; border-radius:50%; background:var(--text-muted); flex:none; }
.drawer-status-dot.connected{ background:var(--good); }
.drawer-status-dot.error{ background:var(--critical); }
.drawer-status-dot.connecting{ background:var(--warning); }
.unassigned-assign-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px dashed var(--gridline); }
.unassigned-property-select{
  flex:1; min-width:200px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text-primary); font-size:11.5px; font-family:inherit;
}
.llc-picker-label{ font-size:12.5px; font-weight:600; }
.activity-log-table-wrap{ overflow-x:auto; }
.activity-log-table{ width:100%; border-collapse:collapse; font-size:11.5px; white-space:nowrap; }
.activity-log-table th, .activity-log-table td{ padding:6px 10px; text-align:left; border-bottom:1px solid var(--border); }
.activity-log-table th{ color:var(--text-muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:0.02em; }
.activity-log-table tr.activity-log-row-error td{ color:var(--critical); }
.llc-picker-select{
  flex:1; min-width:200px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text-primary); font-size:11.5px; font-family:inherit;
}

/* Dynamic "Other" line items */
.other-items-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.other-item-row{ display:flex; align-items:center; gap:8px; }
.other-item-row .oi-label{
  flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--text-primary); font-size:13px; font-family:inherit;
}
.other-item-row .oi-amount-wrap{ display:flex; align-items:center; gap:4px; flex:none; }
.other-item-row .oi-amount{
  width:100px; padding:8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-1); color:var(--text-primary); font-size:13px; font-variant-numeric:tabular-nums;
}
.other-item-row .oi-type{
  padding:8px 4px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text-secondary); font-size:12px; font-weight:600; font-family:inherit;
}
.other-item-row .oi-remove{
  flex:none; background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-muted); cursor:pointer; padding:7px 10px; font-size:13px;
}
.other-item-row .oi-remove:hover{ background:var(--critical); color:#fff; border-color:transparent; }
.add-other-btn{
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px;
  border:1px solid var(--series-1); background:var(--card); color:var(--series-1);
  cursor:pointer; font-family:inherit; display:inline-flex; flex-direction:column; align-items:center; line-height:1.2;
}
.add-other-btn .he{ font-weight:400; font-size:10px; unicode-bidi:isolate; }
.add-other-btn:hover{ background:var(--series-1); color:#fff; }
@media (max-width: 620px){
  .other-item-row{ flex-wrap:wrap; }
  .other-item-row .oi-label{ flex-basis:100%; }
}

/* Room-by-room renovation estimator */
.reno-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.reno-toolbar-label{ font-size:12.5px; font-weight:700; color:var(--text-muted); margin-right:4px; }
.reno-toolbar-label .he{ display:block; font-weight:400; font-size:11px; unicode-bidi:isolate; }
.add-room-btn{
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--series-1);
  background:var(--card);
  color:var(--series-1);
  cursor:pointer;
  font-family:inherit;
}
.add-room-btn:hover{ background:var(--series-1); color:#fff; }

.room-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:14px;
  overflow:hidden;
  background:var(--surface-1);
}

.rooms-scroll{
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 10px 0;
  background: var(--page-plane);
}
.rooms-scroll .room-card:last-child{ margin-bottom: 10px; }
.room-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 14px;
  background: var(--card);
  border-bottom:1px solid var(--border);
}
.room-name{
  font-size:13.5px;
  font-weight:700;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-primary);
  padding:4px 6px;
  border-radius:6px;
  min-width:100px;
  flex:1;
  font-family: inherit;
}
.room-name:hover, .room-name:focus{ border-color:var(--border); background:var(--surface-1); outline:none; }
.room-type-tag{ font-size:11px; color:var(--text-muted); background:var(--gridline); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.room-subtotal-tag{ font-size:13px; font-weight:700; margin-left:auto; font-variant-numeric:tabular-nums; }
.room-collapse-btn, .room-remove-btn{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  font-family:inherit;
  color:var(--text-secondary);
}
.room-remove-btn:hover{ background:var(--critical); color:#fff; border-color:transparent; }
.room-collapse-btn:hover{ background:var(--gridline); }
.room-card-body{ padding:6px 14px 10px; }
.room-card.collapsed .room-card-body{ display:none; }

.reno-section-title{
  font-size:13px;
  font-weight:700;
  margin: 20px 0 10px;
  padding-top:14px;
  border-top:1px solid var(--gridline);
}
.reno-section-title .he{ display:block; font-size:11.5px; font-weight:400; color:var(--text-muted); unicode-bidi:isolate; }

.ri-row{
  display:grid;
  grid-template-columns: 1.5fr 1.3fr 0.9fr 0.9fr 0.9fr;
  gap:10px;
  align-items:center;
  padding:7px 4px;
  border-bottom:1px solid var(--gridline);
  font-size:12.5px;
}
.ri-row:last-child{ border-bottom:none; }
.ri-row-header{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
.ri-row-header .he{ display:block; font-weight:400; text-transform:none; unicode-bidi:isolate; }
.ri-label{ font-weight:600; }
.ri-label .he{ display:block; font-weight:400; font-size:11px; color:var(--text-muted); unicode-bidi:isolate; }
.ri-material{
  width:100%;
  font-size:12px;
  padding:5px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-family:inherit;
}
.ri-price-wrap{ display:flex; align-items:center; gap:4px; }
.ri-unit-prefix{ font-size:12px; color:var(--text-muted); }
.ri-price{
  width:100%;
  font-size:12.5px;
  padding:5px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.ri-qty-wrap{ display:flex; align-items:center; gap:4px; }
.ri-qty{
  width:100%;
  font-size:12.5px;
  padding:5px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.ri-unit{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; }
.ri-cost{ font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width: 820px){
  .ri-row{ grid-template-columns: 1fr 1fr; row-gap:6px; }
  .ri-row > *:first-child{ grid-column: 1 / -1; }
  .ri-row-header{ display:none; }
}

.reno-subtotal{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 6px;
  font-size: 13px;
  font-weight:700;
}
.reno-subtotal .he{ font-weight:400; color:var(--text-muted); font-size:11.5px; unicode-bidi:isolate; display:block; }
.reno-subtotal .amt{ font-variant-numeric: tabular-nums; font-size:16px; }

/* Block-color tones — ties a block's ending total (and any dashboard tile
   reporting that block's figure) back to that block's badge color */
.reno-subtotal.tone-1{ background:var(--series-1); border-color:transparent; color:#fff; }
.reno-subtotal.tone-2{ background:var(--series-2); border-color:transparent; color:#fff; }
.reno-subtotal.tone-3{ background:var(--series-3); border-color:transparent; color:#fff; }
.reno-subtotal.tone-4{ background:var(--series-4); border-color:transparent; color:#fff; }
.reno-subtotal.tone-5{ background:var(--series-5); border-color:transparent; color:#fff; }
.reno-subtotal.tone-6{ background:var(--series-6); border-color:transparent; color:#fff; }
.reno-subtotal.tone-7{ background:var(--series-7); border-color:transparent; color:#fff; }
.reno-subtotal.tone-1 .he, .reno-subtotal.tone-2 .he, .reno-subtotal.tone-3 .he,
.reno-subtotal.tone-4 .he, .reno-subtotal.tone-5 .he, .reno-subtotal.tone-6 .he,
.reno-subtotal.tone-7 .he{ color:rgba(255,255,255,.85); }

.stat-tile .value.tone-1{ color:var(--series-1); }
.stat-tile .value.tone-2{ color:var(--series-2); }
.stat-tile .value.tone-3{ color:var(--series-3); }
.stat-tile .value.tone-4{ color:var(--series-4); }
.stat-tile .value.tone-5{ color:var(--series-5); }
.stat-tile .value.tone-6{ color:var(--series-6); }
.stat-tile .value.tone-7{ color:var(--series-7); }

/* Saved deals */
.deals-wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.deals-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.deals-row .field{ flex:1; min-width:220px; }

.btn-primary, .btn-secondary{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.25;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight:700;
  cursor:pointer;
  border: 1px solid var(--border);
  white-space:nowrap;
  font-family: inherit;
}
.btn-primary .he, .btn-secondary .he{ font-size:10.5px; font-weight:400; unicode-bidi:isolate; }
.btn-primary{ background: var(--series-1); color:#fff; border-color: transparent; }
.btn-primary:hover{ filter: brightness(0.92); }
.btn-primary .he{ color: rgba(255,255,255,0.85); }
.btn-secondary{ background: var(--surface-1); color: var(--text-primary); }
.btn-secondary:hover{ background: var(--gridline); }

.saved-list{ margin-top: 16px; display:flex; flex-direction:column; gap:8px; }
.deal-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding: 10px 14px;
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap:wrap;
}
.deal-row.active{ border-color: var(--series-1); }
.deal-row .deal-info{ display:flex; flex-direction:column; min-width:160px; }
.deal-row .deal-title{ font-weight:700; font-size:13.5px; }
.deal-row .deal-meta{ font-size:11.5px; color:var(--text-muted); }
/* Sits immediately right of deal-info; deal-actions gets margin-left:auto
   below so all remaining row space collects before the buttons, not here. */
.deal-thumb{ flex:none; }
.deal-thumb-link{
  display:block; width:240px; height:60px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border); background:var(--card);
}
.deal-thumb-link:not(.disabled){ cursor:pointer; }
.deal-thumb-link.disabled{ cursor:default; pointer-events:none; }
.deal-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
.deal-thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4px; font-size:10.5px; line-height:1.3; color:var(--text-muted);
}
.deal-thumb-placeholder .he{ display:block; font-size:9.5px; margin-top:2px; unicode-bidi:isolate; }
.deal-row .deal-actions{ display:flex; gap:8px; margin-left:auto; }
.deal-row .deal-actions button{
  font-size:11.5px;
  padding: 5px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--card);
  cursor:pointer;
  font-family: inherit;
}
.deal-row .deal-actions button.danger:hover{ background: var(--critical); color:#fff; border-color:transparent; }
.deal-row .deal-actions button.open-btn:hover{ background: var(--series-1); color:#fff; border-color:transparent; }
.deal-row .deal-actions button.zillow-btn:hover{ background: var(--series-2); color:#fff; border-color:transparent; }

/* Automatic property photo widget (propertyImage.js) — a fixed-size,
   landscape (~240x60) thumbnail meant to sit inline to the right of an
   address field, so it never adds meaningful height to the row/card it's
   in. Used on every calculator page next to the address field, and in the
   pipeline modal. Clickable through to Google Street View once resolved. */
.pp-widget{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; }
.pp-thumb-frame{
  width:240px; height:60px; flex:none; border-radius:10px; overflow:hidden;
  background:var(--surface-1); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.pp-thumb-frame:not(.disabled){ cursor:pointer; }
.pp-thumb-frame.disabled{ cursor:default; pointer-events:none; }
.pp-thumb-frame .pp-img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-thumb-frame .pp-icon{ display:flex; font-size:22px; color:var(--text-muted); opacity:.6; }
.property-photo-setup{ font-size:11px; color:var(--text-secondary); }
.property-photo-setup summary{
  cursor:pointer; color:var(--text-muted); list-style:none; text-align:center; font-size:12px;
}
.property-photo-setup summary::-webkit-details-marker{ display:none; }
/* Positioned as a floating popover (not in normal flow) so opening it never
   pushes the address row/card taller. */
.property-photo-setup .setup-fields{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  position:absolute; top:100%; right:0; margin-top:6px; z-index:20; width:260px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:10px; box-shadow:0 8px 24px rgba(11,11,11,.18);
}
.property-photo-setup .input-wrap{ flex:1; min-width:180px; margin-top:0; }
.property-photo-hint{ flex-basis:100%; font-size:11px; color:var(--text-muted); line-height:1.5; margin-top:2px; }

/* Shared landscape (~240x60) Street View thumbnail used everywhere a saved
   property's photo is displayed (pipeline table Agent column, expanded
   details, documents drawer). Clickable through to Google Street View once
   resolved; shows a small placeholder otherwise. */
.sv-thumb-link{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:240px; height:60px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface-1);
}
.sv-thumb-link:not(.disabled){ cursor:pointer; }
.sv-thumb-link.disabled{ cursor:default; pointer-events:none; }
.sv-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4px; font-size:10.5px; line-height:1.3; color:var(--text-muted);
}
.sv-thumb-placeholder .he{ display:block; font-size:9.5px; margin-top:2px; unicode-bidi:isolate; }

/* Stat-tile detail popup — explains how a dashboard total is built,
   color-coding each contributing item to the block it came from */
.tile-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(11,11,11,.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.tile-modal-overlay.open{ display: flex; }
.tile-modal{
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 26px 22px;
}
.tile-modal .modal-close-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 6px;
}
.tile-modal .modal-close-btn:hover{ background: var(--surface-1); }
.tile-modal h3{ font-size: 18px; margin: 0 2px 2px; padding-right: 20px; }
.tile-modal .modal-he{
  font-size: 13px;
  color: var(--text-muted);
  unicode-bidi: isolate;
  display: block;
  margin: 0 2px 16px;
}
.breakdown-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13.5px;
}
.breakdown-row .breakdown-label{ display: flex; align-items: flex-start; gap: 8px; }
.breakdown-row .breakdown-label .swatch{
  width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: 4px;
}
.breakdown-row .breakdown-label .he{
  display: block; font-size: 11px; color: var(--text-muted); unicode-bidi: isolate;
}
.breakdown-row .breakdown-amt{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.breakdown-result{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px solid var(--border);
  font-weight: 700;
  font-size: 16px;
}
.breakdown-result .he{
  display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); unicode-bidi: isolate;
}
.tile-modal .formula-note{
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--gridline);
}
.empty-hint{ font-size:12.5px; color:var(--text-muted); padding: 6px 2px; }