:root {
  --ink: #111111;
  --paper: #F7F6F2;
  --white: #FFFFFF;
  --gray: #8A8A85;
  --gray-light: #DEDDD6;
  --navy: #020242;
  --navy-tint: #EEEEF3;
  --rust: #A65D3F;
  --sage: #6E7C59;
  --gold: #C29A3B;
  --gold-tint: #F8F0DE;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.067  0 0 0 0 0.067  0 0 0 0 0.067  0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 6vw;
}

header.site {
  padding: 56px 0 0;
  border-bottom: 1px solid var(--gray-light);
}

.masthead {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 36px;
}

.masthead-logo {
  height: 76px;
  width: 76px;
  object-fit: contain;
  flex-shrink: 0;
}

.masthead-text .kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin: 0 0 6px;
}

header.site h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}

.masthead-text .dek {
  color: var(--gray);
  margin: 0;
  font-size: 15px;
  max-width: 520px;
}

.account-bar {
  margin-left: auto;
  align-self: flex-start;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  text-align: right;
  white-space: nowrap;
}

.account-bar button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 10px;
  font: inherit;
  color: var(--navy);
  cursor: pointer;
  text-decoration: underline;
}

nav.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin: 0;
  padding: 14px 0 0;
}

nav.roles button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

nav.roles button:hover {
  color: var(--ink);
  background: rgba(2, 2, 66, 0.04);
}

nav.roles button.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.controls {
  margin: 48px 0 8px;
  display: flex;
  gap: 24px;
  align-items: baseline;
  flex-wrap: wrap;
}

.controls label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-right: 10px;
}

.controls select {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}

section.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--gray-light);
  margin: 56px 0;
  border: 1px solid var(--gray-light);
}

.kpi {
  background: var(--white);
  padding: 30px 28px;
  border-top: 2px solid transparent;
}

.kpi.hero {
  border-top-color: var(--navy);
}

.kpi .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 14px;
}

.kpi .value {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.kpi.hero .value {
  font-size: 40px;
  font-weight: 600;
  color: var(--navy);
}

/* A compact, visually distinct strip for forward-looking numbers
   (pending, projected) — deliberately not another row in the .kpis
   grid above, so "closed so far" and "still to come" read as two
   different kinds of answer instead of one long uneven row of tiles. */
.highlight-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 40px;
  margin: -24px 0 56px;
  padding: 20px 28px;
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
}

.highlight-strip-label {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}

.highlight-strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.highlight-item .value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.highlight-item .tag {
  font-size: 12.5px;
  color: var(--gray);
  margin-top: 2px;
}

section.chart-block {
  margin: 90px 0;
}

section.chart-block h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 28px;
}

.chart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.tx-top-section {
  margin: 0 0 90px;
}

.tx-top-section > summary {
  cursor: pointer;
}

.chart-heading h2 {
  margin: 0;
}

.controls.inline {
  margin: 0 0 28px;
}

.chart-type-toggle {
  display: flex;
  gap: 4px;
  margin: 0 0 28px;
}

.chart-type-btn {
  background: none;
  border: 1px solid var(--gray-light);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
  font-family: var(--sans);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.chart-type-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.chart-type-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.section-note {
  color: var(--gray);
  font-size: 15px;
  margin: -16px 0 28px;
  max-width: 650px;
}

.chart-container {
  background: var(--white);
  padding: 32px;
  border: 1px solid var(--gray-light);
}

table.tx {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 28px 0 0;
}

table.tx th, table.tx td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-light);
}

table.tx th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--gray);
  font-weight: 600;
}

table.tx tbody tr.tx-row {
  cursor: pointer;
}

table.tx tbody tr.tx-row:hover {
  background: rgba(2, 2, 66, 0.03);
}

table.tx tbody tr.tx-row.expanded {
  background: var(--navy-tint);
}

/* The Table view on My Dashboard's charts — a plain grid of numbers,
   styled close to a spreadsheet: numeric columns right-aligned, digits
   lined up, faint zebra striping so a long row is easy to track across. */
.chart-table-wrap {
  margin-top: 4px;
}

.matrix-table th:not(:first-child),
.matrix-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.matrix-table tbody tr:nth-child(even) {
  background: rgba(2, 2, 66, 0.025);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px 24px;
  padding: 24px 16px;
  background: var(--paper);
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
}

