:root {
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --border: #dde1e6;
  --text: #1c2126;
  --muted: #6b7480;
  --accent: #1a5fb4;
  --btn-bg: #1857a6; --btn-edge: #1857a6; --btn2-bg: #525963; --btn2-edge: #525963;
  --go: #1e7d32;
  --caution: #b8860b;
  --pass: #a01818;
  --radius: 8px;
  --fs-scale: 1;
}

/* ---------- Themes ---------- */
html[data-theme="paper"] {
  --bg: #f5f6f8; --card-bg: #ffffff; --border: #dde1e6; --text: #1c2126; --muted: #6b7480;
  --accent: #1a5fb4; --go: #1e7d32; --caution: #b8860b; --pass: #a01818;
  --btn-bg: #1857a6; --btn-edge: #1857a6; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="linen"] {
  --bg: #f6f1e7; --card-bg: #fffdf8; --border: #e4dcc8; --text: #2b2620; --muted: #7a715f;
  --accent: #a3672b; --go: #2f7d3a; --caution: #b8860b; --pass: #a3341e;
  --btn-bg: #7c4e21; --btn-edge: #7c4e21; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="lavender"] {
  --bg: #f3f1fa; --card-bg: #ffffff; --border: #d9d4ec; --text: #221f33; --muted: #6a6486;
  --accent: #5b3fc4; --go: #1e7d32; --caution: #b8860b; --pass: #a01818;
  --btn-bg: #5b3fc4; --btn-edge: #5b3fc4; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="ink"] {
  --bg: #14171c; --card-bg: #1c2128; --border: #616b7a; --text: #e7e9ec; --muted: #9aa4b0;
  --accent: #5b9df5; --go: #4caf6e; --caution: #d8a94a; --pass: #e2685f;
  --btn-bg: #34598c; --btn-edge: #5b9df5; --btn2-bg: #525963; --btn2-edge: #9aa4b0;
}
html[data-theme="slate"] {
  --bg: #171d29; --card-bg: #1e2635; --border: #62708a; --text: #e6ebf2; --muted: #94a3b8;
  --accent: #6db1f2; --go: #55b788; --caution: #e0b84f; --pass: #ea7a72;
  --btn-bg: #385a7b; --btn-edge: #6db1f2; --btn2-bg: #525963; --btn2-edge: #94a3b8;
}
html[data-theme="espresso"] {
  --bg: #1d1712; --card-bg: #26201a; --border: #75695b; --text: #ece4d8; --muted: #b3a08a;
  --accent: #e0a458; --go: #7fbf6a; --caution: #e0b23a; --pass: #e2766a;
  --btn-bg: #70522c; --btn-edge: #e0a458; --btn2-bg: #525963; --btn2-edge: #b3a08a;
}

/* Additional themes (light first, then dark). Each is derived from one base palette; buttons meet WCAG AAA. */
html[data-theme="newsprint"] {
  --bg: #dddbd4; --card-bg: #ecebe6; --border: #c1c1bd; --text: #202124; --muted: #54555a;
  --accent: #2f4f7a; --go: #176a2a; --caution: #7d5a00; --pass: #a01818;
  --btn-bg: #2f4f7a; --btn-edge: #2f4f7a; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="wash"] {
  --bg: #dbe8f2; --card-bg: #f2f7fb; --border: #c6ccd1; --text: #17212b; --muted: #516070;
  --accent: #2b6a99; --go: #1e7d32; --caution: #7d5a00; --pass: #a01818;
  --btn-bg: #255c85; --btn-edge: #255c85; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="vermilion"] {
  --bg: #f7dfd3; --card-bg: #fff5f0; --border: #d4c9c4; --text: #2a1913; --muted: #75534a;
  --accent: #c0410f; --go: #1e7d32; --caution: #7d5a00; --pass: #a01818;
  --btn-bg: #9d350c; --btn-edge: #9d350c; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="ochre"] {
  --bg: #f1e4c4; --card-bg: #faf3df; --border: #cfc7b4; --text: #2c2210; --muted: #6d5d34;
  --accent: #8f5f10; --go: #1e7d32; --caution: #7d5a00; --pass: #a01818;
  --btn-bg: #78500d; --btn-edge: #78500d; --btn2-bg: #525963; --btn2-edge: #525963;
}
html[data-theme="indigo"] {
  --bg: #14122b; --card-bg: #1d1a3d; --border: #6a6884; --text: #e8e6f7; --muted: #a09cc8;
  --accent: #8f8cf5; --go: #4caf6e; --caution: #d8a94a; --pass: #e2685f;
  --btn-bg: #53518e; --btn-edge: #8f8cf5; --btn2-bg: #525963; --btn2-edge: #a09cc8;
}
html[data-theme="graphite"] {
  --bg: #25272a; --card-bg: #2f3236; --border: #797b7f; --text: #eceef0; --muted: #a9afb6;
  --accent: #9fb8cf; --go: #4caf6e; --caution: #d8a94a; --pass: #ef7d75;
  --btn-bg: #4e5a65; --btn-edge: #9fb8cf; --btn2-bg: #525963; --btn2-edge: #a9afb6;
}
html[data-theme="oxblood"] {
  --bg: #1f1013; --card-bg: #2b1519; --border: #766465; --text: #f1e4e2; --muted: #b99a97;
  --accent: #e8a48a; --go: #4caf6e; --caution: #d8a94a; --pass: #e2685f;
  --btn-bg: #725044; --btn-edge: #e8a48a; --btn2-bg: #525963; --btn2-edge: #b99a97;
}
html[data-theme="verdigris"] {
  --bg: #0a1f1e; --card-bg: #122c2a; --border: #5f7573; --text: #e3f0ee; --muted: #8fb0ab;
  --accent: #4fc3b0; --go: #4caf6e; --caution: #d8a94a; --pass: #ef7d75;
  --btn-bg: #276158; --btn-edge: #4fc3b0; --btn2-bg: #525963; --btn2-edge: #8fb0ab;
}
html[data-theme="cobalt"] {
  --bg: #0a1a33; --card-bg: #10264a; --border: #61728d; --text: #e6eefb; --muted: #8fa6c9;
  --accent: #5aa0ff; --go: #4caf6e; --caution: #d8a94a; --pass: #e2685f;
  --btn-bg: #31588c; --btn-edge: #5aa0ff; --btn2-bg: #525963; --btn2-edge: #8fa6c9;
}
html[data-theme="ultramarine"] {
  --bg: #0b1038; --card-bg: #121a4d; --border: #61688f; --text: #e8ecff; --muted: #97a3d6;
  --accent: #7f9bff; --go: #4caf6e; --caution: #d8a94a; --pass: #e2685f;
  --btn-bg: #46558c; --btn-edge: #7f9bff; --btn2-bg: #525963; --btn2-edge: #97a3d6;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: calc(14px * var(--fs-scale));
}
.topbar {
  background: var(--card-bg);
  padding: 14px 24px 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.15s ease;
}
/* Only once the page is scrolled, so the bar reads as floating over content. */
.topbar.scrolled { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.topbar h1 { margin: 0 0 14px 0; font-size: calc(18px * var(--fs-scale)); display: flex; align-items: center; gap: 12px; }
.logo {
  display: inline-block; height: 34px; aspect-ratio: 1120 / 444; flex: none;
  background-color: var(--text);
  -webkit-mask: url("/logo/pencil-logo.png") center / contain no-repeat;
  mask: url("/logo/pencil-logo.png") center / contain no-repeat;
}
.muted { color: var(--muted); font-weight: normal; }
.address-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.address-row label { font-size: calc(13px * var(--fs-scale)); color: var(--muted); white-space: nowrap; }
#address-input { flex: 1 1 220px; min-width: 0; max-width: 480px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: calc(14px * var(--fs-scale)); background: var(--card-bg); color: var(--text); }
.reset-btn { margin-left: auto; }

/* Pill tabs: nothing joins them to the page below, so they look the same scrolled or not. */
.tabs { display: flex; gap: 6px; padding: 0 0 10px; }
.tab-btn {
  background: transparent; color: var(--muted); border: 1px solid transparent;
  border-radius: 999px; padding: 6px 16px; font-size: calc(13px * var(--fs-scale)); font-weight: 600;
}
.tab-btn:hover:not(.active) {
  opacity: 1; color: var(--text);
  background: color-mix(in srgb, var(--card-bg) 90%, var(--accent));
}
.tab-btn.active {
  color: var(--text);
  background: color-mix(in srgb, var(--card-bg) 82%, var(--accent));
  border-color: color-mix(in srgb, var(--card-bg) 55%, var(--accent));
}
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-panel.hidden { display: none; }
button {
  padding: 8px 14px; border: 1px solid var(--btn-edge); border-radius: var(--radius); background: var(--btn-bg); color: #fff;
  cursor: pointer; font-size: calc(13px * var(--fs-scale));
}
button:hover { opacity: 0.9; }
button.secondary { background: var(--btn2-bg); border-color: var(--btn2-edge); }
button:disabled { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; }
button:disabled:hover { opacity: 1; }
.status-text { color: var(--muted); font-size: calc(13px * var(--fs-scale)); }
.zillow-link-btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  padding: 3px 8px; border-radius: var(--radius); background: var(--btn2-bg); border: 1px solid var(--btn2-edge); color: #fff;
  font-size: calc(12px * var(--fs-scale));
}
.zillow-link-btn:hover { opacity: 0.9; }