.detail-value {
  font-size: 14px;
}

.checklist-block {
  padding: 0 16px 24px;
  background: var(--paper);
}

.checklist-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.checklist-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checklist-item input[type="checkbox"]:disabled {
  cursor: default;
}

.empty {
  color: var(--gray);
  padding: 40px 0;
}

.pending-closings-table {
  font-size: 13px;
}

.pending-closings-table .ks-col {
  min-width: 90px;
  white-space: nowrap;
}

.pending-closings-table .status-actions {
  vertical-align: middle;
}

/* Edit / Mark Closed / Mark Cancelled: compact, side by side, and each
   colored by what it does — neutral outline to edit, solid sage to close
   (the happy path), red outline to cancel (the destructive one). */
.pending-closings-table .status-actions .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pending-closings-table .status-actions .print-btn {
  margin: 0;
  padding: 4px 10px;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pending-closings-table .status-actions .edit-pending-btn { color: var(--navy); }
.pending-closings-table .status-actions .edit-pending-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

.pending-closings-table .status-actions .mark-closed-btn { background: var(--sage); border-color: var(--sage); color: var(--white); }
.pending-closings-table .status-actions .mark-closed-btn:hover { background: #56623F; border-color: #56623F; }

.pending-closings-table .status-actions .mark-cancelled-btn { color: #8a1f11; }
.pending-closings-table .status-actions .mark-cancelled-btn:hover { background: #8a1f11; border-color: #8a1f11; color: var(--white); }

.pending-closings-table .status-actions .print-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

nav.roles.sub {
  margin: 56px 0 0;
  gap: 4px 8px;
  padding-top: 0;
  border-bottom: 1px solid var(--gray-light);
}

nav.roles.sub button {
  font-size: 12px;
  padding: 10px 12px;
}

/* The category row above Broker Tools' own tool list — visually a step
   up from the tool buttons below it, so the two-tier hierarchy reads at
   a glance instead of looking like one long flat row. */
nav.roles.sub.tool-group-nav {
  border-bottom: none;
}

nav.roles.sub.tool-group-nav button {
  font-size: 13px;
  border-radius: 4px;
  border-bottom: 2px solid transparent;
}

nav.roles.sub.tool-group-nav button.active {
  background: var(--navy-tint);
}

.tool-panel {
  margin: 48px 0 120px;
}

.tool-panel h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 10px;
}

.tool-panel .section-note {
  margin: 0 0 32px;
}

.usage-report .section-note {
  max-width: 880px;
}

.usage-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  align-items: flex-end;
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
}

.usage-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.usage-controls select {
  min-width: 190px;
  padding: 8px 4px;
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
}

.usage-scope {
  margin: 0 0 24px;
  color: var(--gray);
  font-size: 13px;
}

.usage-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0 0 40px;
  border: 1px solid var(--gray-light);
  background: var(--gray-light);
}

.usage-kpis .kpi {
  padding: 20px 18px;
}

.usage-kpis .kpi .value {
  font-size: 28px;
}

.usage-kpis .kpi small {
  color: var(--gray);
  font-family: var(--sans);
  font-size: 13px;
}

.usage-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

.usage-chart-grid h3,
.usage-report > h3,
.usage-report #usageAnalysis > h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
}

.usage-table-wrap {
  margin: 0 0 40px;
  overflow-x: auto;
}

.usage-table-wrap table {
  min-width: 680px;
}

.client-pipeline h3 {
  margin: 32px 0 16px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
}

.client-wide-field {
  width: 100%;
  margin-bottom: 24px;
}

.client-wide-field textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--gray-light);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.form-error {
  min-height: 20px;
  margin: 12px 0;
  color: #8a1f11;
  font-size: 14px;
}

.client-record {
  margin-top: 16px;
  border-top: 1px solid var(--gray-light);
}

.client-record summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  cursor: pointer;
}

.client-record summary span {
  color: var(--gray);
  font-size: 13px;
}

.client-record-body {
  padding: 0 4px 24px;
}

.interaction-form {
  margin: 24px 0;
  padding: 20px;
  background: var(--navy-tint);
}

.interaction-form h4 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}