#app { max-width: 1320px; margin: 0 auto; padding: 20px 24px 80px; container: app / inline-size; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; cursor: default; }
.card-header h2 { margin: 0; font-size: calc(15px * var(--fs-scale)); }
.header-toggle { display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs-scale)); color: var(--muted); font-weight: 500; cursor: pointer; white-space: nowrap; }
.collapsible .card-header { cursor: pointer; }
/* Collapsed: drop the header's bottom gap so the heading sits centered, and let the whole card act as the click target. */
.collapsible:not(.open) { cursor: pointer; }
.collapsible:not(.open) > .card-header { margin-bottom: 0; }
.collapsible { transition: background 0.15s ease; }
.collapsible:not(.open):hover { background: var(--bg); background: color-mix(in srgb, var(--card-bg) 90%, var(--accent)); }
.collapsible:not(.open):hover .chevron { color: var(--accent); }
.chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; font-size: calc(22px * var(--fs-scale)); line-height: 1; color: var(--muted);
  border-radius: 50%; transition: transform 0.15s ease, background 0.15s ease;
}
.collapsible.open .card-header:hover .chevron { background: var(--bg); color: var(--accent); }
.collapsible.open .chevron { transform: rotate(90deg); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid .card { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs-scale)); }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: calc(12px * var(--fs-scale)); text-transform: uppercase; }
input[type="text"], input[type="number"], input[type="password"], select {
  width: 100%; height: 30px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: calc(13px * var(--fs-scale));
  font-family: inherit; background: var(--card-bg); color: var(--text);
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7480' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; padding-right: 22px; }
input:disabled, select:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.card-body label { display: flex; flex-direction: column; gap: 3px; font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.hidden { display: none; }

.constants-group { margin-bottom: 18px; }
.constants-group:last-child { margin-bottom: 0; }
.constants-group-title {
  font-size: calc(12px * var(--fs-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--accent); margin: 0 0 8px 0; padding-bottom: 4px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
}
.group-title-link { color: var(--accent); text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: normal; font-size: calc(12.5px * var(--fs-scale)); }
.constants-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 16px; }
.constants-fields label {
  display: flex; flex-direction: column; gap: 3px; font-size: calc(12px * var(--fs-scale)); color: var(--muted); white-space: nowrap;
}
.constants-fields label.hidden { display: none; }
@container app (max-width: 900px) {
  .constants-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .constants-fields label { white-space: normal; }
}
@container app (max-width: 600px) {
  .constants-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pct-input-wrap { position: relative; }
.pct-input-wrap input { padding-right: 22px; }
.pct-input-wrap::after {
  content: "%"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: calc(13px * var(--fs-scale)); pointer-events: none;
}

.secret-input-row { display: flex; gap: 6px; }
.secret-input-row input { flex: 1; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--card-bg); border-radius: var(--radius); padding: 24px; max-width: 420px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal p { margin: 0 0 18px 0; font-size: calc(14px * var(--fs-scale)); line-height: 1.5; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-choice-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.th-with-help, .label-with-help {
  display: inline-flex; align-items: center; gap: 4px;
}
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--text);
  font-size: calc(10px * var(--fs-scale)); font-weight: 700; cursor: help; position: relative;
}
.info-icon:hover { background: var(--btn-bg); color: #fff; }
.copy-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--muted); font-size: calc(13px * var(--fs-scale)); cursor: pointer; position: relative;
}
.copy-icon-btn:hover { background: var(--bg); color: var(--accent); border-color: var(--accent); }
.property-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius); margin-bottom: 10px; display: block; }

.rehab-detail-row td { background: var(--bg); padding: 10px 8px 14px 24px; }
.rehab-items-table { font-size: calc(12.5px * var(--fs-scale)); }
.rehab-items-table th, .rehab-items-table td { padding: 4px 6px; }
.rehab-items-table input[type="number"] { width: 100px; }
.rehab-items-table input[type="checkbox"] { width: auto; }
.rehab-total-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rehab-total-row input[type="number"] { width: 90px; flex: none; }
.rehab-total-row .rehab-subtext { font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.other-item-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.other-item-row input[type="text"] { max-width: 180px; }
.other-item-row input[type="number"] { max-width: 100px; }

.grade-go { color: var(--go); font-weight: 700; }
.grade-caution { color: var(--caution); font-weight: 700; }
.grade-pass { color: var(--pass); font-weight: 700; }
.grade-n\/a { color: var(--muted); }

.confidence-high { color: var(--go); }
.confidence-medium { color: var(--caution); }
.confidence-low, .confidence-none { color: var(--pass); }

.field-list { margin: 0; padding-left: 18px; font-size: calc(12.5px * var(--fs-scale)); }
.field-list li { margin-bottom: 4px; }
.kv { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--border); font-size: calc(13px * var(--fs-scale)); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.link-list a { display: inline-block; margin-right: 10px; font-size: calc(12.5px * var(--fs-scale)); }
.note { font-size: calc(12px * var(--fs-scale)); color: var(--muted); margin-top: 8px; }
.small-btn { padding: 3px 8px; font-size: calc(12px * var(--fs-scale)); }

/* ---------- Scenario metrics sensitivity rows ---------- */
.sens-group-0 td { background: var(--card-bg); }
.sens-group-1 td { background: var(--bg); }
.sens-base-row td { font-weight: 600; }
.sens-scenario-label { vertical-align: top; border-right: 2px solid var(--accent); }

/* ---------- "Real" rehab mode ---------- */
.real-rehab-panel { display: grid; grid-template-columns: 3fr 3fr 4fr; gap: 20px; align-items: start; padding: 4px 0; }
.real-rehab-col-title {
  font-size: calc(12px * var(--fs-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--accent); margin: 0 0 8px 0; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
/* Column is a fixed-height flex shell; only .real-rehab-col-body (the
   photos grid / item list) scrolls — the title and action buttons above it
   stay put, per spec. */
.real-rehab-col { display: flex; flex-direction: column; max-height: 560px; }
.real-rehab-col-body { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; padding-right: 4px; }
.real-rehab-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.real-transcript-box {
  display: block; width: 100%; min-height: 220px; max-height: 400px; overflow-y: auto; resize: vertical;
  font-family: inherit; font-size: calc(13px * var(--fs-scale)); padding: 8px 10px; margin-top: 6px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--text);
}
.real-photos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.real-photo-card { display: flex; flex-direction: column; gap: 4px; contain: layout paint style; }
.real-photo-thumb-wrap { position: relative; contain: layout paint style; }
.real-photo-thumb { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.real-photo-remove-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: none; border-radius: 4px;
  background: rgba(0,0,0,0.55); color: white; font-size: calc(13px * var(--fs-scale)); font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0;
}
.real-photo-thumb-wrap:hover .real-photo-remove-overlay { opacity: 1; }
/* table-layout: fixed + break-word means a long item label wraps onto
   multiple lines within its column instead of forcing the table (and the
   page) to scroll horizontally — the exact thing that broke last time. */
.real-items-table { table-layout: fixed; width: 100%; }
.real-items-table th, .real-items-table td { overflow-wrap: break-word; }
.real-items-table th:nth-child(1), .real-items-table td:nth-child(1) { width: 32%; }
.real-items-table th:nth-child(2), .real-items-table td:nth-child(2) { width: 16%; }
.real-items-table th:nth-child(3), .real-items-table td:nth-child(3) { width: 16%; }
.real-items-table th:nth-child(4), .real-items-table td:nth-child(4) { width: 9%; text-align: center; }
.real-items-table th:nth-child(5), .real-items-table td:nth-child(5) { width: 22%; }
.real-items-table th:nth-child(6), .real-items-table td:nth-child(6) { width: 5%; padding-left: 0; }
.real-items-table td:nth-child(4) input[type="checkbox"] { width: auto; }
@container app (max-width: 900px) {
  .real-rehab-panel { grid-template-columns: 1fr; }
}

.pencil-loader-row { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.pencil-loader { flex: none; color: var(--text); overflow: visible; }

/* ---------- My Notes ---------- */
.notes-box {
  display: block; width: 100%; min-height: 110px; resize: vertical;
  font-family: inherit; font-size: calc(13px * var(--fs-scale)); line-height: 1.45; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--card-bg); color: var(--text);
}

/* Verdict */
.verdict-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 14px; }
.verdict-grid label { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs-scale)); color: var(--muted); font-weight: 500; }
.verdict-grid label.hidden { display: none; }
.verdict-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
.verdict-offer { display: flex; flex-direction: column; gap: 6px; }
.verdict-offer input[type="number"] { width: 100%; max-width: 200px; }
.verdict-offer input[type="number"]:disabled { opacity: 0.5; }
@media (max-width: 900px) { .verdict-grid, .verdict-offers { grid-template-columns: 1fr; } }