.client-calendar-check,
.audit-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.interaction-list {
  margin: 0;
  padding-left: 20px;
  color: var(--gray);
  font-size: 14px;
}

.interaction-list li { margin-bottom: 8px; }

.interaction-list span { color: var(--ink); }

.ks-audit-doc { max-width: 1100px; }

.ks-audit-doc table { margin-top: 24px; }

.pipeline-heading,
.pipeline-summary-heading,
.pipeline-group-heading,
.client-summary-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.pipeline-heading { margin-bottom: 32px; }
.pipeline-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pipeline-actions .print-btn { margin: 0; padding: 7px 12px; background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.pipeline-heading h2 { margin-bottom: 10px; }
.pipeline-count,
.pipeline-summary-heading span,
.pipeline-group-heading strong { color: var(--gray); font-size: 13px; }
.client-pipeline-v2 h3 { margin: 30px 0 14px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.pipeline-section { margin-top: 28px; padding-top: 4px; border-top: 1px solid var(--gray-light); }
.pipeline-role-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 18px; padding: 14px 16px; background: var(--gold-tint); border-left: 3px solid var(--gold); }
.pipeline-role-picker label { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.field-label { color: var(--gray); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.pipeline-summary-heading { margin: 54px 0 18px; border-bottom: 1px solid var(--gray-light); padding-bottom: 12px; }
.pipeline-summary-heading h3 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 500; }
.pipeline-group { margin: 0 0 28px; }
.pipeline-group-heading { margin-bottom: 10px; }
.pipeline-group-heading h4 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); }
.client-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.client-summary-card { padding: 16px; background: var(--white); border: 1px solid var(--gray-light); border-left: 3px solid var(--navy); }
.client-summary-card.client-overdue { border-left-color: var(--rust); }
.pending-closing-overdue { color: var(--rust); font-weight: 600; }
.client-edit-btn { margin-top: 12px; padding: 6px 10px; border: 1px solid var(--gray-light); background: transparent; color: var(--navy); cursor: pointer; font: inherit; font-size: 12px; }
.client-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.client-card-actions button { margin-top: 12px; padding: 6px 10px; border: 1px solid var(--gray-light); background: transparent; color: var(--navy); cursor: pointer; font: inherit; font-size: 12px; }
.client-card-actions .client-income-btn { border-color: var(--gold); color: var(--ink); }
.pipeline-tools-area { margin-top: 48px; border-top: 1px solid var(--gray-light); padding-top: 24px; }
.pipeline-tools-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.pipeline-tools-heading h3 { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 500; }
.pipeline-tools-heading span { color: var(--gray); font-size: 13px; }
.pipeline-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pipeline-tool-card { padding: 18px; border: 1px solid var(--gray-light); background: var(--white); }
.pipeline-tool-card h4 { margin: 0 0 12px; font-family: var(--serif); font-size: 18px; font-weight: 500; }
.compact-tool-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.compact-tool-form input:not([type="checkbox"]), .compact-tool-form select { min-width: 140px; flex: 1 1 140px; padding: 8px; border: 1px solid var(--gray-light); background: var(--paper); font: inherit; }
.compact-tool-form .print-btn { margin: 0; padding: 8px 12px; }
.compact-tool-form label { color: var(--gray); font-size: 12px; }
.pipeline-overdue-list > div, .lead-report > div, .saved-search-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-light); font-size: 13px; }
.pipeline-overdue-list span, .lead-report span, .saved-search-row span { color: var(--gray); }
.analysis-result { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; padding: 12px; background: var(--sage); color: var(--white); font-size: 13px; }
[draggable="true"] { cursor: grab; }
[data-pipeline-group] { min-height: 100px; }
.income-health-overview { margin-top: 28px !important; }
.income-health-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.income-health-heading h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.income-health-heading > span { color: var(--gray); font-size: 13px; }
.income-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--gray-light); border: 1px solid var(--gray-light); }
.income-health-card { min-height: 130px; padding: 22px 20px; background: var(--white); border-top: 3px solid var(--gray); }
.income-health-card.historic { border-top-color: var(--navy); }
.income-health-card.pending { border-top-color: var(--gold); }
.income-health-card.potential { border-top-color: var(--sage); }
.income-health-card.total { border-top-color: var(--rust); }
.income-health-card .label { color: var(--gray); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.income-health-card .value { margin: 10px 0 6px; font-family: var(--serif); font-size: 30px; }
.income-health-card small { color: var(--gray); font-size: 12px; }
@media (max-width: 800px) { .income-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pipeline-tool-grid { grid-template-columns: 1fr; } }
.pipeline-search { margin: 0 0 20px; }
.pipeline-search input { width: 100%; padding: 12px 4px; border: none; border-bottom: 1px solid var(--ink); background: transparent; font: inherit; }
.client-edit-panel { padding: 0 20px 20px; border-left: 3px solid var(--gold); background: var(--gold-tint); }
.archive-option { display: flex; align-items: center; gap: 8px; width: 100%; margin: 12px 0; font-size: 14px; }
.delete-client-btn { margin-top: 12px; padding: 8px 12px; border: 1px solid #8a1f11; background: transparent; color: #8a1f11; cursor: pointer; font: inherit; font-size: 12px; }
.client-projection-panel { margin: 16px 0; padding: 20px; border-left: 3px solid var(--sage); background: rgba(110, 124, 89, 0.08); }
.client-projection-panel h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 18px; font-weight: 500; }
#updatedProjectedIncome, #newClientProjectedIncome { font-size: 13px; color: var(--ink); line-height: 1.6; }
#updatedProjectedIncome span, #newClientProjectedIncome span { color: var(--gray); font-size: 12px; }
.client-danger-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding: 16px; border-top: 1px solid #d8b7ae; background: rgba(166, 93, 63, 0.08); color: var(--gray); font-size: 12px; }
.client-danger-zone strong { color: #8a1f11; text-transform: uppercase; letter-spacing: 0.05em; }
.client-summary-main { align-items: flex-start; }
.client-summary-main strong { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.client-summary-main span { color: var(--rust); font-size: 12px; text-align: right; }
.client-summary-card p { margin: 10px 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.client-summary-card small { color: var(--gray); font-size: 12px; }
.client-summary-card p.client-potential-income { color: var(--sage); font-weight: 600; }
.client-summary-card p.client-pending-note, .client-summary-card p.client-awaiting-note { color: var(--gray); font-style: italic; }
.client-colisting-note { color: var(--gray); font-weight: 400; }
.investor-section { background: rgba(110, 124, 89, 0.08); padding: 4px 20px 20px; border-left: 3px solid var(--sage); }

.tool-form {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 40px;
}

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

.field-help {
  max-width: 260px;
  margin-top: 5px;
  color: var(--gray);
  font-size: 12px;
  line-height: 1.4;
}

.ks-number-field input {
  min-width: 150px;
}

.tool-form label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
}

.tool-form select,
.tool-form input {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  min-width: 220px;
}

.tool-form select:focus,
.tool-form input:focus {
  outline: none;
  border-bottom-color: var(--navy);
}

/* The rule above is sized for text/number fields — a checkbox matches
   the same bare "input" selector and would otherwise inherit a 220px
   min-width and a text-field-style bottom border, which is nonsensical
   for a checkbox. */
.tool-form input[type="checkbox"] {
  min-width: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--gray);
  flex-shrink: 0;
}

.date-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-input-wrap .date-display {
  min-width: 140px;
}

.date-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--gray);
  cursor: pointer;
  flex-shrink: 0;
}

.date-picker-btn:hover {
  color: var(--navy);
}

.date-picker-popup {
  position: absolute;
  z-index: 1000;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 16px;
  font-family: var(--sans);
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--ink);
}

.date-picker-nav {
  background: transparent;
  border: 1px solid var(--gray-light);
  color: var(--ink);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.date-picker-nav:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 4px;
}

.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker-day {
  background: transparent;
  border: none;
  padding: 8px 0;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
}

.date-picker-day:hover {
  background: var(--navy-tint);
}

.date-picker-day.other-month {
  color: var(--gray-light);
}

.date-picker-day.today {
  color: var(--rust);
  font-weight: 600;
}

.date-picker-day.selected {
  background: var(--navy);
  color: var(--white);
}

.date-picker-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-light);
}

.date-picker-today-btn,
.date-picker-clear-btn {
  background: transparent;
  border: none;
  color: var(--navy);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 0;
}

.date-picker-clear-btn {
  color: var(--gray);
}

.calendar-page-intro h2 {
  margin-bottom: 4px;
}

.calendar-page-intro .section-note {
  margin: 0;
}

.calendar-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-end;
  margin-top: 24px;
}

.calendar-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.calendar-chip {
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  color: var(--gray);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.calendar-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.calendar-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.calendar-reminder-panel {
  margin: 40px 0;
  padding-top: 24px;
  border-top: 1px solid var(--gray-light);
}

.calendar-reminder-panel summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

.calendar-reminder-body {
  margin-top: 20px;
  max-width: 640px;
}

.calendar-email-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink);
}