/* History filters + inline verdict */
.history-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 4px 0 12px; }
.history-filters label { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs-scale)); color: var(--muted); font-weight: 500; min-width: 170px; }
.history-verdict-select { min-width: 150px; }
.multi-filter { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.multi-filter-label { font-size: calc(13px * var(--fs-scale)); color: var(--muted); font-weight: 500; }
.multi-filter-btn {
  text-align: left; font-family: inherit; font-size: calc(13px * var(--fs-scale)); height: 30px; color: var(--text); cursor: pointer; padding: 4px 22px 4px 6px;
  border: 1px solid var(--border); border-radius: 4px; background-color: var(--card-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7480' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.multi-filter-panel {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; min-width: 100%; padding: 6px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.multi-filter-panel.hidden { display: none; }
.multi-filter-panel label { flex-direction: row; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border-radius: 4px; color: var(--text); white-space: nowrap; cursor: pointer; }
.multi-filter-panel label:hover { background: var(--bg); }
.multi-filter-panel input[type="checkbox"] { margin: 0; }
.multi-filter-clear { display: block; margin: 4px 6px 2px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: calc(12px * var(--fs-scale)); cursor: pointer; text-decoration: underline; }

/* Property card / tax bill popup */
.viewer-panel {
  background: var(--card-bg); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  width: max(75vw, min(640px, 96vw)); height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.viewer-header h3 { margin: 0; font-size: calc(15px * var(--fs-scale)); }
.viewer-body { flex: 1; min-height: 0; overflow: auto; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.viewer-message { padding: 28px; color: var(--muted); }
.tax-view { padding: 16px 20px 24px; font-size: calc(13px * var(--fs-scale)); }
.tax-view h4 { margin: 20px 0 6px; font-size: calc(12px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tax-view table { width: 100%; border-collapse: collapse; }
.tax-view th, .tax-view td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.tax-view th:first-child, .tax-view td:first-child { text-align: left; }
.tax-view th { color: var(--muted); font-weight: 600; }
.tax-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.tax-facts dt { color: var(--muted); }
.tax-facts dd { margin: 0; }
.tax-flag { color: var(--pass); font-weight: 600; }

#scenario-editor { overflow-x: auto; }
.tax-view table { table-layout: auto; }
.tax-view td, .tax-view th { overflow-wrap: anywhere; }

/* ---------- Comparables & ARV ---------- */
.comps-scroll { overflow-x: auto; }
.arv-figure { font-size: calc(22px * var(--fs-scale)); font-weight: 700; color: var(--text); }
.arv-range { color: var(--muted); font-size: calc(13px * var(--fs-scale)); }
/* Two halves: ARV (left) and as-is value compared with your prices (right). */
.value-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2px 0 14px; }
.value-half { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--bg); }
.value-half .note { margin: 6px 0 0; }
.value-label { font-size: calc(11.5px * var(--fs-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.value-half .arv-figure { font-size: calc(24px * var(--fs-scale)); font-weight: 700; color: var(--text); margin: 2px 0; }
.value-half.arv-missing .arv-figure { color: var(--caution); font-size: calc(18px * var(--fs-scale)); }
.asis-compare { margin-top: 8px; }
.asis-compare .kv { max-width: none; }
@media (max-width: 760px) { .value-summary { grid-template-columns: 1fr; } }
/* Search layers: five icons in search order, colored where the search went. */
.comps-search-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.search-layers { display: flex; align-items: center; gap: 16px; flex: 1 1 420px; flex-wrap: wrap; }
.search-layers .note { margin: 0; }
.layer-steps { display: flex; align-items: flex-start; gap: 2px; }
.layer-step { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; border-radius: 8px; padding: 2px 0; }
.layer-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.layer-icon {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border); color: var(--muted); background: var(--card-bg);
}
.layer-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.layer-step.used .layer-icon { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--card-bg) 80%, var(--accent)); }
.layer-step.skipped .layer-icon { border-style: dashed; opacity: 0.55; }
.layer-step:hover .layer-icon { border-width: 2.5px; }
.layer-label { font-size: calc(10.5px * var(--fs-scale)); color: var(--muted); text-align: center; line-height: 1.2; white-space: nowrap; }
.layer-step.used .layer-label { color: var(--text); font-weight: 600; }
.layer-arrow { color: var(--muted); font-size: 18px; line-height: 34px; padding: 0 1px; }
.layer-caption { font-size: calc(13px * var(--fs-scale)); line-height: 1.5; }
.layer-caption-title { font-weight: 700; }
.comps-search-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Bigger Use checkboxes, matching the app's other toggles. */
.comp-check {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex: none; vertical-align: middle;
  border: 2px solid var(--muted); border-radius: 5px; background: var(--card-bg); cursor: pointer; display: inline-grid; place-content: center;
}
.comp-check:hover:not(:disabled) { border-color: var(--accent); }
.comp-check:checked { background: var(--btn-bg); border-color: var(--btn-edge); }
.comp-check:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.comp-check:indeterminate { background: var(--btn-bg); border-color: var(--btn-edge); }
.comp-check:indeterminate::after { content: ""; width: 10px; height: 2.5px; background: #fff; }
.comp-check:disabled { opacity: 0.35; cursor: not-allowed; }
.comp-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auto-comps-table th.use-col { width: 34px; }
/* Zillow's darker brand blue: white text on it meets AAA contrast (about 7.7:1). */
.zillow-link-btn.comp-zillow { padding: 2px 8px; background: #0041D9; border-color: #0041D9; color: #fff; }
.zillow-link-btn.comp-zillow:hover { background: #0033AD; border-color: #0033AD; color: #fff; }
.auto-comps-table td, .auto-comps-table th { padding-left: 5px; padding-right: 5px; }
.auto-comps-table .hood-text { display: inline-block; max-width: 105px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.auto-comps-table td, .auto-comps-table th { white-space: nowrap; }
.auto-comps-table select { width: auto; min-width: 96px; }
.comp-flip-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: calc(11px * var(--fs-scale)); background: var(--accent); color: #fff; }
.refresh-summary { border-left: 4px solid var(--accent); background: var(--bg); border-radius: 6px; padding: 8px 12px; margin: 10px 0 0; font-size: calc(13px * var(--fs-scale)); line-height: 1.5; }
.refresh-summary.hidden { display: none; }
.refresh-summary ul { margin: 4px 0 4px 18px; padding: 0; }
.refresh-summary .refresh-dismiss { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.claude-stale { border-left: 4px solid var(--caution); background: var(--bg); border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; }
.units-editor { margin-top: 12px; }
.units-editor.hidden, #subject-unit-count-wrap.hidden, #subject-beds-wrap.hidden, #subject-baths-wrap.hidden { display: none; }
.units-editor .note { margin: 0 0 6px; }
.units-table { border-collapse: collapse; }
.units-table th { text-align: left; font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); font-weight: 600; padding: 2px 10px 4px 0; }
.units-table td { padding: 3px 10px 3px 0; }
.units-table td:first-child { color: var(--muted); white-space: nowrap; }
.units-table input, .units-table select { width: 110px; }
.unit-rent-inputs { display: flex; flex-direction: column; gap: 4px; }
.unit-rent-inputs label { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.unit-rent-inputs input { width: 100%; min-width: 80px; }
.comp-type-cell { display: inline-flex; align-items: center; gap: 6px; }
.auto-comps-table td.comp-loosened { color: var(--caution); font-weight: 700; }
.auto-comps-table th[data-sort] { cursor: pointer; user-select: none; }
.auto-comps-table th[data-sort] .th-sort { display: inline-block; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
.auto-comps-table th[data-sort]:hover .th-sort { background: var(--border); color: var(--text); }
.auto-comps-table th .sort-arrow { margin-left: 4px; font-size: 0.85em; }
.grade-needs_arv, .grade-needs_rent { color: var(--muted); font-style: italic; }


/* Native controls (date picker icon, etc.) follow the theme's light/dark. */
html { color-scheme: light; }
html[data-theme="ink"], html[data-theme="slate"], html[data-theme="espresso"], html[data-theme="indigo"], html[data-theme="graphite"],
html[data-theme="oxblood"], html[data-theme="verdigris"], html[data-theme="cobalt"], html[data-theme="ultramarine"] { color-scheme: dark; }

/* Tooltip is a single fixed element positioned by JS so section edges can't clip it. */
#app-tooltip {
  position: fixed; z-index: 3000; max-width: 260px; pointer-events: none; opacity: 0; transition: opacity 0.08s;
  background: var(--text); color: var(--card-bg); padding: 8px 10px; border-radius: 6px;
  font-size: calc(11.5px * var(--fs-scale)); font-weight: normal; line-height: 1.4; text-transform: none; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#app-tooltip { max-width: 300px; padding: 10px 12px; }
#app-tooltip .tip-title { font-size: calc(11px * var(--fs-scale)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; margin-bottom: 4px; }
#app-tooltip .tip-key { font-size: calc(14px * var(--fs-scale)); font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
#app-tooltip .tip-detail { font-size: calc(11.5px * var(--fs-scale)); opacity: 0.8; margin-top: 2px; }
#app-tooltip .tip-warn { font-size: calc(12px * var(--fs-scale)); font-weight: 600; margin: 0 0 6px; padding-left: 8px; border-left: 3px solid #f0b429; }
#app-tooltip .tip-body { white-space: pre-line; line-height: 1.45; }
#app-tooltip.visible { opacity: 1; }
#app-tooltip::after {
  content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--text);
}
#app-tooltip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }

/* Show Sensitivity checkbox */
.header-toggle { gap: 10px; font-size: calc(14px * var(--fs-scale)); }
.header-toggle input[type="checkbox"], .settings-enabled input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0;
  border: 2px solid var(--muted); border-radius: 5px; background: var(--card-bg); cursor: pointer;
  display: inline-grid; place-content: center;
}
.header-toggle input[type="checkbox"]:hover { border-color: var(--accent); }
.header-toggle input[type="checkbox"]:checked { background: var(--btn-bg); border-color: var(--btn-edge); }
.header-toggle input[type="checkbox"]:checked::after {
  content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg);
}
.header-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.parcel-notice { border-left: 4px solid var(--caution); background: var(--bg); border-radius: 6px; padding: 8px 12px; margin: 6px 0 10px; font-size: calc(13px * var(--fs-scale)); line-height: 1.45; }
.parcel-notice.hidden { display: none; }
.parcel-notice ul { margin: 0; padding-left: 18px; }

.rent-actions { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; flex-wrap: wrap; }

.settings-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 12px; }
.settings-row > label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.settings-key { flex: 2 1 280px; }
.settings-calls { flex: 1 1 200px; }
.settings-enabled { flex: none; flex-direction: row !important; align-items: center; height: 30px; }

.real-rehab-toggle { background: none; border: none; color: var(--text); font: inherit; font-weight: 600; padding: 4px 6px; margin: 0 0 6px -6px; cursor: pointer; border-radius: 6px; }
.real-rehab-toggle:hover { background: var(--hover, rgba(127,127,127,.15)); }
.real-rehab-toggle .muted { font-weight: 400; }
.real-rehab-chevron { display: inline-block; width: 1em; }
.rehab-detail-row.real-collapsed td { padding-top: 4px; padding-bottom: 4px; }
.rehab-detail-row.real-collapsed .real-rehab-toggle { margin-bottom: 0; }
.note-dismiss { float: right; margin-left: 8px; background: none; border: 0; padding: 0 4px; font-size: 1.2em; line-height: 1; color: inherit; opacity: 0.7; cursor: pointer; border-radius: 4px; }
.note-dismiss:hover { opacity: 1; background: rgba(127,127,127,.2); }

/* Comps map */
.comps-map-wrap { margin: 10px 0 14px; }
.comps-map-wrap.hidden { display: none; }
.comps-map { height: 380px; border-radius: 8px; border: 1px solid var(--border, rgba(127,127,127,.3)); background: var(--bg); display: flex; align-items: center; justify-content: center; }
.comps-map-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; font-size: calc(12.5px * var(--fs-scale)); }
.comps-map-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.dot-renovated { background: #2e9e5b; } .dot-as_is { background: #d98a1c; } .dot-unclear { background: #fff; border: 2px dashed currentColor !important; box-shadow: none !important; }
.dot-ring { background: transparent; border: 2px solid currentColor !important; box-shadow: none !important; }
.dot-radius { background: transparent; border: 1.5px dashed currentColor !important; box-shadow: none !important; width: 16px !important; }
.dot-subject { background: #1c2126; border-radius: 3px !important; }
.subject-pin { background: #1c2126; color: #ffd84d; border: 2px solid #fff; border-radius: 6px; text-align: center; line-height: 22px; font-size: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.leaflet-tooltip.map-tip { background: var(--text); color: var(--card-bg); border: 0; border-radius: 6px; padding: 10px 12px; width: 250px; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: calc(11.5px * var(--fs-scale)); }
.leaflet-tooltip-top.map-tip::before { border-top-color: var(--text); }
.map-tip .tip-title { font-size: calc(11px * var(--fs-scale)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin-bottom: 3px; }
.map-tip .tip-key { font-size: calc(14px * var(--fs-scale)); font-weight: 700; margin-bottom: 4px; }
.map-tip .tip-detail { opacity: .8; margin-top: 2px; }
.comps-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.85) brightness(1.08); }
.comp-row-flash td { animation: compFlash 1.6s ease-out; }
@keyframes compFlash { 0%, 40% { background: rgba(255, 216, 77, 0.55); } 100% { background: transparent; } }
.layer-step.pinned .layer-icon { border-width: 3px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.layer-step.pinned .layer-label { text-decoration: underline; }

/* ---------- Deals ---------- */
button.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
button.link-btn:hover { opacity: 0.8; }
.danger-link, button.link-btn.danger-link { color: var(--pass); }
button.secondary.danger-link { color: var(--pass); }
.deal-start-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; flex-wrap: wrap; }
.deal-start-row select { min-width: 260px; }
.deals-table tr[data-deal] { cursor: pointer; }
.deals-table tr[data-deal]:hover td { background: var(--bg); }
.deal-head .card-header { align-items: flex-start; }
.deal-head h2 { margin-top: 6px; }
.deal-head-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.deal-head-row label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.deal-next-up { margin: 12px 0 0; padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--bg); border-radius: 6px; }
.deal-next-up.overdue { border-left-color: var(--pass); }
.deal-checklist { list-style: none; margin: 0; padding: 0; }
.deal-checklist li { display: grid; grid-template-columns: 1fr auto 70px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.deal-checklist li.done .deal-check > span { color: var(--muted); }
.deal-checklist li.na .deal-check span { color: var(--muted); }
.deal-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.deal-check-due { font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); white-space: nowrap; }
.deal-check-actions { display: flex; gap: 10px; align-items: center; }
.deal-fields { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.from-doc { background: var(--go); color: #fff; border-color: var(--go); }
.deal-terms { margin-top: 12px; font-size: calc(13px * var(--fs-scale)); }
.deal-terms ul { margin: 4px 0 0; padding-left: 18px; }
.deal-upload-row select, .deal-insp-row select, .deal-head-row select { width: auto; }
.deal-upload-row, .deal-insp-row, .deal-lock-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.deal-insp-row label:not(.header-toggle) { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.deal-reneg-toggle { margin-left: 8px; }
.deal-doc-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.deal-quote { font-size: calc(12px * var(--fs-scale)); margin-top: 2px; }
.deal-review-card { border-left: 4px solid var(--caution); }
.deal-review-list { list-style: none; margin: 0; padding: 0; }
.deal-review-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.deal-review-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.deal-insp-table input[type="number"] { width: 100px; }
.sev { font-size: calc(11px * var(--fs-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sev-safety { color: var(--pass); } .sev-major { color: var(--caution); } .sev-minor, .sev-maintenance { color: var(--muted); }
.deal-other-costs { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.deal-cost-row { display: flex; gap: 8px; align-items: center; }
.deal-cost-row input[type="text"] { width: 260px; }
.deal-cost-row input[type="number"] { width: 120px; }
.deal-compare-table td:not(:first-child), .deal-compare-table th:not(:first-child) { text-align: right; }
.deal-log { margin-top: 12px; font-size: calc(13px * var(--fs-scale)); }
.deal-log ul { margin: 6px 0 0; padding-left: 18px; }
.viewer-image { padding: 12px; text-align: center; }
.viewer-image img { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  .deal-checklist li { grid-template-columns: 1fr; gap: 4px; }
  .deal-review-list li { flex-direction: column; align-items: flex-start; }
}
.remove-x { background: none; border: 0; padding: 0 6px; font-size: 1.25em; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 4px; }
.remove-x:hover, .remove-x:focus-visible { color: var(--pass); background: var(--bg); }
.confirm-remove { display: inline-flex; gap: 6px; }
button.danger-btn { background: var(--card-bg); border: 2px solid var(--pass); color: var(--text); font-weight: 700; }
.doc-summary ul { margin: 6px 0 14px; padding-left: 20px; line-height: 1.5; color: var(--text); }
#deal-add-concessions { margin: 8px 0 0; }

.deal-back-card { width: 10%; min-width: 130px; padding: 10px 14px; margin-bottom: 12px; }
.deal-head-corner { display: flex; gap: 14px; align-items: center; }
.deal-contract-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
#deal-contract-status { margin-top: 10px; }
.deal-costs-title { margin-top: 26px; }
#deal-add-concessions { margin: 10px 0 0; display: inline-block; }
.deal-totals { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.deal-total { display: flex; flex-direction: column; gap: 2px; }
.deal-total-label { font-size: calc(13px * var(--fs-scale)); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.deal-total-value { font-size: calc(28px * var(--fs-scale)); font-weight: 800; color: var(--text); line-height: 1.15; }
.deal-total .muted { font-size: calc(12px * var(--fs-scale)); }
.deal-total-note { flex-basis: 100%; margin: 0; }
.deal-done-mark { color: var(--go); font-weight: 700; margin-left: 4px; }
.deal-check-date { display: flex; align-items: center; gap: 8px; }
.deal-date-label { font-size: calc(11px * var(--fs-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); width: 34px; text-align: right; }
.deal-check-when { font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); width: 104px; white-space: nowrap; }
.deal-check-actions { justify-content: flex-end; }
.deal-removed-toggle { margin-top: 22px; display: inline-block; }
.deal-removed-list li { color: var(--muted); }
.deal-removed-why { font-size: calc(12px * var(--fs-scale)); }
.restore-btn { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 2px 8px; font-size: 1.05em; cursor: pointer; }
.restore-btn:hover, .restore-btn:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Date fields + themed calendar */
.date-field { position: relative; display: inline-flex; align-items: center; width: 100%; min-width: 150px; }
.deal-check-date .date-field { width: 150px; }
.date-field .date-input { width: 100%; padding-right: 34px; font-variant-numeric: tabular-nums; }
.date-field .date-input.date-invalid { border-color: var(--pass); }
.date-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 4px; color: var(--muted); cursor: pointer; display: flex; }
.date-btn:hover { color: var(--accent); }
.date-pop { position: fixed; z-index: 2500; width: 316px; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.date-pop.hidden { display: none; }
.date-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; font-size: calc(15px * var(--fs-scale)); }
.date-pop-head button { background: none; border: 0; color: var(--text); font-size: 22px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; line-height: 1; }
.date-pop-head button:hover { background: var(--bg); }
.date-pop-dow, .date-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.date-pop-dow span { text-align: center; font-size: calc(11px * var(--fs-scale)); font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.date-pop-grid button { height: 38px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: calc(14px * var(--fs-scale)); cursor: pointer; padding: 0; }
.date-pop-grid button:hover { background: var(--bg); }
.date-pop-grid button.today { box-shadow: inset 0 0 0 2px var(--accent); }
.date-pop-grid button.sel { background: var(--accent); color: var(--card-bg); font-weight: 700; }
.date-pop-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.date-pop-foot button { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.date-pop-foot button:hover { background: var(--bg); }
@media (max-width: 700px) { .deal-back-card { width: auto; } .deal-check-date { flex-wrap: wrap; } }

/* ---------- Style guide: buttons ----------
   Standard (every section-level action): 34px tall, 13.5px semibold.
     primary  = no class, the theme color      secondary = .secondary, grey
   Compact (.small-btn): only for actions inside a table row or list row.
   Text actions (Back, Delete deal, Keep mine, …): .link-btn, never a box.
   Destructive confirm: .danger-btn (outlined in the theme's red).        */
button:is(:not([class]), [class=""], .secondary, .small-btn, .danger-btn, .reset-btn) {
  height: 34px; padding: 0 16px; line-height: 32px; font-size: calc(13.5px * var(--fs-scale)); font-weight: 600; white-space: nowrap;
}
button.small-btn { height: 28px; padding: 0 10px; line-height: 26px; font-size: calc(12.5px * var(--fs-scale)); }

#autosaved-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 3500; padding: 9px 14px; border-radius: 8px;
  background: var(--card-bg); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.3);
  font-size: calc(13px * var(--fs-scale)); font-weight: 600; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#autosaved-toast.visible { opacity: 1; transform: none; }
.modal input[type="text"], .modal input[type="number"] { width: 100%; margin-bottom: 12px; }
.modal label { display: block; font-size: calc(12px * var(--fs-scale)); color: var(--muted); margin-bottom: 4px; }
.modal h3 { margin: 0 0 14px; }
.modal { min-width: 340px; }
/* Deals, round 3 */
button.deal-back-card { display: block; width: 10%; min-width: 130px; height: auto; line-height: 1.3; text-align: center; padding: 10px 14px; margin-bottom: 12px;
  background: var(--card-bg); color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; font-size: calc(13.5px * var(--fs-scale)); cursor: pointer; }
button.deal-back-card:hover { border-color: var(--accent); opacity: 1; }
.deal-contract-row { align-items: center; }
.deal-contract-row .status-text { display: inline-flex; }
.deal-check > span { display: flex; flex-direction: column; gap: 2px; }
.deal-check-rule { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); font-weight: normal; }
.deal-removed-list li { grid-template-columns: 1fr auto 70px; }
.deal-removed-why { font-size: calc(12px * var(--fs-scale)); text-align: right; color: var(--muted); }
.deal-add-row { grid-template-columns: 1fr auto auto !important; }
.deal-add-row input[type="text"] { width: 100%; }
.field-note { display: block; margin-top: 4px; font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); font-weight: normal; }
.field-note .link-btn { font-size: inherit; }
.deal-read-error { color: var(--pass); font-weight: 600; max-width: 560px; line-height: 1.4; }
#deal-contract-status:has(.deal-read-error), #deal-doc-status:has(.deal-read-error) { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Purchase agreement reader workbench */
.reader-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.reader-controls select { width: auto; max-width: 520px; }
.reader-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.reader-page-tabs { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); flex-wrap: wrap; }
button.reader-page-tab { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 6px; min-width: 28px; height: 26px; padding: 0 6px; cursor: pointer; font-size: calc(12.5px * var(--fs-scale)); }
button.reader-page-tab.active { background: var(--accent); border-color: var(--accent); color: var(--card-bg); font-weight: 700; }
.reader-page { position: relative; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #fff; }
.reader-page img { display: block; width: 100%; height: auto; }
.rb { position: absolute; box-sizing: border-box; pointer-events: auto; }
.rb-checked { border: 2px solid #1e8e3e; background: rgba(30,142,62,.25); }
.rb-empty { border: 1.5px solid #8a94a3; }
.rb-typed { border: 1.5px solid #1a5fb4; background: rgba(26,95,180,.10); }
.rb-focus { border: 3px solid #f0b429; background: rgba(240,180,41,.22); margin: -4px; padding: 4px; box-sizing: content-box; }
.reader-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; font-size: calc(12px * var(--fs-scale)); }
.rl { display: inline-block; width: 14px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.rl-checked { border: 2px solid #1e8e3e; background: rgba(30,142,62,.25); } .rl-empty { border: 1.5px solid #8a94a3; }
.rl-typed { border: 1.5px solid #1a5fb4; background: rgba(26,95,180,.10); } .rl-focus { border: 3px solid #f0b429; }
.reader-table td { vertical-align: top; }
.reader-table tr[data-focus-page] { cursor: default; }
.reader-table tr[data-focus-page]:hover td, .reader-table tr[data-focus-page]:focus td { background: var(--bg); }
.reader-missing td { color: var(--muted); }
.reader-quote { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); margin-top: 3px; line-height: 1.35; }
.reader-rule { font-size: calc(12px * var(--fs-scale)); color: var(--muted); max-width: 190px; }
.reader-list { margin: 4px 0 12px; padding-left: 18px; font-size: calc(13px * var(--fs-scale)); }
.reader-rows { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: calc(12px * var(--fs-scale)); line-height: 1.5; }
.reader-typed { background: rgba(26,95,180,.22); color: inherit; padding: 0 2px; border-radius: 3px; }
.reader-x { color: var(--go); }
@media (max-width: 900px) { .reader-layout { grid-template-columns: 1fr; } }
.field-with-note { display: flex; align-items: center; gap: 8px; }
.field-with-note > :first-child { flex: 1; min-width: 0; }
.field-note-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--caution); color: var(--caution); font-size: 12px; font-weight: 800; line-height: 1; cursor: help; }
.field-note-icon:hover, .field-note-icon:focus-visible { background: color-mix(in srgb, var(--caution) 18%, transparent); outline: none; }
.share-field { display: flex; gap: 6px; }
.share-field select { flex: 1; min-width: 0; }
.share-field.split select, .share-field.split input { flex: 1 1 50%; min-width: 0; }

/* Dollar fields (static/money.js): "$" inside on the left. Where a field has a
   fixed width, the width is on the wrapper and the field fills it. */
.money-field { position: relative; display: block; width: 100%; }
.money-field > input.money-input { width: 100%; padding-left: 18px; }
.money-sign { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: var(--muted); opacity: .75; pointer-events: none;
  font-size: calc(13px * var(--fs-scale)); line-height: 1; }
.money-field.has-value .money-sign, .money-field:focus-within .money-sign { color: var(--text); opacity: 1; }
.money-field:has(input:disabled) .money-sign { color: var(--muted); }
.rehab-items-table .money-field, .deal-insp-table .money-field { width: 100px; }
.rehab-total-row .money-field { width: 90px; flex: none; }
.other-item-row .money-field { max-width: 100px; }
.verdict-offer .money-field { max-width: 200px; }
.verdict-offer .money-field:has(input:disabled) { opacity: 0.5; }
.deal-cost-row .money-field { width: 120px; }
.deal-insp-row .money-field { width: 130px; display: inline-block; }
.json-export-row { display: flex; gap: 10px; }
.deal-pending-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: calc(12px * var(--fs-scale)); font-weight: 700; border: 1px solid var(--caution); color: var(--caution); }

/* Themed dropdown lists (static/select.js) */
.select-pop { position: fixed; z-index: 3200; max-height: 320px; overflow-y: auto; padding: 4px; background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.35); font-size: calc(13px * var(--fs-scale)); }
.select-pop.hidden { display: none; }
.select-opt { padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.select-opt.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.select-opt.selected { font-weight: 700; color: var(--accent); }
.select-opt.selected::after { content: "✓"; float: right; margin-left: 14px; }
.select-opt.disabled { color: var(--muted); cursor: default; }
select.select-open { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Landing (hero) on the Analysis tab */
.hero { max-width: 720px; margin: 56px auto 40px; text-align: center; transition: opacity .45s ease, transform .45s ease; }
.hero.hidden { display: none; }
.hero.hero-leaving { opacity: 0; transform: translateY(-24px) scale(.98); }
.hero h1 { font-size: calc(44px * var(--fs-scale)); line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; color: var(--text); }
.hero-sub { color: var(--muted); margin: 0 0 28px; font-size: calc(15px * var(--fs-scale)); }
.hero-search { position: relative; }
.hero-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hero-search input[type="text"] { height: 58px; font-size: calc(18px * var(--fs-scale)); padding: 0 20px 0 50px; border-radius: 14px;
  border: 1.5px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.hero-search input[type="text"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 6px 24px rgba(0,0,0,.18); }
/* The one place a bigger primary button is used. */
button.hero-go { margin-top: 18px; height: 52px; min-width: 220px; padding: 0 36px; font-size: calc(17px * var(--fs-scale)); font-weight: 700; border-radius: 12px; }
.hero-steps { list-style: none; margin: 26px auto 0; padding: 0; max-width: 460px; text-align: left; }
.hero-steps li { display: flex; align-items: center; gap: 12px; padding: 7px 4px; color: var(--text); font-size: calc(14px * var(--fs-scale));
  animation: heroStepIn .3s ease both; }
.hero-steps li.done { color: var(--muted); }
.hero-step-mark { width: 30px; flex: none; display: inline-flex; justify-content: center; color: var(--go); font-weight: 800; }
.hero-step-mark svg { width: 30px; height: auto; }
.hero-steps li.failed { color: var(--pass); }
.hero-steps li.failed .hero-step-mark { color: var(--pass); }
@keyframes heroStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; text-align: left; padding: 6px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.hero-suggest.hidden { display: none; }
.hero-suggest-opt { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 8px; cursor: pointer;
  font-size: calc(15px * var(--fs-scale)); color: var(--text); }
.hero-suggest-opt.active, .hero-suggest-opt:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.hero-suggest-src { font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); white-space: nowrap; }
.history-map-wrap { margin: 12px 0 16px; }
.history-map { height: 360px; }
.history-map .leaflet-tile-pane { filter: grayscale(1) contrast(0.85) brightness(1.08); }
.status-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.history-verdict-select { width: auto; }

/* ---------- Phone (and other small screens) ----------
   Pencil opened from a phone over Tailscale (Settings → Phone Access). Wide
   tables marked .stack-table become one card per row; everything else
   narrows to one column. */
.table-scroll { overflow-x: auto; }
.phone-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; margin: 6px 0 8px; }
.phone-passcode { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs-scale)); color: var(--muted); flex: 0 1 380px; }
.phone-grid .header-toggle { height: 34px; }
.phone-restart { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phone-step { margin: 10px 0; line-height: 1.5; font-size: calc(13px * var(--fs-scale)); }
.phone-url-box { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.phone-url { font-size: calc(20px * var(--fs-scale)); font-weight: 700; margin: 2px 0; overflow-wrap: anywhere; user-select: all; }
.phone-url-actions { margin-top: 8px; }
.phone-sessions { margin-top: 16px; }
.phone-sessions ul { margin: 0 0 8px; padding-left: 18px; font-size: calc(13px * var(--fs-scale)); line-height: 1.6; }

/* Passcode page */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-box { width: 100%; max-width: 360px; text-align: center; }
.login-logo { height: 46px; margin-bottom: 18px; }
.login-box h1 { font-size: 24px; margin: 0 0 6px; }
.login-box p { margin: 0 0 20px; }
.login-box input[type="password"] { height: 50px; font-size: 18px; padding: 0 14px; border-radius: 12px; text-align: center; }
.login-box button.hero-go { width: 100%; min-width: 0; }
.login-error { color: var(--pass); font-weight: 600; min-height: 1.4em; margin-top: 14px !important; }

/* Touch screens: 16px fields so iPhone doesn't zoom in on every tap, and roomier targets. */
@media (pointer: coarse) {
  input[type="text"], input[type="number"], input[type="password"], select, textarea, .notes-box { font-size: 16px; }
  input[type="text"], input[type="number"], input[type="password"], select { height: 38px; }
  .money-sign { font-size: 16px; }
  .multi-filter-btn { height: 38px; font-size: 16px; }
  button.small-btn { height: 34px; line-height: 32px; }
  .info-icon { width: 20px; height: 20px; font-size: 12px; }
}

@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 12px 0; }
  .topbar h1 { margin-bottom: 8px; }
  .topbar h1 .muted { display: none; }
  .logo { height: 26px; }
  .tabs { overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 8px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: none; padding: 7px 14px; }
  #app { padding: 12px 10px calc(60px + env(safe-area-inset-bottom)); }
  .card { padding: 12px; margin-bottom: 12px; }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .modal { min-width: 0; width: calc(100vw - 32px); padding: 18px; }
  .viewer-panel { width: 100vw; height: 100dvh; border-radius: 0; }
  #autosaved-toast { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); text-align: center; }
  .reset-btn { margin-left: 0; }
  #address-input { flex-basis: 100%; max-width: none; }

  /* Landing search */
  .hero { margin: 20px auto 24px; }
  .hero h1 { font-size: 30px; }
  .hero-sub { font-size: 14px; margin-bottom: 18px; }
  .hero-search input[type="text"] { height: 52px; font-size: 17px; }
  button.hero-go { width: 100%; min-width: 0; }
  .hero-suggest-opt { padding: 12px 10px; font-size: 15px; }
  .hero-suggest-src { display: none; }

  /* Comps */
  .search-layers { flex-basis: 100%; gap: 10px; }
  .layer-steps { width: 100%; justify-content: space-between; }
  .layer-arrow { display: none; }
  .layer-step { width: auto; flex: 1 1 0; min-width: 0; }
  .layer-label { white-space: normal; font-size: 10px; overflow-wrap: anywhere; }
  .comps-search-actions { width: 100%; }
  .comps-search-actions button { flex: 1 1 auto; }
  .comps-map, .history-map { height: 300px; }

  /* Tables → one card per row */
  table.stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table thead { display: none; }
  .stack-table tbody tr { border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; margin-bottom: 10px; background: var(--card-bg); }
  .stack-table tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right; white-space: normal; background: none; }
  .stack-table tbody tr td:last-child { border-bottom: 0; }
  .stack-table td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .stack-table td[data-label=""]::before { display: none; }
  .stack-table td > input, .stack-table td > select, .stack-table td > .money-field, .stack-table td > .rehab-total-row, .stack-table td > .unit-rent-inputs { flex: 1 1 auto; max-width: 62%; }
  .stack-table td:empty { display: none; }
  .stack-table tbody tr td:last-child:has(> button) { justify-content: flex-end; gap: 8px; }
  /* The first cell names the row: a card title. */
  .stack-table tbody tr td:first-child { justify-content: flex-start; text-align: left; font-weight: 700; font-size: 15px; color: var(--text); }
  .stack-table tbody tr td:first-child::before { display: none; }
  .stack-table td[colspan] { display: block; text-align: left; padding: 8px 0; }
  .stack-table tr.rehab-detail-row { margin-top: -10px; border-top: 0; border-radius: 0 0 8px 8px; }
  .stack-table tr.rehab-detail-row td { background: none; padding: 8px 0; }
  .rehab-total-row { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
  .rehab-total-row .money-field { width: 100%; }
  .rehab-items-table .money-field { width: 88px; }
  #scenario-editor { overflow-x: visible; }
  #history-table td .zillow-link-btn { margin-left: auto; flex: none; white-space: nowrap; }
  .status-cell { flex: 1 1 auto; justify-content: flex-end; }
  .history-verdict-select { max-width: 200px; }
  .history-filters > * { flex: 1 1 140px; min-width: 0 !important; }
  .multi-filter-btn { max-width: none; }

  /* Deals */
  button.deal-back-card { width: 100%; }
  .deal-head-row > label, .deal-head-row select { width: 100%; }
  .deal-contract-row > button, .deal-head-row > button { width: 100%; }
  .deal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px; }
  .deal-fields label { white-space: normal; }
  .date-field { min-width: 0; }
  /* Checklist row: title with × on the right, the date underneath. */
  .deal-checklist li:not(.deal-add-row) { grid-template-columns: 1fr auto; gap: 6px 8px; }
  .deal-checklist li:not(.deal-add-row) > .deal-check { grid-column: 1; grid-row: 1; }
  .deal-checklist li:not(.deal-add-row) > .deal-check-actions { grid-column: 2; grid-row: 1; align-self: start; }
  .deal-checklist li:not(.deal-add-row) > .deal-check-date { grid-column: 1 / -1; grid-row: 2; padding-left: 30px; }
  .deal-removed-list li > span:first-child { grid-column: 1; }
  .deal-removed-list li > .deal-removed-why { grid-column: 1 / -1; grid-row: 2; }
  .deal-add-row { grid-template-columns: 1fr !important; }
  .deal-date-label { width: auto; }
  .deal-totals { gap: 16px 28px; }
  .deal-total-value { font-size: 24px; }
  .deal-cost-row { flex-wrap: wrap; }
  .deal-cost-row input[type="text"] { width: 100%; }
  .deal-removed-why { text-align: left; }
  .json-export-row button { flex: 1; }
  .reader-controls select { width: 100%; }
  .date-pop { width: min(316px, calc(100vw - 16px)); }
}

/* Dev mode (launcher.py): never mistaken for the real Pencil. */
.dev-banner { position: sticky; top: 0; z-index: 20; background: #b8860b; color: #111; text-align: center;
  font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 4px 8px; }
.dev-pull-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 6px 0 8px; }