.calendar-saved-note {
  margin-left: 12px;
  color: var(--navy);
  font-size: 13px;
}

.calendar-grid-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calendar-today-btn {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--gray-light);
  color: var(--ink);
  cursor: pointer;
}

.calendar-today-btn:hover {
  border-color: var(--ink);
}

.calendar-month-grid {
  border: 1px solid var(--gray-light);
  border-bottom: none;
}

.calendar-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-light);
}

.calendar-month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-month-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 84px;
  background: var(--white);
  border: none;
  border-right: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
  padding: 6px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}

.calendar-month-cell:nth-child(7n) {
  border-right: none;
}

.calendar-month-cell:hover {
  background: var(--navy-tint);
}

.calendar-month-daynum {
  font-size: 12px;
  color: var(--ink);
}

.calendar-month-cell.other-month .calendar-month-daynum {
  color: var(--gray-light);
}

.calendar-month-cell.today .calendar-month-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -2px 0 0 -2px;
  background: var(--rust);
  color: var(--white);
  font-weight: 600;
}

.calendar-month-cell.selected {
  background: var(--navy);
}

.calendar-month-cell.selected .calendar-month-daynum {
  color: var(--white);
}

.calendar-month-cell.selected.today .calendar-month-daynum {
  background: var(--white);
  color: var(--navy);
}

.calendar-month-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  overflow: hidden;
}

.calendar-month-event-chip {
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 5px;
  background: var(--navy-tint);
  border-left: 2px solid var(--navy);
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-month-cell.selected .calendar-month-event-chip {
  background: rgba(255, 255, 255, 0.15);
  border-left-color: var(--white);
  color: var(--white);
}

.calendar-month-more {
  font-size: 10px;
  color: var(--gray);
  padding-left: 6px;
}

.calendar-month-cell.selected .calendar-month-more {
  color: var(--white);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--gray-light);
  border: 1px solid var(--gray-light);
  margin-bottom: 40px;
}

.result-grid .kpi {
  background: var(--white);
  padding: 28px 24px;
}

.cap-bar {
  height: 6px;
  background: var(--gray-light);
  margin-top: 10px;
}

.cap-bar-fill {
  height: 100%;
  background: var(--navy);
}

.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  vertical-align: middle;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--gray-light);
  transition: background 0.15s ease;
  border-radius: 999px;
}

.switch .track::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: var(--white);
  transition: transform 0.15s ease;
  border-radius: 50%;
}

.switch input:checked + .track {
  background: var(--navy);
}

.switch input:checked + .track::before {
  transform: translateX(16px);
}

.badge {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border: 1px solid var(--gray-light);
}

.badge.warn {
  color: #8a5a00;
  border-color: #8a5a00;
}

.badge.expired {
  color: #8a1f11;
  border-color: #8a1f11;
}

.badge.good {
  color: var(--sage);
  border-color: var(--sage);
}

.closing-doc {
  background: var(--white);
  border: 1px solid var(--gray-light);
  padding: 48px;
  max-width: 680px;
}

.doc-letterhead {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--doc-accent, var(--navy));
}

.doc-logo {
  height: 64px;
  width: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.doc-letterhead h3 {
  font-family: var(--serif);
  font-weight: 500;
}

.doc-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 24px;
  margin: 0 0 8px;
}

.doc-summary .stat {
  min-width: 0;
}

.doc-summary dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin: 0;
}

.doc-summary dd {
  margin: 4px 0 0;
  font-size: 20px;
  font-family: var(--serif);
}

.doc-section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  margin: 28px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-light);
}

.closing-doc .notice {
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 20px;
}

.cap-legend {
  background: var(--navy-tint);
  border: 1px solid var(--gray-light);
  border-left: 4px solid var(--navy);
  padding: 20px 24px;
  margin: 32px 0;
}

.receipt-items th, .receipt-items td {
  font-size: 13px;
}

.receipt-total-row td {
  border-top: 2px solid var(--ink);
  border-bottom: none;
  padding-top: 14px;
}

.closing-doc dl {
  margin: 0;
}

.closing-doc dl.tight dt {
  margin-top: 10px;
}

.closing-doc dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-top: 14px;
}

.closing-doc dt:first-child {
  margin-top: 0;
}

.closing-doc dd {
  margin: 2px 0 0;
  font-size: 16px;
}

.closing-doc table.tx {
  font-size: 13px;
}

.closing-doc table.tx th,
.closing-doc table.tx td {
  padding: 8px 10px;
}

.print-btn {
  margin-top: 32px;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s ease;
}

.print-btn:hover {
  background: var(--ink);
}

.closing-doc .print-btn {
  background: var(--doc-accent, var(--navy));
}

/* A colored left-border per section keeps a multi-part document (Listing
   Broker / Selling Broker / Referral, etc.) easy to scan at a glance,
   instead of every section looking identical. */
.doc-section-title.accent-rust { border-top-color: var(--rust); border-top-width: 2px; }
.doc-section-title.accent-sage { border-top-color: var(--sage); border-top-width: 2px; }
.doc-section-title.accent-gold { border-top-color: var(--gold); border-top-width: 2px; }

@page {
  size: letter;
  margin: 0.5in;
}

/* The Payment Receipt prints landscape (it has more columns than the
   other printable documents) — but not via a scoped @page rule here.
   Tested and confirmed Chromium's print engine doesn't honor CSS named
   pages ("page:" on an element + a matching named @page block) even
   with prefer_css_page_size on, despite it being valid CSS. The actual
   working mechanism is in app.js's printLandscape() — it swaps this
   file's plain @page rule for a landscape one only for the moment the
   print dialog is open, then removes the override.  */

@media print {
  header.site, nav.roles, nav.roles.sub, .tool-form, .print-btn, .result-grid, #txSearch, #txMoreWrap, .cap-legend, #receiptTxList, #clEditPanel { display: none !important; }
  .tool-panel > h2, .tool-panel > .section-note { display: none !important; }
  .tool-panel { margin: 0 !important; }
  body { background: var(--white); background-image: none; }
  .wrap { max-width: none; padding: 0; }
  .closing-doc {
    border: none;
    padding: 0;
    max-width: none;
    font-size: 11px;
  }
  .doc-letterhead { padding-bottom: 12px; margin-bottom: 16px; }
  .doc-logo { height: 48px; width: 48px; }
  .doc-summary dd { font-size: 16px; }
  .doc-section-title { margin: 16px 0 6px; padding-top: 10px; }
  .closing-doc dt { margin-top: 8px; font-size: 10px; }
  .closing-doc dd { font-size: 13px; }
  .closing-doc .notice { font-size: 10px; }
  .closing-doc table.tx th, .closing-doc table.tx td { padding: 4px 6px; font-size: 11px; }
}

@media (max-width: 640px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 16px; }
  header.site h1 { font-size: 34px; }
  .account-bar { margin-left: 0; text-align: left; }
  .usage-chart-grid { grid-template-columns: 1fr; gap: 24px; }
  .usage-controls label, .usage-controls select { width: 100%; min-width: 0; }
}

/* Guided commission allocation in New/Edit Transaction. */
.commission-workspace { margin-top: 32px; padding: 24px; border: 1px solid var(--gray-light); background: var(--paper); border-radius: 6px; }
.commission-heading h3 { margin: 0 0 8px; font-weight: 400; font-size: 25px; }
.commission-source { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px; padding: 20px; background: var(--white); border: 1px solid var(--gray-light); }
.commission-source input, .commission-override input { width: 100%; padding: 10px; border: 1px solid var(--gray-light); font: inherit; box-sizing: border-box; }
.commission-source label, .commission-override label { display: block; margin-bottom: 8px; }
.commission-rate-label { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.commission-rate-label input { width: 80px; }
.commission-text-button { background: transparent; color: var(--ink); border: 1px solid var(--gray-light); padding: 7px 12px; font: inherit; cursor: pointer; }
.commission-participants { margin: 24px 0 16px; }
.commission-participants nav { justify-content: flex-start; flex-wrap: wrap; margin: 8px 0; }
.commission-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.commission-agent-grid.commission-single { grid-template-columns: minmax(0, 1fr); }
.commission-agent-card { padding: 20px; background: var(--white); border: 1px solid var(--gray-light); border-radius: 4px; min-width: 0; }
.commission-agent-card h4 { margin: 0 0 16px; font-size: 18px; }
.commission-agent-card .tool-form { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.commission-share-math { padding: 12px 0; margin-bottom: 8px; font-weight: 600; border-bottom: 1px solid var(--gray-light); }
.commission-effective-rate { font-size: 12px; line-height: 1.5; color: var(--gray); margin-top: 5px; }
.commission-cap-option { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.commission-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.commission-actions .print-btn { margin: 0; }
.commission-errors, .commission-warnings { padding: 14px 14px 14px 32px; line-height: 1.7; border-left: 3px solid #8a1f11; background: #fff3ef; }
.commission-warnings { border-color: #997230; background: #fff8e8; }
.commission-override { padding: 16px; border: 1px solid var(--gray-light); }
.commission-equation { padding: 8px 0; line-height: 1.8; }
.commission-workspace [hidden] { display: none !important; }
@media (max-width: 800px) { .commission-agent-grid, .commission-source { grid-template-columns: 1fr; } .commission-workspace { padding: 14px; } }

.commission-workspace .field-help { max-width: none; }
.commission-participants nav.roles.sub { margin: 8px 0; }
.commission-participants nav.roles.sub button { border: 1px solid var(--gray-light); border-radius: 3px; }
.commission-participants nav.roles.sub button.active { color: var(--white); background: var(--navy); border-color: var(--navy); }
.commission-agent-card .tool-form { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
.commission-agent-card .tool-form input { min-width: 0; width: 100%; box-sizing: border-box; }
.commission-agent-card .commission-payment-fields { grid-template-columns: 1fr; }
.commission-actions { margin: 16px 0 20px; }
.commission-cap-details { margin-top: 18px; font-size: 13px; }
.commission-cap-details summary { cursor: pointer; color: var(--navy); }

#brokerApprovalAlert { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 240px; max-width: 240px; box-sizing: border-box; padding: 10px 12px; margin: 12px 0 0 auto; border: 1px solid var(--gray-light); background: var(--paper); color: var(--navy); font-size: 12px; line-height: 1.4; white-space: normal; }
#brokerApprovalAlert[hidden] { display: none; }
#brokerApprovalAlert strong { display: block; width: 100%; text-align: right; font-weight: 500; word-wrap: break-word; }
.account-bar #brokerApprovalAlert .print-btn { margin: 0; padding: 5px 9px; font-size: 10px; color: var(--white); background: var(--navy); border: 1px solid var(--navy); }
.account-bar #brokerApprovalAlert .print-btn:hover { background: var(--ink); }
.broker-ledger-table .tx-state { font: inherit; letter-spacing: inherit; color: inherit; }
.tx-state { font-size: 12px; font-weight: 600; white-space: nowrap; margin-left: 6px; }
@media print { #brokerApprovalAlert { display: none; } }

/* New Transaction: fill from signed contract */
.contract-import { border: 1px dashed var(--gray-light); background: var(--white); padding: 16px; margin: 0 0 32px; }
.contract-import .field { margin: 0; }
.contract-import-summary { margin-top: 12px; font-size: 13px; line-height: 1.6; }
.contract-filled input:not([type="hidden"]), .contract-filled select { background: var(--navy-tint); }
.contract-estimated input:not([type="hidden"]), .contract-estimated select { background: var(--gold-tint); border-color: var(--gold); }
.contract-estimated-key { background: var(--gold-tint); border-bottom: 1px solid var(--gold); padding: 0 4px; }
.contract-details { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 10px 0 0; }
.contract-details dt { font-weight: 600; }
.contract-details dd { margin: 0; }