:root {
  --green: #38a000;
  --green-dark: #004b2d;
  --green-deep: #003f2b;
  --green-link: #248900;
  --gray-00: #ffffff;
  --gray-05: #f7f7f7;
  --gray-10: #f0f0f0;
  --gray-20: #e5e5e5;
  --gray-30: #d1d1d1;
  --gray-40: #a8a8a8;
  --gray-70: #4b4b4b;
  --gray-85: #2d2d2d;
  --ink: #1f2528;
  /* Darkened from #697278, which measured 4.49:1 on --porter-surface
     (#f3f5f7) and 4.21:1 on --vista-accent-soft (#e4eff8) -- WCAG AA
     misses for normal text. Both are reachable: .platform is repainted to
     the surface, and .pipeline-card-selected paints accent-soft beneath
     .pipeline-card-label. Now 4.83:1, 4.53:1, 4.90:1 on --porter-soft-red
     and 5.28:1 on white. */
  --muted: #646d73;
  --orange: #d66b16;
  --red: #245c93;
  --map-orange: #ea7b21;
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--gray-05);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--green-link);
}

.platform {
  min-height: 100vh;
  background: #fff;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  border-top: 1px solid #d8e1ea;
  background: #f6f9fc;
  color: #5e6974;
  padding: 8px 14px;
  font-size: 11px;
}

.legal-footer span {
  margin-right: auto;
  font-weight: 800;
  text-transform: uppercase;
}

.legal-footer a {
  color: #245c93;
  font-weight: 800;
  text-decoration: none;
}

.legal-footer a:hover {
  text-decoration: underline;
}

.legal-page {
  background: #eef3f8;
  color: #22313f;
  font-size: 14px;
  line-height: 1.55;
}

.legal-document {
  width: min(920px, calc(100% - 32px));
  margin: 32px auto;
  border: 1px solid #c9d7e4;
  background: #fff;
  padding: 34px 42px;
  box-shadow: 0 14px 36px rgba(20, 42, 66, 0.12);
}

.legal-document h1 {
  color: #15395c;
  font-size: 30px;
  margin: 0 0 4px;
}

.legal-document h2 {
  color: #245c93;
  font-size: 16px;
  margin: 26px 0 8px;
}

.legal-document p {
  margin: 0 0 12px;
}

.legal-kicker {
  color: #5e6974;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.legal-meta {
  color: #6f7b86;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 28px;
}

.legal-back {
  border-top: 1px solid #d8e1ea;
  margin-top: 30px;
  padding-top: 18px;
}

.legal-back a {
  color: #245c93;
  font-weight: 900;
  text-decoration: none;
}

.legal-back a:hover {
  text-decoration: underline;
}

.global-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 170px 135px minmax(120px, 1fr) 86px 55px 190px 48px 78px;
  align-items: center;
  height: 45px;
  border-bottom: 1px solid #c5c5c5;
  background: #f8f8f8;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.brand-cell,
.user-cell,
.menu-cell,
.help-cell,
.engagement-chip,
.link-chip {
  height: 45px;
  border: 0;
  border-right: 1px solid #c8c8c8;
  background: transparent;
  color: #4c555b;
}

.brand-cell {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--green-dark);
  font-size: 20px;
  font-weight: 800;
}

.brand-cell strong {
  position: relative;
  z-index: 1;
}

.logo-swoop {
  position: absolute;
  width: 118px;
  height: 22px;
  border-top: 2px solid var(--green);
  border-radius: 50%;
  transform: translateY(4px) skewX(-20deg);
}

.user-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  white-space: nowrap;
}

.user-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  background: #b7bfc4;
}

.chevron {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-right: 1px solid #5f676c;
  border-bottom: 1px solid #5f676c;
  transform: rotate(45deg) translateY(-2px);
}

.chevron.light {
  border-color: #fff;
}

.header-spacer {
  min-width: 0;
}

.menu-cell {
  font-size: 12px;
}

.help-cell {
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #7a858c;
}

.engagement-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 7px 8px;
  height: 30px;
  background: #758189;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
}

.briefcase {
  width: 14px;
  height: 12px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
}

.briefcase::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -6px;
  width: 6px;
  height: 4px;
  border: 1px solid #fff;
  border-bottom: 0;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  margin: 7px 0;
  border-left: 1px solid #c8c8c8;
  color: #384047;
  font-weight: 700;
}

.link-icon {
  width: 14px;
  height: 8px;
  display: inline-block;
  border: 2px solid #384047;
  border-radius: 7px;
  transform: rotate(-35deg);
}

.firm-word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  color: #576167;
  font-size: 14px;
  font-weight: 800;
}

.floating-panel {
  position: fixed;
  z-index: 35;
  background: #fff;
  border: 1px solid #bfc4c6;
  box-shadow: var(--shadow);
}

.main-menu-panel {
  top: 44px;
  right: 320px;
  display: grid;
  grid-template-columns: 148px 210px;
  min-height: 210px;
}

.menu-groups {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #d3d3d3;
  background: #f2f2f2;
}

.menu-groups li {
  border-bottom: 1px solid #d9d9d9;
}

.menu-parent {
  width: 100%;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: #2e363a;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
}

.menu-groups li:first-child .menu-parent,
.menu-parent:hover {
  background: var(--green);
  color: #fff;
}

.menu-children {
  padding: 11px 13px;
}

.menu-child-group {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.menu-child {
  border: 0;
  background: transparent;
  color: var(--green-link);
  padding: 5px 0;
  text-align: left;
  text-decoration: underline;
}

.context-bin-panel {
  top: 44px;
  right: 64px;
  width: 360px;
  padding: 14px;
  background: #34393c;
  color: #fff;
}

.context-bin-panel h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 15px;
}

.context-bin-panel p {
  margin: 0 0 8px;
  color: #e8e8e8;
}

.context-bin-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.context-bin-actions button {
  border: 0;
  background: var(--green);
  color: #fff;
  padding: 7px 10px;
  font-weight: 700;
}

.body-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: calc(100vh - 48px);
}

.body-shell.dashboard-mode {
  grid-template-columns: 1fr;
}

.dashboard-mode .event-rail {
  display: none;
}

.event-rail {
  border-right: 1px solid #bfc7bc;
  background: #f8f8f8;
  min-height: calc(100vh - 48px);
  padding: 14px 0;
}

.rail-block {
  border-bottom: 1px solid #d8d8d8;
  padding: 0 9px 13px;
  margin-bottom: 12px;
}

.rail-heading {
  margin: 0 0 8px;
  color: #444;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.rail-muted {
  margin: 0 0 7px;
  color: #777;
  font-size: 11px;
}

.rail-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--green-link);
  padding: 0;
  font-weight: 700;
}

.event-list {
  display: grid;
  gap: 4px;
}

.event-button {
  width: 100%;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  padding: 8px 7px;
  color: #343a3e;
  text-align: left;
}

.event-button.active {
  border-left-color: var(--green);
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.workspace {
  min-width: 0;
  background: #fff;
}

.dashboard-mode .workspace {
  min-width: 1254px;
}

.assignments-page {
  width: 1004px;
  margin: 0 auto;
  padding: 26px 0 70px;
}

.page-title {
  margin: 0 0 70px;
  color: var(--green-link);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.assignment-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 104px;
  margin-bottom: 20px;
  background: #fafafa;
  padding: 10px;
}

.metric-panel {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(54px, auto));
  gap: 20px;
  align-items: center;
  min-height: 84px;
  background: #f4f4f4;
  border-left: 4px solid #1872a8;
  padding: 10px 14px;
}

.metric-panel:first-child {
  width: 460px;
}

.metric-panel:last-child {
  width: 320px;
}

.metric-panel strong {
  display: block;
  font-size: 25px;
  color: #111;
  line-height: 1;
}

.metric-panel span {
  display: block;
  color: #5d666a;
  font-size: 10px;
}

.grid-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mini-button {
  min-height: 27px;
  border: 0;
  background: #ececec;
  color: #333;
  padding: 5px 9px;
  font-size: 11px;
}

.gear {
  border: 0;
  background: transparent;
  color: #6b7377;
  font-size: 22px;
  font-weight: 700;
}

.grid-shell {
  border: 1px solid #bfbfbf;
  background: #fff;
  overflow-x: auto;
}

.connected-selected-row {
  background: #e8f4fb;
  box-shadow: inset 4px 0 #245c93;
}

.connected-row-loading {
  display: block;
  margin-top: 4px;
  color: #245c93;
  font-weight: 700;
}

.drag-row {
  border-bottom: 1px solid #cfcfcf;
  background: #f3f3f3;
  color: #555;
  padding: 8px 7px;
  font-size: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.assignment-table {
  min-width: 1000px;
  table-layout: fixed;
}

.assignment-table th,
.assignment-table td {
  border-bottom: 1px solid #d7d7d7;
  border-right: 1px solid #e5e5e5;
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
  font-size: 11px;
}

.assignment-table th {
  height: 40px;
  background: #ededed;
  color: #32383c;
  font-weight: 700;
}

.assignment-table td {
  height: 67px;
}

.assignment-table th:first-child,
.assignment-table td:first-child {
  width: 41px;
  text-align: center;
}

.assignment-table th:nth-child(2),
.assignment-table td:nth-child(2) {
  width: 118px;
}

.assignment-table th:nth-child(3),
.assignment-table td:nth-child(3) {
  width: 96px;
}

.assignment-table th:nth-child(4),
.assignment-table td:nth-child(4) {
  width: 149px;
}

.assignment-table th:nth-child(5),
.assignment-table td:nth-child(5) {
  width: 96px;
}

.assignment-table th:nth-child(6),
.assignment-table td:nth-child(6) {
  width: 224px;
}

.assignment-table th:nth-child(7),
.assignment-table td:nth-child(7) {
  width: 96px;
}

.assignment-table th:nth-child(8),
.assignment-table td:nth-child(8) {
  width: 117px;
}

.assignment-table th:nth-child(9),
.assignment-table td:nth-child(9) {
  width: 64px;
}

.assignment-table tbody tr:hover {
  background: #f4fbef;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--green-link);
  padding: 0;
  text-align: left;
  text-decoration: underline;
}

.status-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  color: #1f4d2b;
  background: #e5f4df;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.danger-link {
  color: #a12b2b;
}

.folder-icon {
  display: inline-block;
  width: 13px;
  height: 10px;
  margin-left: 4px;
  background: #111;
  clip-path: polygon(0 20%, 35% 20%, 42% 0, 100% 0, 100% 100%, 0 100%);
}

.row-caret {
  display: inline-block;
  width: 10px;
  height: 16px;
  border-left: 2px solid #1f2528;
  transform: rotate(-14deg);
}

.property-page {
  min-height: calc(100vh - 48px);
  background: #fff;
}

.draft-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #9fc28c;
  background: #e8f5df;
  color: #2d4a22;
  padding: 8px 12px;
}

.draft-banner a {
  color: #196800;
  font-weight: 700;
}

.property-header {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) auto;
  gap: 20px;
  border-bottom: 1px solid #d6d6d6;
  padding: 14px 12px 10px;
}

.property-title {
  margin: 0 0 4px;
  color: var(--green-link);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
}

.property-meta {
  margin: 0;
  color: #273136;
}

.header-media {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.thumb {
  width: 124px;
  height: 72px;
  border: 1px solid #c0c0c0;
  object-fit: cover;
  background: #ddd;
}

.map-thumb {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 124px;
  height: 72px;
  border: 1px solid #c0c0c0;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.7) 49%, transparent 50%),
    linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.7) 49%, transparent 50%),
    #dfe8e4;
  color: #d11674;
}

.map-thumb::before,
.map-thumb::after {
  content: "";
  position: absolute;
  background: #8fb6c8;
}

.map-thumb::before {
  width: 150%;
  height: 10px;
  transform: rotate(-34deg);
}

.map-thumb::after {
  width: 12px;
  height: 150%;
  transform: rotate(12deg);
}

.pin {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e52b8a;
  color: #fff;
  font-weight: 700;
}

.assignment-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d7d7d7;
  padding: 7px 12px 0;
}

.assignment-id {
  margin: 0;
  color: var(--green-link);
  font-size: 14px;
  font-weight: 700;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  position: relative;
}

.action-button,
.save-button,
.danger-button,
.dark-button {
  min-height: 28px;
  border: 0;
  padding: 6px 12px;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

.action-button,
.dark-button {
  background: #4a4f52;
}

.save-button {
  background: var(--green);
}

.danger-button {
  background: var(--red);
}

.tab-row,
.subtab-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #d4d4d4;
  overflow-x: auto;
}

.tab-button,
.subtab-button {
  border: 0;
  border-right: 1px solid #d6d6d6;
  background: #fff;
  color: #283136;
  white-space: nowrap;
}

.tab-button {
  min-height: 35px;
  padding: 9px 15px;
  font-size: 11px;
}

.subtab-button {
  min-height: 30px;
  padding: 7px 13px;
  font-size: 10px;
}

.tab-button.active,
.subtab-button.active {
  border-bottom: 3px solid var(--green);
  color: #111;
  font-weight: 700;
}

.tab-button.has-dot::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #2568a8;
}

.content-pad {
  padding: 18px 12px 60px;
}

.gray-panel {
  background: #f0f0f0;
  border: 1px solid #ededed;
  margin-bottom: 22px;
  padding: 16px 18px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  color: #31383d;
  font-size: 13px;
  font-weight: 700;
}

.required-diamond {
  width: 9px;
  height: 9px;
  display: inline-block;
  background: var(--orange);
  transform: rotate(45deg);
}

.summary-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
}

.summary-grid p {
  margin: 0 0 4px;
}

.edit-link {
  color: var(--green-link);
  font-size: 11px;
  text-decoration: underline;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 11px 24px;
  align-items: end;
}

.form-grid.two-col {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.field {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #333;
}

.field label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  font-size: 11px;
}

.field-control {
  display: flex;
  min-width: 0;
}

.field input,
.field select,
.field textarea,
.compact-input {
  width: 100%;
  min-height: 28px;
  border: 1px solid #bebebe;
  background: #fff;
  color: #242a2e;
  padding: 5px 7px;
}

.field textarea {
  min-height: 70px;
  resize: vertical;
}

.upload-control {
  display: grid;
  gap: 7px;
}

.field-note {
  color: #66717c;
  font-size: 10px;
}

.unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  border: 1px solid #ababab;
  border-left: 0;
  background: #a6a6a6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.span-2 {
  grid-column: span 2;
}

.span-4 {
  grid-column: 1 / -1;
}

.green-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--green-deep);
  color: #fff;
  padding: 8px 10px;
}

.green-action-bar .save-button {
  min-width: 120px;
}

.status-footer {
  position: fixed;
  right: 12px;
  bottom: 8px;
  color: #fff;
  background: var(--green);
  padding: 8px 10px;
  font-weight: 700;
  z-index: 8;
}

.more-menu {
  position: absolute;
  right: 78px;
  top: 32px;
  z-index: 12;
  width: 210px;
  border: 1px solid #bfc4c6;
  background: #fff;
  box-shadow: var(--shadow);
}

.more-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ececec;
  background: #fff;
  color: #2c3438;
  padding: 8px 10px;
  text-align: left;
}

.more-menu button:hover {
  background: #f0f8ed;
  color: var(--green-link);
}

.info-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.info-tile {
  border-left: 4px solid var(--green);
  background: #f4f4f4;
  padding: 10px 12px;
}

.info-tile strong {
  display: block;
  margin-bottom: 4px;
  color: #111;
}

.empty-callout {
  border: 1px dashed #b7b7b7;
  background: #fafafa;
  padding: 22px;
  color: #5d666a;
}

.wide-data-table {
  min-width: 1100px;
}

.wide-data-table th,
.wide-data-table td {
  border: 1px solid #d8d8d8;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
  font-size: 10px;
}

.wide-data-table th {
  background: #f5f5f5;
}

.attachment-drop {
  border: 2px dashed #c6c6c6;
  background: #fbfbfb;
  padding: 18px;
  margin-bottom: 16px;
}

.report-note {
  color: #4b4b4b;
  font-size: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .global-header {
    grid-template-columns: minmax(120px, 1fr) auto auto;
    width: 100%;
  }

  .global-header .user-cell,
  .global-header .header-spacer,
  .global-header .engagement-chip,
  .global-header .link-chip,
  .global-header .firm-word {
    display: none;
  }
}

.vas-map {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 260px;
  min-height: 520px;
  border: 1px solid #cfcfcf;
}

.vas-map-canvas {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(35deg, transparent 47%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    linear-gradient(115deg, transparent 48%, rgba(255, 255, 255, 0.55) 49%, transparent 51%),
    #dbe6dd;
}

.vas-map-legend {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  border: 1px solid #c9c9c9;
  background: #fff;
  padding: 8px 10px;
}

.radius-ring {
  position: absolute;
  left: 31%;
  top: 20%;
  width: 330px;
  height: 330px;
  border: 2px solid #2568a8;
  border-radius: 50%;
  background: rgba(37, 104, 168, 0.08);
}

.map-filter-panel {
  border-left: 1px solid #d6d6d6;
  background: #f8f8f8;
  padding: 14px;
}

.map-filter-panel h3 {
  margin: 0 0 10px;
  color: #30383c;
  font-size: 13px;
}

.filter-list {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.filter-list label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lease-table,
.comp-table,
.report-table {
  min-width: 900px;
}

.lease-table th,
.lease-table td,
.comp-table th,
.comp-table td,
.report-table th,
.report-table td {
  border-bottom: 1px solid #d8d8d8;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
  font-size: 10px;
}

.lease-table th,
.comp-table th {
  background: #f7f7f7;
  color: #333;
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #555;
}

.page-box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.overview-empty {
  display: grid;
  place-items: center;
  min-height: 230px;
  color: #6f777b;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr minmax(760px, 0.68fr);
  background: rgba(0, 0, 0, 0.66);
}

.comps-modal {
  overflow: auto;
  background: #fff;
  padding: 22px 26px 34px;
  box-shadow: var(--shadow);
}

.modal-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.modal-heading h2 {
  margin: 0 0 8px;
  color: var(--green-link);
  font-size: 21px;
  font-weight: 400;
}

.close-button {
  border: 0;
  background: transparent;
  color: var(--green-link);
  font-size: 28px;
  font-weight: 700;
}

.modal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}

.meta-lines p {
  margin: 0 0 7px;
}

.subject-box {
  background: #e9e9e9;
  padding: 18px;
}

.modal-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.type-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #d4d4d4;
  background: #f7f7f7;
  padding: 7px 9px;
  margin-bottom: 10px;
}

.type-filter span {
  color: #344250;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.type-filter label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.report-viewer {
  display: grid;
  grid-template-columns: 172px 1fr;
  min-height: calc(100vh - 48px);
  background: #202124;
  color: #f6f6f6;
}

.pdf-sidebar {
  background: #2c2d30;
  border-right: 1px solid #3e4043;
  padding: 18px 14px;
}

.pdf-tool-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.pdf-tool-row button {
  border: 1px solid #555;
  background: #33363a;
  color: #fff;
  padding: 5px 8px;
}

.pdf-thumb {
  height: 94px;
  border: 2px solid transparent;
  background: #fff;
  margin-bottom: 14px;
  padding: 7px;
}

.pdf-thumb.active {
  border-color: #79a9ff;
}

.pdf-thumb-line {
  height: 4px;
  background: #006b44;
  margin-bottom: 6px;
}

.pdf-page-area {
  overflow: auto;
  padding: 26px 34px 54px;
}

.pdf-page {
  width: min(900px, 92vw);
  min-height: 640px;
  margin: 0 auto;
  background: #fff;
  color: #111;
  padding: 34px 38px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.report-title {
  margin: 0 0 12px;
  background: var(--green-dark);
  color: #fff;
  padding: 6px 8px;
  text-align: center;
  font-size: 16px;
}

.report-grid-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 11px;
}

.report-table img {
  width: 100px;
  height: 54px;
  object-fit: cover;
}

.report-logo {
  margin-top: 42px;
  color: var(--green-dark);
  font-size: 22px;
  font-weight: 800;
}

.map-app {
  display: grid;
  grid-template-rows: 44px 1fr;
  min-height: calc(100vh - 48px);
  background: #e8ecea;
}

.map-header {
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid #d5d5d5;
  background: #fff;
  padding: 0 10px;
}

.map-brand {
  color: var(--green-dark);
  font-size: 17px;
  font-weight: 700;
}

.map-header nav {
  display: flex;
  gap: 18px;
}

.map-header button {
  border: 0;
  background: transparent;
  color: #243036;
}

.map-main {
  display: grid;
  grid-template-columns: 315px 1fr;
  min-height: 0;
}

.map-details {
  overflow-y: auto;
  background: #f7f7f7;
  border-right: 1px solid #cfd5d2;
  padding: 16px;
}

.map-details h2 {
  margin: 0 0 6px;
  color: #203036;
  font-size: 17px;
}

.map-section {
  border-top: 1px solid #d8d8d8;
  padding-top: 12px;
  margin-top: 12px;
}

.map-section h3 {
  margin: 0 0 10px;
  font-size: 12px;
}

.map-section input,
.map-section select {
  width: 100%;
  min-height: 29px;
  border: 1px solid #c2c2c2;
  background: #fff;
  margin-bottom: 8px;
  padding: 5px 7px;
}

.map-canvas-wrap {
  position: relative;
  overflow: hidden;
}

.map-toolbar {
  position: absolute;
  z-index: 4;
  left: 10px;
  top: 10px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.map-tool {
  border: 2px solid #147c48;
  background: #fff;
  color: #147c48;
  padding: 6px 11px;
  font-weight: 700;
}

.map-tool.active {
  background: #147c48;
  color: #fff;
}

.bam-card {
  position: absolute;
  z-index: 5;
  left: 24px;
  top: 88px;
  width: 360px;
  max-height: calc(100% - 118px);
  overflow: auto;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
}

.bam-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.bam-card h3 {
  margin: 0;
  font-size: 16px;
}

.bam-card-actions {
  display: grid;
  gap: 10px;
}

.bam-card-actions button {
  min-height: 34px;
  border: 0;
  background: #f0f0f0;
  color: var(--green-link);
  font-weight: 700;
}

.point-group {
  border: 1px solid #d8d8d8;
  margin-top: 12px;
}

.point-group-header {
  display: flex;
  justify-content: space-between;
  background: #f0f0f0;
  padding: 9px;
}

.point-group-body {
  padding: 10px;
}

.point-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding-top: 8px;
  margin-top: 8px;
}

.map-canvas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 47%, rgba(255, 255, 255, 0.65) 48%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    linear-gradient(110deg, transparent 47%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    linear-gradient(0deg, rgba(60, 120, 88, 0.18), rgba(255, 255, 255, 0.1)),
    #d8dfd5;
}

.map-canvas.satellite {
  background:
    linear-gradient(24deg, transparent 47%, rgba(229, 229, 211, 0.65) 48%, rgba(229, 229, 211, 0.65) 50%, transparent 51%),
    linear-gradient(105deg, transparent 47%, rgba(152, 117, 78, 0.35) 48%, rgba(152, 117, 78, 0.35) 50%, transparent 51%),
    repeating-linear-gradient(18deg, #415d3e 0 28px, #5f754f 28px 56px, #3f624c 56px 82px);
}

.map-canvas.dark {
  background:
    linear-gradient(30deg, transparent 47%, rgba(95, 110, 124, 0.6) 48%, rgba(95, 110, 124, 0.6) 50%, transparent 51%),
    linear-gradient(110deg, transparent 47%, rgba(80, 92, 106, 0.65) 48%, rgba(80, 92, 106, 0.65) 50%, transparent 51%),
    #242b32;
}

.export-frame {
  position: absolute;
  left: 31%;
  top: 17%;
  width: 39%;
  height: 58%;
  border: 3px solid var(--map-orange);
  background: rgba(255, 255, 255, 0.56);
  z-index: 2;
}

.export-frame::before {
  content: "Export Area: 8 x 8   Legend Position:";
  position: absolute;
  left: -3px;
  top: -24px;
  min-width: 360px;
  background: var(--map-orange);
  color: #111;
  padding: 6px 8px;
  font-weight: 700;
}

.map-pin {
  position: absolute;
  left: 49%;
  top: 46%;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e52b8a;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.map-zoom {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 4;
  display: grid;
  gap: 4px;
}

.map-zoom button {
  width: 26px;
  height: 26px;
  border: 1px solid #aaa;
  background: #fff;
  font-weight: 700;
}

.basemap-panel {
  position: absolute;
  z-index: 5;
  left: 210px;
  top: 64px;
  width: 285px;
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow);
}

.basemap-panel header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.basemap-panel h3 {
  margin: 0;
  font-size: 16px;
}

.basemap-list {
  display: grid;
  gap: 9px;
}

.basemap-option {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 8px;
  border: 0;
  border-left: 6px solid transparent;
  background: #f2f2f2;
  padding: 5px;
  text-align: left;
}

.basemap-option.active {
  border-left-color: var(--green);
}

.basemap-swatch {
  height: 42px;
  background: #d8dfd5;
}

.basemap-swatch.satellite {
  background: repeating-linear-gradient(18deg, #415d3e 0 12px, #5f754f 12px 24px, #3f624c 24px 36px);
}

.basemap-swatch.dark {
  background: #242b32;
}

.mapbox-workspace {
  display: grid;
  grid-template-columns: minmax(235px, 0.72fr) minmax(420px, 1.7fr) minmax(230px, 0.72fr);
  gap: 12px;
  min-height: min(720px, calc(100vh - 160px));
  background: #eef2f6;
  border: 1px solid var(--porter-line);
}

.mapbox-sidebar,
.mapbox-tools {
  overflow: auto;
  background: #ffffff;
  padding: 16px;
}

.mapbox-sidebar {
  border-right: 1px solid var(--porter-line);
}

.mapbox-tools {
  border-left: 1px solid var(--porter-line);
}

.mapbox-kicker {
  margin: 0 0 8px;
  color: #64717e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mapbox-sidebar h2 {
  margin: 0 0 8px;
  color: var(--porter-charcoal);
  font-size: 17px;
}

.mapbox-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.mapbox-counts span,
.mapbox-token-note {
  border: 1px solid #d5e0ea;
  border-radius: 4px;
  background: #f4f8fb;
  color: #31516d;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 800;
}

.mapbox-list {
  display: grid;
  gap: 8px;
}

.connected-selected-set-map {
  overflow: hidden;
}

.connected-map-workspace {
  margin-top: 14px;
}

.connected-map-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.connected-map-list li {
  min-width: 0;
}

.connected-map-state,
.connected-map-config {
  display: grid;
  align-content: center;
  min-height: 100%;
  padding: 32px;
  color: #394653;
  text-align: center;
}

.connected-map-state p {
  margin: 0;
}

.connected-map-state-error,
.connected-map-state-unavailable {
  color: #783b31;
}

.mapbox-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  border: 1px solid #d9e2eb;
  border-left: 4px solid #728397;
  border-radius: 5px;
  background: #ffffff;
  color: #20252b;
  padding: 10px;
  text-align: left;
}

.connected-map-list button.mapbox-item {
  cursor: pointer;
}

.connected-map-list button.mapbox-item:hover {
  border-color: #9eb3c6;
  background: #f7fafc;
}

.connected-map-list button.mapbox-item:focus-visible,
.mapbox-marker:focus-visible {
  outline: 3px solid #1f5f99;
  outline-offset: 2px;
}

.mapbox-item.subject {
  border-left-color: var(--green);
}

.mapbox-item strong,
.mapbox-item small,
.mapbox-item em {
  display: block;
}

.mapbox-item small {
  color: #5a6978;
  font-size: 10px;
  font-weight: 800;
  margin-top: 2px;
}

.mapbox-item em {
  color: #6f7c88;
  font-size: 10px;
  font-style: normal;
  margin-top: 4px;
}

.mapbox-status {
  align-self: start;
  border-radius: 999px;
  background: #edf2f7;
  color: #506172;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.mapbox-status.found {
  background: #e3f1ff;
  color: #1f5f99;
}

.mapbox-status.needs_review,
.mapbox-status.missing_address {
  background: #fff3d8;
  color: #8b5a00;
}

.mapbox-canvas-wrap {
  position: relative;
  min-height: 520px;
  background: #dfe7ef;
}

.mapbox-map {
  position: absolute;
  inset: 0;
}

.mapbox-setup {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100%;
  padding: 42px;
  color: #27333f;
  text-align: center;
}

.mapbox-setup h3 {
  margin: 0 0 10px;
  color: var(--green-link);
  font-size: 22px;
}

.mapbox-setup p {
  max-width: 560px;
  margin: 0 0 10px;
}

.mapbox-tool-group {
  border-top: 1px solid var(--porter-line);
  margin-top: 16px;
  padding-top: 14px;
}

.mapbox-tool-group h3 {
  margin: 0 0 10px;
  color: #3a4652;
  font-size: 12px;
}

.segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.segmented-control button {
  border: 1px solid #c9d4de;
  border-radius: 4px;
  background: #ffffff;
  color: #395064;
  padding: 6px 9px;
  font-weight: 800;
}

.segmented-control button.active {
  border-color: var(--green);
  background: #e7f1fa;
  color: var(--green-link);
}

.mapbox-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #394653;
  font-weight: 700;
  margin: 7px 0;
}

.mapbox-token-note {
  display: grid;
  gap: 3px;
  margin-top: 16px;
}

.mapbox-marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.mapbox-subject-marker {
  background: #1f5f99;
}

.mapbox-comp-marker {
  background: #6d7783;
}

#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  max-width: 320px;
  background: #1f2d25;
  color: #fff;
  padding: 11px 14px;
  box-shadow: var(--shadow);
  transform: translateY(90px);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

#toast.show {
  transform: translateY(0);
  opacity: 1;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  .body-shell,
  .map-main,
  .mapbox-workspace,
  .report-viewer,
  .modal-backdrop {
    grid-template-columns: 1fr;
  }

  .event-rail {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #cfd5d2;
  }

  .property-header,
  .summary-grid,
  .modal-meta,
  .form-grid,
  .form-grid.two-col,
  .property-form-stack {
    grid-template-columns: 1fr;
  }

  .header-media {
    flex-wrap: wrap;
  }

  .field,
  .span-2 {
    grid-column: 1 / -1;
  }

  .pdf-sidebar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
  }

  .pdf-thumb {
    min-width: 80px;
  }

  .mapbox-sidebar,
  .mapbox-tools {
    max-height: none;
    border: 0;
  }

  .mapbox-canvas-wrap {
    min-height: 460px;
  }
}

@media (max-width: 620px) {
  .assignments-page,
  .content-pad,
  .comps-modal,
  .pdf-page-area {
    padding-left: 12px;
    padding-right: 12px;
  }

  .property-header,
  .assignment-bar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .field {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    display: block;
    overflow: auto;
  }

  .comps-modal {
    min-height: 100vh;
  }

  .mapbox-canvas-wrap {
    min-height: 360px;
  }

  .mapbox-item {
    grid-template-columns: 1fr;
  }
}

/* Porter & Associates polish layer */
:root {
  --green: #2568a8;
  --green-dark: #17324d;
  --green-deep: #202834;
  --green-link: #1f5f99;
  --porter-charcoal: #262a2f;
  --porter-charcoal-2: #343941;
  --porter-ink: #20252b;
  --porter-surface: #f3f5f7;
  --porter-panel: #ffffff;
  --porter-line: #d8dde3;
  --porter-soft-red: #f2f7fc;
  --porter-blue: #2b6f95;
  --shadow: 0 12px 28px rgba(31, 37, 43, 0.14);
}

body {
  background:
    linear-gradient(180deg, #eef1f4 0%, #f7f8f9 42%, #eef1f4 100%);
  color: var(--porter-ink);
  font-family: Aptos, "Segoe UI", Tahoma, sans-serif;
}

a,
.link-button,
.edit-link,
.rail-link,
.menu-child {
  color: var(--green-link);
}

.platform {
  background: var(--porter-surface);
}

.global-header {
  grid-template-columns: 190px 160px minmax(120px, 1fr) 96px 56px 212px 54px 190px;
  height: 54px;
  border-bottom: 3px solid var(--green);
  background: linear-gradient(180deg, #343941 0%, #252a30 100%);
  box-shadow: 0 10px 26px rgba(26, 30, 35, 0.22);
}

.brand-cell,
.user-cell,
.menu-cell,
.help-cell,
.engagement-chip,
.link-chip,
.firm-word {
  height: 54px;
  border-right-color: rgba(255, 255, 255, 0.13);
  color: #f8f9fa;
}

.brand-cell {
  color: #ffffff;
  font-size: 18px;
}

.logo-swoop {
  width: 126px;
  border-top-color: #4f93cf;
  opacity: 0.95;
}

.user-cell,
.menu-cell,
.help-cell {
  color: #e9edf1;
}

.user-icon {
  background: linear-gradient(135deg, #cfd5dc, #8f98a3);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
}

.chevron {
  border-color: #dce1e6;
}

.engagement-chip {
  height: 34px;
  margin: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  background: #2568a8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.link-chip {
  height: 34px;
  margin: 10px 0;
  border-left-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.link-icon {
  border-color: #ffffff;
}

.firm-word {
  justify-content: center;
  background: #2568a8;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.main-menu-panel,
.context-bin-panel {
  top: 54px;
  border-radius: 4px;
  border-color: var(--porter-line);
}

.menu-groups {
  background: #eef1f4;
}

.menu-parent {
  color: var(--porter-charcoal);
}

.menu-groups li:first-child .menu-parent,
.menu-parent:hover {
  background: var(--green);
}

.context-bin-panel {
  background: linear-gradient(180deg, #343941, #24282e);
}

.context-bin-actions button,
.save-button,
.page-box,
.status-footer {
  background: linear-gradient(180deg, #2f78bd, #1d568d);
  border-radius: 4px;
}

.body-shell,
.event-rail,
.property-page,
.report-viewer,
.map-app {
  min-height: calc(100vh - 54px);
}

.event-rail {
  background: linear-gradient(180deg, #f7f8fa, #eef1f4);
  border-right-color: var(--porter-line);
}

.event-button.active {
  border-left-color: var(--green);
  background: linear-gradient(90deg, #2568a8, #173f68);
}

.workspace {
  background: var(--porter-surface);
}

.assignments-page {
  width: 1120px;
  max-width: calc(100vw - 56px);
  padding: 30px 0 76px;
}

.page-title {
  position: relative;
  margin: 0 0 34px;
  color: var(--porter-charcoal);
  font-size: 30px;
  font-weight: 700;
}

.page-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2568a8, #2b6f95);
}

.assignment-metrics {
  border: 1px solid var(--porter-line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(31, 37, 43, 0.07);
}

.metric-panel {
  border-left-color: var(--porter-blue);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff, #f8fafb);
  box-shadow: inset 0 0 0 1px #eef1f4;
}

.metric-panel:first-child {
  border-left-color: var(--green);
}

.metric-panel strong {
  color: var(--porter-charcoal);
}

.grid-shell,
.gray-panel,
.more-menu,
.comps-modal,
.pdf-page,
.bam-card,
.basemap-panel {
  border-radius: 6px;
}

.grid-shell {
  border-color: var(--porter-line);
  box-shadow: 0 10px 24px rgba(31, 37, 43, 0.08);
}

.training-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 18px;
  border: 1px solid var(--porter-line);
  border-radius: 6px;
  background: linear-gradient(135deg, #ffffff 0%, #eef6fd 100%);
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(31, 37, 43, 0.07);
}

.training-kicker {
  display: block;
  margin-bottom: 7px;
  color: #2f78bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Light Vista home dashboard: retains the existing workflows below while giving
   the landing screen the spacious, white canvas and information hierarchy used
   in the product direction reference. */
.dashboard-mode .workspace { min-width: 0; background: #f5f7fa; }
.dashboard-mode .assignments-page { width: 100%; max-width: none; margin: 0; padding: 0 28px 64px; }
.vista-home-preview { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 700px; margin: 0 -28px 34px; background: #f5f7fa; color: #19324d; }
.vista-sidebar { display: flex; flex-direction: column; gap: 4px; min-height: 700px; padding: 22px 14px 18px; background: #fff; border-right: 1px solid #e2e8ef; }
.vista-sidebar-brand { display: flex; align-items: center; gap: 10px; margin: 0 8px 26px; color: #19324d; letter-spacing: .12em; font-size: 16px; }
.vista-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #dc6b51; color: #fff; font: 800 18px Georgia, serif; box-shadow: 0 4px 10px rgba(220,107,81,.22); }
.vista-nav-label { margin: 12px 10px 5px; color: #91a0af; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vista-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 10px; background: transparent; color: #536779; padding: 10px 11px; text-align: left; font-size: 12px; font-weight: 700; }
.vista-nav-item span { width: 12px; color: #9ba9b6; font-size: 10px; text-align: center; }
.vista-nav-item:hover, .vista-nav-item.active { background: #edf4fb; color: #23649d; }
.vista-nav-item.active span { color: #e4b94f; }
.vista-sidebar-footer { display: grid; gap: 3px; margin: auto 8px 0; padding-top: 18px; border-top: 1px solid #e5ebf0; color: #29415a; font-size: 11px; }
.vista-sidebar-footer span { color: #8b99a6; font-size: 10px; }
.vista-home-main { min-width: 0; padding: 14px 24px 32px; }
.vista-home-toolbar { display: flex; align-items: center; gap: 10px; }
.vista-home-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 580px; border: 1px solid #dce6ef; border-radius: 12px; background: #fff; padding: 9px 13px; color: #91a0af; box-shadow: 0 2px 8px rgba(35,61,86,.04); }
.vista-home-search input { width: 100%; border: 0; background: transparent; color: #29415a; font-size: 12px; }
/* Was `outline: 0` with no replacement — the only such rule in this file.
   At specificity (0,1,1) it also beat the :where() baseline ring, so the
   search field was unreachable-looking for keyboard users. */
.vista-home-search input:focus-visible { outline: 3px solid var(--vista-accent, #2b6f95); outline-offset: 2px; }
.vista-shortcut { border: 1px solid #dce6ef; border-radius: 7px; padding: 6px 8px; color: #8b9aaa; font-size: 10px; }
.vista-create-button { border: 0; border-radius: 20px; background: #df745c; color: #fff; padding: 10px 18px; font-weight: 800; box-shadow: 0 5px 12px rgba(223,116,92,.22); }
.vista-avatar { width: 34px; height: 34px; border: 1px solid #c8d8e7; border-radius: 50%; background: #eaf3fb; color: #3b72a4; font-weight: 800; }
.vista-home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 34px 0 18px; }
.vista-date-label { margin: 0 0 5px; color: #d39a2f; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vista-home-heading h1 { margin: 0; color: #1c3854; font-size: 27px; letter-spacing: -.03em; }
.vista-home-heading p:last-child { margin: 5px 0 0; color: #7b8d9f; font-size: 12px; }
.vista-workspace-select { border: 1px solid #d3e0eb; border-radius: 16px; background: #fff; color: #55718a; padding: 9px 13px; font-size: 11px; }
.vista-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vista-kpi-grid article { position: relative; min-height: 82px; border: 1px solid #d8e3ed; border-radius: 15px; background: #fff; padding: 14px; box-shadow: 0 5px 13px rgba(35,61,86,.05); }
.vista-kpi-grid article:nth-child(1) { border-left: 3px solid #dd765d; }.vista-kpi-grid article:nth-child(2) { border-left: 3px solid #73a6d1; }.vista-kpi-grid article:nth-child(3) { border-left: 3px solid #e1bd4d; }.vista-kpi-grid article:nth-child(4) { border-left: 3px solid #6f8ec5; }
.vista-kpi-grid strong { display: block; color: #213d59; font-size: 24px; line-height: 1; }.vista-kpi-grid span { display: block; margin-top: 10px; color: #75899b; font-size: 11px; }.vista-kpi-grid em { position: absolute; right: 12px; top: 15px; color: #d47c61; font-size: 10px; font-style: normal; font-weight: 800; }
.vista-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; }
.vista-home-card { overflow: hidden; border: 1px solid #d7e2ec; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(35,61,86,.055); }
.vista-home-card header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid #e7edf2; }.vista-home-card h2 { margin: 0; color: #29445e; font-size: 14px; }.vista-home-card header button { border: 0; background: transparent; color: #6585a1; font-size: 10px; }
.vista-table-wrap { overflow-x: auto; }.vista-home-card table { width: 100%; border-collapse: collapse; font-size: 11px; }.vista-home-card th { padding: 10px 12px; color: #8b9aaa; background: #f7fafd; font-size: 9px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.vista-home-card td { padding: 11px 12px; border-top: 1px solid #edf1f4; color: #637a8e; }.vista-home-card td strong { display: block; color: #29445e; font-size: 11px; }.vista-home-card td small { display: block; margin-top: 3px; color: #91a0af; font-size: 9px; }.vista-status-pill { display: inline-block; border: 1px solid #c9dceb; border-radius: 12px; background: #eef6fc; color: #4a7ba3; padding: 5px 10px; font-size: 9px; font-weight: 800; }.vista-empty-home { color: #8a99a7 !important; text-align: center; }
.vista-today-card { padding-bottom: 8px; }.vista-today-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #edf1f4; }.vista-today-item b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #cbdbe8; border-radius: 9px; background: #f2f7fb; color: #527b9d; }.vista-today-item strong, .vista-today-item small { display: block; }.vista-today-item strong { color: #34516b; font-size: 10px; }.vista-today-item small { margin-top: 3px; color: #94a2af; font-size: 9px; }.vista-capacity { margin: 12px 14px 4px; color: #8798a8; font-size: 10px; }.vista-capacity strong { float: right; color: #29445e; }.vista-capacity div { clear: both; height: 6px; margin-top: 9px; overflow: hidden; border-radius: 6px; background: #e9eef3; }.vista-capacity i { display: block; height: 100%; border-radius: inherit; background: #e8be4e; }
@media (max-width: 860px) { .vista-home-preview { grid-template-columns: 1fr; }.vista-sidebar { display: none; }.vista-home-grid { grid-template-columns: 1fr; }.vista-kpi-grid { grid-template-columns: repeat(2, 1fr); } .vista-home-main { padding: 14px; } }

.training-callout h2,
.training-hero h1,
.training-quickstart h2,
.training-chapter h3 {
  margin: 0;
  color: var(--porter-charcoal);
}

.training-callout h2 {
  font-size: 18px;
}

.training-callout p {
  margin: 6px 0 0;
  color: #5e6974;
  font-size: 12px;
  line-height: 1.45;
}

.training-page {
  width: min(1160px, calc(100vw - 56px));
  margin: 0 auto;
  padding: 28px 0 76px;
}

.training-hero {
  display: grid;
  min-height: 204px;
  border-bottom: 4px solid #2f78bd;
  background: linear-gradient(135deg, #26313b 0%, #15395c 72%, #2568a8 100%);
  color: #ffffff;
  padding: 32px 36px;
}

.training-hero h1 {
  max-width: 780px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.12;
}

.training-hero p {
  max-width: 780px;
  margin: 12px 0 0;
  color: #d7e8f6;
  font-size: 14px;
  line-height: 1.55;
}

.training-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.training-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.85fr);
  gap: 18px;
  margin-top: 18px;
}

.training-video-panel,
.training-quickstart,
.training-chapter {
  border: 1px solid var(--porter-line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(31, 37, 43, 0.08);
}

.training-video-panel {
  padding: 14px;
}

.training-video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: #182836;
}

.training-quickstart {
  padding: 20px 22px;
}

.training-quickstart h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.training-quickstart ol {
  margin: 0;
  padding-left: 20px;
  color: #3d4c59;
  line-height: 1.55;
}

.training-quickstart li + li {
  margin-top: 9px;
}

.training-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.training-chapter {
  display: flex;
  gap: 12px;
  min-height: 118px;
  padding: 16px;
}

.training-chapter > span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #e8f2fb;
  color: #245c93;
  font-weight: 800;
}

.training-chapter h3 {
  font-size: 15px;
}

.training-chapter p {
  margin: 6px 0 0;
  color: #5e6974;
  line-height: 1.45;
}

.drag-row,
.assignment-table th,
.wide-data-table th,
.lease-table th,
.comp-table th {
  background: #eef1f4;
  color: var(--porter-charcoal);
}

.assignment-table td,
.assignment-table th,
.wide-data-table td,
.wide-data-table th,
.lease-table td,
.lease-table th,
.comp-table td,
.comp-table th,
.report-table td,
.report-table th {
  border-color: var(--porter-line);
}

.assignment-table tbody tr:hover,
.more-menu button:hover {
  background: var(--porter-soft-red);
}

.mini-button,
.action-button,
.dark-button,
.pdf-tool-row button,
.map-header button,
.map-zoom button {
  border-radius: 4px;
}

.mini-button {
  border: 1px solid var(--porter-line);
  background: #ffffff;
  color: var(--porter-charcoal);
}

.action-button,
.dark-button {
  background: linear-gradient(180deg, #4a515a, #30353c);
}

.danger-button {
  border-radius: 4px;
  background: linear-gradient(180deg, #41606f, #2f4652);
}

.property-page {
  background: var(--porter-surface);
}

.draft-banner {
  border-bottom-color: #b8cfe3;
  background: #f1f7fc;
  color: #17324d;
}

.draft-banner a {
  color: var(--green-link);
}

.property-header,
.assignment-bar,
.tab-row,
.subtab-row {
  background: #ffffff;
  border-color: var(--porter-line);
}

.property-header {
  box-shadow: 0 1px 0 rgba(31, 37, 43, 0.04);
}

.property-title,
.assignment-id,
.modal-heading h2,
.map-brand,
.report-logo {
  color: var(--green-link);
}

.thumb,
.map-thumb {
  border-radius: 4px;
  border-color: #bfc6ce;
  box-shadow: 0 4px 12px rgba(31, 37, 43, 0.1);
}

.map-thumb {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.72) 49%, transparent 50%),
    linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.72) 49%, transparent 50%),
    #e5e8ec;
}

.pin,
.map-pin {
  background: #2568a8;
}

.tab-button,
.subtab-button {
  background: #ffffff;
}

.tab-button.active,
.subtab-button.active {
  border-bottom-color: var(--green);
}

.content-pad {
  background: var(--porter-surface);
}

.gray-panel,
.info-tile,
.empty-callout,
.attachment-drop,
.subject-box,
.type-filter {
  border-color: var(--porter-line);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(31, 37, 43, 0.05);
}

.info-tile {
  border-left-color: var(--green);
}

.field input,
.field select,
.field textarea,
.compact-input,
.map-section input,
.map-section select {
  border-color: #c7cdd4;
  border-radius: 4px;
  background: #fbfcfd;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.compact-input:focus,
.map-section input:focus,
.map-section select:focus {
  outline: 2px solid rgba(37, 104, 168, 0.22);
  border-color: #2568a8;
  background: #ffffff;
}

.unit {
  border-color: #8f98a3;
  background: #6c747d;
}

.green-action-bar {
  background: linear-gradient(90deg, #262a2f, #3b2229);
}

.modal-backdrop {
  background: rgba(20, 24, 29, 0.74);
}

.comps-modal {
  background: #fbfcfd;
}

.close-button {
  color: var(--green-link);
}

.report-viewer {
  background: #1e2227;
}

.pdf-sidebar {
  background: #262a2f;
  border-right-color: #3e454d;
}

.pdf-thumb-line {
  background: #2568a8;
}

.report-title {
  background: linear-gradient(90deg, #17324d, #2568a8);
}

.map-app {
  background: #eef1f4;
}

.map-header {
  background: #ffffff;
  border-bottom-color: var(--porter-line);
  box-shadow: 0 3px 12px rgba(31, 37, 43, 0.06);
}

.map-details {
  background: #f8fafb;
  border-right-color: var(--porter-line);
}

.map-tool {
  border-color: #1f5f99;
  border-radius: 4px;
  color: #1f5f99;
}

.map-tool.active {
  background: #1f5f99;
}

.bam-card-actions button {
  border-radius: 4px;
  color: var(--green-link);
}

.map-canvas,
.vas-map-canvas {
  background:
    linear-gradient(30deg, transparent 47%, rgba(255, 255, 255, 0.68) 48%, rgba(255, 255, 255, 0.68) 50%, transparent 51%),
    linear-gradient(110deg, transparent 47%, rgba(255, 255, 255, 0.58) 48%, rgba(255, 255, 255, 0.58) 50%, transparent 51%),
    linear-gradient(0deg, rgba(43, 111, 149, 0.12), rgba(255, 255, 255, 0.08)),
    #e1e5e9;
}

.map-canvas.satellite,
.basemap-swatch.satellite {
  background:
    linear-gradient(24deg, transparent 47%, rgba(232, 226, 214, 0.65) 48%, rgba(232, 226, 214, 0.65) 50%, transparent 51%),
    linear-gradient(105deg, transparent 47%, rgba(92, 96, 101, 0.35) 48%, rgba(92, 96, 101, 0.35) 50%, transparent 51%),
    repeating-linear-gradient(18deg, #646970 0 28px, #81786e 28px 56px, #505860 56px 82px);
}

.basemap-option.active {
  border-left-color: var(--green);
}

.basemap-swatch {
  border-radius: 3px;
  background: #e1e5e9;
}

#toast {
  border-radius: 6px;
  background: #262a2f;
  box-shadow: 0 12px 28px rgba(31, 37, 43, 0.26);
}

.dashboard-command-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--porter-line);
  border-radius: 6px;
  background: #ffffff;
  margin-bottom: 16px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(31, 37, 43, 0.06);
}

.dashboard-filter-group {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) minmax(150px, 0.75fr) minmax(170px, 0.85fr);
  gap: 12px;
  flex: 1;
}

.dashboard-control {
  display: grid;
  gap: 6px;
  color: #4c5661;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-control input,
.dashboard-control select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #c7cdd4;
  border-radius: 4px;
  background: #fbfcfd;
  color: var(--porter-ink);
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

.dashboard-control input:focus,
.dashboard-control select:focus {
  outline: 2px solid rgba(37, 104, 168, 0.22);
  border-color: #2568a8;
  background: #ffffff;
}

.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-result-count {
  color: #56616c;
  font-size: 11px;
  font-weight: 700;
}

.sort-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  font-weight: 800;
}

.sort-button:hover {
  color: var(--green-link);
}

.empty-dashboard-row {
  height: 92px;
  text-align: center !important;
  vertical-align: middle !important;
  color: #66717c;
  font-weight: 700;
}

.new-assignment-modal {
  max-width: 780px;
}

.new-assignment-form {
  display: grid;
  gap: 20px;
}

.new-assignment-actions {
  justify-content: flex-end;
  margin-top: 4px;
}

.intake-panel {
  background: #f8fafc;
  border-color: #cfd8e3;
}

.intake-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.intake-heading .panel-title {
  margin-bottom: 4px;
}

.source-badge {
  border: 1px solid #b9c8d8;
  border-radius: 4px;
  background: #ffffff;
  color: #245c93;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  white-space: nowrap;
}

.intake-controls textarea {
  min-height: 96px;
}

.intake-actions {
  justify-content: flex-start;
  margin: 12px 0;
}

.intake-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.intake-review-grid article {
  border: 1px solid #d8e1ea;
  border-radius: 6px;
  background: #ffffff;
  padding: 12px;
}

.intake-review-grid h3 {
  margin: 0 0 10px;
  color: #344250;
  font-size: 12px;
}

.intake-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid #eef2f6;
  padding: 7px 0;
}

.intake-row:first-of-type {
  border-top: 0;
}

.intake-row span {
  color: #6a7682;
  font-size: 11px;
  font-weight: 800;
}

.intake-row strong {
  min-width: 0;
  color: #1f2c37;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.intake-empty {
  margin: 0;
  color: #697684;
  font-weight: 700;
}

.comp-entry-panel {
  border: 1px solid var(--porter-line);
  border-radius: 6px;
  background: #f8fafc;
  margin-top: 16px;
  padding: 16px;
}

.comp-selected {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4c5661;
  font-weight: 800;
  margin-top: 12px;
}

.work-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.work-file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--porter-line);
  border-radius: 6px;
  background: #ffffff;
  padding: 13px 14px;
  box-shadow: 0 4px 14px rgba(31, 37, 43, 0.05);
}

.work-file-card strong,
.work-file-card span,
.work-file-card p {
  display: block;
}

.work-file-card strong {
  color: var(--porter-charcoal);
  font-size: 12px;
}

.work-file-card span {
  color: #5e6974;
  font-size: 10px;
  font-weight: 800;
  margin-top: 3px;
  text-transform: uppercase;
}

.work-file-card p {
  color: #5e6974;
  margin: 6px 0 0;
}

.file-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid #b8c8d7;
  border-radius: 4px;
  background: #f2f7fc;
  color: var(--green-link);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.file-link:hover {
  border-color: #2568a8;
  background: #e7f1fa;
}

.file-button {
  cursor: pointer;
  font: inherit;
}

.attachment-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.report-source-links {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.report-source-links .file-link {
  border-color: #45515d;
  background: #303741;
  color: #ffffff;
}

.report-source-links .file-link:hover {
  background: #2568a8;
}

@media (max-width: 820px) {
  .dashboard-command-bar,
  .dashboard-actions,
  .training-callout,
  .training-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-filter-group {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .training-callout {
    grid-template-columns: 1fr;
  }

  .work-file-grid {
    grid-template-columns: 1fr;
  }

  .training-page {
    width: min(100% - 24px, 760px);
  }

  .training-hero {
    padding: 24px;
  }

  .training-hero h1 {
    font-size: 26px;
  }

  .training-layout,
  .training-chapters {
    grid-template-columns: 1fr;
  }
}

.connected-engagement-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(15, 29, 42, 0.72);
  padding: 24px;
}

.connected-engagement-modal {
  width: min(100%, 560px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border: 1px solid #b8c5d1;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2c37;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(4, 18, 29, 0.34);
}

.connected-engagement-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.connected-engagement-heading h2,
.connected-engagement-eyebrow,
.connected-engagement-modal > p {
  margin: 0;
}

.connected-engagement-heading h2 {
  color: var(--green-dark);
  font-size: 24px;
}

.connected-engagement-eyebrow {
  color: var(--green-link);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.connected-engagement-modal > p {
  margin-top: 8px;
  color: #536273;
  line-height: 1.5;
}

.connected-engagement-close {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--green-link);
  font-size: 26px;
  line-height: 1;
}

.connected-engagement-form {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}

.connected-engagement-field {
  display: grid;
  gap: 6px;
}

.connected-engagement-field label {
  color: #344250;
  font-size: 12px;
  font-weight: 800;
}

.connected-engagement-field label span {
  color: #667583;
  font-weight: 500;
}

.connected-engagement-field input,
.connected-engagement-field select,
.connected-engagement-field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #9cabb8;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2c37;
  padding: 8px 10px;
  font: inherit;
}

.connected-engagement-field textarea {
  min-height: 96px;
  resize: vertical;
}

.connected-engagement-field input[aria-invalid="true"],
.connected-engagement-field select[aria-invalid="true"],
.connected-engagement-field textarea[aria-invalid="true"] {
  border-color: #b53b3b;
  box-shadow: 0 0 0 1px #b53b3b;
}

.connected-assignment-modal {
  width: min(100%, 840px);
}

.connected-assignment-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connected-team-modal {
  width: min(100%, 760px);
}

.connected-team-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connected-team-wide {
  grid-column: 1 / -1;
}

.connected-team-search > div,
.connected-team-paging {
  display: flex;
  gap: 8px;
}

.connected-team-search input {
  flex: 1;
  min-width: 0;
}

.connected-assignment-wide,
.connected-assignment-form > .connected-engagement-alert {
  grid-column: 1 / -1;
}

.connected-engagement-field-error {
  min-height: 15px;
  color: #8a2f2f;
  font-size: 11px;
  line-height: 1.35;
}

.connected-engagement-field-note {
  min-height: 15px;
  color: #536273;
  font-size: 11px;
  line-height: 1.35;
}

.connected-engagement-alert {
  display: grid;
  gap: 4px;
  border-left: 4px solid #b53b3b;
  border-radius: 3px;
  background: #fff2f2;
  color: #6c2929;
  padding: 11px 12px;
  line-height: 1.4;
}

.connected-engagement-status {
  min-height: 18px;
  margin: 0;
  color: #536273;
  font-size: 11px;
}

.connected-engagement-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.connected-engagement-modal :focus-visible {
  outline: 3px solid #2d78b7;
  outline-offset: 2px;
}

.connected-engagement-modal :disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.connected-engagement-start-modal {
  max-width: min(36rem, calc(100vw - 2rem));
}

.connected-engagement-start-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.connected-engagement-start-context > div {
  min-width: 0;
}

.connected-engagement-start-context dd {
  margin: 0.25rem 0 0;
  overflow-wrap: anywhere;
}

.connected-engagement-start-unknown {
  border-color: var(--amber-500, #b26a00);
}

.connected-engagement-completion-description {
  display: grid;
  gap: 6px;
  color: #536273;
  line-height: 1.5;
}

.connected-engagement-completion-description p {
  margin: 0;
}

.connected-engagement-completion-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.connected-engagement-completion-context div {
  min-width: 0;
  border: 1px solid #d5dee7;
  border-radius: 3px;
  background: #f7f9fb;
  padding: 10px;
}

.connected-engagement-completion-context dt {
  color: #536273;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.connected-engagement-completion-context dd {
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  color: #22313f;
  font-weight: 700;
}

.connected-engagement-completion-unknown {
  border-color: var(--amber-500, #b26a00);
}

.connected-engagement-completion-modal[tabindex="-1"]:focus-visible,
.connected-engagement-completion-modal :focus-visible {
  outline: 3px solid var(--blue-500, #2563eb);
  outline-offset: 3px;
}

.connected-engagement-start-modal button:focus-visible,
.connected-engagement-start-modal[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--blue-500, #2563eb);
  outline-offset: 3px;
}

.connected-engagement-start-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.connected-engagement-edit-modal {
  width: min(100%, 760px);
}

.connected-engagement-edit-context,
.connected-engagement-edit-reference dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.connected-engagement-edit-context > div,
.connected-engagement-edit-reference dl > div {
  min-width: 0;
  border: 1px solid #d0dae3;
  border-radius: 4px;
  background: #f6f8fa;
  padding: 10px 12px;
}

.connected-engagement-edit-context dt,
.connected-engagement-edit-reference dt {
  color: #667583;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.connected-engagement-edit-context dd,
.connected-engagement-edit-reference dd {
  margin: 4px 0 0;
  color: #1f2c37;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.connected-engagement-edit-date-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.connected-engagement-edit-clear {
  min-height: 40px;
  white-space: nowrap;
}

[data-connected-industrial-evidence-read] {
  min-width: 0;
  margin-block: 1rem;
}

.industrial-evidence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0.75rem;
}

[data-connected-industrial-evidence-read] .mini-button,
[data-industrial-evidence-task-id] .mini-button {
  /* Keep the full control and its focus ring visible after native Tab scrolling. */
  scroll-margin-block: 1rem;
  min-height: 40px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.industrial-evidence-history > li + li {
  margin-block-start: 0.75rem;
}

.industrial-evidence-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.industrial-evidence-comparison > * {
  min-width: 0;
}

[data-connected-industrial-evidence-read] :is(p, li, dd, code, summary) {
  overflow-wrap: anywhere;
}

.connected-task-actions,
[data-industrial-evidence-task-id] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.connected-task-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

@media (max-width: 64rem) {
  .industrial-evidence-comparison {
    grid-template-columns: minmax(0, 1fr);
  }
}

.connected-engagement-edit-comparison,
.connected-engagement-edit-discard {
  display: grid;
  gap: 12px;
  border: 1px solid #c8a766;
  border-radius: 6px;
  background: #fff9e8;
  padding: 14px;
}

.connected-engagement-edit-comparison h3,
.connected-engagement-edit-comparison p,
.connected-engagement-edit-discard h3,
.connected-engagement-edit-discard p,
.connected-engagement-edit-reference h3 {
  margin: 0;
}

.connected-engagement-edit-comparison p,
.connected-engagement-edit-discard p,
.connected-engagement-edit-reference p {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.connected-engagement-edit-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.connected-engagement-edit-reference {
  min-width: 0;
  border: 1px solid #d0dae3;
  border-radius: 5px;
  background: #ffffff;
  padding: 12px;
}

.connected-engagement-edit-reference dl {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.connected-engagement-edit-discard {
  border-color: #b53b3b;
  background: #fff2f2;
  color: #6c2929;
}

.connected-engagement-edit-modal :focus-visible {
  outline: 3px solid #2d78b7;
  outline-offset: 2px;
}

.connected-engagement-edit-modal :disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

@media (max-width: 390px) {
  .connected-engagement-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .connected-engagement-modal {
    width: 100%;
    max-width: 390px;
    min-height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 18px 14px 24px;
  }

  .connected-engagement-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .connected-engagement-actions button {
    width: 100%;
    min-height: 44px;
  }

  .connected-engagement-edit-context,
  .connected-engagement-edit-comparison-grid,
  .connected-assignment-form,
  .connected-team-form {
    grid-template-columns: 1fr;
  }

  .connected-team-search > div,
  .connected-team-paging {
    flex-direction: column;
  }

  .connected-engagement-edit-date-row {
    grid-template-columns: 1fr;
  }

  .connected-engagement-edit-clear {
    width: 100%;
  }

  .connected-engagement-start-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .connected-engagement-start-modal .connected-engagement-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .connected-engagement-start-modal .connected-engagement-actions button {
    width: 100%;
  }

  .connected-engagement-completion-modal {
    width: 100%;
  }

  .connected-engagement-completion-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .connected-engagement-completion-modal .connected-engagement-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .connected-engagement-completion-modal .connected-engagement-actions button {
    width: 100%;
    min-height: 44px;
  }
}

.connected-valuation-panel {
  display: grid;
  gap: 14px;
}

.connected-valuation-heading,
.connected-comparable-heading,
.connected-valuation-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.connected-valuation-status {
  display: grid;
  min-width: min(100%, 260px);
  max-width: 360px;
  border: 1px solid #b9c8d8;
  border-radius: 4px;
  background: #ffffff;
  color: #344250;
  padding: 8px 10px;
}

.connected-valuation-status strong {
  font-size: 11px;
  text-transform: uppercase;
}

.connected-valuation-status span {
  margin-top: 3px;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.connected-valuation-status.ready {
  border-color: #8db99c;
  background: #f2f8f4;
}

.connected-valuation-status.preview,
.connected-valuation-status.confirmation {
  border-color: #d2b768;
  background: #fff9e8;
}

.connected-valuation-status.stale,
.connected-valuation-status.validation,
.connected-valuation-status.error {
  border-color: #c98989;
  background: #fff4f4;
}

.connected-valuation-subject {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr));
  gap: 12px;
}

.connected-valuation-subject label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #4f5b67;
  font-size: 11px;
  font-weight: 800;
}

/* Where the value conclusion input was: a note and the way to Reconciliation,
   which is its only writer. */
.connected-valuation-conclusion-note {
  display: grid;
  min-width: 0;
  align-content: start;
  justify-items: start;
  gap: 5px;
}

.connected-valuation-subject input,
.connected-valuation-subject select,
.connected-comparable-table input,
.connected-preview-table select {
  width: 100%;
  min-width: 0;
  border: 1px solid #bcc8d3;
  border-radius: 3px;
  background: #ffffff;
  color: #1f2c37;
  padding: 7px 8px;
  font: inherit;
}

.connected-subject-property-panel {
  display: grid;
  gap: 14px;
}

.connected-subject-property-form {
  display: grid;
  gap: 14px;
}

.connected-subject-workflow-status {
  display: grid;
  gap: 8px;
  border: 1px solid #a9c5dc;
  border-radius: 4px;
  background: #eef7fd;
  color: #173b5d;
  padding: 12px;
}

.connected-subject-workflow-status:focus-visible {
  outline: 3px solid #245c93;
  outline-offset: 2px;
}

.connected-subject-workflow-status p {
  margin: 0;
}

.connected-subject-workflow-error,
.connected-subject-workflow-unknown {
  border-color: #c98989;
  background: #fff4f4;
  color: #6f2020;
}

.connected-subject-workflow-card {
  display: grid;
  gap: 12px;
  border-top: 1px solid #c6d1dc;
  padding-top: 14px;
}

.connected-subject-workflow-card h3,
.connected-subject-workflow-card h4 {
  margin: 0;
  color: #263744;
}

.connected-subject-workflow-card form,
.connected-subject-link-review {
  display: grid;
  gap: 10px;
}

.connected-subject-link-review {
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
}

.connected-subject-workflow-card label,
.connected-subject-import-candidate label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #4f5b67;
  font-size: 11px;
  font-weight: 800;
}

.connected-subject-workflow-card input,
.connected-subject-workflow-card select,
.connected-subject-workflow-card textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #bcc8d3;
  border-radius: 3px;
  background: #fff;
  color: #1f2c37;
  padding: 7px 8px;
  font: inherit;
}

.connected-subject-reviewed-property {
  border: 1px solid #a9c5dc;
  border-radius: 4px;
  background: #f4f9fd;
  padding: 12px;
}

.connected-subject-import-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.connected-subject-import-candidates {
  display: grid;
  gap: 10px;
}

.connected-subject-import-candidate {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(180px, .8fr) minmax(240px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #d6dfe7;
  border-radius: 4px;
  background: #f8fafc;
  padding: 10px;
}

.connected-subject-import-value textarea {
  resize: vertical;
}

.connected-subject-import-preview {
  display: grid;
  gap: 10px;
  border-top: 1px solid #d6dfe7;
  padding-top: 12px;
}

.connected-subject-import-preview table {
  min-width: 760px;
}

.connected-subject-import-preview th,
.connected-subject-import-preview td {
  border-bottom: 1px solid #d6dfe7;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.connected-subject-candidates {
  display: grid;
  gap: 12px;
}

.connected-subject-candidate {
  display: grid;
  gap: 8px;
  border: 1px solid #d6dfe7;
  border-radius: 6px;
  padding: 12px;
}

.connected-subject-candidate h5 {
  margin: 0;
}

.connected-subject-candidate-values {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 4px 16px;
  margin: 0;
}

.connected-subject-candidate-values dt {
  font-weight: 600;
}

.connected-subject-candidate-values dd {
  margin: 0;
}

.connected-subject-review-reason {
  display: grid;
  gap: 4px;
}

.connected-subject-review-attest {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.connected-subject-review-attest input {
  margin-top: 3px;
}

.connected-subject-apply-summary {
  display: grid;
  gap: 8px;
  border: 1px solid #245c93;
  border-radius: 6px;
  padding: 12px;
}

@media (max-width: 600px) {
  .connected-subject-candidate-values {
    grid-template-columns: 1fr;
  }
}

.connected-subject-summary {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.connected-subject-fieldset {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin: 0;
  border: 1px solid #c6d1dc;
  border-radius: 4px;
  padding: 12px;
}

.connected-subject-fieldset legend {
  color: #263744;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 800;
}

.connected-subject-fieldset > .mini-button {
  justify-self: start;
}

.connected-subject-child-list {
  display: grid;
  gap: 9px;
}

.connected-subject-empty-state {
  margin: 0;
  border: 1px dashed #aebdca;
  border-radius: 4px;
  background: #f8fafc;
  color: #4f5b67;
  padding: 12px;
  font-size: 12px;
}

.connected-subject-child-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(100px, .35fr) auto;
  gap: 9px;
  align-items: end;
  border: 1px solid #d6dfe7;
  border-radius: 4px;
  background: #f8fafc;
  padding: 10px;
}

.connected-subject-improvement-row {
  grid-template-columns: minmax(180px, 1.25fr) minmax(150px, .75fr) minmax(160px, .75fr) auto;
}

.connected-subject-child-row label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #4f5b67;
  font-size: 11px;
  font-weight: 800;
}

.connected-subject-child-row input,
.connected-subject-child-row select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #bcc8d3;
  border-radius: 3px;
  background: #ffffff;
  color: #1f2c37;
  padding: 7px 8px;
  font: inherit;
}

.connected-subject-child-row .connected-subject-primary input {
  width: auto;
  min-height: auto;
  justify-self: start;
}

.connected-comparable-table {
  min-width: 520px;
}

.connected-comparable-table th:last-child,
.connected-comparable-table td:last-child {
  width: 88px;
  text-align: right;
}

.connected-preview-table {
  margin-top: 2px;
}

.connected-preview-table table {
  min-width: 900px;
}

.connected-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #394754;
  font-size: 12px;
  font-weight: 800;
}

.connected-confirmation input {
  flex: 0 0 auto;
  margin-top: 1px;
}

.connected-validation-list {
  margin: 0;
  border-left: 3px solid #b74e4e;
  background: #fff7f7;
  color: #673333;
  padding: 9px 12px 9px 28px;
  font-size: 11px;
}

.connected-valuation-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.connected-invoice-form {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(8rem, 1fr)) auto;
  gap: .75rem;
  align-items: end;
  margin-top: 1rem;
}

.connected-invoice-form label { display: grid; gap: .25rem; font-size: .8rem; color: var(--muted); }
.connected-invoice-form input,
.connected-invoice-form select { min-height: 2.25rem; }

.connected-dcf-form {
  grid-template-columns: repeat(4, minmax(10rem, 1fr));
}

.connected-cost-approach-form {
  grid-template-columns: repeat(4, minmax(10rem, 1fr));
}

.connected-dcf-form textarea {
  width: 100%;
  min-height: 4.5rem;
  border: 1px solid var(--gray-30);
  border-radius: 3px;
  background: var(--gray-00);
  color: var(--gray-90);
  padding: .45rem .55rem;
  font: inherit;
}

.connected-dcf-notes {
  grid-column: span 3;
}

.connected-dcf-rate-help {
  grid-column: 1 / -1;
  margin: 0;
}

.connected-reconciliation-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.connected-reconciliation-form fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.connected-reconciliation-form legend,
.connected-reconciliation-form > label {
  display: grid;
  gap: .35rem;
  color: var(--gray-70);
  font-size: .8rem;
  font-weight: 700;
}

.connected-reconciliation-form textarea {
  width: 100%;
  min-height: 5rem;
  border: 1px solid var(--gray-30);
  border-radius: 3px;
  background: var(--gray-00);
  color: var(--gray-90);
  padding: .55rem;
  font: inherit;
}

.connected-reconciliation-form .save-button {
  justify-self: end;
}

.connected-reconciliation-status {
  display: grid;
  gap: .2rem;
  margin-top: .75rem;
  border-left: 4px solid var(--green-link);
  background: var(--gray-00);
  padding: .75rem 1rem;
}

.connected-reconciliation-status.validation {
  border-color: #b74e4e;
  background: #fff7f7;
}

.connected-report-content {
  display: grid;
  gap: 1rem;
}

.report-content-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
}

.report-content-metadata > div {
  min-width: 0;
  border: 1px solid var(--gray-30);
  border-radius: .35rem;
  background: var(--gray-00);
  padding: .75rem 1rem;
}

.report-content-metadata dt {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.report-content-metadata dd {
  margin: .25rem 0 0;
  overflow-wrap: anywhere;
}

.report-content-items {
  display: grid;
  gap: .75rem;
}

.report-content-item {
  min-width: 0;
  border: 1px solid var(--gray-30);
  border-left: 4px solid #69849e;
  border-radius: .25rem;
  background: var(--gray-00);
  padding: 1rem;
}

.report-content-narrative {
  border-left-color: #c19535;
  background: #fffdf7;
}

.report-content-item-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}

.report-content-item-heading h3 {
  margin: 0;
  font-size: .95rem;
}

.report-content-item-heading code,
.report-content-metadata code {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: .72rem;
}

.report-content-draft-badge {
  display: inline-flex;
  margin-bottom: .5rem;
}

.report-content-narrative-text {
  margin-bottom: 0;
  white-space: pre-wrap;
}

.report-content-sources {
  border: 1px solid var(--gray-30);
  border-radius: .35rem;
  background: var(--gray-00);
  padding: .75rem 1rem;
}

.report-content-sources summary {
  cursor: pointer;
  font-weight: 800;
}

.report-content-sources ul {
  display: grid;
  gap: .65rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.report-content-sources li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: .25rem .65rem;
}

.report-content-sources li .report-note {
  grid-column: 2;
  overflow-wrap: anywhere;
}

.report-content-error {
  margin: 0;
}

.connected-report-release {
  display: grid;
  gap: 1rem;
}

.connected-report-release-preview {
  border: 1px solid var(--gray-30);
  border-radius: .35rem;
  padding: .85rem;
}

.connected-report-release-preview h3 {
  margin-top: 0;
}

.connected-report-release-findings {
  display: grid;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.connected-report-release-findings li {
  border-left: 3px solid #c19535;
  padding-left: .75rem;
}

.connected-report-release-findings p {
  margin: .3rem 0;
  overflow-wrap: anywhere;
}

.connected-report-release-attestation {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.connected-report-release-attestation label {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.connected-report-release-attestation :focus-visible {
  outline: 3px solid var(--porter-blue, #2b6f95);
  outline-offset: 3px;
}

.connected-report-release-complete {
  border-left: 3px solid #1f5f99;
  margin: 0;
  padding-left: .75rem;
}

.field-optional,
.field-help {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 400;
}

.connected-action-error:focus-visible,
.connected-valuation-heading .panel-title:focus-visible {
  outline: 3px solid var(--green-link);
  outline-offset: 4px;
}

.connected-invoices-panel .assignment-table th[scope="row"],
.connected-source-references .assignment-table th[scope="row"],
.connected-operating-statement .assignment-table th[scope="row"] {
  height: 67px;
  background: transparent;
  text-align: left;
}

.connected-workload-summary {
  display: grid;
  /* One tile per currency owed, so the count is not fixed. */
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.connected-workflow-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.connected-workflow-form label {
  display: grid;
  gap: 6px;
  color: var(--gray-70);
  font-size: 12px;
  font-weight: 700;
}

.connected-workflow-form select {
  min-height: 38px;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--gray-00);
}

.connected-engagement-assignment,
.connected-engagement-assignment-form {
  display: grid;
  gap: 1rem;
}

.assignment-definition-fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--gray-30);
  border-radius: 6px;
  background: var(--gray-00);
  padding: 1rem;
}

.assignment-definition-fieldset > legend {
  padding: 0 .35rem;
  color: var(--gray-80);
  font-size: .9rem;
  font-weight: 800;
}

.assignment-definition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.assignment-definition-grid label,
.assignment-definition-review label {
  display: grid;
  min-width: 0;
  gap: .35rem;
  color: var(--gray-70);
  font-size: .78rem;
  font-weight: 700;
}

.assignment-definition-grid input,
.assignment-definition-grid select,
.assignment-definition-grid textarea,
.assignment-definition-review select,
.assignment-party-table input,
.assignment-party-table select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--gray-30);
  border-radius: 4px;
  background: var(--gray-00);
  color: var(--gray-90);
  padding: .5rem .6rem;
  font: inherit;
}

.assignment-definition-grid input,
.assignment-definition-grid select,
.assignment-definition-review select,
.assignment-party-table input,
.assignment-party-table select {
  min-height: 2.4rem;
}

.assignment-definition-grid textarea {
  resize: vertical;
}

.assignment-definition-grid input:disabled,
.assignment-definition-grid select:disabled,
.assignment-definition-grid textarea:disabled,
.assignment-definition-review select:disabled,
.assignment-party-table input:disabled,
.assignment-party-table select:disabled {
  background: var(--gray-10);
  color: var(--muted);
  opacity: 1;
}

.assignment-definition-wide {
  grid-column: 1 / -1;
}

.assignment-definition-missing {
  border-left: 4px solid #b97827;
  background: #fff8e9;
  color: #69471e;
  padding: .75rem 1rem;
  font-size: .8rem;
}

.assignment-definition-missing ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: .4rem 0 0;
  padding-left: 1.1rem;
}

.assignment-party-table {
  min-width: 1040px;
  margin-bottom: .75rem;
}

.assignment-party-table th[scope="row"] {
  height: auto;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.assignment-party-table label {
  display: grid;
  gap: .25rem;
}

.assignment-party-table td:nth-child(2) { min-width: 10rem; }
.assignment-party-table td:nth-child(3),
.assignment-party-table td:nth-child(4) { min-width: 13rem; }
.assignment-party-table td:nth-child(5) { min-width: 15rem; }

.assignment-definition-review {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.assignment-definition-review label {
  width: min(100%, 18rem);
}

.connected-engagement-assignment-form > .save-button {
  justify-self: end;
}

@media (max-width: 900px) {
  .connected-workflow-form { grid-template-columns: 1fr 1fr; }
  .assignment-definition-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .assignment-definition-grid { grid-template-columns: 1fr; }
  .assignment-definition-wide { grid-column: auto; }
  .assignment-definition-fieldset { padding: .75rem; }
  .assignment-definition-review {
    align-items: stretch;
    flex-direction: column;
  }
  .assignment-definition-review label,
  .connected-engagement-assignment-form > .save-button,
  .assignment-definition-fieldset > .mini-button {
    width: 100%;
  }
  .connected-engagement-assignment-form > .save-button { justify-self: stretch; }
}

.connected-workload-summary > div { display: grid; gap: .25rem; padding: .8rem 1rem; border: 1px solid var(--gray-30); background: var(--gray-00); border-radius: .35rem; }
.connected-workload-summary span { color: var(--muted); font-size: .78rem; }
.connected-workload-summary strong { font-size: 1.15rem; }
.connected-workload-summary small { color: var(--muted); font-size: .72rem; }
.connected-workload-summary .link-button { justify-self: start; }

@media (max-width: 900px) {
  .connected-invoice-form { grid-template-columns: 1fr 1fr; }
  .connected-dcf-form { grid-template-columns: 1fr 1fr; }
  .connected-cost-approach-form { grid-template-columns: 1fr 1fr; }
  .connected-dcf-notes { grid-column: span 2; }
  .connected-workload-summary { grid-template-columns: 1fr 1fr; }
  .connected-subject-child-row,
  .connected-subject-improvement-row,
  .connected-subject-import-candidate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .connected-valuation-heading,
  .connected-comparable-heading,
  .connected-valuation-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .connected-valuation-status {
    width: 100%;
    max-width: none;
  }

  .connected-valuation-subject {
    grid-template-columns: 1fr;
  }

  .connected-subject-child-row,
  .connected-subject-improvement-row,
  .connected-subject-import-source,
  .connected-subject-import-candidate,
  .connected-subject-link-review {
    grid-template-columns: 1fr;
  }

  .connected-valuation-actions button,
  .connected-comparable-heading .segmented-control {
    width: 100%;
  }

  .connected-comparable-heading .segmented-control button {
    flex: 1 1 0;
    min-width: 0;
  }

  .report-content-metadata {
    grid-template-columns: 1fr;
  }

  .report-content-item-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .connected-invoice-form,
  .connected-dcf-form,
  .connected-cost-approach-form,
  .connected-workflow-form,
  .connected-workload-summary {
    grid-template-columns: 1fr;
  }

  .connected-dcf-notes {
    grid-column: auto;
  }

  .connected-invoice-form button,
  .connected-reconciliation-form .save-button,
  .connected-workflow-form button {
    width: 100%;
  }

  .connected-reconciliation-form .save-button {
    justify-self: stretch;
  }
}

.sales-adjustment-grid {
  display: grid;
  gap: 0.65rem;
  min-width: 19rem;
}

.sales-adjustment-category {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid var(--line, #d8dce2);
}

.sales-adjustment-category label {
  display: grid;
  gap: 0.2rem;
}

/* Engagement workspace: identity header, status pipeline, section tabs. */
.connected-workspace {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.connected-workspace-header {
  background: var(--gray-00);
  border: 1px solid var(--gray-20);
  border-radius: 6px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  padding: 16px 18px;
}

.connected-workspace-identity {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.connected-workspace-identity .panel-title {
  font-size: 20px;
  margin: 2px 0;
}

.connected-workspace-identity .report-note {
  margin: 0;
}

.connected-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pipeline-step {
  align-items: center;
  border-top: 3px solid var(--gray-20);
  color: var(--muted);
  display: flex;
  flex: 1 1 110px;
  gap: 6px;
  min-width: 110px;
  padding-top: 6px;
}

.pipeline-step.pipeline-done {
  border-top-color: #9fc3e0;
  color: var(--muted);
}

.pipeline-step.pipeline-current {
  border-top-color: var(--porter-blue, #2b6f95);
  color: var(--ink);
  font-weight: 700;
}

.pipeline-marker {
  background: var(--gray-30);
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.pipeline-done .pipeline-marker {
  background: #9fc3e0;
}

.pipeline-current .pipeline-marker {
  background: var(--porter-blue, #2b6f95);
  box-shadow: 0 0 0 3px rgba(43, 111, 149, 0.22);
}

.connected-workspace-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
}

.connected-workspace-facts div {
  display: grid;
  gap: 2px;
}

.connected-workspace-facts dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.connected-workspace-facts dd {
  font-weight: 700;
  margin: 0;
}

.workspace-tabs {
  border-bottom: 1px solid var(--gray-30);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overflow-x: auto;
}

.workspace-tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--gray-70);
  cursor: pointer;
  font-size: 13px;
  padding: 10px 14px;
  white-space: nowrap;
}

.workspace-tab:hover {
  color: var(--ink);
}

.workspace-tab-active {
  border-bottom-color: var(--porter-blue, #2b6f95);
  color: var(--ink);
  font-weight: 700;
}

.workspace-panel {
  display: grid;
  gap: 12px;
}

.workspace-panel:focus-visible {
  outline: 3px solid var(--blue-500, #2563eb);
  outline-offset: 2px;
}

.connected-workspace-empty {
  margin-top: 16px;
}

@media (max-width: 700px) {
  .connected-workspace-header {
    padding: 12px;
  }

  .pipeline-step {
    flex-basis: 100%;
  }
}

/* Comparable library: expandable detail rows. */
.comparable-detail-row > td {
  background: var(--porter-soft-red, #f2f7fc);
}

.comparable-detail {
  display: grid;
  gap: 10px 20px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
}

.comparable-detail div {
  display: grid;
  gap: 2px;
}

.comparable-detail dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.comparable-detail dd {
  font-weight: 700;
  margin: 0;
}

.comparable-detail-notes {
  margin: 10px 0 0;
}

.comparable-library-form h3 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

/* Comparable sets: explicit lifecycle and ordered, keyboard-safe evidence. */
.connected-comparable-set-manager {
  min-width: 0;
}

.connected-comparable-set-types {
  border: 1px solid var(--gray-20);
  border-radius: 6px;
  margin: 12px 0;
  min-width: 0;
  padding: 10px 12px 12px;
}

.connected-comparable-set-types > div,
.connected-comparable-set-row-actions,
.connected-comparable-set-edit > div,
.connected-library-set-target {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.connected-comparable-set-type {
  align-items: center;
  border: 1px solid var(--gray-20);
  border-radius: 5px;
  display: inline-flex;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
}

.connected-comparable-set-type[aria-current="true"] {
  background: #e4eff8;
  border-color: var(--porter-blue, #2b6f95);
  box-shadow: inset 0 -3px 0 var(--porter-blue, #2b6f95);
}

.connected-comparable-set-lifecycle {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(160px, 0.75fr) minmax(220px, 1fr);
  min-width: 0;
}

.connected-comparable-set-selector,
.connected-comparable-set-create label,
.connected-comparable-set-edit label,
.connected-library-set-target label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.connected-comparable-set-create,
.connected-comparable-set-edit {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.connected-comparable-set-edit {
  grid-column: 1 / -1;
}

.connected-comparable-set-manager button,
.connected-comparable-set-manager input,
.connected-comparable-set-manager select,
.connected-library-set-target button,
.connected-library-set-target select {
  min-height: 44px;
}

.connected-comparable-set-manager button:focus-visible,
.connected-comparable-set-manager input:focus-visible,
.connected-comparable-set-manager select:focus-visible,
.connected-library-set-target button:focus-visible,
.connected-library-set-target select:focus-visible {
  outline: 3px solid var(--porter-blue, #2b6f95);
  outline-offset: 2px;
}

.connected-comparable-set-members {
  margin-top: 14px;
  max-width: 100%;
}

.connected-comparable-set-name,
.connected-comparable-set-selector option,
.connected-library-set-target {
  overflow-wrap: anywhere;
}

.connected-comparable-set-row-actions {
  min-width: 250px;
}

.comparable-map-pin {
  display: inline-block;
  font-weight: 700;
  margin-top: 10px;
}

.connected-library-set-target {
  align-items: end;
  margin-top: 8px;
}

@media (max-width: 20rem) {
  .connected-comparable-set-lifecycle {
    grid-template-columns: minmax(0, 1fr);
  }

  .connected-comparable-set-types > div,
  .connected-comparable-set-row-actions,
  .connected-library-set-target {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .connected-comparable-set-type,
  .connected-comparable-set-row-actions button,
  .connected-library-set-target > * {
    max-width: 100%;
    width: 100%;
  }
}

/* Report trust chain: ordered gates with server-proved state. */
.report-chain {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.report-chain-step {
  background: var(--gray-00);
  border: 1px solid var(--gray-20);
  border-left: 4px solid var(--gray-30);
  border-radius: 4px;
  padding: 10px 12px;
}

.report-chain-step.report-chain-done {
  border-left-color: #9fc3e0;
}

.report-chain-step.report-chain-current {
  border-left-color: var(--porter-blue, #2b6f95);
}

.report-chain-step.report-chain-unavailable {
  border-left-color: var(--gray-40);
}

.report-chain-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-chain-mark {
  background: var(--gray-10);
  border-radius: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  text-transform: uppercase;
}

.report-chain-done .report-chain-mark {
  background: #e4eff8;
  color: #1f5f99;
}

.report-chain-current .report-chain-mark {
  background: var(--porter-blue, #2b6f95);
  color: #ffffff;
}

.report-chain-step .report-note {
  margin: 6px 0 0;
}

.report-chain-other {
  margin-top: 10px;
}

/* Design tokens for the workspace-era screens. Scoped additions only: existing
   panels keep their own rules, and --green stays rebound to Vista's brand blue
   by the palette above, so semantic roles are named explicitly here. */
:root {
  --vista-accent: var(--porter-blue, #2b6f95);
  --vista-accent-soft: #e4eff8;
  --vista-accent-muted: #9fc3e0;
  --vista-surface: var(--porter-panel, #ffffff);
  --vista-line: var(--porter-line, #d8dde3);
  --vista-text: var(--porter-ink, #20252b);
  --vista-text-muted: var(--muted, #646d73);
  --vista-warn: #a4521a;

  --vista-space-1: 4px;
  --vista-space-2: 8px;
  --vista-space-3: 12px;
  --vista-space-4: 16px;
  --vista-space-5: 24px;

  --vista-text-xs: 11px;
  --vista-text-sm: 12px;
  --vista-text-md: 14px;
  --vista-text-lg: 20px;

  --vista-radius: 6px;
}

/* Pipeline board: stage counts that filter the engagement list. */
.connected-pipeline-board {
  background: var(--vista-surface);
  border: 1px solid var(--vista-line);
  border-radius: var(--vista-radius);
  margin-top: var(--vista-space-4);
  padding: var(--vista-space-4);
}

.pipeline-board {
  display: grid;
  gap: var(--vista-space-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: var(--vista-space-3);
}

.pipeline-card {
  background: var(--gray-05, #f7f7f7);
  border: 1px solid var(--vista-line);
  border-radius: var(--vista-radius);
  cursor: pointer;
  display: grid;
  gap: var(--vista-space-1);
  padding: var(--vista-space-3);
  text-align: left;
}

.pipeline-card:hover {
  border-color: var(--vista-accent-muted);
}

.pipeline-card-static {
  cursor: default;
  margin: 0;
}

.pipeline-card-selected {
  background: var(--vista-accent-soft);
  border-color: var(--vista-accent);
  box-shadow: inset 3px 0 0 var(--vista-accent);
}

.pipeline-card-count {
  color: var(--vista-text);
  font-size: var(--vista-text-lg);
  font-weight: 700;
  line-height: 1.1;
}

.pipeline-card-label {
  color: var(--vista-text-muted);
  font-size: var(--vista-text-xs);
  text-transform: uppercase;
}

.pipeline-board-overdue {
  color: var(--vista-warn);
  font-size: var(--vista-text-sm);
  font-weight: 700;
  margin: var(--vista-space-3) 0 0;
}

/* First-run guidance for an organization with no engagements. */
.connected-first-run {
  margin-top: var(--vista-space-4);
}

.connected-first-run-steps {
  display: grid;
  gap: var(--vista-space-2);
  margin: var(--vista-space-2) 0 0;
  padding-left: var(--vista-space-5);
}

.connected-organization-panels {
  display: grid;
  gap: var(--vista-space-3);
  margin-top: var(--vista-space-3);
}

@media (max-width: 700px) {
  .pipeline-board {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

/* Clients: contact lists inside an expanded client row. */
.client-contact-heading {
  font-size: var(--vista-text-md, 14px);
  margin: var(--vista-space-3, 12px) 0 var(--vista-space-2, 8px);
}

.client-contact-list {
  display: grid;
  gap: var(--vista-space-2, 8px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.client-contact-list li {
  background: var(--vista-surface, #ffffff);
  border: 1px solid var(--vista-line, #d8dde3);
  border-radius: var(--vista-radius, 6px);
  padding: var(--vista-space-2, 8px) var(--vista-space-3, 12px);
}

.client-detail-row > td {
  background: var(--porter-soft-red, #f2f7fc);
}

.client-primary-toggle {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--vista-space-2, 8px);
}

.client-form h3,
.client-contact-form {
  grid-column: 1 / -1;
}

.client-form h3 {
  margin: 0 0 var(--vista-space-1, 4px);
}

/* People administration: the heading and the role legend span the grid so the
   three inputs stay on one row. A removed member stays visible and legible --
   dimming the row with opacity would drop its text below AA contrast, so the
   row is marked with a rule and the status chip carries the meaning. */
.member-form h3,
.member-form > .report-note {
  grid-column: 1 / -1;
}

.member-form h3 {
  margin: 0 0 var(--vista-space-1, 4px);
}

.connected-team-administration td > select {
  margin-right: var(--vista-space-2, 8px);
}

.connected-revoked-row > td {
  border-left: 3px solid var(--gray-30, #d1d1d1);
}

.connected-revoked-row > td + td {
  border-left: 0;
}

/* The aggregate appraisal setup remains a native, single-submit dialog. */
.connected-appraisal-assignment-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connected-appraisal-assignment-field {
  display: grid;
  gap: .35rem;
}

.connected-appraisal-assignment-field label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.connected-appraisal-assignment-field input,
.connected-appraisal-assignment-field select {
  min-height: 2.5rem;
}

.connected-appraisal-assignment-form .connected-engagement-alert,
.connected-appraisal-assignment-form .connected-engagement-status,
.connected-appraisal-assignment-form .connected-engagement-actions {
  grid-column: 1 / -1;
}

.connected-appraisal-assignment-modal :focus-visible {
  outline: 3px solid var(--blue-50, #2468a2);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .connected-appraisal-assignment-form {
    grid-template-columns: 1fr;
  }
}

.connected-inspection-panel {
  min-width: 0;
  overflow: hidden;
}

.connected-inspection-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.connected-inspection-assignment,
.connected-inspection-status,
.connected-inspection-error {
  margin: 12px 0;
}

.connected-inspection-status {
  color: #245c93;
  font-weight: 700;
}

.connected-inspection-error {
  border-left: 4px solid #245c93;
  background: #eef5fb;
  padding: 10px 12px;
  color: #15395c;
  font-weight: 700;
}

.connected-inspection-capture-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.connected-inspection-capture,
.connected-inspection-gallery,
.connected-inspection-retry {
  display: grid;
  gap: 6px;
  width: min(100%, 360px);
  color: var(--ink);
  font-weight: 700;
}

.connected-inspection-capture input,
.connected-inspection-gallery input,
.connected-inspection-retry input {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--gray-40);
  background: var(--gray-00);
  padding: 8px;
}

.connected-inspection-capture input:focus-visible,
.connected-inspection-gallery input:focus-visible,
.connected-inspection-retry input:focus-visible,
.connected-inspection-heading button:focus-visible,
.connected-inspection-card button:focus-visible {
  outline: 3px solid #245c93;
  outline-offset: 2px;
}

.connected-inspection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  min-width: 0;
}

.connected-inspection-card {
  min-width: 0;
  border: 1px solid var(--gray-30);
  border-radius: 4px;
  background: var(--gray-00);
  padding: 14px;
}

.connected-inspection-card--incomplete {
  border-left: 4px solid #d66b16;
  background: #fffaf4;
}

.connected-inspection-card--complete {
  border-left: 4px solid var(--green);
}

.connected-inspection-card h3,
.connected-inspection-card p {
  margin: 0 0 10px;
}

.connected-inspection-filename {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.connected-inspection-card .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.connected-inspection-card button,
.connected-inspection-heading button {
  min-height: 44px;
}

@media (max-width: 700px) {
  .connected-inspection-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .connected-inspection-capture-actions {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .connected-inspection-capture,
  .connected-inspection-gallery,
  .connected-inspection-retry,
  .connected-inspection-heading button,
  .connected-inspection-card .button-row,
  .connected-inspection-card button {
    width: 100%;
    max-width: 100%;
  }

  .connected-inspection-heading,
  .connected-inspection-card .button-row {
    align-items: stretch;
  }
}

/* ---------------------------------------------------------------------------
   Baseline accessibility layer.

   Deliberately last in the file and written with :where(), which contributes
   zero specificity. Every component-scoped :focus-visible rule above keeps
   winning where it exists; this only fills the gap for the controls that had
   no visible focus indicator at all. Adding rules here cannot override
   existing component styling.
   --------------------------------------------------------------------------- */

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--vista-accent, #2b6f95);
  outline-offset: 2px;
}

/* Keyboard-only escape from the header into the routed view. Visually hidden
   until focused, so it costs pointer users nothing. */
.vista-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--vista-surface, #ffffff);
  color: var(--vista-text, #20252b);
  border: 1px solid var(--vista-line, #d8dde3);
  border-radius: var(--vista-radius, 6px);
  padding: var(--vista-space-2, 8px) var(--vista-space-4, 16px);
  font-size: var(--vista-text-sm, 12px);
  font-weight: 700;
  text-decoration: none;
}

.vista-skip-link:focus {
  left: var(--vista-space-2, 8px);
  top: var(--vista-space-2, 8px);
}

/* Respect an explicit operating-system request to reduce motion. Vista is a
   deadline tool used for long sessions; motion here is decorative, never a
   carrier of appraisal meaning, so it is safe to reduce to near-zero. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Comparable library: the staged CSV import. */
.connected-comparable-import {
  border-top: 1px solid var(--gray-20);
  margin-top: 16px;
  padding-top: 12px;
}

.connected-comparable-import-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 12px;
}

.connected-comparable-import-form label {
  display: grid;
  gap: 4px;
}

.connected-comparable-import-error {
  border-left: 3px solid var(--porter-red, #b3261e);
  padding-left: 8px;
}

.comparable-import-invalid-row > td {
  background: var(--porter-soft-red, #f2f7fc);
}

.comparable-import-warning-row .status-chip {
  border-style: dashed;
}

.comparable-import-messages {
  font-size: 12px;
  margin: 6px 0 0;
  padding-left: 16px;
}

.connected-comparable-nearby,
.connected-comparable-duplicates {
  border-top: 1px solid var(--gray-20);
  margin-top: 16px;
  padding-top: 12px;
}

.connected-comparable-nearby-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 12px;
}

.connected-comparable-nearby-form label {
  display: grid;
  gap: 4px;
}

.connected-comparable-nearby-error,
.connected-comparable-duplicates-error {
  border-left: 3px solid var(--porter-red, #b3261e);
  padding-left: 8px;
}

.connected-comparable-duplicate-group {
  border: 1px solid var(--gray-20);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
}

.connected-comparable-duplicate-group h4 {
  margin: 0;
}

.connected-comparable-duplicate-choice {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.connected-comparable-duplicate-reason,
.connected-comparable-duplicate-confirm {
  display: grid;
  gap: 4px;
}

.connected-comparable-duplicate-confirm {
  align-items: center;
  grid-auto-flow: column;
  justify-content: start;
}

@media (max-width: 600px) {
  .connected-comparable-nearby-form,
  .connected-comparable-duplicate-group {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.comparable-import-messages li + li {
  margin-top: 2px;
}

/* ==== Vista app shell v2 (feat/app-first-redesign). Append-only layer. ==== */
:root {
  --vx-navy-900: #071d41; --vx-navy-800: #0b2855; --vx-navy-700: #12346b;
  --vx-blue-600: #0866ff; --vx-blue-700: #0757d9; --vx-blue-050: #e7f0ff; --vx-azure-500: #20a4f3;
  --vx-teal-500: #11bfa5; --vx-teal-600: #0b8a78; --vx-teal-700: #0a6e60; --vx-teal-050: #e3f7f3;
  --vx-violet-500: #7557f6; --vx-violet-700: #5b3fd6; --vx-violet-050: #efebff;
  --vx-amber-500: #f5a623; --vx-amber-600: #b26a00; --vx-amber-700: #8a5300; --vx-amber-050: #fff4e0;
  --vx-red-500: #e5484d; --vx-red-600: #c9303a; --vx-red-700: #b4232a; --vx-red-050: #fdecec;
  --vx-gray-600: #4a5568; --vx-gray-050: #eef1f5;
  --vx-canvas: #f5f8fc; --vx-surface: #ffffff; --vx-surface-sunken: #eef3fa; --vx-track: #e6edf5;
  --vx-border: #dce5f0; --vx-border-strong: #6f819c;
  --vx-text: #10213f; --vx-text-muted: #526480;
  --vx-text-on-accent: #ffffff; --vx-text-on-navy: #ffffff; --vx-text-on-navy-muted: #b8c6dc;
  --vx-focus: #0757d9; --vx-focus-on-navy: #7fb0ff;
  --vx-font: "Segoe UI Variable Text", "Segoe UI", Aptos, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --vx-text-xs: 12px; --vx-text-sm: 13px; --vx-text-md: 14px; --vx-text-lg: 16px;
  --vx-text-xl: 18px; --vx-text-2xl: 22px; --vx-text-3xl: 28px; --vx-text-4xl: 32px;
  --vx-space-1: 4px; --vx-space-2: 8px; --vx-space-3: 12px; --vx-space-4: 16px;
  --vx-space-5: 20px; --vx-space-6: 24px; --vx-space-8: 32px;
  --vx-radius-input: 8px; --vx-radius-button: 8px; --vx-radius-card: 12px; --vx-radius-pill: 999px;
  --vx-shadow-card: 0 1px 2px rgba(7, 29, 65, 0.06), 0 4px 14px rgba(7, 29, 65, 0.06);
  --vx-shadow-raised: 0 12px 32px rgba(7, 29, 65, 0.16);
  --vx-sidebar-width: 236px; --vx-sidebar-rail: 72px; --vx-drawer-width: 280px;
  /* Contract rebinds (recomputed in the blueprint, section 5.3). */
  --muted: #526480; --porter-ink: #10213f; --porter-surface: #f5f8fc; --porter-panel: #ffffff;
  --porter-line: #dce5f0; --porter-soft-red: #eef3fa; --porter-blue: #0757d9;
  --green: #0757d9; --green-link: #0757d9; --vista-accent-soft: #e7f0ff;
  --shadow: 0 1px 2px rgba(7, 29, 65, 0.06), 0 8px 24px rgba(7, 29, 65, 0.08);
}

/* ---- Stage 1: frame ---------------------------------------------------- */
body.vx-app-shell {
  background: var(--vx-canvas);
  color: var(--vx-text);
  font-family: var(--vx-font);
  font-size: var(--vx-text-md);
  line-height: 1.45;
}

body.vx-app-shell .platform,
body.vx-app-shell .workspace {
  background: var(--vx-canvas);
}

body.vx-app-shell .global-header {
  display: none;
}

body.vx-app-shell .body-shell.dashboard-mode {
  grid-template-columns: var(--vx-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  /* The sidebar column stays navy below the sticky sidebar on long pages. */
  background: linear-gradient(90deg, var(--vx-navy-900) var(--vx-sidebar-width), var(--vx-canvas) 0);
}

.vx-sidebar[hidden] {
  display: none !important;
}

body.vx-app-shell .vx-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--vx-navy-900);
  color: var(--vx-text-on-navy);
  scrollbar-width: thin;
}

body.vx-app-shell .vx-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--vx-space-5);
  text-transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--vx-space-8) var(--vx-space-8);
}

.vx-app [data-vx-region][hidden],
.vx-app .vx-worktabs[hidden] {
  display: none !important;
}

/* A region is only a wrapper: the panel inside it keeps its own box, and the
   page grid owns the spacing between regions. */
body.vx-app-shell .vx-app > .vx-region > *,
body.vx-app-shell .connected-organization-panels > .vx-region > * {
  margin-top: 0;
  margin-bottom: 0;
}

body.vx-app-shell .connected-organization-panels,
body.vx-app-shell .connected-workspace,
body.vx-app-shell .workspace-panel {
  grid-template-columns: minmax(0, 1fr);
}

body.vx-app-shell .connected-organization-panels {
  gap: var(--vx-space-5);
  margin: 0;
}

body.vx-app-shell .connected-organization-panels:not(:has(> .vx-region:not([hidden]))) {
  display: none;
}

body.vx-app-shell .vx-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Top bar */
body.vx-app-shell .vx-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-3) var(--vx-space-4);
  min-height: 72px;
  margin: 0 calc(-1 * var(--vx-space-8));
  padding: var(--vx-space-4) var(--vx-space-8);
  background: var(--vx-canvas);
  border-bottom: 1px solid var(--vx-border);
}

/* The sticky bar's live height (set by the shell) is reserved as scroll
   padding, so keyboard focus scrolled to the top of the viewport is never
   hidden under it (WCAG 2.4.11). Below 1280px the bar scrolls away and the
   height is 0. */
html:has(> body.vx-app-shell) {
  scroll-padding-top: calc(var(--vx-topbar-height, 0px) + 8px);
}

/* The title keeps its own width; the search takes the free space. */
body.vx-app-shell .vx-topbar-title {
  flex: 0 1 auto;
  min-width: 0;
}

body.vx-app-shell .vx-topbar .page-title {
  margin: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-2xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

body.vx-app-shell .vx-topbar .page-title::after {
  content: none;
}

body.vx-app-shell .vx-topbar-subtitle {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vx-app-shell .vx-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 420px;
  min-width: 0;
}

body.vx-app-shell .vx-search .vx-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--vx-text-muted);
  pointer-events: none;
}

body.vx-app-shell .vx-org-picker select {
  min-width: 200px;
}

/* One control height across the bar: search, buttons, avatar and icons. */
body.vx-app-shell .vx-topbar .vx-btn--icon {
  width: 40px;
  min-height: 40px;
}

body.vx-app-shell .vx-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--vx-space-2);
  margin-left: auto;
}

body.vx-app-shell .vx-topbar .vx-topbar-menu {
  display: none;
}

body.vx-app-shell .vx-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
  font-size: var(--vx-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.vx-app-shell .vx-avatar:hover {
  border-color: var(--vx-blue-600);
}

/* Work tabs: navigation, not an ARIA tablist. */
body.vx-app-shell .vx-worktabs {
  display: flex;
  gap: var(--vx-space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--vx-border);
  scrollbar-width: thin;
}

body.vx-app-shell .vx-worktab {
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-2);
  min-height: 48px;
  padding: 0 var(--vx-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-md);
  font-weight: 500;
  white-space: nowrap;
}

body.vx-app-shell .vx-worktab:hover {
  color: var(--vx-text);
}

body.vx-app-shell .vx-worktab[aria-current="page"] {
  border-bottom-color: var(--vx-blue-600);
  color: var(--vx-blue-700);
  font-weight: 600;
}

body.vx-app-shell .vx-worktab:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: -3px;
}

/* Legal footer beside the sidebar. The navy column continues through the
   footer's gutter, so the page ends in app chrome rather than a full-width
   strip; the separator line spans the content column only. */
body.vx-app-shell .legal-footer {
  padding-left: calc(var(--vx-sidebar-width) + 16px);
  border-top: 0;
  background:
    linear-gradient(var(--vx-border), var(--vx-border)) var(--vx-sidebar-width) 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--vx-navy-900) var(--vx-sidebar-width), var(--vx-canvas) 0);
  color: var(--vx-text-muted);
}

body.vx-app-shell .legal-footer a {
  color: var(--vx-blue-700);
}

/* ---- Stage 1: sidebar ---------------------------------------------------- */
body.vx-app-shell .vx-sidebar-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--vx-space-2);
  min-height: 100%;
  padding: var(--vx-space-6) var(--vx-space-3) var(--vx-space-4);
  background: var(--vx-navy-900);
}

body.vx-app-shell .vx-sidebar-scrim {
  display: none;
}

body.vx-app-shell .vx-brand {
  display: flex;
  align-items: center;
  gap: var(--vx-space-3);
  padding: 0 var(--vx-space-3) var(--vx-space-6);
}

body.vx-app-shell .vx-brand-mark {
  width: 28px;
  height: 28px;
  color: var(--vx-azure-500);
  stroke-width: 2.25;
}

body.vx-app-shell .vx-brand-text {
  display: grid;
  min-width: 0;
}

body.vx-app-shell .vx-brand-name {
  color: var(--vx-text-on-navy);
  font-size: var(--vx-text-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.vx-app-shell .vx-brand-firm {
  color: var(--vx-text-on-navy-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-sidebar .vx-sidebar-close {
  display: none;
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: var(--vx-text-on-navy);
}

body.vx-app-shell .vx-nav {
  display: grid;
  gap: var(--vx-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.vx-app-shell .vx-nav + .vx-nav {
  margin-top: var(--vx-space-3);
}

body.vx-app-shell .vx-nav.vx-nav--utility {
  margin-top: auto;
  padding-top: var(--vx-space-3);
  border-top: 1px solid var(--vx-navy-700);
}

body.vx-app-shell .vx-nav-item {
  display: flex;
  align-items: center;
  gap: var(--vx-space-3);
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--vx-text-on-navy);
  font-size: var(--vx-text-md);
  font-weight: 500;
  text-align: left;
}

body.vx-app-shell .vx-nav-item:hover {
  background: var(--vx-navy-800);
}

body.vx-app-shell .vx-nav-item:active {
  background: var(--vx-navy-700);
}

body.vx-app-shell .vx-nav-item[aria-current="page"] {
  background: var(--vx-blue-600);
  color: var(--vx-text-on-accent);
  font-weight: 600;
}

/* :where() keeps the generic ring at (0,3,1), so the current item's white
   ring below (0,4,1) wins; :is(a[href]) would have lifted it to (0,4,2). */
body.vx-app-shell .vx-sidebar :where(button, a[href]):focus-visible {
  outline: 2px solid var(--vx-focus-on-navy);
  outline-offset: 2px;
}

/* The current item's ring is white and inset within its blue fill (4.82:1). */
body.vx-app-shell .vx-nav-item[aria-current="page"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

body.vx-app-shell .vx-current-card {
  display: grid;
  gap: 2px;
  margin-top: var(--vx-space-4);
  padding: var(--vx-space-3);
  border-radius: 10px;
  background: var(--vx-navy-800);
  color: var(--vx-text-on-navy);
}

body.vx-app-shell .vx-current-card p {
  margin: 0;
}

body.vx-app-shell .vx-current-eyebrow,
body.vx-app-shell .vx-current-job {
  color: var(--vx-text-on-navy-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-current-eyebrow {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.vx-app-shell .vx-current-name {
  font-size: var(--vx-text-md);
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-current-card .status-chip {
  justify-self: start;
  margin-top: var(--vx-space-1);
}

body.vx-app-shell .vx-current-open {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 36px;
  margin-top: var(--vx-space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vx-text-on-navy);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell .vx-current-open .vx-icon {
  width: 16px;
  height: 16px;
}

body.vx-app-shell .vx-current-open:hover {
  text-decoration: underline;
}

/* ---- Stage 1: primitives ------------------------------------------------- */
body.vx-app-shell :is(.save-button, .mini-button, .dark-button, .danger-button) {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--vx-radius-button);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  line-height: 1.2;
}

body.vx-app-shell .save-button {
  border: 1px solid var(--vx-blue-600);
  background: var(--vx-blue-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .save-button:hover:not(:disabled) {
  border-color: var(--vx-blue-700);
  background: var(--vx-blue-700);
}

body.vx-app-shell :is(.mini-button, .dark-button) {
  border: 1px solid var(--vx-border-strong);
  background: var(--vx-surface);
  color: var(--vx-text);
}

body.vx-app-shell :is(.mini-button, .dark-button):hover:not(:disabled) {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 0;
  background: none;
  color: var(--vx-blue-700);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}

body.vx-app-shell .link-button:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* A destructive link keeps its warning colour (6.53:1 on the surface). */
body.vx-app-shell .link-button:is(.danger-link, .vx-link-danger) {
  color: var(--vx-red-700);
}

/* Sibling actions in a table cell or a card are separate targets, never one
   phrase ("Mark paid Void"). The space trails the leading control rather than
   leading the link, so a link that wraps onto its own line starts flush with
   the one above it; at a line end the trailing space is invisible. A photo
   card's actions stack full width below 700px, so they are spaced by the
   row's gap rather than a margin. */
body.vx-app-shell :is(td, th) :is(button, a, select):has(+ .link-button) {
  margin-right: var(--vx-space-3);
}

body.vx-app-shell .connected-inspection-card .button-row {
  gap: var(--vx-space-2) var(--vx-space-5);
}

body.vx-app-shell .danger-button {
  border: 1px solid var(--vx-red-600);
  background: var(--vx-red-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .danger-button:hover:not(:disabled) {
  border-color: var(--vx-red-700);
  background: var(--vx-red-700);
}

body.vx-app-shell :is(.save-button, .mini-button, .dark-button, .danger-button, .link-button, .vx-btn):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

body.vx-app-shell .vx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-button);
  background: var(--vx-surface);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

body.vx-app-shell .vx-btn:hover:not(:disabled) {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-btn--primary {
  border-color: var(--vx-blue-600);
  background: var(--vx-blue-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .vx-btn--primary:hover:not(:disabled) {
  border-color: var(--vx-blue-700);
  background: var(--vx-blue-700);
}

body.vx-app-shell .vx-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--vx-blue-700);
}

body.vx-app-shell .vx-btn--danger {
  border-color: var(--vx-red-600);
  background: var(--vx-red-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .vx-btn--icon {
  width: 36px;
  padding: 0;
}

body.vx-app-shell .vx-btn--block {
  width: 100%;
}

body.vx-app-shell .vx-btn--sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-btn--topbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--vx-text-md);
}

body.vx-app-shell .vx-btn--topbar .vx-icon {
  width: 18px;
  height: 18px;
}

body.vx-app-shell .vx-topbar :is(.mini-button, .save-button) {
  min-height: 40px;
}

/* Status chips: neutral unless a tone says otherwise, text always present.
   A chip is as wide as its text wherever it sits, never stretched by a grid
   or a stacked heading. */
body.vx-app-shell .status-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  align-self: start;
  width: max-content;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-gray-050);
  color: var(--vx-gray-600);
  padding: 2px 10px;
  font-size: var(--vx-text-xs);
  font-weight: 600;
  line-height: 1.5;
}

body.vx-app-shell .vx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.vx-app-shell :is(.vx-chip--booked, .vx-chip--warning) {
  background: var(--vx-amber-050);
  color: var(--vx-amber-700);
}

body.vx-app-shell :is(.vx-chip--progress, .vx-chip--info) {
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
}

body.vx-app-shell .vx-chip--review {
  background: var(--vx-violet-050);
  color: var(--vx-violet-700);
}

body.vx-app-shell .vx-chip--success {
  background: var(--vx-teal-050);
  color: var(--vx-teal-700);
}

body.vx-app-shell :is(.vx-chip--closed, .vx-chip--cancelled, .vx-chip--neutral) {
  background: var(--vx-gray-050);
  color: var(--vx-gray-600);
}

body.vx-app-shell .vx-chip--danger {
  background: var(--vx-red-050);
  color: var(--vx-red-700);
}

body.vx-app-shell .vx-chip--cancelled::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vx-red-500);
}

/* Due markers: colour plus an icon plus visually hidden text. */
body.vx-app-shell .vx-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell .vx-due .vx-icon {
  width: 16px;
  height: 16px;
}

body.vx-app-shell .vx-due--overdue {
  color: var(--vx-red-700);
  font-weight: 600;
}

body.vx-app-shell .vx-due--soon {
  color: var(--vx-amber-700);
  font-weight: 600;
}

/* Cards */
body.vx-app-shell .vx-card {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
  padding: var(--vx-space-5);
}

body.vx-app-shell .vx-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-3);
  margin-bottom: var(--vx-space-4);
}

body.vx-app-shell .vx-card-title {
  margin: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-xl);
  font-weight: 650;
  line-height: 1.3;
}

body.vx-app-shell .vx-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
  margin-top: var(--vx-space-4);
}

body.vx-app-shell .vx-muted {
  color: var(--vx-text-muted);
  font-weight: 400;
}

body.vx-app-shell .vx-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--vx-space-3) var(--vx-space-6);
  margin: var(--vx-space-4) 0 0;
}

body.vx-app-shell .vx-facts dt {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-facts dd {
  margin: 2px 0 0;
  color: var(--vx-text);
  font-size: var(--vx-text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-empty {
  display: grid;
  justify-items: start;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-empty p {
  margin: 0;
  color: var(--vx-text-muted);
}

body.vx-app-shell .vx-empty-icon {
  width: 32px;
  height: 32px;
  color: var(--vx-blue-600);
}

body.vx-app-shell .vx-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--vx-space-5);
  align-items: start;
}

body.vx-app-shell .vx-settings-card .dashboard-command-bar {
  flex-wrap: wrap;
  margin: var(--vx-space-4) 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Tables */
body.vx-app-shell .vx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-table :is(th, td) {
  padding: var(--vx-space-3);
  border-bottom: 1px solid var(--vx-border);
  text-align: left;
  vertical-align: middle;
}

body.vx-app-shell .vx-table th {
  background: var(--vx-surface-sunken);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .vx-table tbody tr:hover {
  background: var(--vx-surface-sunken);
}

/* Progress primitives: per-segment gates (never a proportional fill) and a
   loading skeleton that keeps its loading text. */
body.vx-app-shell .vx-gates {
  display: flex;
  gap: var(--vx-space-1);
  height: 8px;
}

body.vx-app-shell .vx-gate {
  flex: 1;
  border-radius: 4px;
  background: var(--vx-track);
}

body.vx-app-shell .vx-gate--done {
  background: var(--vx-teal-600);
}

/* Only a satisfied gate is solid. The current gate is a blue ring on its
   tint (the stepper's current step is a ring too), so it never reads as a
   second satisfied gate beside the count. */
body.vx-app-shell .vx-gate--current {
  background: var(--vx-blue-050);
  box-shadow: inset 0 0 0 2px var(--vx-blue-600);
}

body.vx-app-shell .vx-gate--waiting {
  background: var(--vx-track);
  box-shadow: inset 0 0 0 1px var(--vx-border-strong);
}

body.vx-app-shell .vx-gate--unavailable {
  background: repeating-linear-gradient(45deg, var(--vx-track) 0 3px, var(--vx-border-strong) 3px 4px);
}

body.vx-app-shell .vx-skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--vx-track) 0%, var(--vx-surface-sunken) 50%, var(--vx-track) 100%);
  background-size: 200% 100%;
  animation: vx-shimmer 1.4s ease-in-out infinite;
}

@keyframes vx-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.vx-app-shell .vx-skeleton {
    animation: none;
  }
}

/* ---- Stage 1: legacy adapters -------------------------------------------- */
body.vx-app-shell .gray-panel {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
  padding: var(--vx-space-5);
}

body.vx-app-shell .panel-title {
  color: var(--vx-text);
  font-size: var(--vx-text-lg);
  font-weight: 650;
}

body.vx-app-shell .report-note {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .connected-action-error {
  border-color: var(--vx-red-600);
  background: var(--vx-red-050);
}

body.vx-app-shell :where(.vx-app, #modal-root) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea) {
  max-width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-input);
  background-color: var(--vx-surface);
  color: var(--vx-text);
  /* One input typography in every card: the legacy field controls rendered
     their values bold and small. Labels keep their own weight. */
  font-family: inherit;
  font-size: var(--vx-text-md);
  font-weight: 400;
}

/* A control sizes itself intrinsically (a select to its longest option, an
   input to its size attribute); inside a form label it takes the label's
   width instead, so no control can overflow its grid cell into the next one
   or widen the page past the viewport. */
body.vx-app-shell .vx-app label > :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea) {
  width: 100%;
  min-width: 0;
}

body.vx-app-shell .vx-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px 0 38px;
  font-size: var(--vx-text-sm);
  /* A narrow bar ends the hint in an ellipsis, never a clipped word. */
  text-overflow: ellipsis;
}

body.vx-app-shell .vx-search input::placeholder {
  color: var(--vx-text-muted);
  text-overflow: ellipsis;
}

body.vx-app-shell :where(.vx-app, #modal-root) :is(input, select, textarea):disabled {
  border-color: var(--vx-border);
  background-color: var(--vx-surface-sunken);
  color: var(--vx-text-muted);
  cursor: not-allowed;
}

body.vx-app-shell :where(.vx-app, #modal-root) :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 1px;
  border-color: var(--vx-focus);
}

body.vx-app-shell .dashboard-control {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .dashboard-control :is(input, select) {
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .assignment-table {
  min-width: 36rem;
  table-layout: auto;
}

body.vx-app-shell .assignment-table :is(th, td) {
  width: auto;
  height: auto;
  padding: 10px 12px;
  border-right: 0;
  border-bottom: 1px solid var(--vx-border);
  font-size: var(--vx-text-sm);
  text-align: left;
  /* First lines share one baseline, so a row's text and its action links
     (which have a 24px target) line up. */
  vertical-align: baseline;
}

body.vx-app-shell .assignment-table th {
  background: var(--vx-surface-sunken);
  color: var(--vx-text-muted);
  font-weight: 600;
}

/* A row header (a task, a party, a comparable) is the row's primary data, not
   a column label: it reads as data on the row's own background. */
body.vx-app-shell .assignment-table tbody th,
body.vx-app-shell .assignment-table tbody th[scope="row"] {
  height: auto;
  background: transparent;
  color: var(--vx-text);
  font-weight: 600;
}

body.vx-app-shell .assignment-table tbody tr:hover {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .assignment-table tbody tr.connected-selected-row {
  background: var(--vx-blue-050);
}

body.vx-app-shell .assignment-table .sort-button {
  color: inherit;
  font-weight: 600;
}

/* A scroll container must also contain its visually hidden labels, which
   are absolutely positioned: otherwise they escape the scroller and widen
   the whole page. */
body.vx-app-shell :is(.grid-shell, .workspace-tabs, .vx-worktabs) {
  position: relative;
}

/* Scroll shadows: an edge darkens only while more columns lie beyond it. The
   two "local" covers scroll with the content and hide the fixed "scroll"
   shadows when an edge is reached. Gradients only, no image resource. */
body.vx-app-shell .grid-shell {
  border: 1px solid var(--vx-border);
  border-radius: 10px;
  background:
    linear-gradient(90deg, var(--vx-surface) 40%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--vx-surface) 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(7, 29, 65, 0.2), rgba(7, 29, 65, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(7, 29, 65, 0.2), rgba(7, 29, 65, 0)) right center / 14px 100% no-repeat scroll,
    var(--vx-surface);
  box-shadow: none;
}

/* The same cue on the two tab strips, which scroll sideways on a phone. */
body.vx-app-shell :is(.vx-worktabs, .workspace-tabs) {
  background:
    linear-gradient(90deg, var(--vx-canvas) 40%, rgba(245, 248, 252, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--vx-canvas) 40%, rgba(245, 248, 252, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(7, 29, 65, 0.22), rgba(7, 29, 65, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(7, 29, 65, 0.22), rgba(7, 29, 65, 0)) right center / 14px 100% no-repeat scroll;
}

body.vx-app-shell .connected-workload-summary > div,
body.vx-app-shell .connected-pipeline-board,
body.vx-app-shell .connected-workspace-header {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
}

body.vx-app-shell .connected-workload-summary {
  gap: var(--vx-space-4);
}

body.vx-app-shell .connected-workload-summary > div {
  padding: var(--vx-space-4) var(--vx-space-5);
}

body.vx-app-shell .connected-workload-summary span {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .connected-workload-summary strong {
  color: var(--vx-text);
  font-size: var(--vx-text-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

body.vx-app-shell .connected-workspace {
  gap: var(--vx-space-4);
}

body.vx-app-shell .connected-workspace-header .button-row {
  gap: var(--vx-space-2) var(--vx-space-4);
}

body.vx-app-shell .workspace-tabs {
  flex-wrap: nowrap;
  gap: var(--vx-space-1);
  border-bottom: 1px solid var(--vx-border);
  scrollbar-width: thin;
}

body.vx-app-shell .workspace-tab {
  min-height: 44px;
  padding: 0 var(--vx-space-4);
  border-bottom: 3px solid transparent;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-md);
  font-weight: 500;
}

body.vx-app-shell .workspace-tab:hover {
  color: var(--vx-text);
}

body.vx-app-shell .workspace-tab-active {
  border-bottom-color: var(--vx-blue-600);
  color: var(--vx-blue-700);
  font-weight: 600;
}

body.vx-app-shell .workspace-tab:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: -3px;
}

body.vx-app-shell .connected-engagement-modal {
  border-color: var(--vx-border);
  border-radius: var(--vx-radius-card);
  color: var(--vx-text);
  font-family: var(--vx-font);
  box-shadow: var(--vx-shadow-raised);
}

body.vx-app-shell .connected-engagement-heading h2 {
  color: var(--vx-text);
}

body.vx-app-shell .modal-backdrop :is(.comps-modal, .gray-panel) {
  border-radius: var(--vx-radius-card);
}

body.vx-app-shell .vx-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
}

/* The empty workspace's link to the queue is only needed where the queue is
   not already on screen. */
body.vx-app-shell .vx-app[data-vx-view="assignments"] .vx-empty-queue-link {
  display: none;
}

body.vx-app-shell .connected-workspace-empty .vx-empty-queue-link {
  margin-top: var(--vx-space-3);
}

/* While the organization notice shows, the empty queue and workspace beneath
   it would only repeat it ("Loading authorized organizations…"). */
body.vx-app-shell .vx-app:has(> [data-vx-region="orgrequired"]:not([hidden])) > :is([data-vx-region="queue"], [data-vx-region="engagement"]) {
  display: none;
}

/* The pipeline card's content lines up with every other card's (20px). */
body.vx-app-shell .connected-pipeline-board {
  padding: var(--vx-space-5);
}

/* Loading or refreshing a report is never the screen's dominant action: the
   receivables disclosure and its as-of refresh read as secondary buttons. */
body.vx-app-shell .save-button[data-action="load-connected-receivables"] {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface);
  color: var(--vx-text);
}

body.vx-app-shell .save-button[data-action="load-connected-receivables"]:hover:not(:disabled) {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface-sunken);
}

/* A card's count ("6 shown", "3 open of 4") is metadata beside its title:
   a small neutral pill on the title's baseline, never bold body text in the
   corner. The queue card's count matches. Below 820px the heading stacks
   (legacy rule) and the pill keeps its own width. */
body.vx-app-shell :is(.connected-valuation-heading, .vx-card-header) > .dashboard-result-count {
  flex: none;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-gray-050);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

body.vx-app-shell .vx-card-header > .dashboard-result-count {
  align-self: center;
}

@media (min-width: 821px) {
  body.vx-app-shell .connected-valuation-heading:has(> .dashboard-result-count) {
    align-items: baseline;
  }

  body.vx-app-shell .connected-valuation-heading > .dashboard-result-count {
    align-self: baseline;
  }
}

/* Timestamps and dates never break at a hyphen. An identifier stays on one
   line where the table has room (its column widens; the table scrolls in its
   shell if it must); on a phone it wraps as one block at the column edge,
   never at each hyphen. */
body.vx-app-shell .vx-nowrap {
  white-space: nowrap;
}

body.vx-app-shell .vx-id {
  font-size: var(--vx-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  body.vx-app-shell .vx-id {
    white-space: normal;
    word-break: break-all;
  }
}

/* An explanation beside a row's controls (the last administrator) sits on
   its own line beneath them, not in the button row. */
body.vx-app-shell :is(td, th) .mini-button + .report-note {
  display: block;
  margin-top: var(--vx-space-2);
}

/* The data mode is a two-way switch: the current mode is the selected half
   of a segmented control, not a call to action. */
body.vx-app-shell .vx-settings-card .dashboard-command-bar {
  align-items: center;
}

/* Kept side by side on a phone too: the legacy 820px rule stacks and
   stretches both, which made the current mode a full-width primary. */
body.vx-app-shell .vx-settings-card .dashboard-actions {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

@media (max-width: 820px) {
  body.vx-app-shell .vx-settings-card .dashboard-command-bar {
    align-items: flex-start;
  }
}

body.vx-app-shell .vx-settings-card .dashboard-actions > button {
  position: relative;
  border: 1px solid var(--vx-border-strong);
  border-radius: 0;
  background: var(--vx-surface);
  color: var(--vx-text);
}

body.vx-app-shell .vx-settings-card .dashboard-actions > button:first-child {
  border-radius: var(--vx-radius-button) 0 0 var(--vx-radius-button);
}

body.vx-app-shell .vx-settings-card .dashboard-actions > button:last-child {
  margin-left: -1px;
  border-radius: 0 var(--vx-radius-button) var(--vx-radius-button) 0;
}

body.vx-app-shell .vx-settings-card .dashboard-actions > button[aria-pressed="true"] {
  z-index: 1;
  border-color: var(--vx-blue-600);
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
}

body.vx-app-shell .vx-settings-card .dashboard-actions > button:hover:not(:disabled, [aria-pressed="true"]) {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-settings-card .dashboard-actions > button:focus-visible {
  z-index: 2;
}

/* A visible table caption is the table's title: it starts at the scroller's
   visible left edge, never centred across columns scrolled out of view. */
body.vx-app-shell :is(.grid-shell, .table-scroll) caption:not(.visually-hidden) {
  padding: var(--vx-space-2) var(--vx-space-3);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  text-align: start;
}

/* ---- Stage 1: responsive frame ------------------------------------------- */
/* Where the page is wide enough for a form row, a button keeps its own width
   at the end of the row instead of stretching to fill its grid cell; below
   720px forms stack and full-width buttons are intended. Zero specificity, so
   a form that deliberately places its button (the assignment definition, the
   reconciliation) keeps that placement. */
@media (min-width: 721px) {
  :where(body.vx-app-shell .vx-app form) > :where(.save-button, .mini-button) {
    justify-self: start;
    align-self: end;
  }
}

/* One row from 1280px. The title takes the free space after itself, so the
   search, any organization picker and the actions keep one position in every
   view whatever the title's length; a line that wraps (several organizations)
   still ends at the right edge. The search's basis lets the row fit at
   1280px with the longest title, and it grows to its 420px cap from there. */
@media (min-width: 1280px) {
  body.vx-app-shell .vx-topbar {
    justify-content: flex-end;
  }

  body.vx-app-shell .vx-topbar-title {
    margin-right: auto;
  }

  body.vx-app-shell .vx-search {
    flex-basis: 200px;
  }

  body.vx-app-shell .vx-topbar-actions {
    margin-left: 0;
  }
}

/* Title and actions share the first row; the search takes its own full-width
   row, as it does on a phone. A two-row bar would hold about a sixth of a
   laptop or tablet screen for good, so below 1280px it scrolls away with the
   page, as it does on a phone; the shell then reserves no scroll padding for
   it (syncVistaTopbarHeight reads the computed position). */
@media (max-width: 1279px) {
  body.vx-app-shell .vx-topbar {
    position: relative;
  }

  body.vx-app-shell .vx-search {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 1099px) {
  body.vx-app-shell .body-shell.dashboard-mode {
    grid-template-columns: var(--vx-sidebar-rail) minmax(0, 1fr);
    background: linear-gradient(90deg, var(--vx-navy-900) var(--vx-sidebar-rail), var(--vx-canvas) 0);
  }

  body.vx-app-shell .vx-app {
    padding: 0 var(--vx-space-6) var(--vx-space-6);
  }

  body.vx-app-shell .vx-topbar {
    margin: 0 calc(-1 * var(--vx-space-6));
    padding: var(--vx-space-3) var(--vx-space-6);
  }

  body.vx-app-shell .legal-footer {
    padding-left: calc(var(--vx-sidebar-rail) + 16px);
    background:
      linear-gradient(var(--vx-border), var(--vx-border)) var(--vx-sidebar-rail) 0 / 100% 1px no-repeat,
      linear-gradient(90deg, var(--vx-navy-900) var(--vx-sidebar-rail), var(--vx-canvas) 0);
  }
}

/* Icon rail: labels stay in the accessibility tree and as tooltips. */
@media (min-width: 721px) and (max-width: 1099px) {
  body.vx-app-shell .vx-sidebar-panel {
    padding: var(--vx-space-4) var(--vx-space-2);
  }

  body.vx-app-shell .vx-brand {
    justify-content: center;
    padding: 0 0 var(--vx-space-4);
  }

  body.vx-app-shell :is(.vx-nav-label, .vx-brand-text) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  body.vx-app-shell .vx-nav-item {
    justify-content: center;
    padding: 10px;
  }

  body.vx-app-shell .vx-current-card {
    display: none;
  }
}

/* Drawer */
@media (max-width: 720px) {
  body.vx-app-shell .body-shell.dashboard-mode {
    grid-template-columns: minmax(0, 1fr);
    background: var(--vx-canvas);
  }

  body.vx-app-shell .vx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: var(--vx-drawer-width);
    height: auto;
    overflow: visible;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }

  body.vx-app-shell.vx-sidebar-open .vx-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }

  /* The drawer's contents inherit its visibility and must not animate it:
     under the reduced-motion rule every element carries a tiny transition
     duration, which would leave them hidden at the moment focus moves in. */
  body.vx-app-shell .vx-sidebar * {
    transition-property: none;
  }

  body.vx-app-shell .vx-sidebar-panel {
    height: 100%;
    overflow-y: auto;
    box-shadow: var(--vx-shadow-raised);
  }

  body.vx-app-shell.vx-sidebar-open .vx-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    background: rgba(7, 29, 65, 0.45);
  }

  body.vx-app-shell .vx-sidebar .vx-sidebar-close {
    display: inline-flex;
  }

  body.vx-app-shell .vx-topbar .vx-topbar-menu {
    display: inline-flex;
  }

  body.vx-app-shell .vx-app {
    gap: var(--vx-space-4);
    padding: 0 var(--vx-space-4) var(--vx-space-6);
  }

  /* An app header in three aligned rows: menu, title, refresh and avatar;
     the two creation actions side by side, secondary then primary; the
     search. The actions box dissolves (display: contents) so its buttons
     take part in these rows; a zero-height ::after forces the first break. */
  body.vx-app-shell .vx-topbar {
    position: relative;
    row-gap: 0;
    column-gap: var(--vx-space-2);
    margin: 0 calc(-1 * var(--vx-space-4));
    padding: var(--vx-space-3) var(--vx-space-4);
  }

  body.vx-app-shell .vx-topbar::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  body.vx-app-shell .vx-topbar .page-title {
    font-size: var(--vx-text-xl);
  }

  body.vx-app-shell .vx-topbar-title {
    flex: 1 1 0;
  }

  body.vx-app-shell .vx-topbar-actions {
    display: contents;
  }

  body.vx-app-shell .vx-topbar-actions > [data-action="refresh-connected"] {
    order: 1;
  }

  body.vx-app-shell .vx-topbar-actions > .vx-avatar {
    order: 2;
  }

  body.vx-app-shell .vx-topbar-actions > :is(.save-button, .mini-button) {
    flex: 1 1 0;
    order: 4;
    min-width: 0;
    margin-top: var(--vx-space-2);
    padding: 0 10px;
  }

  body.vx-app-shell :is(.vx-search, .vx-org-picker) {
    flex-basis: 100%;
    order: 5;
    max-width: none;
    margin-top: var(--vx-space-2);
  }

  body.vx-app-shell .vx-org-picker select {
    width: 100%;
    min-width: 0;
  }

  /* Tab strips: text only, tighter, so more of each strip is on screen; the
     scroll shadows show there is more. */
  body.vx-app-shell .vx-worktab .vx-icon {
    display: none;
  }

  body.vx-app-shell :is(.vx-worktab, .workspace-tab) {
    padding: 0 var(--vx-space-3);
  }

  /* Wide tables scroll inside their shell rather than wrapping a word per
     line; the shell's scroll shadows show the columns beyond the edge. */
  body.vx-app-shell .assignment-table :is(th, td) {
    min-width: 7rem;
  }

  body.vx-app-shell .vx-card,
  body.vx-app-shell .gray-panel,
  body.vx-app-shell .connected-pipeline-board {
    padding: var(--vx-space-4);
  }

  body.vx-app-shell .connected-comparable-set-lifecycle {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A visible caption wraps within the visible part of its scrolling table
     and stays at its left edge while the columns scroll (the shell's inner
     width here is the viewport less 68px of gutters, padding and borders). */
  body.vx-app-shell :is(.grid-shell, .table-scroll) caption:not(.visually-hidden) {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    max-width: calc(100vw - 72px);
  }

  /* The notice takes the first line and the two links share the second,
     rather than one link wrapping alone. */
  body.vx-app-shell .legal-footer {
    justify-content: flex-start;
    row-gap: var(--vx-space-1);
    padding-left: 16px;
    border-top: 1px solid var(--vx-border);
    background: var(--vx-canvas);
  }

  body.vx-app-shell .legal-footer span {
    flex-basis: 100%;
    margin-right: 0;
  }
}

/* 44px targets for touch (G10). A control with a fixed width (an icon
   button, the avatar) is widened too, and the round avatar stays round. */
@media (pointer: coarse) {
  body.vx-app-shell :is(button, .vx-nav-item, select, input:not([type="checkbox"], [type="radio"])) {
    min-height: 44px;
  }

  body.vx-app-shell :is(.vx-btn--icon, .vx-avatar) {
    min-width: 44px;
  }

  body.vx-app-shell .vx-avatar {
    width: 44px;
    height: 44px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.status-chip, .vx-chip, .vx-card, .gray-panel, .vx-gate, .vx-nav-item[aria-current="page"]) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell :is(.vx-nav-item, .vx-worktab, .workspace-tab)[aria-current] {
    outline: 2px solid Highlight;
  }
}

/* ---- Stage 2: KPIs and queue --------------------------------------------- */
/* KPI cards: four counts from the firm-wide engagement list, each on its
   tone's tint with an icon disc; the money tiles follow on the next row in
   the Overview and are hidden in the Assignments view. Children are placed by
   class, so a money tile (label first in the DOM) lines up with the counts.
   The text column is anchored to the top of every card (never centred), and
   every count card carries a one-line note, so the four figures and labels
   share their lines across the row whatever a note's length. */
body.vx-app-shell .vx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--vx-space-4);
}

body.vx-app-shell .vx-kpis > .vx-kpi {
  --vx-kpi-tint: var(--vx-blue-050);
  --vx-kpi-edge: #cfe0ff;
  --vx-kpi-ink: var(--vx-blue-600);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label"
    "icon note";
  align-content: start;
  align-items: center;
  column-gap: var(--vx-space-4);
  row-gap: 2px;
  min-height: 100px;
  padding: var(--vx-space-5);
  border: 1px solid var(--vx-kpi-edge);
  border-radius: var(--vx-radius-card);
  background: var(--vx-kpi-tint);
  box-shadow: none;
}

body.vx-app-shell .vx-kpis > .vx-kpi--amber {
  --vx-kpi-tint: var(--vx-amber-050);
  --vx-kpi-edge: #f6dcaa;
  --vx-kpi-ink: var(--vx-amber-600);
}

body.vx-app-shell .vx-kpis > .vx-kpi--violet {
  --vx-kpi-tint: var(--vx-violet-050);
  --vx-kpi-edge: #dcd3ff;
  --vx-kpi-ink: var(--vx-violet-500);
}

body.vx-app-shell .vx-kpis > .vx-kpi--teal {
  --vx-kpi-tint: var(--vx-teal-050);
  --vx-kpi-edge: #bfe9e1;
  --vx-kpi-ink: var(--vx-teal-600);
}

body.vx-app-shell .vx-kpis > .vx-kpi--money {
  --vx-kpi-tint: var(--vx-surface);
  --vx-kpi-edge: var(--vx-border);
  --vx-kpi-ink: var(--vx-blue-600);
}

body.vx-app-shell .vx-app[data-vx-view="assignments"] .vx-kpi--money {
  display: none;
}

body.vx-app-shell .vx-kpi .vx-kpi-icon {
  grid-area: icon;
  align-self: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--vx-surface);
  color: var(--vx-kpi-ink);
}

body.vx-app-shell .vx-kpis > .vx-kpi--money .vx-kpi-icon {
  background: var(--vx-blue-050);
}

body.vx-app-shell .vx-kpi .vx-kpi-value {
  grid-area: value;
  min-width: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* An amount in a currency is longer than a count: smaller, and never broken
   inside the figure (a split "USD 17,95" / "0.00" can be misread). The
   formatter joins the code and the figure with a no-break space in most
   locales, so the amount stays on one line; the tiles are sized so it fits.
   Where the cards are four across, two money tiles share one row; a money
   tile left alone on its row takes the whole row. */
body.vx-app-shell .vx-kpi--money .vx-kpi-value {
  font-size: var(--vx-text-2xl);
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (min-width: 1100px) {
  body.vx-app-shell .vx-kpis > .vx-kpi--money {
    grid-column: span 2;
  }
}

body.vx-app-shell .vx-kpis > .vx-kpi--money:nth-child(odd):last-child {
  grid-column: 1 / -1;
}

body.vx-app-shell .vx-kpi .vx-kpi-label {
  grid-area: label;
  min-width: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
  font-weight: 500;
  line-height: 1.35;
}

body.vx-app-shell .vx-kpi > :is(small, .link-button) {
  grid-area: note;
  justify-self: start;
  min-width: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  line-height: 1.35;
  text-wrap: balance;
}

body.vx-app-shell .vx-kpi > .link-button {
  color: var(--vx-blue-700);
}

/* The overdue count beside "Due in 7 days": red text (5.99:1 on the amber
   tint, pinned in token-contrast.test.mjs) with an alert icon, never colour
   alone. */
body.vx-app-shell .vx-kpi > .vx-kpi-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--vx-red-700);
  font-weight: 600;
}

body.vx-app-shell .vx-kpi-alert .vx-icon {
  width: 14px;
  height: 14px;
}

body.vx-app-shell .vx-kpis[aria-busy="true"] .vx-kpi-value {
  color: var(--vx-text-muted);
}

/* The queue card: title, count and status filter, with Reset at the right. */
body.vx-app-shell .vx-queue {
  padding: var(--vx-space-5) var(--vx-space-5) var(--vx-space-4);
}

body.vx-app-shell .vx-queue .vx-card-header {
  margin-bottom: var(--vx-space-4);
}

/* The queue's title is the size of its peer cards' headings (the Overview's
   Pipeline, Public intake queue and Receivables are .panel-title, 16/650), so
   switching between the Overview and Assignments work tabs keeps one heading
   size. .panel-title itself is left alone: the workspace sections use it. */
body.vx-app-shell .vx-queue .vx-card-title {
  font-size: var(--vx-text-lg);
}

body.vx-app-shell .vx-queue .vx-queue-filter {
  margin-left: auto;
}

body.vx-app-shell .vx-queue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vx-space-6);
}

/* The table runs flush in the card, with row dividers only: no second
   border or radius inside the card. The header row spans the card's inner
   width, and the outer cells keep the card's padding so text lines up with
   the title. The shell's white background stays: it is the card's own white
   and carries the sideways-scroll cue should a narrow table ever scroll. */
body.vx-app-shell .vx-queue .grid-shell {
  margin-inline: calc(-1 * var(--vx-space-5));
  border: 0;
  border-radius: 0;
}

body.vx-app-shell .vx-queue-table tr > :first-child {
  padding-left: var(--vx-space-5);
}

body.vx-app-shell .vx-queue-table tr > :last-child {
  padding-right: var(--vx-space-5);
}

body.vx-app-shell .vx-queue-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-queue-table :is(th, td) {
  padding: var(--vx-space-3);
  vertical-align: middle;
}

body.vx-app-shell .vx-queue-table thead th {
  white-space: nowrap;
}

body.vx-app-shell .vx-queue-table tbody tr:last-child td {
  border-bottom: 0;
}

body.vx-app-shell .vx-queue-table .sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* The sort headers sit above the rows' overlays, as the chevron does. A row
   is its overlay's containing block in Chrome; an engine that ignored that
   (risk K21) would stretch every overlay over the nearest positioned
   ancestor, the whole .grid-shell with its header row, and without this
   the headers could not be clicked. */
body.vx-app-shell .vx-queue-table thead .sort-button {
  position: relative;
  z-index: 1;
}

body.vx-app-shell .vx-queue-table .sort-button:hover {
  color: var(--vx-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.vx-app-shell .vx-queue-table th:is([aria-sort="ascending"], [aria-sort="descending"]) {
  color: var(--vx-text);
}

body.vx-app-shell .vx-queue-table .vx-sort-icon {
  width: 14px;
  height: 14px;
  transition: opacity 0.15s ease;
}

body.vx-app-shell .vx-queue-table .vx-sort-asc {
  transform: rotate(-90deg);
}

body.vx-app-shell .vx-queue-table .vx-sort-desc {
  transform: rotate(90deg);
}

/* An unsorted column's two-way glyph is muted; it firms up on hover and
   focus. The column's state is aria-sort, never the glyph alone. */
body.vx-app-shell .vx-queue-table .vx-sort-none {
  opacity: 0.6;
}

body.vx-app-shell .vx-queue-table .sort-button:is(:hover, :focus-visible) .vx-sort-none {
  opacity: 1;
}

/* A whole row is one target: the property button's ::after covers the row
   (CSS only, no synthetic click), and the chevron sits above it. */
body.vx-app-shell .vx-queue-row {
  position: relative;
}

body.vx-app-shell .vx-queue-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vx-text);
  font: inherit;
  font-size: var(--vx-text-md);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

body.vx-app-shell .vx-queue-select::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer;
}

body.vx-app-shell .vx-queue-select .vx-icon {
  color: var(--vx-text-muted);
}

/* A property name wraps between its words. break-word, unlike anywhere,
   leaves the column's minimum at the longest word, so a narrow queue
   scrolls in its .grid-shell rather than squeezing the name to a few
   letters a line. Phones, where every column counts, break anywhere
   (below). */
body.vx-app-shell .vx-queue-name {
  overflow-wrap: break-word;
}

body.vx-app-shell .vx-queue-meta {
  display: none;
  margin-top: 2px;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-queue-table .connected-row-loading {
  margin-top: 4px;
  color: var(--vx-blue-700);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .vx-queue-table :is(.vx-col-due, .vx-col-status) {
  white-space: nowrap;
}

/* The due date and the status chip are inline boxes, which sit on the text
   baseline, so the smaller padded chip rode about 2px below the date and the
   job number. Centred on the line, the date, the chip and the plain text of
   the other cells share one centre line across the row. */
body.vx-app-shell .vx-queue-table :is(.vx-due, .vx-muted, .status-chip) {
  vertical-align: middle;
}

/* Every date in the Due column starts at one left edge: a date with no
   urgency, and "No due date", keep the slot an overdue or due-soon marker
   takes (the 16px icon and the 4px gap of .vx-due). */
body.vx-app-shell .vx-queue-table .vx-col-due > :is(.vx-due:not(.vx-due--overdue):not(.vx-due--soon), .vx-muted) {
  padding-left: 20px;
}

body.vx-app-shell .vx-queue-table .vx-col-open {
  width: 1%;
  padding-block: var(--vx-space-2);
  text-align: right;
}

body.vx-app-shell .vx-queue-open {
  position: relative;
  z-index: 1;
  border-color: transparent;
  background: transparent;
  color: var(--vx-text-muted);
}

body.vx-app-shell .vx-queue-open:hover:not(:disabled) {
  border-color: var(--vx-border);
  background: var(--vx-surface);
  color: var(--vx-blue-700);
}

/* Row states: an unselected row holding focus is tinted, so a row reached
   with the arrow keys can be followed across the columns; the selected row is
   the blue tint with a blue bar whether or not it holds focus (focus itself is
   the button's ring); an overdue row has a red bar (the selected row's blue
   bar wins); finished work reads quieter. */
body.vx-app-shell .vx-queue-table .vx-queue-row:not(.connected-selected-row):focus-within {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-queue-table .vx-queue-row--overdue {
  box-shadow: inset 3px 0 0 var(--vx-red-500);
}

body.vx-app-shell .vx-queue-table .vx-queue-row.connected-selected-row {
  background: var(--vx-blue-050);
  box-shadow: inset 3px 0 0 var(--vx-blue-600);
}

/* A chip keeps its own edge on any row: a hovered row's tint matches the
   neutral chip and the selected row's tint matches the In Progress chip, so
   in the queue a chip is outlined in its own ink, and on the selected row it
   sits on the surface (every tone's -700 text is 6.2:1 or more on white). */
body.vx-app-shell .vx-queue-table .status-chip {
  border-color: color-mix(in srgb, currentColor 24%, transparent);
}

body.vx-app-shell .vx-queue-table .vx-queue-row.connected-selected-row .status-chip {
  background: var(--vx-surface);
}

body.vx-app-shell .vx-queue-row--closed .vx-queue-name {
  color: var(--vx-text-muted);
  font-weight: 500;
}

/* Sorted by due date, one quiet divider row marks where finished work
   starts. It is a row header (so a screen reader announces the group), not
   a control, and carries no hook; it reads as a label, not as a column
   header. */
body.vx-app-shell .vx-queue-table .vx-queue-group > th {
  padding-top: var(--vx-space-5);
  padding-bottom: var(--vx-space-2);
  background: var(--vx-surface);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

/* Every row is at least a touch target tall: the property button's overlay
   covers the row, so the row is the target. */
body.vx-app-shell .vx-queue-table tbody tr.vx-queue-row {
  height: 48px;
}

body.vx-app-shell .vx-queue-table .empty-dashboard-row {
  height: 96px;
  color: var(--vx-text-muted);
  font-weight: 600;
}

/* The pipeline board in the shell: one pill per stage, coloured by the
   stage's tone, with its count in a badge. The selected stage is filled and
   carries a check (its pressed state is also aria-pressed). */
body.vx-app-shell .pipeline-board {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
  margin-top: var(--vx-space-4);
}

body.vx-app-shell .pipeline-card {
  --vx-pill-tint: var(--vx-gray-050);
  --vx-pill-ink: var(--vx-gray-600);
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-2);
  min-height: 32px;
  margin: 0;
  padding: 3px 12px 3px 4px;
  border: 1px solid transparent;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-pill-tint);
  color: var(--vx-pill-ink);
  box-shadow: none;
  font-size: var(--vx-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

body.vx-app-shell .pipeline-card[data-status="Booked"] {
  --vx-pill-tint: var(--vx-amber-050);
  --vx-pill-ink: var(--vx-amber-700);
}

body.vx-app-shell .pipeline-card[data-status="In Progress"] {
  --vx-pill-tint: var(--vx-blue-050);
  --vx-pill-ink: var(--vx-blue-700);
}

body.vx-app-shell .pipeline-card[data-status="Under Review"] {
  --vx-pill-tint: var(--vx-violet-050);
  --vx-pill-ink: var(--vx-violet-700);
}

body.vx-app-shell .pipeline-card:is([data-status="Completed"], [data-status="Complete-POD"]) {
  --vx-pill-tint: var(--vx-teal-050);
  --vx-pill-ink: var(--vx-teal-700);
}

body.vx-app-shell .pipeline-card:not(.pipeline-card-static):hover {
  border-color: var(--vx-pill-ink);
}

body.vx-app-shell .pipeline-card .pipeline-card-count {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-surface);
  color: var(--vx-pill-ink);
  font-size: var(--vx-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body.vx-app-shell .pipeline-card .pipeline-card-label {
  color: inherit;
  font-size: var(--vx-text-sm);
  text-transform: none;
}

body.vx-app-shell .pipeline-card.pipeline-card-selected {
  border-color: var(--vx-pill-ink);
  background: var(--vx-pill-ink);
  color: var(--vx-text-on-accent);
  box-shadow: none;
}

body.vx-app-shell .pipeline-card.pipeline-card-selected::before {
  content: "\2713" / "";
  margin-left: 6px;
  font-weight: 700;
}

body.vx-app-shell .pipeline-card-static {
  cursor: default;
}

/* "Other status" is a count, not a control (it has no action and is not a
   button): no fill and no badge, a dashed outline and muted words, so it
   never reads as one of the stage buttons beside it. The markup is the
   board's own and stays as it is. */
body.vx-app-shell .pipeline-card.pipeline-card-static {
  padding-inline: 12px;
  border: 1px dashed var(--vx-border-strong);
  background: transparent;
  color: var(--vx-text-muted);
  font-weight: 500;
}

body.vx-app-shell .pipeline-card-static .pipeline-card-count {
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--vx-text);
}

/* Open work past its due date reads the same everywhere on the page: the
   board's line takes the due card's red and a warning mark, as the card's
   "n overdue" note does. The words carry the meaning, so the mark (a text
   glyph, as the markup is the board's own) is hidden from assistive
   technology, like the selected pill's check. */
body.vx-app-shell .pipeline-board-overdue {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--vx-red-700);
  font-weight: 600;
}

body.vx-app-shell .pipeline-board-overdue::before {
  content: "\26A0\FE0E" / "";
  flex: none;
}

/* KPIs and queue at narrower widths. */
/* Four narrow cards beside the full sidebar: the icon sits beside the figure
   and the words take the card's full width beneath them (as on a phone). */
@media (min-width: 1100px) and (max-width: 1279px) {
  body.vx-app-shell .vx-kpis > .vx-kpi {
    grid-template-areas:
      "icon value"
      "label label"
      "note note";
    align-content: start;
    column-gap: var(--vx-space-3);
    row-gap: 4px;
    padding: var(--vx-space-4);
  }

  body.vx-app-shell .vx-kpi .vx-kpi-label {
    margin-top: var(--vx-space-1);
  }
}

@media (max-width: 1099px) {
  body.vx-app-shell .vx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vx-space-3);
  }

  /* Two by two beside the rail, the cards are compact, so the queue starts
     higher on a short screen (a phone's rules below replace these). */
  body.vx-app-shell .vx-kpis > .vx-kpi {
    min-height: 88px;
    padding: var(--vx-space-3) var(--vx-space-4);
  }
}

@media (max-width: 720px) {
  body.vx-app-shell .vx-kpis {
    gap: var(--vx-space-3);
  }

  /* Two cards to a row: the icon sits beside the figure and the words take
     the card's full width beneath them. */
  body.vx-app-shell .vx-kpis > .vx-kpi {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "icon value"
      "label label"
      "note note";
    align-content: start;
    column-gap: var(--vx-space-3);
    row-gap: 4px;
    min-height: 0;
    padding: var(--vx-space-4) var(--vx-space-3);
  }

  body.vx-app-shell .vx-kpi .vx-kpi-label {
    margin-top: var(--vx-space-1);
  }

  /* A money tile takes the whole row, so an amount reads on one line. */
  body.vx-app-shell .vx-kpis > .vx-kpi--money {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .vx-kpi .vx-kpi-icon {
    width: 36px;
    height: 36px;
    padding: 8px;
  }

  body.vx-app-shell .vx-queue {
    padding: var(--vx-space-4) var(--vx-space-3) var(--vx-space-3);
  }

  body.vx-app-shell .vx-queue .vx-card-header {
    padding: 0 var(--vx-space-1);
  }

  /* The status filter grows into the space beside Reset, so when the header
     wraps the pair fills its own row as one toolbar (the select already
     fills its label). */
  body.vx-app-shell .vx-queue .vx-queue-filter {
    flex: 1 1 14rem;
    margin-left: 0;
  }

  /* Client and job move into the property cell's second line. */
  body.vx-app-shell .vx-queue-table :is(th, td):is(.vx-col-client, .vx-col-job) {
    display: none;
  }

  /* The client and job line under the name wraps and is never cut: a touch
     screen cannot show a title, and the job number is the firm's own
     identifier. The job number is one atomic box, so it moves to the next
     line whole (it breaks inside only if it alone is wider than the line).
     A zero width with a full minimum keeps the line out of the column's
     intrinsic width, so it can never widen the table. */
  body.vx-app-shell .vx-queue-meta {
    display: block;
    width: 0;
    min-width: 100%;
    overflow-wrap: anywhere;
  }

  body.vx-app-shell .vx-queue-meta-job {
    display: inline-block;
    max-width: 100%;
  }

  /* On a phone the name may still break inside a word, so one long word
     never makes the table scroll sideways. */
  body.vx-app-shell .vx-queue-name {
    overflow-wrap: anywhere;
  }

  body.vx-app-shell .vx-queue-table td.vx-col-property {
    width: 100%;
  }

  /* The row is the target (its height floor is above), so the button needs
     no height of its own: the name and its line sit together. */
  body.vx-app-shell .vx-queue-table .vx-queue-select {
    min-height: 0;
  }

  /* The table runs to the card's edges, so the property column keeps the
     width the card's padding would take. */
  body.vx-app-shell .vx-queue .grid-shell {
    margin-inline: calc(-1 * var(--vx-space-3));
  }

  body.vx-app-shell .vx-queue-table :is(th, td) {
    padding: 10px 6px;
  }

  body.vx-app-shell .vx-queue-table tr > :first-child {
    padding-left: var(--vx-space-3);
  }

  body.vx-app-shell .vx-queue-table tr > :last-child {
    padding-right: 4px;
  }

  body.vx-app-shell .vx-queue-table .vx-col-open {
    padding-inline: 0 4px;
  }

  /* A 32px chevron column on a narrow window; under a coarse pointer the
     chevron keeps its 44px target (below). */
  body.vx-app-shell .vx-queue-table .vx-queue-open {
    width: 32px;
  }

  body.vx-app-shell .vx-queue-table .status-chip {
    padding-inline: 8px;
  }

  body.vx-app-shell .vx-queue-select {
    font-size: var(--vx-text-sm);
  }

  body.vx-app-shell .vx-queue-select .vx-icon {
    display: none;
  }
}

/* On the narrowest phones the inner cells give up part of their padding, so
   the property column (name, client and job) wraps less. The outer cells
   keep theirs (the rules above for the first and last cell outrank this). */
@media (max-width: 480px) {
  body.vx-app-shell .vx-queue-table :is(th, td) {
    padding-inline: 4px;
  }
}

@media (max-width: 390px) {
  body.vx-app-shell .vx-kpi .vx-kpi-value {
    font-size: var(--vx-text-2xl);
  }

  body.vx-app-shell .vx-kpi--money .vx-kpi-value {
    font-size: var(--vx-text-xl);
  }
}

/* G10: 44px targets under a coarse pointer. These rules outrank the ones
   above that size the same buttons for a mouse (the layer's generic touch
   rule is less specific than they are). */
@media (pointer: coarse) {
  body.vx-app-shell .vx-queue-table .sort-button {
    min-height: 44px;
  }

  body.vx-app-shell .vx-queue-table .vx-queue-open {
    min-width: 44px;
    min-height: 44px;
  }

  body.vx-app-shell .vx-topbar :is(.vx-btn--icon, .mini-button, .save-button) {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-kpis > .vx-kpi, .pipeline-card) {
    border: 1px solid CanvasText;
  }

  /* The static count keeps its dashed edge, so it still differs from the
     stage buttons. */
  body.vx-app-shell .pipeline-card.pipeline-card-static {
    border-style: dashed;
  }

  /* Box shadows are dropped in forced colours: the selected row keeps a
     visible bar as a border. */
  body.vx-app-shell .vx-queue-row.connected-selected-row > td:first-child {
    border-left: 4px solid Highlight;
  }
}

/* ---- Stage 3: context, stepper, sub-views -------------------------------- */
/* The queue, then the selected assignment's column: its context panel and,
   under it, its quick actions, in that order in the page. One column below
   1280px: the queue, then the context (title, facts, Continue), then the
   quick actions, so the secondary actions never come before the assignment
   they act on. From 1280px the column stands beside the queue and stays in
   view while the queue scrolls, the quick actions with it: they stay beside
   the selection however long the book of work is. (The mockup put them under
   the queue, where a real book pushed them off screen; blueprint 3.7, as
   built.)
   The queue column's one track is minmax(0, 1fr), never the implicit auto:
   an auto track grows to its card's min-content, which is the table's, so a
   long job number widened the card past its column and under the sticky
   context column beside it. Held to its column, the card keeps the table in
   its own .grid-shell, which scrolls. */
body.vx-app-shell .vx-queue-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
}

body.vx-app-shell .vx-context-column {
  display: grid;
  align-content: start;
  gap: var(--vx-space-3);
  min-width: 0;
}

@media (min-width: 1280px) {
  body.vx-app-shell .vx-queue-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "queue context";
    align-items: start;
  }

  body.vx-app-shell .vx-queue-layout > .vx-queue-column {
    grid-area: queue;
  }

  body.vx-app-shell .vx-context-column {
    grid-area: context;
    align-self: start;
    position: sticky;
    top: calc(var(--vx-topbar-height, 0px) + var(--vx-space-4));
  }
}

body.vx-app-shell .vx-context {
  display: grid;
  gap: var(--vx-space-4);
  padding: var(--vx-space-5);
}

body.vx-app-shell .vx-context-empty .vx-card-title {
  font-size: var(--vx-text-lg);
}

body.vx-app-shell .vx-context-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-context-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--vx-radius-card);
  background: var(--vx-blue-050);
  color: var(--vx-blue-600);
}

body.vx-app-shell .vx-context-title {
  font-size: var(--vx-text-xl);
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-context-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1) var(--vx-space-2);
  margin: var(--vx-space-1) 0 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

/* Line tabs: a 2px blue underline marks the selected tab. */
body.vx-app-shell .vx-context-tabs {
  display: flex;
  gap: var(--vx-space-1);
  border-bottom: 1px solid var(--vx-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

body.vx-app-shell .vx-context-tab {
  flex: none;
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 var(--vx-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-md);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

body.vx-app-shell .vx-context-tab:hover {
  color: var(--vx-text);
}

body.vx-app-shell .vx-context-tab[aria-selected="true"] {
  border-bottom-color: var(--vx-blue-600);
  color: var(--vx-blue-700);
  font-weight: 600;
}

body.vx-app-shell .vx-context-tab:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: -3px;
}

body.vx-app-shell .vx-context-panel {
  display: grid;
  align-content: start;
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-context-panel[hidden] {
  display: none !important;
}

body.vx-app-shell .vx-context-panel:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

body.vx-app-shell .vx-context-panel > p {
  margin: 0;
}

/* Facts: three to a row, each figure under its small caption. */
body.vx-app-shell .vx-context-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vx-space-3) var(--vx-space-4);
  margin: 0;
}

body.vx-app-shell .vx-context-facts .vx-fact-wide {
  grid-column: 1 / -1;
}

/* Comps and Report carry longer values ("Revision 2 stored"): two to a row. */
body.vx-app-shell .vx-context-facts.vx-context-facts--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Every figure in the panel reads the same, wide or not (one style, so no
   fact looks less certain than its neighbour). */
body.vx-app-shell .vx-context-facts dd {
  font-size: var(--vx-text-lg);
  font-weight: 650;
  line-height: 1.3;
}

body.vx-app-shell .vx-context-facts dd .status-chip {
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-fact-note {
  display: block;
  margin-top: 2px;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 400;
}

body.vx-app-shell .vx-eyebrow {
  margin: 0 0 var(--vx-space-1);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.vx-app-shell .vx-context-readiness {
  padding-top: var(--vx-space-4);
  border-top: 1px solid var(--vx-border);
}

body.vx-app-shell .vx-context-readiness .vx-eyebrow {
  margin-bottom: var(--vx-space-2);
}

body.vx-app-shell .vx-gates-row {
  display: flex;
  align-items: center;
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-gates-row > .vx-gates {
  flex: 1 1 auto;
}

body.vx-app-shell .vx-gates-count {
  flex: none;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell .vx-context-value {
  color: var(--vx-text);
  font-size: var(--vx-text-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

body.vx-app-shell .vx-context-method,
body.vx-app-shell .vx-context-note {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-context-loading {
  display: grid;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-context-loading .vx-skeleton:nth-child(2) {
  width: 80%;
}

body.vx-app-shell .vx-context-loading .vx-skeleton:nth-child(3) {
  width: 60%;
}

body.vx-app-shell .vx-context-loading p {
  margin: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

/* The one dominant action: full width, 48px, the next step beneath it. */
body.vx-app-shell .vx-context-actions {
  display: grid;
  gap: var(--vx-space-2);
  padding-top: var(--vx-space-1);
}

body.vx-app-shell .vx-context-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vx-space-2);
  width: 100%;
  min-height: 48px;
  font-size: var(--vx-text-lg);
  font-weight: 650;
}

body.vx-app-shell .vx-context-continue:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

body.vx-app-shell .vx-context-next {
  margin: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

/* Beside the context panel the queue is narrower. A job number is the
   firm's identifier and never breaks at a hyphen; a client name may wrap,
   and its cell is centred as a block. */
body.vx-app-shell .vx-queue-table td.vx-col-job {
  white-space: nowrap;
}

/* Beside the context panel the queue is about 740px wide at 1440px. The
   property, the column that matters most, takes 30% of it; the inner cells
   give up 2px a side and the chevron column shrinks to its button (its glyph
   still ends 20px from the card's edge, in line with the card's padding), so
   the common property and client names each fit on one line. The six
   columns stay. (Measured on the fixture at 1440px: 32% for the property
   left more rows on two lines, because the clients then wrapped.) */
@media (min-width: 1280px) {
  body.vx-app-shell .vx-queue-table th.vx-col-property {
    width: 30%;
  }

  body.vx-app-shell .vx-queue-table :is(th, td):not(:first-child):not(:last-child) {
    padding-inline: 10px;
  }

  body.vx-app-shell .vx-queue-table :is(th, td).vx-col-open {
    width: 48px;
    padding-left: 0;
    padding-right: var(--vx-space-3);
  }
}

/* Quick actions under the context panel: at most three card buttons. */
body.vx-app-shell .vx-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-quick-action {
  display: flex;
  align-items: center;
  gap: var(--vx-space-3);
  min-height: 56px;
  padding: 0 var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
  color: var(--vx-text);
  font-size: var(--vx-text-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

body.vx-app-shell .vx-quick-action:hover {
  border-color: var(--vx-blue-600);
}

body.vx-app-shell .vx-quick-action:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

body.vx-app-shell .vx-quick-action .vx-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--vx-blue-600);
}

/* The engagement view: back link, header, stepper, then the section tabs. */
body.vx-app-shell .vx-back {
  justify-self: start;
  padding-left: var(--vx-space-1);
}

body.vx-app-shell .vx-back .vx-icon {
  width: 18px;
  height: 18px;
}

body.vx-app-shell .vx-back:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

body.vx-app-shell .vx-engagement-header {
  display: grid;
  gap: var(--vx-space-4);
  padding: var(--vx-space-5);
}

body.vx-app-shell .vx-engagement-header .connected-workspace-identity {
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: var(--vx-space-4);
}

body.vx-app-shell .vx-engagement-header #connected-workspace-title {
  margin: 2px 0;
  font-size: var(--vx-text-2xl);
  font-weight: 700;
  line-height: 1.25;
}

body.vx-app-shell .vx-engagement-header .connected-workspace-identity > .status-chip {
  margin-top: 26px;
}

body.vx-app-shell .vx-engagement-header .connected-workspace-facts {
  align-items: flex-start;
  gap: var(--vx-space-3) var(--vx-space-8);
}

body.vx-app-shell .vx-engagement-header .connected-workspace-facts dt {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .vx-engagement-header .connected-workspace-facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2);
  color: var(--vx-text);
  font-size: var(--vx-text-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell .vx-header-value {
  font-size: var(--vx-text-2xl);
  font-weight: 700;
  line-height: 1.2;
}

/* The status ladder is compact: 6px markers, 12px labels. */
body.vx-app-shell .vx-engagement-header .connected-pipeline {
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-engagement-header .pipeline-step {
  flex: 1 1 90px;
  min-width: 90px;
  padding-top: 5px;
  border-top-width: 2px;
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-engagement-header .pipeline-marker {
  width: 6px;
  height: 6px;
}

/* An off-ladder status reads as a toned chip under the ladder. */
body.vx-app-shell .vx-engagement-header .vx-terminal-note {
  justify-self: start;
  margin: 0;
}

body.vx-app-shell .vx-engagement-header .vx-terminal-note.vx-chip {
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--vx-radius-pill);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  line-height: 1.5;
}

/* Its tone outranks the note colour it also carries. Off the ladder are
   Complete-POD, Cancelled and any status the shell does not know. */
body.vx-app-shell .vx-engagement-header .vx-terminal-note.vx-chip--success {
  color: var(--vx-teal-700);
}

body.vx-app-shell .vx-engagement-header .vx-terminal-note:is(.vx-chip--cancelled, .vx-chip--closed, .vx-chip--neutral) {
  color: var(--vx-gray-600);
}

@media (min-width: 1100px) {
  body.vx-app-shell .vx-engagement-header {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--vx-space-8);
    align-items: start;
  }

  body.vx-app-shell .vx-engagement-header > .connected-workspace-identity {
    grid-column: 1;
    grid-row: 1;
  }

  body.vx-app-shell .vx-engagement-header > .connected-workspace-facts {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  body.vx-app-shell .vx-engagement-header > :is(.connected-pipeline, .vx-terminal-note, .button-row) {
    grid-column: 1 / -1;
  }
}

/* The appraisal stepper: eight steps from scope to delivery. Each marks its
   own state (a check when done, an alert when it needs attention, its number
   otherwise, a dashed ring when not available); the current step has a blue
   ring and a bar beneath it. */
/* The workspace is one column that never grows past the page: the stepper
   scrolls inside itself below 1280px rather than widening the page. */
body.vx-app-shell .connected-workspace {
  grid-template-columns: minmax(0, 1fr);
}

body.vx-app-shell .vx-stepper-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--vx-space-3);
  padding: var(--vx-space-3);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
}

body.vx-app-shell .vx-stepper {
  /* Contains the steps’ visually hidden state words, which are absolutely
     positioned: otherwise they escape the scroller and widen the page. */
  position: relative;
  display: grid;
  min-width: 0;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0 0 var(--vx-space-1);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  background:
    linear-gradient(90deg, var(--vx-surface) 40%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--vx-surface) 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(7, 29, 65, 0.2), rgba(7, 29, 65, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(7, 29, 65, 0.2), rgba(7, 29, 65, 0)) right center / 14px 100% no-repeat scroll;
}

@media (min-width: 1280px) {
  body.vx-app-shell .vx-stepper {
    grid-auto-flow: row;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    overflow-x: visible;
  }
}

body.vx-app-shell .vx-stepper-item {
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

body.vx-app-shell .vx-stepper-item--current {
  box-shadow: inset 0 -3px 0 var(--vx-blue-600);
}

/* The marker stands above the words, so the title and the detail use the
   step's whole width. */
body.vx-app-shell .vx-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: var(--vx-space-2) 6px;
  border: 0;
  border-radius: var(--vx-radius-button);
  background: transparent;
  color: var(--vx-text);
  font: inherit;
  text-align: left;
}

body.vx-app-shell button.vx-step {
  cursor: pointer;
}

body.vx-app-shell button.vx-step:hover {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-step:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: -3px;
}

body.vx-app-shell .vx-step-marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--vx-border-strong);
  border-radius: 50%;
  background: var(--vx-surface);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell .vx-step-marker .vx-icon {
  width: 16px;
  height: 16px;
}

body.vx-app-shell .vx-step-text {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

body.vx-app-shell .vx-step-text strong {
  font-size: var(--vx-text-sm);
  font-weight: 650;
}

/* A detail may take three lines at every width: at 1440px every detail the
   fixture holds takes two at most, and below 1280px the columns are at least
   100px, as narrow as they get from 1280px, where a long method name
   ("Income · direct capitalization") or "Inspected · 3 photos · 3 findings"
   needs the third. A longer detail is cut, and its title shows it whole. */
body.vx-app-shell .vx-step-text small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body.vx-app-shell .vx-step--done .vx-step-marker {
  border-color: var(--vx-teal-600);
  background: var(--vx-teal-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .vx-step--attention .vx-step-marker {
  border-color: var(--vx-amber-600);
  background: var(--vx-amber-050);
  color: var(--vx-amber-700);
}

body.vx-app-shell .vx-step--attention strong {
  color: var(--vx-amber-700);
}

body.vx-app-shell .vx-step--unavailable .vx-step-marker {
  border-style: dashed;
}

body.vx-app-shell .vx-step--loading .vx-step-marker {
  border-color: var(--vx-track);
}

body.vx-app-shell .vx-step[aria-current="step"] .vx-step-marker {
  box-shadow: 0 0 0 2px var(--vx-surface), 0 0 0 4px var(--vx-blue-600);
}

body.vx-app-shell .vx-stepper-delivered {
  justify-self: start;
}

body.vx-app-shell .vx-stepper-terminal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-3);
  padding: var(--vx-space-4) var(--vx-space-5);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-stepper-terminal .vx-terminal-note {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--vx-text);
}

/* Section views: whole panels, shown one view at a time. A wrapper adds no
   box of its own, so the section's layout is unchanged; a hidden view stays
   hidden whatever its panel's own display. */
body.vx-app-shell .vx-subview {
  display: contents;
}

body.vx-app-shell .vx-subview[hidden] {
  display: none !important;
}

/* A segmented group of toggle buttons (not tabs: every panel stays in the
   section). */
body.vx-app-shell .vx-subviews {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  max-width: 100%;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-button);
  background: var(--vx-surface);
  overflow: hidden;
}

body.vx-app-shell .vx-subview-button {
  min-height: 32px;
  padding: 0 var(--vx-space-3);
  border: 0;
  border-right: 1px solid var(--vx-border);
  background: transparent;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

body.vx-app-shell .vx-subview-button:last-child {
  border-right: 0;
}

body.vx-app-shell .vx-subview-button:hover {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-subview-button[aria-pressed="true"] {
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
  font-weight: 650;
}

body.vx-app-shell .vx-subview-button:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: -3px;
}

@media (max-width: 1279px) {
  /* Below the two-column layout the context panel's facts can spread out. */
  body.vx-app-shell .vx-context-facts {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  }
}

/* Stacked under the queue on a laptop or wide tablet, the card is 740 to
   1000px wide, too wide for one column of facts: it takes two, the tab's facts,
   value or quality control on the left and the way on (Continue, then the
   next step) on the right, top-aligned with them, so Continue stands where
   the eye lands after the facts and never moves when the tab changes.
   Beside the queue (380px) and on a phone it is one column; so is a narrow
   tablet (721 to 899px), where Continue sizes to its words from the left. */
@media (min-width: 721px) and (max-width: 899px) {
  body.vx-app-shell .vx-context-continue {
    justify-self: start;
    width: auto;
    min-width: 320px;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  body.vx-app-shell .vx-context {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    grid-template-areas:
      "head head"
      "tabs tabs"
      "panel actions";
    column-gap: var(--vx-space-8);
    align-items: start;
  }

  /* A read that failed shows its note where the tabs and panels would be. */
  body.vx-app-shell .vx-context:has(> .vx-context-failed) {
    grid-template-areas:
      "head head"
      "note actions";
  }

  body.vx-app-shell .vx-context > .vx-context-head {
    grid-area: head;
  }

  body.vx-app-shell .vx-context > .vx-context-tabs {
    grid-area: tabs;
  }

  body.vx-app-shell .vx-context > .vx-context-panel {
    grid-area: panel;
  }

  body.vx-app-shell .vx-context > .vx-context-failed {
    grid-area: note;
  }

  body.vx-app-shell .vx-context > .vx-context-actions {
    grid-area: actions;
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  body.vx-app-shell .vx-context {
    padding: var(--vx-space-4);
  }

  body.vx-app-shell .vx-context-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  body.vx-app-shell .vx-quick-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.vx-app-shell .vx-engagement-header {
    padding: var(--vx-space-4);
  }

  body.vx-app-shell .vx-engagement-header .connected-workspace-identity > .status-chip {
    margin-top: 0;
  }

  /* The header's actions in even rows of two, the one primary action (Start
     work, Complete engagement or Reinstate) across the top. The order is the
     page's own; CSS never reorders it. */
  body.vx-app-shell .vx-engagement-header .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vx-space-2);
  }

  body.vx-app-shell .vx-engagement-header .button-row > :is(button, a) {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  body.vx-app-shell .vx-engagement-header .button-row > :is(.save-button, .cancellation-reason-label) {
    grid-column: 1 / -1;
  }

  /* The status ladder in one row of five equal cells, each label wrapping
     inside its own cell, rather than two broken bars. */
  body.vx-app-shell .vx-engagement-header .connected-pipeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--vx-space-1);
  }

  /* The marker stands above its label, so a label has the cell's whole
     width and wraps between words ("Under / Review"), never inside one. */
  body.vx-app-shell .vx-engagement-header .pipeline-step {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vx-space-1);
    min-width: 0;
  }

  body.vx-app-shell .vx-engagement-header .pipeline-label {
    min-width: 0;
    max-width: 100%;
    line-height: 1.3;
  }

  body.vx-app-shell .vx-stepper-nav {
    padding: var(--vx-space-2) var(--vx-space-3);
  }

  body.vx-app-shell .vx-stepper {
    grid-auto-columns: minmax(116px, 1fr);
  }

  /* On a phone the views wrap as separate pills rather than one bar. */
  body.vx-app-shell .vx-subviews {
    gap: var(--vx-space-2);
    border: 0;
    background: transparent;
    overflow: visible;
  }

  body.vx-app-shell .vx-subview-button {
    border: 1px solid var(--vx-border-strong);
    border-radius: var(--vx-radius-pill);
    background: var(--vx-surface);
  }

  body.vx-app-shell .vx-subview-button:last-child {
    border-right: 1px solid var(--vx-border-strong);
  }
}

/* G10: 44px targets under a coarse pointer, outranking the sizes above. */
@media (pointer: coarse) {
  body.vx-app-shell :is(.vx-context-tab, .vx-subview-button, .vx-back, .vx-step) {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-quick-action, .vx-stepper-nav, .vx-subviews) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell :is(.vx-context-tab[aria-selected="true"], .vx-subview-button[aria-pressed="true"], .vx-step[aria-current="step"]) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* ---- Stage 3 review fixes ------------------------------------------------- */
/* The rent roll's and the operating statement's headline figures (occupancy,
   occupied area, contract rent; PGI, EGI, expenses, NOI) are the panel's
   data: tiles with the figure large and its caption small, apart from the
   form above and the table below. The markup and its bindings are
   unchanged: the line break between caption and figure is not needed in a
   tile. (Stage 5 gives the analysis panels the same tiles; the report
   package keeps its own grid for identifiers.) */
body.vx-app-shell :is(.connected-rent-roll, .connected-operating-statement) .report-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--vx-space-3);
  margin-block: var(--vx-space-4);
}

body.vx-app-shell :is(.connected-rent-roll, .connected-operating-statement) .report-package-grid > div {
  padding: var(--vx-space-3);
  border-radius: 10px;
  background: var(--vx-surface-sunken);
}

body.vx-app-shell :is(.connected-rent-roll, .connected-operating-statement) .report-package-grid strong {
  display: block;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell :is(.connected-rent-roll, .connected-operating-statement) .report-package-grid br {
  display: none;
}

body.vx-app-shell :is(.connected-rent-roll, .connected-operating-statement) .report-package-grid .report-note {
  color: var(--vx-text);
  font-size: var(--vx-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The record forms (invoices, tasks, findings, rent roll, operating evidence
   and the others that share this grid class): labels share one top line, so
   a neighbour's help under its input (the invoice currency) or a taller
   control (a finding's text) never pushes the others down; the submit button
   still ends on the row's bottom line. The operating statement's period bar
   keeps its bottom line: its help stands beside the date, not under it. */
body.vx-app-shell .connected-invoice-form:not(.connected-operating-period-form) {
  align-items: start;
}

body.vx-app-shell .connected-invoice-form:not(.connected-operating-period-form) > button {
  align-self: end;
}

/* A label's "(optional ...)" note runs on the label's own line where it fits,
   so that label's input stays in line with its neighbours'. */
body.vx-app-shell .connected-invoice-form label:has(> .field-optional) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: start;
  gap: 0.25rem 0.35em;
}

body.vx-app-shell .connected-invoice-form label:has(> .field-optional) > :not(.field-optional) {
  flex: 1 0 100%;
  min-width: 0;
}

/* On a phone the operating evidence table keeps each line item to a line or
   two and scrolls sideways inside its shell (risk K8), rather than wrapping
   its long source into a narrow column under one-line cells. */
@media (max-width: 720px) {
  body.vx-app-shell .connected-operating-statement .grid-shell > table {
    min-width: 60rem;
  }
}

/* The engagement header's one destructive action, last in the page's order,
   stands apart at the row's end, whichever line it falls on. */
@media (min-width: 721px) {
  body.vx-app-shell .vx-engagement-header .button-row > .vx-link-danger {
    margin-inline-start: auto;
  }
}

/* While its steps overflow, the step list is a focusable scroller (see
   syncVistaStepperScroller): its ring. */
body.vx-app-shell .vx-stepper:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A selection whose read failed: one note in place of the context panel's
   tabs, never its placeholders read as facts. */
body.vx-app-shell .vx-context-failed {
  display: flex;
  align-items: flex-start;
  gap: var(--vx-space-2);
  margin: 0;
  padding: var(--vx-space-3) var(--vx-space-4);
  border-radius: var(--vx-radius-input);
  background: var(--vx-red-050);
  color: var(--vx-text);
  font-size: var(--vx-text-md);
}

body.vx-app-shell .vx-context-failed .vx-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--vx-red-700);
}

@media (forced-colors: active) {
  body.vx-app-shell .vx-context-failed,
  body.vx-app-shell :is(.connected-rent-roll, .connected-operating-statement) .report-package-grid > div {
    border: 1px solid CanvasText;
  }
}

/* ---- Stage 3 review fixes, round 3 ---------------------------------------- */
/* The selected assignment's quick actions sit under its context panel. Beside
   the queue (a 380px column) they are three short tiles in one row, the icon
   over the words; stacked below 1280px they keep the wide card buttons. */
@media (min-width: 1280px) {
  body.vx-app-shell .vx-context-column .vx-quick-actions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--vx-space-2);
  }

  body.vx-app-shell .vx-context-column .vx-quick-action {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 68px;
    padding: var(--vx-space-2) var(--vx-space-2);
    font-size: var(--vx-text-sm);
    line-height: 1.25;
    text-align: center;
  }
}

/* Every context tab keeps one height from 721px (beside the queue, and in
   the stacked card below 1280px), so switching tabs never moves Continue or
   what follows the card. The tallest tab, measured on the fixture: the Report
   tab, 246px beside the queue, and at most 225px below 1280px (the Summary
   and the Report at 900px, where the facts column is narrowest). Real data
   that runs longer only grows the panel. */
@media (min-width: 721px) and (max-width: 1279px) {
  body.vx-app-shell .vx-context-panel {
    min-height: 228px;
  }
}

@media (min-width: 1280px) {
  body.vx-app-shell .vx-context-panel {
    min-height: 248px;
  }
}

/* The Report tab's meter carries the same caption as the Summary's. */
body.vx-app-shell .vx-context-gates .vx-eyebrow {
  margin-bottom: var(--vx-space-2);
}

/* The selected section tab keeps its blue label under the pointer: the
   shell's hover colour would otherwise outrank it. */
body.vx-app-shell .workspace-tab-active:hover {
  color: var(--vx-blue-700);
}

/* A view filter (the rent roll's as-of date, the operating statement's
   period) only changes what the panel shows: a secondary button, so the
   record's own Add button stays the panel's one primary action. */
body.vx-app-shell :is([data-action="show-connected-rent-roll-as-of"], [data-action="show-connected-operating-period"]) {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface);
  color: var(--vx-text);
}

body.vx-app-shell :is([data-action="show-connected-rent-roll-as-of"], [data-action="show-connected-operating-period"]):hover:not(:disabled) {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface-sunken);
}

/* The engagement header's actions on a laptop or tablet (721 to 1279px),
   where the primary action, five secondary ones and Cancel never fit one
   line: compact secondary buttons in an even grid, so the row breaks into
   balanced lines rather than leaving one launch alone on the second. Cancel
   takes the grid's last column, apart at the row's end. The order is the
   page's own; nothing is reordered. */
@media (min-width: 721px) and (max-width: 1279px) {
  body.vx-app-shell .vx-engagement-header .button-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: var(--vx-space-2);
    align-items: center;
  }

  body.vx-app-shell .vx-engagement-header .button-row > :is(.mini-button, .dark-button) {
    padding-inline: var(--vx-space-3);
    font-size: var(--vx-text-sm);
  }

  body.vx-app-shell .vx-engagement-header .button-row > :is(button, a):not(.link-button) {
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell .vx-engagement-header .button-row > .vx-link-danger {
    grid-column-end: -1;
    justify-self: end;
  }

  body.vx-app-shell .vx-engagement-header .button-row > .cancellation-reason-label {
    grid-column: 1 / -1;
  }
}

/* On a phone the header is compact: one-line 13px secondary buttons (a
   label too long for its half is cut with an ellipsis; its name is whole),
   tighter spacing, and the due date and value beside each other. */
@media (max-width: 720px) {
  body.vx-app-shell .vx-engagement-header {
    gap: var(--vx-space-3);
  }

  body.vx-app-shell .vx-engagement-header .button-row > :is(.mini-button, .dark-button) {
    min-height: 36px;
    padding-inline: var(--vx-space-2);
    overflow: hidden;
    font-size: var(--vx-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.vx-app-shell .vx-engagement-header .connected-workspace-facts {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--vx-space-6);
    row-gap: var(--vx-space-2);
  }

  body.vx-app-shell .vx-header-value {
    font-size: var(--vx-text-xl);
  }

  /* The section's views in one line that scrolls sideways, as the steps do,
     rather than two rows of pills. */
  body.vx-app-shell .vx-subviews {
    position: relative;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.vx-app-shell .vx-subview-button {
    flex: none;
  }
}

/* G10 again: a coarse pointer keeps 44px targets in the compact header. */
@media (max-width: 720px) and (pointer: coarse) {
  body.vx-app-shell .vx-engagement-header .button-row > :is(.mini-button, .dark-button) {
    min-height: 44px;
  }
}

/* The inspection photos panel at the scale of its neighbours: 14px text,
   16px file names, the upload status as a quiet line (it is a status, not a
   link), and the file inputs' own buttons drawn as secondary buttons. */
body.vx-app-shell .connected-inspection-panel {
  font-size: var(--vx-text-md);
}

body.vx-app-shell .connected-inspection-assignment {
  color: var(--vx-text);
  font-size: var(--vx-text-md);
}

body.vx-app-shell .connected-inspection-status {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
  font-weight: 400;
}

body.vx-app-shell :is(.connected-inspection-capture, .connected-inspection-gallery, .connected-inspection-retry) {
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell :is(.connected-inspection-capture, .connected-inspection-gallery, .connected-inspection-retry) input[type="file"] {
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
  font-weight: 400;
}

body.vx-app-shell .connected-inspection-panel input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-inline-end: var(--vx-space-3);
  padding: 0 14px;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-button);
  background: var(--vx-surface);
  color: var(--vx-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body.vx-app-shell .connected-inspection-panel input[type="file"]:hover::file-selector-button {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-inspection-card {
  border-color: var(--vx-border);
  border-radius: 10px;
  background: var(--vx-surface);
}

body.vx-app-shell .connected-inspection-card h3 {
  color: var(--vx-text);
  font-size: var(--vx-text-lg);
  font-weight: 650;
  line-height: 1.3;
}

body.vx-app-shell .connected-inspection-card p {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

/* The assignment parties table: the contact column (e-mail over phone) gets
   the room its addresses need; the row label wraps ("Assignment / party 1")
   and the action shrinks to fit, so the names keep theirs. */
body.vx-app-shell .assignment-party-table :is(th, td):nth-child(1) {
  width: 1%;
  min-width: 6rem;
  white-space: normal;
}

body.vx-app-shell .assignment-party-table :is(th, td):nth-child(6) {
  width: 1%;
  white-space: nowrap;
}

body.vx-app-shell .assignment-party-table :is(th, td):nth-child(2) {
  width: 1%;
  min-width: 10rem;
}

body.vx-app-shell .assignment-party-table :is(th, td):is(:nth-child(3), :nth-child(4)) {
  min-width: 10rem;
}

body.vx-app-shell .assignment-party-table :is(th, td):nth-child(5) {
  width: 33%;
  min-width: 16rem;
}

@media (forced-colors: active) {
  body.vx-app-shell .connected-inspection-panel input[type="file"]::file-selector-button {
    border: 1px solid ButtonText;
  }
}

/* A photo card's edge says whether its upload is complete: teal when the
   image is synchronized, amber when it is an incomplete placeholder. */
body.vx-app-shell .connected-inspection-card--complete {
  border-left-color: var(--vx-teal-600);
}

body.vx-app-shell .connected-inspection-card--incomplete {
  border-left-color: var(--vx-amber-600);
  background: var(--vx-amber-050);
}

/* ---- Stage 4: comparables ------------------------------------------------ */
/* The Comparables work tab finds and attaches; the library's maintenance
   (the add form, the CSV import and the duplicate review) belongs to the
   Library view. It is hidden here by CSS only, so a correction begun here
   ("Correct") keeps the form it fills: the reveal step switches to the
   Library view in place. */
body.vx-app-shell .vx-app[data-vx-view="comparables"] [data-vx-manage] {
  display: none !important;
}

/* The selected assignment's frame over the library: who the comparables are
   for, its sets, the sets selected for valuation and the saved indication,
   with the ways to the sets, the map and the library's maintenance. */
body.vx-app-shell .vx-compctx {
  display: grid;
  gap: var(--vx-space-4);
}

body.vx-app-shell .vx-compctx.vx-compctx--empty {
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-compctx--empty .vx-card-title {
  font-size: var(--vx-text-lg);
}

body.vx-app-shell .vx-compctx--empty .mini-button {
  margin-top: var(--vx-space-2);
}

body.vx-app-shell .vx-compctx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vx-space-3) var(--vx-space-6);
}

body.vx-app-shell .vx-compctx-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--vx-space-3);
  flex: 1 1 20rem;
  min-width: 0;
}

body.vx-app-shell .vx-compctx-identity .vx-card-title {
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-compctx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1) var(--vx-space-2);
  margin: var(--vx-space-1) 0 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-compctx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-compctx-actions .mini-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.vx-app-shell .vx-compctx-actions .vx-icon {
  width: 16px;
  height: 16px;
}

/* Four figures in a row under a divider; each figure under its caption. */
body.vx-app-shell .vx-compctx-facts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--vx-space-3) var(--vx-space-6);
  margin: 0;
  padding-top: var(--vx-space-4);
  border-top: 1px solid var(--vx-border);
}

body.vx-app-shell .vx-compctx-facts dd {
  font-size: var(--vx-text-lg);
  font-weight: 650;
  line-height: 1.3;
}

body.vx-app-shell .vx-compctx-facts dd .vx-muted {
  font-size: var(--vx-text-md);
}

body.vx-app-shell .vx-compctx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.vx-app-shell .vx-compctx-selected {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.vx-app-shell .vx-compctx-selected .vx-muted {
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-compctx-facts dd:has(> .vx-compctx-value) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1) var(--vx-space-2);
}

body.vx-app-shell .vx-compctx-value {
  color: var(--vx-text);
  font-size: var(--vx-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.vx-app-shell .vx-compctx-note {
  display: flex;
  align-items: flex-start;
  gap: var(--vx-space-2);
  margin: 0;
  padding: var(--vx-space-2) var(--vx-space-3);
  border-radius: var(--vx-radius-input);
  background: var(--vx-gray-050);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-compctx-note .vx-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--vx-gray-600);
}

@media (max-width: 1099px) {
  body.vx-app-shell .vx-compctx-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.vx-app-shell .vx-compctx-facts {
    gap: var(--vx-space-3) var(--vx-space-4);
  }

  body.vx-app-shell .vx-compctx-facts > div:nth-child(-n + 2) {
    grid-column: 1 / -1;
  }
}

/* A comparable's type in its own tone, wherever the library lists it: sale
   teal, rent blue, land amber, expense violet. The words stay the server's
   enum ("sale"); they are drawn in sentence case, as the filter and the add
   form name them. */
body.vx-app-shell .status-chip[data-vx-comparable-type] {
  text-transform: capitalize;
}

body.vx-app-shell .status-chip[data-vx-comparable-type="sale" i] {
  background: var(--vx-teal-050);
  color: var(--vx-teal-700);
}

body.vx-app-shell .status-chip[data-vx-comparable-type="rent" i] {
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
}

body.vx-app-shell .status-chip[data-vx-comparable-type="land" i] {
  background: var(--vx-amber-050);
  color: var(--vx-amber-700);
}

body.vx-app-shell .status-chip[data-vx-comparable-type="expense" i] {
  background: var(--vx-violet-050);
  color: var(--vx-violet-700);
}

/* Adding a record to one of the selected assignment's sets: a compact, tinted
   group (the set, then the action) that follows the verified date and
   "Correct" on their line wherever the cell has room, and takes the line
   under them where it has not, so a row stays two lines and reads as a data
   row, not a form. Its "Target set" label is visually hidden and still names
   the select (for=). "Add to set" waits quietly for a set; once one is chosen
   it is the row's primary action. The select and the button stay in one cell
   (the handler finds its set there). */
body.vx-app-shell .connected-library-set-target {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 2px;
  border-radius: var(--vx-radius-input);
  background: var(--vx-blue-050);
  vertical-align: middle;
}

body.vx-app-shell .connected-library-set-target > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Wide enough for its placeholder, "Choose a compatible set", whole. */
body.vx-app-shell .connected-library-set-target select {
  flex: none;
  width: 12.5rem;
  min-width: 0;
  min-height: 32px;
  padding-block: 4px;
  background-color: var(--vx-surface);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .connected-library-set-target .mini-button {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border-color: var(--vx-blue-600);
  color: var(--vx-blue-700);
}

/* Waiting for a set, the button is a quiet word beside the picker, not a
   column of faded outlines down the table. */
body.vx-app-shell .connected-library-set-target .mini-button:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--vx-text-muted);
  opacity: 1;
}

body.vx-app-shell .connected-library-set-target .mini-button:not(:disabled) {
  border-color: var(--vx-blue-600);
  background: var(--vx-blue-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .connected-library-set-target .mini-button:hover:not(:disabled) {
  border-color: var(--vx-blue-700);
  background: var(--vx-blue-700);
}

/* The verified date never breaks at its hyphens; "Correct" follows it on its
   line, and the space after "Correct" parts it from the attach group. */
body.vx-app-shell .vx-library-verified {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.vx-app-shell .vx-library-verified-line > [data-action="edit-connected-comparable-library"] {
  margin-inline: 6px 6px;
}

@media (pointer: coarse) {
  body.vx-app-shell .connected-library-set-target :is(select, .mini-button) {
    min-height: 44px;
  }
}

/* The add form is one card at every width (the Comparables view hides it),
   and "Save comparable" closes it on its own line, at the start, rather
   than landing in the last cell of the stacked grid below a textarea. */
body.vx-app-shell .connected-comparable-library > .comparable-library-form {
  margin-top: var(--vx-space-4);
  padding: var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: 10px;
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-comparable-library > .comparable-library-form > button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
}

/* The Library view: the library on the left and its 320px add form on the
   right from 1440px, the import and the duplicate review under the list. The
   form spans every row of the list and a last flexible row, so a tall form
   grows that empty row, never the gaps between the list's own parts. The
   two columns hold only while the rows carry no attach group: with an
   assignment selected, each row's set picker and "Add to set" need the
   list's full width (beside the form they lay past the list's edge), so the
   form then stands under the list, as it does below 1440px (D17). */
@media (min-width: 1440px) {
  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:has(> .comparable-library-form):not(:has(.connected-library-set-target)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: repeat(6, auto) minmax(0, 1fr);
    column-gap: var(--vx-space-6);
    align-items: start;
  }

  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:has(> .comparable-library-form):not(:has(.connected-library-set-target)) > * {
    grid-column: 1;
    min-width: 0;
  }

  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:not(:has(.connected-library-set-target)) > .comparable-library-form {
    grid-column: 2;
    grid-row: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
    margin: 0;
  }

  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:not(:has(.connected-library-set-target)) > .comparable-library-form > :is(label:first-of-type, button) {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:not(:has(.connected-library-set-target)) > .comparable-library-form > button {
    justify-self: start;
  }

  /* The filter bar fits the narrower list column: its fields shrink, and its
     buttons move under them rather than past the column's edge. */
  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:has(> .comparable-library-form):not(:has(.connected-library-set-target)) > .dashboard-command-bar {
    flex-wrap: wrap;
  }

  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:has(> .comparable-library-form):not(:has(.connected-library-set-target)) > .dashboard-command-bar > .dashboard-filter-group {
    flex: 1 1 26rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr) minmax(0, 0.85fr);
  }
}

/* The comparable-set manager: its set picker keeps its own height beside the
   taller create form (the grid had stretched it). */
body.vx-app-shell .connected-comparable-set-lifecycle {
  align-items: start;
}

/* The engagement's map: the location list, the map and its tools in three
   columns from 1280px; below, the tools become a toolbar under the list and
   the map, and on narrow screens everything stacks. Colours and controls
   follow the shell; every mapbox-* class and all copy are unchanged. */
body.vx-app-shell .connected-map-workspace {
  gap: 0;
  border: 1px solid var(--vx-border);
  border-radius: 10px;
  background: var(--vx-surface);
  overflow: hidden;
}

body.vx-app-shell .connected-map-workspace > :is(.mapbox-sidebar, .mapbox-tools) {
  padding: var(--vx-space-4);
  background: var(--vx-surface);
}

body.vx-app-shell .connected-map-workspace > .mapbox-sidebar {
  border-right: 1px solid var(--vx-border);
}

body.vx-app-shell .connected-map-workspace > .mapbox-tools {
  border-left: 1px solid var(--vx-border);
}

body.vx-app-shell .connected-map-workspace .mapbox-canvas-wrap {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-map-workspace :is(.connected-map-state, .connected-map-config) {
  color: var(--vx-text-muted);
}

body.vx-app-shell .connected-map-list .mapbox-item {
  border: 1px solid var(--vx-border);
  border-left: 4px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-input);
  background: var(--vx-surface);
  color: var(--vx-text);
}

body.vx-app-shell .connected-map-list .mapbox-item.subject {
  border-left-color: var(--vx-blue-600);
}

body.vx-app-shell .connected-map-list button.mapbox-item:hover {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-map-list button.mapbox-item.subject:hover {
  border-left-color: var(--vx-blue-600);
}

/* A location's kind ("Subject property", "Sale · Mesa industrial sales")
   and its address at the shell's 12px floor, not the legacy 10px. */
body.vx-app-shell .connected-map-list .mapbox-item :is(small, em) {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .connected-map-list .mapbox-item small {
  font-weight: 600;
}

body.vx-app-shell .connected-map-list .mapbox-status {
  align-self: start;
  border: 0;
  border-radius: var(--vx-radius-pill);
  padding: 2px 8px;
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .connected-map-list .mapbox-status.found {
  background: var(--vx-teal-050);
  color: var(--vx-teal-700);
}

body.vx-app-shell .connected-map-list .mapbox-status.missing_address {
  background: var(--vx-amber-050);
  color: var(--vx-amber-700);
}

body.vx-app-shell .connected-map-workspace .mapbox-kicker,
body.vx-app-shell .connected-map-workspace .mapbox-tool-group :is(h3, legend) {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.vx-app-shell .connected-map-workspace .mapbox-tool-group {
  border-top-color: var(--vx-border);
}

body.vx-app-shell .connected-map-workspace fieldset.mapbox-tool-group {
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: 0;
  border-inline: 0;
  border-bottom: 0;
}

/* The fieldset's legend sits under the group's divider like the other
   groups' headings, not inside the divider line. */
body.vx-app-shell .connected-map-workspace fieldset.mapbox-tool-group > legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--vx-space-2);
  padding: 0;
}

body.vx-app-shell .connected-map-workspace fieldset.mapbox-tool-group > .mapbox-check {
  clear: left;
}

body.vx-app-shell .connected-map-workspace .segmented-control button {
  min-height: 36px;
  padding: 0 var(--vx-space-3);
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-button);
  background: var(--vx-surface);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell .connected-map-workspace .segmented-control button[aria-pressed="true"] {
  border-color: var(--vx-blue-600);
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
}

body.vx-app-shell .connected-map-workspace .mapbox-check {
  color: var(--vx-text);
  font-weight: 600;
}

@media (min-width: 1280px) {
  body.vx-app-shell .connected-map-workspace {
    grid-template-columns: 320px minmax(0, 1fr) 220px;
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  body.vx-app-shell .connected-map-workspace {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 1279px) {
  body.vx-app-shell .connected-map-workspace > .mapbox-tools {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--vx-space-3) var(--vx-space-6);
    border-left: 0;
    border-top: 1px solid var(--vx-border);
  }

  body.vx-app-shell .connected-map-workspace > .mapbox-tools > .mapbox-kicker {
    flex: 1 0 100%;
    margin: 0;
  }

  body.vx-app-shell .connected-map-workspace > .mapbox-tools .mapbox-tool-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  body.vx-app-shell .connected-map-workspace fieldset.mapbox-tool-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--vx-space-4);
  }

  body.vx-app-shell .connected-map-workspace fieldset.mapbox-tool-group > legend {
    flex: 1 0 100%;
    margin-bottom: var(--vx-space-2);
  }
}

@media (max-width: 980px) {
  body.vx-app-shell .connected-map-workspace > .mapbox-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--vx-border);
  }
}

@media (min-width: 600px) and (max-width: 980px) {
  body.vx-app-shell .connected-map-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  body.vx-app-shell .connected-map-workspace .segmented-control button {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.connected-library-set-target, .vx-compctx-note, .connected-map-list .mapbox-status) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell .connected-map-workspace .segmented-control button[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* ---- Stage 4 review fixes ------------------------------------------------ */
/* The set picker and "Add to set" stay together on one line, never the
   button alone under its picker. */
body.vx-app-shell .vx-library-set-controls {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

/* The library list is a dense data table: its cells are a little tighter
   than the shell's default, so a record's address keeps to one line beside
   the attach group wherever the table allows and every row stays two lines. */
@media (min-width: 721px) {
  body.vx-app-shell .connected-comparable-library > .grid-shell > table :is(th, td) {
    padding: 8px 10px;
  }
}

/* A library row's name and address keep a readable width (risk K8). */
body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr:not(.comparable-detail-row) > td:first-child,
body.vx-app-shell .connected-comparable-library > .grid-shell > table > thead th:first-child {
  min-width: 13rem;
}

/* A set selected for valuation: its name, then its type and members, which
   move to the next line whole when the column is narrow. */
body.vx-app-shell .vx-compctx-selected > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--vx-space-2);
}

body.vx-app-shell .vx-compctx-selected .vx-muted {
  white-space: nowrap;
}

/* The CSV import's file picker, drawn as a secondary button. */
body.vx-app-shell .connected-comparable-import input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-inline-end: var(--vx-space-3);
  padding: 0 14px;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-button);
  background: var(--vx-surface);
  color: var(--vx-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body.vx-app-shell .connected-comparable-import input[type="file"]:hover::file-selector-button {
  background: var(--vx-surface-sunken);
}

/* A location's "Mapped" status is a chip as wide as its word, also where the
   list item stacks. */
body.vx-app-shell .connected-map-list .mapbox-status {
  justify-self: start;
}

/* In the toolbar, "Fit points" lines up with the groups' buttons, not their
   headings. */
@media (max-width: 1279px) {
  body.vx-app-shell .connected-map-workspace > .mapbox-tools > .save-button {
    align-self: flex-end;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell .connected-comparable-import input[type="file"]::file-selector-button {
    border: 1px solid ButtonText;
  }
}

/* ---- Stage 4 fixes (second review) --------------------------------------- */
/* The distance search is the filter bar's sibling and looks it: the same
   boxed treatment (border, radius, padding, shadow), eyebrow labels and one
   muted line of explanation. */
body.vx-app-shell .connected-comparable-library > .connected-comparable-nearby {
  margin: 0 0 var(--vx-space-4);
  padding: 14px;
  border: 1px solid var(--vx-border);
  border-radius: 6px;
  background: var(--vx-surface);
  box-shadow: 0 8px 20px rgba(31, 37, 43, 0.06);
}

body.vx-app-shell .connected-comparable-nearby > .panel-title {
  margin: 0;
  font-size: var(--vx-text-md);
}

body.vx-app-shell .connected-comparable-nearby > #connected-comparable-nearby-description {
  margin: 2px 0 var(--vx-space-3);
}

body.vx-app-shell .connected-comparable-nearby-form {
  margin: 0;
}

body.vx-app-shell .connected-comparable-nearby-form label {
  gap: 6px;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

body.vx-app-shell .connected-comparable-nearby-form label > input {
  font-size: var(--vx-text-sm);
  text-transform: none;
}

body.vx-app-shell .connected-comparable-nearby > [data-connected-comparable-nearby-summary] {
  margin: var(--vx-space-3) 0 0;
}

/* Below 820px the legacy heading stacks; the library's count stays beside
   its title (the title and its line wrap), never under the intro sentence
   and against the filter box. */
@media (max-width: 820px) {
  body.vx-app-shell .connected-comparable-library > .connected-valuation-heading {
    flex-direction: row;
    align-items: flex-start;
  }

  body.vx-app-shell .connected-comparable-library > .connected-valuation-heading > div {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* On a phone each library record is a compact card rather than a table row
   whose columns lie off-canvas: the name and address with the type chip at
   the top right, the class and the headline figure on one line under them
   (the distance, in a distance search, under that), then the verified date,
   "Correct" and the attach group across the card. Only the display changes:
   the caption, the column headers (visually hidden, still in the tree) and
   every th and td stay, and the harness reads the table's roles back. */
@media (max-width: 720px) {
  body.vx-app-shell .connected-comparable-library > .grid-shell > table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody {
    display: block;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px var(--vx-space-3);
    padding: var(--vx-space-3) 14px;
    border-bottom: 1px solid var(--vx-border);
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr:last-child {
    border-bottom: 0;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    color: var(--vx-text-muted);
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td:nth-child(5):not(:last-child) {
    grid-column: 1 / -1;
    grid-row: 3;
    color: var(--vx-text-muted);
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td:last-child {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    color: var(--vx-text);
    font-weight: 400;
  }

  /* The empty message, and an opened record's detail, span the card. */
  body.vx-app-shell .connected-comparable-library > .grid-shell > table > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body.vx-app-shell .connected-comparable-library .vx-library-verified[data-vx-verified]::before {
    content: "Verified ";
    color: var(--vx-text-muted);
  }

  body.vx-app-shell .connected-comparable-library .connected-library-set-target {
    display: flex;
    width: 100%;
    margin: var(--vx-space-2) 0 0;
  }

  body.vx-app-shell .connected-comparable-library .vx-library-set-controls {
    display: flex;
    flex: 1 1 auto;
  }

  body.vx-app-shell .connected-comparable-library .connected-library-set-target select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.vx-app-shell .connected-comparable-library .connected-library-set-target :is(select, .mini-button) {
    min-height: 44px;
  }

  /* The comparable-set manager's four set types, two by two, not three and
     one alone. */
  body.vx-app-shell .connected-comparable-set-types > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The members table keeps to the card's width, with members or with only
     its "choose a set" message: each member is a card of its own, its order
     and name on the first line and its three actions across the card under
     them, so no action lies past the card's edge (the library's phone
     cards, D16). Only the display changes: the caption, the column headers
     (visually hidden, still in the tree) and every th and td stay, and the
     harness reads the table's roles back. */
  body.vx-app-shell .connected-comparable-set-members > table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell .connected-comparable-set-members > table > caption {
    display: block;
    padding: var(--vx-space-3) 14px;
  }

  body.vx-app-shell .connected-comparable-set-members > table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.vx-app-shell .connected-comparable-set-members > table > tbody {
    display: block;
  }

  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
    gap: var(--vx-space-2) var(--vx-space-3);
    padding: var(--vx-space-3) 14px;
    border-top: 1px solid var(--vx-border);
  }

  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  /* The member's place in the order, as a small numbered badge. */
  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr > td:first-child:not([colspan]) {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--vx-radius-pill);
    background: var(--vx-gray-050);
    color: var(--vx-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr > td.connected-comparable-set-row-actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr > td.connected-comparable-set-row-actions > .mini-button {
    flex: 1 1 auto;
    min-height: 44px;
    margin: 0;
  }

  /* The "choose a set" message spans the card. */
  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
  }
}

/* The comparable-set members: the actions cell stays a table cell (the
   legacy flex display drew its row border at another height from the rest
   of the row), its buttons spaced inline; a member's type reads in sentence
   case, as the library's chips do (the words stay the server's). */
body.vx-app-shell .connected-comparable-set-members td.connected-comparable-set-row-actions {
  display: table-cell;
}

body.vx-app-shell .connected-comparable-set-row-actions > .mini-button {
  margin: 2px 6px 2px 0;
}

body.vx-app-shell .connected-comparable-set-name .report-note {
  text-transform: capitalize;
}

/* ---- Stage 4 fixes (third review) ---------------------------------------- */
/* The library's date and "Correct" keep one line; the attach group follows
   them where the cell has room and takes the next line where it has not. */
body.vx-app-shell .vx-library-verified-line {
  white-space: nowrap;
}

/* A data table: its column labels keep to one line, and the headline figure
   (and, in a distance search, the distance) is right-aligned in tabular
   figures so its digits line up down the column. */
@media (min-width: 721px) {
  body.vx-app-shell .connected-comparable-library > .grid-shell > table > thead th {
    white-space: nowrap;
  }

  body.vx-app-shell .connected-comparable-library > .grid-shell > table > :is(thead, tbody) > tr > :nth-child(4),
  body.vx-app-shell .connected-comparable-library > .grid-shell > table > :is(thead, tbody) > tr > :nth-child(5):not(:last-child) {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
}

/* The CSV import: its accepted columns are one disclosure away. */
body.vx-app-shell .vx-import-columns {
  margin: 0 0 var(--vx-space-3);
}

body.vx-app-shell .vx-import-columns > summary {
  width: fit-content;
  color: var(--vx-blue-700);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  cursor: pointer;
}

body.vx-app-shell .vx-import-columns > summary:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

body.vx-app-shell .vx-import-columns > p {
  margin: var(--vx-space-2) 0 0;
  overflow-wrap: anywhere;
}

/* The comparable-set manager reads as a compact form: the set types as wide
   as their four choices, "Create set" beside the new name, and the current
   name at a name's width with its actions beside it from 1024px. */
@media (min-width: 721px) {
  body.vx-app-shell .connected-comparable-set-types {
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  body.vx-app-shell .connected-comparable-set-create {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  body.vx-app-shell .connected-comparable-set-edit > label {
    max-inline-size: 28rem;
  }
}

@media (min-width: 1024px) {
  body.vx-app-shell .connected-comparable-set-edit {
    grid-template-columns: minmax(0, 28rem) auto;
    justify-content: start;
    align-items: end;
    column-gap: var(--vx-space-3);
  }
}

/* The context panel's Comps tab: the saved indication beside the candidates,
   its figure and its evidence flag on one line where they fit. */
body.vx-app-shell .vx-context-facts dd:has(> .vx-context-indication) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1) var(--vx-space-2);
}

body.vx-app-shell .vx-context-indication {
  white-space: nowrap;
}

/* The Comparables frame's four figures stay one row wherever four fit
   (a laptop or a wide tablet), rather than two by two with the candidates
   far from the indication they feed. */
@media (min-width: 721px) and (max-width: 1099px) {
  body.vx-app-shell .vx-compctx-facts {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

/* On a phone the library's filters take three rows, not five: the search
   across the box, the type and the property class side by side, and Search
   and Reset side by side; the distance search puts latitude and longitude
   side by side, and the radius beside the first of its buttons. */
@media (max-width: 720px) {
  body.vx-app-shell .connected-comparable-library > .dashboard-command-bar > .dashboard-filter-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.vx-app-shell .connected-comparable-library > .dashboard-command-bar > .dashboard-filter-group > :first-child {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .connected-comparable-library > .dashboard-command-bar > .dashboard-actions {
    flex-direction: row;
  }

  body.vx-app-shell .connected-comparable-library > .dashboard-command-bar > .dashboard-actions > button {
    flex: 1 1 0;
  }

  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--vx-space-3);
  }

  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > button {
    min-height: 44px;
    white-space: normal;
  }

  /* The CSV import's "Preview import" spans the card, as "Find likely
     duplicates" does below it. */
  body.vx-app-shell .connected-comparable-import-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The map section, stacked (980px and below): the location list scrolls
   within half the window, so the map and its tools follow it on the first
   screens however many comparables are selected. The list keeps its order
   (the subject first) and its focus order. */
@media (max-width: 980px) {
  body.vx-app-shell .connected-map-workspace .connected-map-list {
    max-height: min(50vh, 32rem);
    overflow-y: auto;
    padding: 6px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell .connected-comparable-set-members > table > tbody > tr > td:first-child:not([colspan]) {
    border: 1px solid CanvasText;
  }
}

/* A distance-search button left alone on its row spans it. */
@media (max-width: 720px) {
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---- Stage 4 fixes (fourth review) --------------------------------------- */
/* The map's tools rail (three columns, from 1280px): each choice group is a
   grid of equal tracks, so no choice is left alone on a line: the four radii
   two by two, the three basemaps one under another across the rail. Classes,
   aria-pressed and copy are unchanged; below 1280px the tools are a toolbar
   and each group keeps one line. */
@media (min-width: 1280px) {
  body.vx-app-shell .connected-map-workspace > .mapbox-tools .segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vx-space-2);
  }

  body.vx-app-shell .connected-map-workspace > .mapbox-tools .segmented-control:has(> [data-basemap]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Fit points" only moves the map's view: a secondary button, like the
   choices under it, so the screen keeps one primary action (the header's).
   Its class, data-action and label are unchanged. */
body.vx-app-shell .connected-map-workspace > .mapbox-tools > .save-button {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface);
  color: var(--vx-text);
}

body.vx-app-shell .connected-map-workspace > .mapbox-tools > .save-button:hover:not(:disabled) {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface-sunken);
}

/* The library's add form under the list (below 1440px, or beside a
   selection's attach groups): twelve tracks, each field as wide as what it
   holds, in field order, so each line is full: the name, the type, the
   class and the subtype; the address, the parcel and the sale date; the
   four figures; the year, the zoning and the source with its reference; the
   verified date, the notes and the coordinates. The two-column form of the
   Library view with nothing selected (D17) keeps its own layout. */
@media (min-width: 901px) {
  body.vx-app-shell .connected-comparable-library > .comparable-library-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(1) { grid-column: span 5; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(2) { grid-column: span 2; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(3) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(4) { grid-column: span 2; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(5) { grid-column: span 6; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(6) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(7) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(8) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(9) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(10) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(11) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(12) { grid-column: span 2; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(13) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(14) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(15) { grid-column: span 4; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(16) { grid-column: span 3; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(17) { grid-column: span 5; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(18) { grid-column: span 2; }
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(19) { grid-column: span 2; }
}

@media (min-width: 1440px) {
  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:not(:has(.connected-library-set-target)) > .comparable-library-form > label:not(:first-of-type) {
    grid-column: auto;
  }

  /* In that 320px form the source and its reference ("Instrument
     2026-1184") take a line each, so the reference shows whole; the pairs
     before and after them stay pairs. */
  body.vx-app-shell .vx-app[data-vx-view="library"] .connected-comparable-library:not(:has(.connected-library-set-target)) > .comparable-library-form > label:is(:nth-of-type(14), :nth-of-type(15)) {
    grid-column: 1 / -1;
  }
}

/* Two columns (601px to 900px): the notes take the whole line. */
@media (min-width: 601px) and (max-width: 900px) {
  body.vx-app-shell .connected-comparable-library > .comparable-library-form > label:nth-of-type(17) {
    grid-column: 1 / -1;
  }
}

/* On a phone the distance search keeps latitude and longitude as equal
   halves, while the radius (a short number) takes a narrow track and the
   button beside it the rest, so "Use the subject's pin" keeps one line and
   the height of the field beside it. The DOM and focus order are unchanged;
   a button left alone on its row still spans it. */
@media (max-width: 720px) {
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) calc(50% - var(--vx-space-3) / 2);
  }

  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label:nth-of-type(1) { grid-column: 1 / 3; }
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label:nth-of-type(2) { grid-column: 3 / -1; }
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label:nth-of-type(3) { grid-column: 1 / 2; }
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label + button { grid-column: 2 / -1; }
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label + button + button:not(:last-child) { grid-column: 1 / 3; }
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label + button + button + button { grid-column: 3 / -1; }

  /* Its fields are as tall as its buttons (44px here), so the radius and
     the button beside it make an even row. */
  body.vx-app-shell .connected-comparable-library .connected-comparable-nearby-form > label > input {
    min-height: 44px;
  }
}

/* The CSV import's "Accepted columns" is a control: 44px under a coarse
   pointer (G10), keeping its disclosure marker. */
@media (pointer: coarse) {
  body.vx-app-shell .vx-import-columns > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
  }
}

/* The Comparables frame's figures after the sets' last request failed. */
body.vx-app-shell .vx-compctx-stale {
  margin: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

/* ---- Stage 5: valuation -------------------------------------------------- */
/* The Valuation section opens on its summary, above every view: the
   reconciled conclusion, the section's largest figure, then a tile per
   approach, each a way to its own panel. Every figure is the server's, as
   its panel shows it, and none is combined with another approach's. */
body.vx-app-shell .vx-value-summary {
  display: grid;
  gap: var(--vx-space-5);
  align-items: start;
}

body.vx-app-shell .vx-value-hero {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--vx-space-1);
  min-width: 0;
}

body.vx-app-shell .vx-value-hero > p {
  margin: 0;
}

body.vx-app-shell .vx-value-summary .vx-value-title {
  margin: 0;
}

body.vx-app-shell .vx-value {
  color: var(--vx-text);
  font-size: var(--vx-text-4xl);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* The conclusion's figure stays inside its column (15-17rem beside the
   approaches): a longer figure steps down a size, and none can run under the
   first approach tile (the A9 follow-up of 2026-10-07: $13,512,345.40 at 40px
   did). */
body.vx-app-shell .vx-value.vx-value--long {
  font-size: var(--vx-text-3xl);
}

body.vx-app-shell .vx-value.vx-value--longer {
  font-size: var(--vx-text-2xl);
}

body.vx-app-shell .vx-value-hero > .vx-value {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-value-method {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-md);
  font-weight: 600;
}

body.vx-app-shell .vx-value-state {
  margin-top: var(--vx-space-1);
}

body.vx-app-shell :is(.vx-value-note, .vx-value-stale) {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-value-stale {
  color: var(--vx-text);
}

body.vx-app-shell .vx-value-link:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The approaches: two by two, four in a row from 1440px, one column on a
   phone. A tile is a card button: the method, its panel's figure, then its
   reconciliation line. */
body.vx-app-shell .vx-approaches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vx-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.vx-app-shell .vx-approaches > li {
  display: flex;
  min-width: 0;
}

body.vx-app-shell .vx-approach {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vx-space-1);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--vx-space-3) var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
  color: var(--vx-text);
  font: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* A tile is a way into its approach: under the pointer it lifts (a stronger
   edge and a raised shadow) and pressed it settles. Blue stays the mark of
   the selected approach alone, so hover never reads as a selection. */
body.vx-app-shell .vx-approach:hover {
  border-color: var(--vx-border-strong);
  box-shadow: var(--vx-shadow-raised);
}

body.vx-app-shell .vx-approach:active {
  box-shadow: var(--vx-shadow-card);
}

body.vx-app-shell .vx-approach:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

/* The approach the conclusion was reconciled from: a 2px blue edge (the
   second pixel drawn inside, so the tile keeps its size), under the pointer
   too. */
body.vx-app-shell .vx-approach--selected,
body.vx-app-shell .vx-approach--selected:is(:hover, :active) {
  border-color: var(--vx-blue-600);
  box-shadow: inset 0 0 0 1px var(--vx-blue-600);
}

body.vx-app-shell .vx-approach--selected:hover {
  box-shadow: inset 0 0 0 1px var(--vx-blue-600), var(--vx-shadow-raised);
}

/* The trailing chevron at the tile's top right says it opens its panel; the
   method's label keeps clear of it. */
body.vx-app-shell .vx-approach-chevron {
  position: absolute;
  top: var(--vx-space-3);
  right: var(--vx-space-3);
  width: 18px;
  height: 18px;
  color: var(--vx-text-muted);
}

body.vx-app-shell .vx-approach:hover .vx-approach-chevron {
  color: var(--vx-text);
}

body.vx-app-shell .vx-approach-label {
  padding-right: 22px;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
  line-height: 1.35;
}

/* Above a phone the tiles of a row share one height: the method and its
   figure stand at the top and the reconciliation line at the bottom, so the
   lines of a row start on one line and the room between reads as spacing. */
@media (min-width: 721px) {
  body.vx-app-shell .vx-approach-status {
    margin-top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vx-app-shell .vx-approach {
    transition: none;
  }
}

body.vx-app-shell .vx-approach-value {
  color: var(--vx-text);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

body.vx-app-shell .vx-approach-value--none {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-md);
  font-weight: 500;
}

body.vx-app-shell .vx-approach-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1) 6px;
  padding-top: var(--vx-space-1);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-approach-caption {
  color: var(--vx-text-muted);
  font-weight: 600;
}

body.vx-app-shell .vx-approach-status .status-chip {
  padding: 1px 8px;
}

body.vx-app-shell .vx-approach-note {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  line-height: 1.35;
}

/* From 1024px the conclusion stands beside its approaches, two by two, so no
   row holds the conclusion alone; from 1440px the four approaches are one
   row beside it. */
@media (min-width: 1024px) {
  body.vx-app-shell .vx-value-summary {
    grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
  }
}

@media (min-width: 1440px) {
  body.vx-app-shell .vx-value-summary {
    grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
  }

  body.vx-app-shell .vx-approaches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.vx-app-shell .vx-value {
    font-size: 40px;
  }
}

/* On a phone the summary is short, so the view the bar switches starts on
   screen under it: each approach is one compact line, its method with its
   figure (16/700; the conclusion stays the largest text), then its
   reconciliation line. */
@media (max-width: 720px) {
  body.vx-app-shell .vx-value-summary {
    gap: var(--vx-space-3);
  }

  body.vx-app-shell .vx-value-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vx-space-1) var(--vx-space-2);
  }

  body.vx-app-shell .vx-value-hero > :is(h2, .vx-value, .vx-value-note, .vx-value-stale, .vx-context-loading, .vx-context-failed) {
    flex: 1 0 100%;
  }

  body.vx-app-shell .vx-value-state {
    margin-top: 0;
  }

  body.vx-app-shell .vx-approaches {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--vx-space-2);
  }

  body.vx-app-shell .vx-approach {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--vx-space-3);
    padding: var(--vx-space-2) calc(var(--vx-space-3) + 22px) var(--vx-space-2) var(--vx-space-3);
  }

  /* The chevron stands on the method's line, right of the figure. */
  body.vx-app-shell .vx-approach-chevron {
    top: 10px;
    right: var(--vx-space-2);
  }

  body.vx-app-shell .vx-approach-label {
    grid-column: 1;
    padding-right: 0;
    font-size: var(--vx-text-sm);
  }

  body.vx-app-shell .vx-approach-value {
    grid-column: 2;
    justify-self: end;
    font-size: var(--vx-text-lg);
  }

  body.vx-app-shell :is(.vx-approach-status, .vx-approach-note) {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .vx-approach-status {
    padding-top: 0;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell .vx-approach {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell .vx-approach--selected {
    border: 2px solid Highlight;
  }
}

/* In the reconciliation panel the reconciled amount stands out of its line. */
body.vx-app-shell .vx-conclusion .vx-value {
  font-size: var(--vx-text-2xl);
  font-weight: 700;
  letter-spacing: 0;
}

/* The analysis panels' headline figures are tiles, as the rent roll's and
   the operating statement's are; the indicated value is the panel's primary
   figure. (The report package's grid, which shows identifiers, is not one
   of these.) */
body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--vx-space-3);
  margin-block: var(--vx-space-4);
}

body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > div {
  padding: var(--vx-space-3);
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--vx-surface-sunken);
}

body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid strong {
  display: block;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid br {
  display: none;
}

body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid .report-note {
  color: var(--vx-text);
  font-size: var(--vx-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The primary figure is marked by emphasis, never by a blue edge: blue marks
   the selected approach alone (the summary's tiles), so a panel's indicated
   value must not read as selected. It stands on the card's own surface,
   raised off the sunken row, with the larger figure below. */
body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > .vx-metric--primary {
  border-color: var(--vx-border);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
}

body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > .vx-metric--primary .report-note {
  font-size: var(--vx-text-2xl);
}

/* A tile that holds words rather than a figure (the cost basis and its
   review state) reads at text size, so the figures keep the emphasis. */
body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > .vx-metric--text .report-note {
  font-size: var(--vx-text-md);
  font-weight: 600;
  font-variant-numeric: normal;
}

/* The direct-capitalization and cost forms. Their fields share their
   label's top line (the record forms' rule), so every label is kept to one
   line and the inputs of a row stand on one line; a help line (the cap
   rate's, the cost source's) stands under its own input and moves nothing.
   Each form's one action closes it on its own line, at its end and on one
   line. Direct capitalization (lane A5: the period, the rate and the
   citation; the totals come from the reviewed statement): four equal columns
   from 901px, the period and the rate one each and the source reference the
   other two. Cost: the source reference, whose label carries its "(required
   for reconciliation)" note, takes two columns so the note stays on the
   label's line. */
@media (min-width: 721px) {
  body.vx-app-shell .connected-financial-analysis .financial-analysis-form > .save-button,
  body.vx-app-shell .connected-cost-approach .connected-cost-approach-form > .save-button {
    grid-column: 1 / -1;
    justify-self: end;
    white-space: nowrap;
  }
}

@media (min-width: 901px) {
  body.vx-app-shell .connected-financial-analysis .financial-analysis-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.vx-app-shell .connected-financial-analysis .financial-analysis-form > label:has(> input[data-connected-financial-field="sourceReference"]) {
    grid-column: 3 / -1;
  }

  body.vx-app-shell .connected-cost-approach .connected-cost-approach-form > label:has(> input[data-connected-cost-approach-field="sourceReference"]) {
    grid-column: 3 / -1;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  body.vx-app-shell .connected-cost-approach .connected-cost-approach-form > label:has(> input[data-connected-cost-approach-field="sourceReference"]) {
    grid-column: 1 / -1;
  }
}

/* Money and rate columns line up by magnitude: right-aligned in tabular
   figures, header included. The reconciliation's and the DCF's tables are as
   wide as their columns need (at least 40rem, or the card), not stretched
   across the card. */
body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(3),
body.vx-app-shell .connected-cost-approach .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(3),
body.vx-app-shell .connected-dcf-scenarios > .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not(:first-child),
body.vx-app-shell .connected-dcf-scenarios > .grid-shell + .grid-shell > table > :is(thead, tbody) > tr > :is(th, td) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell :is(.connected-valuation-reconciliation .grid-shell, .connected-dcf-scenarios > .grid-shell) {
  width: fit-content;
  min-width: min(100%, 40rem);
  max-width: 100%;
}

/* On a phone the DCF's three columns fit the card, so its figures, now at
   the right, are on screen rather than past a sideways scroll. */
@media (max-width: 720px) {
  body.vx-app-shell .connected-dcf-scenarios > .grid-shell > table {
    min-width: 0;
  }

  body.vx-app-shell .connected-dcf-scenarios > .grid-shell > table > :is(thead, tbody) > tr > :is(th, td) {
    min-width: 0;
  }
}

/* The DCF's two tables stand apart, and from 1280px side by side (each half
   the card, as wide as its half; they had stacked in a 640px column beside
   an empty band). Below 1280px they stack, each as wide as its columns, and
   on a phone they fit the card (the rule above). */
body.vx-app-shell .connected-dcf-scenarios > .grid-shell + .grid-shell {
  margin-top: var(--vx-space-4);
}

@media (min-width: 1280px) {
  body.vx-app-shell .connected-dcf-scenarios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--vx-space-4);
  }

  body.vx-app-shell .connected-dcf-scenarios > * {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .connected-dcf-scenarios > .grid-shell {
    grid-column: auto;
    width: auto;
    min-width: 0;
  }

  body.vx-app-shell .connected-dcf-scenarios > .grid-shell + .grid-shell {
    margin-top: 0;
  }

  body.vx-app-shell .connected-dcf-scenarios > .grid-shell > table {
    min-width: 0;
  }
}

/* On a phone each indication is a card: its choice and its name with the
   indicated value beside it, then its eligibility and why. Only the display
   changes (the caption, the column headers, visually hidden, and every cell
   stay; risk K22, as for the library). */
@media (max-width: 720px) {
  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > caption {
    display: block;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody {
    display: block;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--vx-space-1) var(--vx-space-3);
    padding: var(--vx-space-3);
    border-bottom: 1px solid var(--vx-border);
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr:last-child {
    border-bottom: 0;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(n) {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    color: var(--vx-text);
    font-weight: 600;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(4) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-column: 2 / -1;
    grid-row: 2;
    gap: var(--vx-space-1) var(--vx-space-2);
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > td:nth-child(4) > br {
    display: none;
  }

  body.vx-app-shell .connected-valuation-reconciliation .grid-shell > table > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
  }
}

/* The considered reconciliation (lane A9.6). Its approaches table has six
   columns: the considered box, the approach (the row header), the indicated
   value (right-aligned in tabular figures, as every money column is),
   freshness, the Primary Approach and the weight. The weights' line, the
   Final Concluded Value, the live figures, the rounding helper and the
   rationale follow in one column. Classes are vx-reconcile-*. */
body.vx-app-shell .vx-reconcile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--vx-space-2);
}

body.vx-app-shell .vx-reconcile-form {
  display: grid;
  gap: var(--vx-space-4);
  margin-top: var(--vx-space-4);
}

body.vx-app-shell .vx-reconcile-form fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

body.vx-app-shell :is(.vx-reconcile-form legend, .vx-reconcile-final > label, .vx-reconcile-rationale > label) {
  color: var(--vx-text);
  font-size: var(--vx-text-md);
  font-weight: 700;
}

body.vx-app-shell .vx-reconcile-table-shell {
  max-width: 100%;
}

body.vx-app-shell .vx-reconcile-table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(3) {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.vx-app-shell .vx-reconcile-table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):is(:nth-child(1), :nth-child(5)) {
  text-align: center;
}

body.vx-app-shell .vx-reconcile-table input:is([type="checkbox"], [type="radio"]) {
  width: 20px;
  height: 20px;
  margin: 0;
}

body.vx-app-shell .vx-reconcile-weight {
  width: 6.5rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell .vx-reconcile-table > tbody > tr.vx-reconcile-row--considered > :is(th, td) {
  background: var(--vx-blue-050);
}

/* The considered box's, the primary's and the weight's names, shown in the
   cells only on a phone, where the column headers are hidden. Assistive
   technology reads each control's own name instead. */
body.vx-app-shell .vx-reconcile-cell-label {
  display: none;
}

body.vx-app-shell :is(.vx-reconcile-weights, .vx-reconcile-live, .vx-reconcile-record) {
  display: grid;
  gap: var(--vx-space-2);
}

body.vx-app-shell :is(.vx-reconcile-weights, .vx-reconcile-live, .vx-reconcile-record) p {
  margin: 0;
}

body.vx-app-shell .vx-reconcile-live:empty {
  display: none;
}

body.vx-app-shell .vx-reconcile-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-reconcile-reference-label {
  font-weight: 700;
}

body.vx-app-shell .vx-reconcile-reference-value {
  font-size: var(--vx-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell :is(.vx-reconcile-final, .vx-reconcile-rationale) {
  display: grid;
  gap: var(--vx-space-1);
  max-width: 44rem;
}

body.vx-app-shell #vx-reconcile-final {
  max-width: 20rem;
  font-size: var(--vx-text-lg);
  font-variant-numeric: tabular-nums;
}

/* The range warning: a notice, not a refusal (the value stays as entered). */
body.vx-app-shell .vx-reconcile-warning {
  border-left: 4px solid var(--vx-amber-600);
  border-radius: var(--vx-radius-input);
  background: var(--vx-amber-050);
  color: var(--vx-text);
  padding: var(--vx-space-2) var(--vx-space-3);
}

body.vx-app-shell .vx-reconcile-legacy {
  margin: var(--vx-space-2) 0 0;
  border-left: 4px solid var(--vx-blue-600);
  border-radius: var(--vx-radius-input);
  background: var(--vx-blue-050);
  color: var(--vx-text);
  padding: var(--vx-space-2) var(--vx-space-3);
}

/* What the draft must be reviewed against before it can be finalized: another
   finalization on file (keep or discard the entries) or a considered approach
   changed after it was considered. A notice with the appraiser's choices; the
   entries stay as entered. The single-selection panel's note on a considered
   conclusion reads the same way. */
body.vx-app-shell :is(.vx-reconcile-review, .vx-reconcile-record-note) {
  display: grid;
  gap: var(--vx-space-2);
  margin: 0;
  border-left: 4px solid var(--vx-amber-600);
  border-radius: var(--vx-radius-input);
  background: var(--vx-amber-050);
  color: var(--vx-text);
  padding: var(--vx-space-2) var(--vx-space-3);
}

body.vx-app-shell .vx-reconcile-review p {
  margin: 0;
}

body.vx-app-shell .vx-reconcile-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-reconcile-changed {
  display: inline-block;
  margin: var(--vx-space-1) 0;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-reconcile-record {
  margin-top: var(--vx-space-3);
}

body.vx-app-shell .vx-reconcile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--vx-space-2) var(--vx-space-4);
  margin: 0;
}

body.vx-app-shell .vx-reconcile-facts dt {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-reconcile-facts dd {
  margin: 0;
}

body.vx-app-shell .vx-reconcile-considered-list {
  margin: 0;
  padding-left: 1.1rem;
}

body.vx-app-shell .vx-reconcile-version {
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-reconcile-rounding {
  display: grid;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-reconcile-form .vx-reconcile-rounding {
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-input);
  padding: var(--vx-space-3);
}

body.vx-app-shell .vx-reconcile-rounding > legend {
  padding: 0 var(--vx-space-1);
}

body.vx-app-shell .vx-reconcile-rounding p {
  margin: 0;
}

body.vx-app-shell .vx-reconcile-round-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-reconcile-round-controls > label {
  display: grid;
  gap: var(--vx-space-1);
  min-width: 0;
  font-weight: 600;
}

body.vx-app-shell .vx-reconcile-round-use {
  justify-self: start;
}

body.vx-app-shell .vx-reconcile-form > .save-button {
  justify-self: end;
}

/* On a phone each indication is a card: its name with the indicated value
   beside it, its freshness, then the considered box, the Primary Approach and
   the weight, each with its name. Only the display changes: the caption, the
   column headers (visually hidden) and every cell stay. */
@media (max-width: 720px) {
  body.vx-app-shell .vx-reconcile-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell .vx-reconcile-table > caption {
    display: block;
  }

  body.vx-app-shell .vx-reconcile-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.vx-app-shell .vx-reconcile-table > tbody {
    display: block;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--vx-space-2) var(--vx-space-3);
    padding: var(--vx-space-3);
    border-bottom: 1px solid var(--vx-border);
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr.vx-reconcile-row--considered {
    background: var(--vx-blue-050);
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr:last-child {
    border-bottom: 0;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(n) {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    color: var(--vx-text);
    font-weight: 600;
    text-align: end;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):is(:nth-child(1), :nth-child(5), :nth-child(6)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    grid-column: 1 / -1;
    gap: var(--vx-space-2);
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(1) {
    grid-row: 3;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(5) {
    grid-row: 4;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > :is(th, td):not([colspan]):nth-child(6) {
    grid-row: 5;
  }

  body.vx-app-shell .vx-reconcile-cell-label {
    display: inline;
    color: var(--vx-text);
    font-size: var(--vx-text-sm);
    font-weight: 600;
  }

  body.vx-app-shell .vx-reconcile-table > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
  }

  body.vx-app-shell #vx-reconcile-final {
    max-width: none;
  }

  body.vx-app-shell .vx-reconcile-form > .save-button {
    justify-self: stretch;
  }
}

@media (pointer: coarse) {
  body.vx-app-shell .vx-reconcile-table input:is([type="checkbox"], [type="radio"]) {
    width: 24px;
    height: 24px;
  }
}

/* Forced colours drop the tints: the notices keep an edge, and a considered
   row keeps a mark in the system highlight colour. */
@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-reconcile-warning, .vx-reconcile-legacy, .vx-reconcile-review, .vx-reconcile-record-note) {
    border: 1px solid CanvasText;
    border-left-width: 4px;
  }

  body.vx-app-shell .vx-reconcile-row--considered > :is(th, td):first-child {
    border-left: 4px solid Highlight;
  }

  body.vx-app-shell .vx-reconcile-form .vx-reconcile-rounding {
    border-color: CanvasText;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > div {
    border-color: CanvasText;
  }

  /* Forced colours drop the surface and the shadow that mark the primary
     figure, so it keeps a heavier edge than its neighbours' 1px. The edge is
     CanvasText, not Highlight: Highlight marks the selected approach tile
     here, and the primary figure is emphasis, not a selection. */
  body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > .vx-metric--primary {
    border: 2px solid CanvasText;
  }
}

/* The sales-comparison grid. From 1400px a comparable is one table row: Use,
   the comparable and its provenance, its sale evidence, weight and selection
   review, its adjustments, and the adjusted result, the whole table inside
   its card with the adjusted result in view. Below 1400px each comparable is
   a card (the library's D16 technique, CSS only; Stage 5 second review): from
   721px in two bands, the comparable's own facts with its adjusted result on
   the first, then its adjustments across the card, and on a phone one
   column. (From 1280px the table did fit, but its adjustments had under
   25rem: every applied category stood four control lines tall, a comparable
   about 1,000px.) The grid never scrolls sideways at a width the shell supports, so
   a comparable's result is never out of view while it is edited. The cells
   are 8px from their sides (the shell's tables use 12px) so the adjustments
   keep the room. */
body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td) {
  padding-inline: var(--vx-space-2);
}

/* The action closes the form under the grid, apart from it, as the
   reconciliation's and the cost form's actions stand apart from their
   fields. */
body.vx-app-shell .connected-sales-comparison form > .save-button {
  margin-top: var(--vx-space-4);
}

/* The Valuation area's text boxes show whole lines: each grows with its text
   (field-sizing, Chromium) from two lines to eight, and its height is always
   whole lines plus its padding and border, so no line is cut through. Where
   field-sizing is not supported the box keeps its rows and scrolls. The
   considered reconciliation's rationale (lane A9.6) is one of them. */
body.vx-app-shell :is(.connected-sales-comparison, .connected-valuation-reconciliation, .vx-reconcile, .connected-dcf-scenarios) textarea {
  min-height: 54px;
  max-height: 174px;
  line-height: 20px;
  field-sizing: content;
}

body.vx-app-shell .connected-sales-comparison .grid-shell .sales-adjustment-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  align-items: start;
  gap: var(--vx-space-2);
  min-width: 0;
}

/* An adjustment category reads as one line, its name and its "Apply
   adjustment" box, until it is applied: a category that is not applied shows
   nothing else. Its other controls are disabled then (the module's sync), so
   nothing focusable or required is hidden, and checking the box shows them
   again (the rule keys on :checked). The legend is floated, which makes it a
   grid item on the box's line (it still names the fieldset); it keeps clear
   of the box, wrapping first. Applied, the type and the amount share a line,
   then the evidence source across the category (so the chosen source reads
   in full), the rationale across it, then the review status; every control
   keeps its own height. */
body.vx-app-shell .connected-sales-comparison .sales-adjustment-category {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  align-content: start;
  gap: var(--vx-space-2) var(--vx-space-3);
  min-width: 0;
  padding: var(--vx-space-2) 10px;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-input);
  background: var(--vx-surface);
}

body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > legend {
  float: left;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 0 8.5rem 0 0;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  line-height: 1.3;
}

body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > label:has(> input[type="checkbox"]) {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  align-self: start;
  justify-self: end;
  gap: 6px;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  line-height: 17px;
  white-space: nowrap;
}

body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > label:has(> select[data-sales-adjustment-field="sourceReferenceId"]) {
  grid-column: 1 / -1;
}

body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > label:has(> textarea) {
  grid-column: 1 / -1;
}

body.vx-app-shell .connected-sales-comparison .sales-adjustment-category:has(> label > input[data-sales-adjustment-field="active"]:not(:checked)) {
  border-color: transparent;
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-sales-comparison .sales-adjustment-category:has(> label > input[data-sales-adjustment-field="active"]:not(:checked)) > label:not(:has(> input[type="checkbox"])) {
  display: none;
}

/* From 1400px, where the table gives the adjustments at least 25rem, an
   applied category is three columns in its controls' order: the type and
   the amount (over two), the source across, then the rationale over two
   beside the review status. */
@media (min-width: 1400px) {
  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > label:has(> input[data-sales-adjustment-field="amount"]) {
    grid-column: span 2;
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > label:has(> textarea) {
    grid-column: 1 / 3;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category {
    border-color: CanvasText;
  }
}

/* The Use and comparable columns stay in view should the table ever scroll
   (a safeguard from 1400px; below it every comparable is a card). */
body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(-n + 2) {
  position: sticky;
  z-index: 1;
  background: var(--vx-surface);
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > thead > tr > th:not([colspan]):nth-child(-n + 2) {
  z-index: 2;
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):first-child {
  left: 0;
  box-sizing: border-box;
  width: 3rem;
  min-width: 3rem;
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(2) {
  left: 3rem;
  box-sizing: border-box;
  width: 10rem;
  min-width: 10rem;
  box-shadow: inset -1px 0 0 var(--vx-border);
}

/* The other columns keep room for their figures and controls; the
   adjustments take what is left, at least 16rem. */
body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(3),
body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(7) {
  box-sizing: border-box;
  width: 6rem;
  min-width: 6rem;
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(4) {
  box-sizing: border-box;
  width: 5rem;
  min-width: 5rem;
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(5) {
  box-sizing: border-box;
  width: 10.5rem;
  min-width: 10.5rem;
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > :is(thead, tbody) > tr > :is(th, td):not([colspan]):nth-child(6) {
  box-sizing: border-box;
  min-width: 16rem;
}

/* The selection review's three controls stack a little apart. */
body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:nth-child(5) > label {
  display: block;
}

body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:nth-child(5) > label + label {
  margin-top: 6px;
}

/* Keyboard focus is never left under the pinned columns (WCAG 2.4.11): a
   control scrolled into view inside the shell stops at the pinned columns'
   right edge rather than at the shell's left edge. The padding is the two
   pinned widths above; it matters only where the columns are pinned. */
@media (min-width: 1400px) {
  body.vx-app-shell .connected-sales-comparison .grid-shell {
    scroll-padding-inline-start: calc(3rem + 10rem);
  }
}

/* Below 1400px each comparable is a card rather than a row whose later
   columns lie past the shell's edge. Only the display changes: the caption,
   the column headers (visually hidden, still in the tree) and every th and
   td stay, and the harness reads the table's roles back (risk K22, as for
   the library). The header words a card would otherwise lose are drawn over
   their cells as visual text only: the alternative text after the "/" is
   empty, so a screen reader in table mode hears each header once, from the
   column header, not again from the drawing. */
@media (max-width: 1399px) {
  body.vx-app-shell .connected-sales-comparison .grid-shell > table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > caption {
    display: block;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody {
    display: block;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr {
    display: grid;
    gap: var(--vx-space-3);
    padding: var(--vx-space-3) var(--vx-space-3) var(--vx-space-4);
    border-bottom: 1px solid var(--vx-border);
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr:last-child {
    border-bottom: 0;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(n) {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7))::before {
    display: block;
    margin-bottom: var(--vx-space-1);
    color: var(--vx-text-muted);
    font-size: var(--vx-text-xs);
    font-weight: 600;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):nth-child(3)::before {
    content: "Sale evidence" / "";
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):nth-child(4)::before {
    content: "Weight" / "";
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):nth-child(5)::before {
    content: "Selection review" / "";
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):nth-child(6)::before {
    content: "Signed adjustment" / "";
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):nth-child(7)::before {
    content: "Adjusted result" / "";
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(7) {
    text-align: end;
  }

  /* The empty message spans the card. */
  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* From 721px to 1399px, two bands. The first holds the comparable's own
   facts: Use, the comparable with its provenance, the sale evidence and the
   adjusted result on its first line, the weight and the selection review
   (its source across, then the rationale beside the review status) on its
   second. The second band holds the adjustments across the card: the
   categories that are not applied two to a line where they fit (each name on
   one line), and an applied one across the card with its type, amount and
   source on one line and its rationale beside its review status on the
   next. */
@media (min-width: 721px) and (max-width: 1399px) {
  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr {
    grid-template-columns: 2.25rem 6rem minmax(0, 1fr) 7.5rem 7.5rem;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(7) {
    grid-column: 5;
    grid-row: 1;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(5) {
    display: grid;
    grid-column: 3 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
    align-items: start;
    gap: 6px var(--vx-space-3);
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:not([colspan]):nth-child(5)::before {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:nth-child(5) > label:has(> select[data-sales-comparison-field="sourceReferenceId"]) {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:nth-child(5) > label + label {
    margin-top: 0;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(6) {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell .sales-adjustment-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category:has(> label > input[data-sales-adjustment-field="active"]:checked) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 7rem) minmax(0, 8rem) minmax(0, 1fr) minmax(0, 9rem);
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category:has(> label > input[data-sales-adjustment-field="active"]:checked) > label:has(> select[data-sales-adjustment-field="sourceReferenceId"]) {
    grid-column: 3 / -1;
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category:has(> label > input[data-sales-adjustment-field="active"]:checked) > label:has(> textarea) {
    grid-column: 1 / 4;
  }
}

/* On a phone each comparable is one column: Use and the comparable with its
   provenance, the sale evidence beside the adjusted result, the weight, the
   selection review across the card, then the adjustment categories one per
   line (collapsed when not applied). */
@media (max-width: 720px) {
  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr {
    grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1fr);
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    text-align: start;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(2) {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(7) {
    grid-column: 3;
    grid-row: 2;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > td:nth-child(4) input {
    max-width: 9rem;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell > table > tbody > tr > :is(th, td):not([colspan]):nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  body.vx-app-shell .connected-sales-comparison .grid-shell .sales-adjustment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* On a phone the cost history and the valuation editor's selected
   comparables are cards too, so no figure is cut through by a sideways
   scroll (Stage 5 second review). A cost analysis: its effective date and
   basis on one line with the indicated value at the right, then its review
   state and whether it cites a source. A selected comparable: its number and
   type, its value (the control taking the room left) and its Remove action,
   on one line. Only the display changes: the captions, the column headers
   (visually hidden, still in the tree) and every th and td stay (risk K22). */
@media (max-width: 720px) {
  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) > tbody {
    display: block;
  }

  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) > tbody > tr {
    display: grid;
    align-items: baseline;
    gap: var(--vx-space-1) var(--vx-space-3);
    padding: var(--vx-space-3);
    border-bottom: 1px solid var(--vx-border);
  }

  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) > tbody > tr:last-child {
    border-bottom: 0;
  }

  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) > tbody > tr > :is(th, td):nth-child(n) {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
  }

  body.vx-app-shell :is(.connected-cost-approach .grid-shell > table, .connected-valuation-panel .grid-shell > .connected-comparable-table) > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
  }

  body.vx-app-shell .connected-cost-approach .grid-shell > table > tbody > tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body.vx-app-shell .connected-cost-approach .grid-shell > table > tbody > tr > :is(th, td):nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    color: var(--vx-text);
    font-weight: 600;
    text-align: end;
  }

  body.vx-app-shell .connected-cost-approach .grid-shell > table > tbody > tr > :is(th, td):nth-child(4) {
    grid-column: 1;
    grid-row: 2;
    color: var(--vx-text-muted);
  }

  body.vx-app-shell .connected-cost-approach .grid-shell > table > tbody > tr > :is(th, td):nth-child(5) {
    grid-column: 2 / -1;
    grid-row: 2;
    color: var(--vx-text-muted);
  }

  /* Fixed number and type tracks, so every card's value starts at one edge
     (the types are Sale, Rent and Land). */
  body.vx-app-shell .connected-valuation-panel .grid-shell > .connected-comparable-table > tbody > tr {
    grid-template-columns: 1.25rem 2.75rem minmax(0, 1fr) auto;
    align-items: center;
  }

  body.vx-app-shell .connected-valuation-panel .grid-shell > .connected-comparable-table > tbody > tr > td:nth-child(1) {
    color: var(--vx-text-muted);
    font-variant-numeric: tabular-nums;
  }

  body.vx-app-shell .connected-valuation-panel .grid-shell > .connected-comparable-table > tbody > tr > td:nth-child(2) {
    font-weight: 600;
  }

  body.vx-app-shell .connected-valuation-panel .grid-shell > .connected-comparable-table > tbody > tr > td:nth-child(3) input {
    width: 100%;
    min-width: 0;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
}

/* ---- Stage 5 fixes (third review) ---------------------------------------- */
/* Four tiles in a row (from 1440px): every method label reserves two lines,
   so the four headline figures stand on one line whichever label wraps
   beside its chevron ("Income · direct capitalization" does). */
@media (min-width: 1440px) {
  body.vx-app-shell .vx-approach-label {
    min-height: 2lh;
  }
}

/* Beside its approaches (from 1024px) the conclusion is centred on them,
   rather than leaving a blank card under its chip. */
@media (min-width: 1024px) {
  body.vx-app-shell .vx-value-summary > .vx-value-hero {
    align-self: stretch;
    align-content: center;
  }
}

/* One rule for the Valuation area's saves: from 721px the save closes its
   form on its own line at the form's end (direct capitalization and cost
   already did, Stage 5 second review), and at 720px and below it spans the
   form. The sales-comparison form is a block, not a grid, so its button is
   pushed to the end by its margin. */
@media (min-width: 721px) {
  body.vx-app-shell .connected-dcf-form > .save-button {
    grid-column: 1 / -1;
    justify-self: end;
    white-space: nowrap;
  }

  body.vx-app-shell .connected-sales-comparison form > .save-button {
    display: block;
    width: fit-content;
    margin-inline-start: auto;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  body.vx-app-shell :is(.connected-sales-comparison form, .connected-dcf-form, .connected-reconciliation-form, .financial-analysis-form, .connected-cost-approach-form) > .save-button {
    justify-self: stretch;
    width: 100%;
  }
}

/* The DCF form from 901px: the evidence source takes two columns, as the
   cost source reference does, so the chosen source reads as far as a select
   can show; the rates' shared help stands beside the last rate, level with
   its input (so no rate stands alone on a line), and the assumption notes
   run across the form above its save. DOM and focus order are unchanged. */
@media (min-width: 901px) {
  body.vx-app-shell .connected-dcf-form > label:has(> select[data-connected-dcf-field="sourceReferenceId"]) {
    grid-column: span 2;
  }

  body.vx-app-shell .connected-dcf-form > .connected-dcf-rate-help {
    display: flex;
    grid-column: span 3;
    align-self: end;
    align-items: center;
    min-height: 36px;
    margin: 0;
  }

  body.vx-app-shell .connected-dcf-form > .connected-dcf-notes {
    grid-column: 1 / -1;
  }
}

@media (min-width: 901px) and (pointer: coarse) {
  body.vx-app-shell .connected-dcf-form > .connected-dcf-rate-help {
    min-height: 44px;
  }
}

/* On a phone the analysis panels' headline figures are two to a line, so
   the indicated value is reached sooner; it spans the card to stay the
   panel's emphasis, and a tile that would otherwise stand beside an empty
   cell (the DCF's reversion before it, the tile after it) spans it too. DOM
   order is unchanged. */
@media (max-width: 720px) {
  body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > :is(.vx-metric--primary, .vx-metric--primary ~ *, :nth-child(odd):has(+ .vx-metric--primary)) {
    grid-column: 1 / -1;
  }
}

/* The tiles of a row share its height, and each figure (or chip) stands at
   its tile's foot, so a caption that wraps ("Depreciated improvement cost"
   beside "Total depreciation") never sets its figure lower than its
   neighbour's. */
body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body.vx-app-shell :is(.connected-financial-analysis, .connected-dcf-scenarios, .connected-cost-approach, .connected-sales-comparison) .report-package-grid > div > :is(.report-note, .status-chip) {
  margin-top: auto;
}

/* The valuation editor. Its Add Sale, Add Rent and Add Land are the area's
   secondary buttons (they wore the legacy 800-weight segmented style, with a
   border too faint to mark a button), and its money inputs line up by
   magnitude at every width: right-aligned in tabular figures, as the
   reconciliation's and the cost history's indicated values are. */
body.vx-app-shell .connected-valuation-panel .connected-comparable-heading .segmented-control button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-button);
  background: var(--vx-surface);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  line-height: 1.2;
}

body.vx-app-shell .connected-valuation-panel .connected-comparable-heading .segmented-control button:hover:not(:disabled) {
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .connected-valuation-panel .connected-comparable-heading .segmented-control button:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

body.vx-app-shell .connected-valuation-panel input[data-connected-comparable-value] {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The column's label ends where its values end (the cell's and the input's
   padding and border). */
body.vx-app-shell .connected-valuation-panel .grid-shell > .connected-comparable-table > thead > tr > th:nth-child(3) {
  padding-inline-end: calc(var(--vx-space-3) + 11px);
  text-align: end;
}

/* The sales-comparison table (from 1400px) keeps its adjustments compact: a
   category that is not applied is a pill of its name and its box, sized to
   them, and two stand on a line where they fit; an applied one spans the
   column. "Apply" alone labels the box there (the rest of "Apply adjustment"
   is visually hidden; the box's own name, its aria-label, is unchanged).
   Below 1400px each comparable is a card with room for the whole words.
   The fieldsets, legends and control order are unchanged. */
@media (min-width: 1400px) {
  body.vx-app-shell .connected-sales-comparison .grid-shell .sales-adjustment-grid {
    display: flex;
    flex-wrap: wrap;
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category {
    flex: 1 1 auto;
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category:has(> label > input[data-sales-adjustment-field="active"]:checked) {
    flex-basis: 100%;
  }

  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > legend {
    padding-inline-end: 4.5rem;
  }

  body.vx-app-shell .connected-sales-comparison .vx-adjustment-noun {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Under a coarse pointer the adjustment's "Apply" label, the box's hit area,
   is at least 44px tall (G10; the shell's coarse rule exempts checkboxes),
   and the comparable's own Include box is 24px. */
@media (pointer: coarse) {
  body.vx-app-shell .connected-sales-comparison .sales-adjustment-category > label:has(> input[type="checkbox"]) {
    min-height: 44px;
  }

  body.vx-app-shell .connected-sales-comparison tbody input[data-sales-comparison-field="selected"] {
    width: 24px;
    height: 24px;
    margin: 0;
  }

  body.vx-app-shell .connected-valuation-panel .connected-comparable-heading .segmented-control button {
    min-height: 44px;
  }
}

/* ---- Native report panel (slice 1 step 7) --------------------------------- */
/* The Report section's first panel: the Vista-native report of record. It is
   marked as the route of record by a blue top edge; its facts, findings and
   acts use the shell's tokens and primitives only (no token changes). Every
   text pair is a blueprint 5.2 pair: --vx-text on the surface, sunken and
   050 tints (13.7:1 or more), --vx-text-muted on the surface and sunken tint
   (5.39:1 or more), --vx-teal-700 on the surface (6.15:1), --vx-red-700 on
   --vx-red-050 (5.72:1). */
body.vx-app-shell .vx-native-report {
  border-top: 3px solid var(--vx-blue-600);
}

body.vx-app-shell .vx-native-report .vx-native-report-facts {
  margin-bottom: var(--vx-space-4);
}

body.vx-app-shell .vx-native-report h3 {
  margin: 0 0 var(--vx-space-2);
  color: var(--vx-text);
  font-size: var(--vx-text-md);
  font-weight: 650;
}

body.vx-app-shell .vx-native-report .vx-native-report-callout {
  margin: var(--vx-space-3) 0;
  padding: var(--vx-space-3) var(--vx-space-4);
  border-left: 3px solid var(--vx-amber-600);
  border-radius: var(--vx-radius-input);
  background: var(--vx-amber-050);
  color: var(--vx-text);
}

body.vx-app-shell .vx-native-report .vx-native-report-error {
  margin: var(--vx-space-3) 0;
}

body.vx-app-shell .vx-native-report-qc {
  margin: var(--vx-space-4) 0;
}

body.vx-app-shell .vx-native-report-qc h3 .report-note {
  font-weight: 400;
}

body.vx-app-shell .vx-native-report-findings {
  display: grid;
  gap: var(--vx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.vx-app-shell .vx-native-report-finding {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vx-space-1) var(--vx-space-3);
  align-items: start;
  padding: var(--vx-space-2) var(--vx-space-3);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-input);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-native-report-finding-text {
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-native-report-code {
  grid-column: 2;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-native-report-qc-clear {
  color: var(--vx-teal-700);
  font-weight: 600;
}

body.vx-app-shell .vx-native-report-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--vx-space-3) var(--vx-space-6);
  margin: var(--vx-space-4) 0;
}

body.vx-app-shell .vx-native-report-steps:empty {
  display: none;
}

body.vx-app-shell .vx-native-report :is(.vx-native-report-render, .vx-native-report-publish) {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--vx-space-2) var(--vx-space-3);
}

body.vx-app-shell .vx-native-report :is(.vx-native-report-render, .vx-native-report-publish) > :is(h3, .report-note) {
  flex-basis: 100%;
  margin: 0;
}

body.vx-app-shell .vx-native-report .vx-native-report-render label {
  display: grid;
  gap: var(--vx-space-1);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .vx-native-report .vx-native-report-review {
  margin: 0;
}

/* Review: the drawn page on a sunken ground, the pager under it, then the
   hash line that says whether the bytes shown are the render. */
body.vx-app-shell .vx-native-report-viewer {
  display: grid;
  gap: var(--vx-space-3);
  margin: var(--vx-space-4) 0;
  padding: var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-native-report-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 12rem;
}

body.vx-app-shell .vx-native-report-page-image {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--vx-border-strong);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-card);
}

body.vx-app-shell .vx-native-report-viewer figcaption {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  text-align: center;
}

body.vx-app-shell .vx-native-report-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--vx-space-2) var(--vx-space-3);
}

body.vx-app-shell .vx-native-report-page-count {
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body.vx-app-shell .vx-native-report-hash {
  margin: 0;
  padding: var(--vx-space-2) var(--vx-space-3);
  border-radius: var(--vx-radius-input);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-native-report-hash--match {
  border: 1px solid var(--vx-teal-600);
  background: var(--vx-surface);
  color: var(--vx-teal-700);
}

body.vx-app-shell .vx-native-report-hash--mismatch {
  border: 1px solid var(--vx-red-600);
  background: var(--vx-red-050);
  color: var(--vx-red-700);
  font-weight: 600;
}

/* Deciding: approval beside rejection where there is room. */
body.vx-app-shell .vx-native-report-decisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--vx-space-4);
  margin: var(--vx-space-4) 0;
}

body.vx-app-shell .vx-native-report-decisions:empty {
  display: none;
}

body.vx-app-shell .vx-native-report :is(.vx-native-report-approve, .vx-native-report-reject) {
  display: grid;
  align-content: start;
  gap: var(--vx-space-3);
  padding: var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-native-report :is(.vx-native-report-approve, .vx-native-report-reject) > button {
  justify-self: start;
}

body.vx-app-shell .vx-native-report .vx-native-report-reject label {
  display: grid;
  gap: var(--vx-space-1);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell .vx-native-report .vx-native-report-reject textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
}

body.vx-app-shell .vx-native-report-check {
  display: flex;
  gap: var(--vx-space-2);
  align-items: start;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-native-report-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
}

body.vx-app-shell .vx-native-report-decision-line {
  margin: var(--vx-space-3) 0;
  color: var(--vx-text);
}

/* The published record: the report of record's who, when and SHA-256. */
body.vx-app-shell .vx-native-report-published {
  margin: var(--vx-space-3) 0 var(--vx-space-4);
  padding: var(--vx-space-4);
  border: 1px solid var(--vx-teal-600);
  border-radius: var(--vx-radius-card);
  background: var(--vx-teal-050);
  color: var(--vx-text);
}

body.vx-app-shell .vx-native-report-published .report-note {
  color: var(--vx-text);
}

body.vx-app-shell .vx-native-report-published-line {
  margin: 0 0 var(--vx-space-2);
}

body.vx-app-shell .vx-native-report .vx-native-report-refresh {
  margin-top: var(--vx-space-2);
}

body.vx-app-shell .vx-native-report :is(button, summary):focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

/* The Word add-in route, folded: one closed disclosure at the end of the
   Report section, its panels unchanged inside it. */
body.vx-app-shell .vx-word-route {
  margin: var(--vx-space-4) 0 0;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-word-route > summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--vx-space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--vx-space-3) var(--vx-space-4);
  color: var(--vx-text);
  cursor: pointer;
  list-style: none;
}

body.vx-app-shell .vx-word-route > summary::-webkit-details-marker {
  display: none;
}

/* A chevron drawn with borders (no external resource), turned when open. */
body.vx-app-shell .vx-word-route > summary::before {
  content: "";
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--vx-border-strong);
  border-bottom: 2px solid var(--vx-border-strong);
  transform: rotate(-45deg);
}

body.vx-app-shell .vx-word-route[open] > summary::before {
  transform: rotate(45deg);
}

body.vx-app-shell .vx-word-route > summary:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
  border-radius: var(--vx-radius-card);
}

body.vx-app-shell .vx-word-route-title {
  font-size: var(--vx-text-md);
  font-weight: 650;
}

body.vx-app-shell .vx-word-route-note {
  grid-column: 2;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

/* One column no wider than the fold (minmax(0, 1fr)): a grid item's minimum
   width is otherwise its content's, and the folded panels' tables would then
   widen the page at phone width instead of scrolling inside their shells, as
   they do unfolded. */
body.vx-app-shell .vx-word-route-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vx-space-4);
  padding: 0 var(--vx-space-4) var(--vx-space-4);
}

@media (max-width: 720px) {
  body.vx-app-shell .vx-native-report-viewer {
    padding: var(--vx-space-3);
  }

  /* Only the next step spans the row, so a secondary "Render PDF" never
     outweighs the primary "Review PDF" beside it. */
  body.vx-app-shell .vx-native-report :is(.vx-native-report-render, .vx-native-report-publish) > .save-button,
  body.vx-app-shell .vx-native-report-steps > .vx-native-report-review:has(> .save-button) {
    flex-basis: 100%;
  }
}

@media (pointer: coarse) {
  body.vx-app-shell .vx-native-report-check input {
    width: 24px;
    height: 24px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-word-route, .vx-native-report-viewer, .vx-native-report-finding, .vx-native-report-published, .vx-native-report-hash, .vx-native-report-callout) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell .vx-word-route > summary::before {
    border-color: CanvasText;
  }
}

/* ---- Report sections panel (slice 2 step 7) ------------------------------- */
/* The Report section's second panel: the navigator of the report's sections
   beside the editor from 1024px, the navigator a disclosure above it at 720px
   and below. Tokens and primitives only (no token changes); every text pair
   is one of blueprint 5.2's: --vx-text on the surface, sunken and 050 tints,
   --vx-text-muted on the surface and sunken tint, --vx-blue-700 on the
   surface. Added and removed words are underlined and struck through, never
   told apart by colour alone. */
body.vx-app-shell .vx-report-sections {
  border-top: 3px solid var(--vx-blue-600);
}

body.vx-app-shell .vx-report-sections h3,
body.vx-app-shell .vx-report-signer h3 {
  margin: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-md);
  font-weight: 650;
}

body.vx-app-shell .vx-report-sections h4,
body.vx-app-shell .vx-report-signer h4 {
  margin: 0 0 var(--vx-space-2);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 650;
}

body.vx-app-shell .vx-report-sections h5 {
  margin: 0 0 var(--vx-space-1);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 650;
}

body.vx-app-shell .vx-report-sections-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vx-space-4);
  margin: var(--vx-space-4) 0;
}

body.vx-app-shell .vx-report-sections-main {
  min-width: 0;
}

body.vx-app-shell .vx-report-sections-nav {
  min-width: 0;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-report-sections-nav > summary {
  padding: var(--vx-space-3) var(--vx-space-4);
  color: var(--vx-text);
  font-weight: 650;
  cursor: pointer;
}

body.vx-app-shell .vx-report-sections-progress {
  margin: 0;
  padding: var(--vx-space-3) var(--vx-space-3) 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 600;
}

body.vx-app-shell .vx-report-sections-nav-list {
  display: grid;
  gap: var(--vx-space-1);
  margin: 0;
  padding: var(--vx-space-2);
  list-style: none;
}

body.vx-app-shell .vx-report-section-nav-item {
  display: grid;
  gap: var(--vx-space-1);
  width: 100%;
  min-height: 44px;
  padding: var(--vx-space-2) var(--vx-space-3);
  border: 1px solid transparent;
  border-radius: var(--vx-radius-input);
  background: transparent;
  color: var(--vx-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.vx-app-shell .vx-report-section-nav-item:hover {
  border-color: var(--vx-border);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-report-section-nav-item[aria-current="true"] {
  border-color: var(--vx-blue-600);
  background: var(--vx-surface);
  box-shadow: inset 3px 0 0 var(--vx-blue-600);
}

body.vx-app-shell .vx-report-section-nav-title {
  font-size: var(--vx-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.vx-app-shell :is(.vx-report-section-nav-chips, .vx-report-section-editor-chips) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-1);
}

body.vx-app-shell .vx-report-section-editor {
  display: grid;
  gap: var(--vx-space-3);
  min-width: 0;
}

body.vx-app-shell .vx-report-section-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vx-space-2) var(--vx-space-3);
}

body.vx-app-shell .vx-report-section-guidance {
  margin: 0;
  padding: var(--vx-space-2) var(--vx-space-3);
  border-left: 3px solid var(--vx-blue-600);
  background: var(--vx-surface-sunken);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-report-section-facts {
  margin: 0;
}

/* Section text, written as text (textContent), kept as typed: line breaks
   and runs of spaces stay, and a long word wraps rather than widening the page. */
body.vx-app-shell .vx-report-section-text {
  max-height: 24rem;
  margin: 0;
  padding: var(--vx-space-3);
  overflow: auto;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-input);
  background: var(--vx-surface);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-report-section-diff-text ins {
  background: var(--vx-teal-050);
  color: var(--vx-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

body.vx-app-shell .vx-report-section-diff-text del {
  background: var(--vx-red-050);
  color: var(--vx-text);
  text-decoration: line-through;
}

body.vx-app-shell .vx-report-section-diff {
  display: grid;
  gap: var(--vx-space-2);
  margin: var(--vx-space-3) 0 0;
}

body.vx-app-shell .vx-report-section-diff figcaption {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell :is(.vx-report-section-merge, .vx-report-section-vista, .vx-report-section-history) {
  display: grid;
  gap: var(--vx-space-2);
  min-width: 0;
  padding: var(--vx-space-3) var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface-sunken);
}

body.vx-app-shell .vx-report-section-merge {
  border-color: var(--vx-amber-600);
  background: var(--vx-amber-050);
}

body.vx-app-shell .vx-report-section-merge-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-report-section-merge-column {
  min-width: 0;
}

body.vx-app-shell .vx-report-section-save {
  display: grid;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-report-section-editor-label {
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell .vx-report-section-save textarea {
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  font-size: var(--vx-text-sm);
  line-height: 1.5;
}

body.vx-app-shell .vx-report-section-count {
  margin: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-variant-numeric: tabular-nums;
}

body.vx-app-shell .vx-report-section-count--over {
  color: var(--vx-red-700);
  font-weight: 650;
}

body.vx-app-shell .vx-report-section-unsaved {
  margin: 0;
  padding: var(--vx-space-2) var(--vx-space-3);
  border-left: 3px solid var(--vx-amber-600);
  background: var(--vx-amber-050);
  color: var(--vx-text);
}

/* The over-limit note, and unsaved text a section can no longer take, kept
   apart from the stored text with its own heading and a discard. */
body.vx-app-shell .vx-report-section-over {
  margin: 0;
  color: var(--vx-red-700);
  font-weight: 650;
}

body.vx-app-shell .vx-report-section-kept {
  display: grid;
  gap: var(--vx-space-2);
  padding: var(--vx-space-3);
  border-left: 3px solid var(--vx-amber-600);
  background: var(--vx-amber-050);
}

body.vx-app-shell .vx-report-section-kept h4 {
  margin: 0;
}

body.vx-app-shell .vx-report-section-kept textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  font-size: var(--vx-text-sm);
  line-height: 1.5;
}

body.vx-app-shell .vx-report-section-discard {
  display: grid;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-report-section-discard .report-note {
  margin: 0;
}

body.vx-app-shell .vx-report-section-decisions {
  display: grid;
  gap: var(--vx-space-3);
}

body.vx-app-shell :is(.vx-report-section-unlock, .vx-report-signer-designate, .vx-report-signer-profile-form, .vx-native-report-override) {
  display: grid;
  gap: var(--vx-space-2);
  max-width: 40rem;
}

body.vx-app-shell :is(.vx-report-section-unlock, .vx-report-signer-designate, .vx-report-signer-profile-form, .vx-native-report-override) label {
  display: grid;
  gap: var(--vx-space-1);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell :is(.vx-report-section-unlock, .vx-report-signer-designate, .vx-report-signer-profile-form, .vx-native-report-override) > button {
  justify-self: start;
}

body.vx-app-shell .vx-report-section-history-table {
  width: 100%;
}

body.vx-app-shell .vx-report-section-history-compared {
  background: var(--vx-surface);
  box-shadow: inset 3px 0 0 var(--vx-blue-600);
}

/* The report's signer, inside the report of record. */
body.vx-app-shell .vx-report-signer {
  display: grid;
  gap: var(--vx-space-3);
  margin: var(--vx-space-4) 0;
  padding: var(--vx-space-4);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-report-signer-current {
  margin: 0;
  color: var(--vx-text);
}

body.vx-app-shell .vx-report-signer-profile > summary {
  color: var(--vx-text);
  font-weight: 650;
  cursor: pointer;
}

body.vx-app-shell .vx-native-report-finding :is(.vx-native-report-override, .vx-native-report-override-state, .vx-native-report-finding-go) {
  grid-column: 2;
}

/* The command centre's exceptions name a section by its title, which can be
   long: the list is one column no wider than its card, and a place wraps. */
body.vx-app-shell .vx-report-command .vx-exceptions {
  grid-template-columns: minmax(0, 1fr);
}

body.vx-app-shell .vx-exceptions .vx-exception-place {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A finding's way to its section wraps: a section title is long. */
body.vx-app-shell .vx-native-report-finding .vx-native-report-finding-go {
  justify-self: start;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

body.vx-app-shell .vx-native-report-override-state .report-note {
  margin: 0;
}

body.vx-app-shell :is(.vx-report-sections, .vx-report-signer) :is(button, summary, textarea, input, select):focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  body.vx-app-shell .vx-report-sections-layout {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    align-items: start;
  }

  body.vx-app-shell .vx-report-sections-nav {
    position: sticky;
    top: calc(var(--vx-topbar-height, 0px) + var(--vx-space-3));
  }
}

/* Wider than a phone the navigator is a list, not a disclosure: its summary
   is not shown (app.js keeps it open). */
@media (min-width: 721px) {
  body.vx-app-shell .vx-report-sections-nav > summary {
    display: none;
  }
}

@media (pointer: coarse) {
  body.vx-app-shell .vx-report-sections-nav > summary,
  body.vx-app-shell .vx-report-signer-profile > summary {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-report-sections-nav, .vx-report-section-text, .vx-report-section-merge, .vx-report-section-vista, .vx-report-section-history, .vx-report-signer, .vx-report-section-guidance, .vx-report-section-unsaved, .vx-report-section-kept) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell .vx-report-section-nav-item[aria-current="true"] {
    border: 2px solid Highlight;
    box-shadow: none;
  }

  body.vx-app-shell .vx-report-section-diff-text :is(ins, del) {
    background: Canvas;
    color: CanvasText;
  }
}

/* ---- Stage 6: report ----------------------------------------------------- */
/* Report readiness heads the Report section in every view: the readiness and
   quality control on the left, the next step and the exceptions on the
   right from 1100px, one column below. With the report of record advertised
   it counts that record's four steps (D20), otherwise the Word route's six
   gates; each segment and step carries its own state, never a fill. */
body.vx-app-shell .vx-report-command {
  display: grid;
  gap: var(--vx-space-4);
  min-width: 0;
}

body.vx-app-shell .vx-report-command-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vx-space-3) var(--vx-space-5);
}

body.vx-app-shell .vx-report-command-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.vx-app-shell .vx-report-command-meta,
body.vx-app-shell .vx-report-command-note {
  margin: 0;
  color: var(--vx-text-muted);
  font-size: var(--vx-text-sm);
  line-height: 1.45;
}

/* The reload closes the card, under a rule: the answer comes first at every
   width, and the note stands beside the button on one line where it fits. */
body.vx-app-shell .vx-report-command-reload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2) var(--vx-space-3);
  padding-top: var(--vx-space-3);
  border-top: 1px solid var(--vx-border);
}

body.vx-app-shell .vx-report-command-reload > .mini-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.vx-app-shell .vx-report-command-reload > .mini-button .vx-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

body.vx-app-shell .vx-report-command-reload > .vx-report-command-note {
  flex: 1 1 18rem;
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-report-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vx-space-5);
}

body.vx-app-shell :is(.vx-report-command-status, .vx-report-command-work) {
  display: grid;
  align-content: start;
  gap: var(--vx-space-3);
  min-width: 0;
}

body.vx-app-shell .vx-report-command-status > .vx-eyebrow {
  margin: 0;
}

/* Stacked, the next step and the exceptions start under a rule. */
body.vx-app-shell .vx-report-command-work {
  padding-top: var(--vx-space-4);
  border-top: 1px solid var(--vx-border);
}

@media (min-width: 1100px) {
  body.vx-app-shell .vx-report-command-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--vx-space-6);
  }

  body.vx-app-shell .vx-report-command-work {
    padding-top: 0;
    padding-left: var(--vx-space-6);
    border-top: 0;
    border-left: 1px solid var(--vx-border);
  }
}

/* The count is the card's largest figure (28px: the reconciled value stays
   the shell's largest type); the chip beside it says what the count means
   for publication. */
body.vx-app-shell .vx-readiness-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2) var(--vx-space-3);
}

body.vx-app-shell .vx-readiness-count {
  color: var(--vx-text);
  font-size: var(--vx-text-3xl);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

body.vx-app-shell .vx-readiness-count > strong {
  font-weight: inherit;
}

body.vx-app-shell .vx-readiness-count--none {
  font-size: var(--vx-text-2xl);
}

body.vx-app-shell .vx-gates.vx-gates--large {
  height: 12px;
  gap: 6px;
}

/* The four steps under the report of record's four segments, one to a
   segment; a list of four short rows on a phone, where the segments stay one
   row. Each step's title and state are two rows shared by all four steps
   (subgrid), so a title that wraps lowers every state alike and the four
   states share one line; without subgrid each step keeps its own rows,
   packed to the top. */
body.vx-app-shell .vx-readiness-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px var(--vx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* With section authoring the report of record takes five steps (slice 2
   step 7): five columns, still one to a row on a phone (below). */
body.vx-app-shell .vx-readiness-steps--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.vx-app-shell .vx-readiness-step {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--vx-space-2);
  align-content: start;
  align-items: start;
  min-width: 0;
}

body.vx-app-shell .vx-readiness-marker {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--vx-border-strong);
  border-radius: 50%;
  background: var(--vx-surface);
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
  font-weight: 700;
  line-height: 1;
}

body.vx-app-shell .vx-readiness-marker .vx-icon {
  width: 14px;
  height: 14px;
}

body.vx-app-shell .vx-readiness-step--done .vx-readiness-marker {
  border-color: var(--vx-teal-600);
  background: var(--vx-teal-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .vx-readiness-step--current .vx-readiness-marker {
  border: 2px solid var(--vx-blue-600);
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
}

body.vx-app-shell .vx-readiness-step--unavailable .vx-readiness-marker {
  border-style: dashed;
}

body.vx-app-shell .vx-readiness-title {
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-readiness-state {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-readiness-step--done .vx-readiness-state {
  color: var(--vx-teal-700);
}

body.vx-app-shell .vx-readiness-step--current .vx-readiness-state {
  color: var(--vx-blue-700);
  font-weight: 600;
}

body.vx-app-shell .vx-report-command-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
}

body.vx-app-shell .vx-report-command-facts {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
}

body.vx-app-shell .vx-report-command-subtitle {
  margin: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-md);
  font-weight: 650;
}

body.vx-app-shell :is(.vx-report-command-next, .vx-report-command-exceptions) {
  display: grid;
  justify-items: start;
  gap: var(--vx-space-2);
  min-width: 0;
}

body.vx-app-shell .vx-report-command-exceptions {
  padding-top: var(--vx-space-3);
  border-top: 1px solid var(--vx-border);
}

body.vx-app-shell .vx-report-command-next-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2);
  margin: 0;
  color: var(--vx-text);
}

body.vx-app-shell .vx-report-command-todo {
  margin: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  line-height: 1.5;
}

/* One row per exception: what it says, then its place chip on the right
   and the way there. */
body.vx-app-shell .vx-exceptions {
  justify-self: stretch;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.vx-app-shell .vx-exception {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1) var(--vx-space-3);
  padding: var(--vx-space-2) 0;
  border-top: 1px solid var(--vx-border);
}

body.vx-app-shell .vx-exception:first-child {
  padding-top: 0;
  border-top: 0;
}

body.vx-app-shell .vx-exception-text {
  flex: 1 1 14rem;
  min-width: 0;
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-exception-code {
  color: var(--vx-text-muted);
  font-size: var(--vx-text-xs);
}

body.vx-app-shell .vx-exception-place {
  margin-left: auto;
}

/* A toned status in a panel heading: the tone wins over the neutral count
   pill the heading gives every count. */
body.vx-app-shell .connected-valuation-heading > .dashboard-result-count:is(.vx-chip--success) {
  background: var(--vx-teal-050);
  color: var(--vx-teal-700);
}

body.vx-app-shell .connected-valuation-heading > .dashboard-result-count:is(.vx-chip--danger) {
  background: var(--vx-red-050);
  color: var(--vx-red-700);
}

body.vx-app-shell .connected-valuation-heading > .dashboard-result-count:is(.vx-chip--warning) {
  background: var(--vx-amber-050);
  color: var(--vx-amber-700);
}

body.vx-app-shell .connected-valuation-heading > .dashboard-result-count:is(.vx-chip--info) {
  background: var(--vx-blue-050);
  color: var(--vx-blue-700);
}

body.vx-app-shell .connected-valuation-heading > .dashboard-result-count:is(.vx-chip--review) {
  background: var(--vx-violet-050);
  color: var(--vx-violet-700);
}

/* A quality-control finding's way to where it is fixed, under its message. */
body.vx-app-shell .vx-qc-place {
  margin: var(--vx-space-1) 0 0;
}

/* The package's server blocking codes, folded under a summary that names
   their count: the Word route fold's treatment (a bordered row, the text in
   its own colour and a gray chevron), not a link's. */
body.vx-app-shell .vx-details {
  margin: var(--vx-space-3) 0 0;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-input);
  background: var(--vx-surface);
}

body.vx-app-shell .vx-details > summary {
  display: flex;
  align-items: center;
  gap: var(--vx-space-3);
  min-height: 44px;
  padding: var(--vx-space-2) var(--vx-space-4);
  border-radius: var(--vx-radius-input);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

body.vx-app-shell .vx-details > :not(summary) {
  margin: 0 var(--vx-space-4) var(--vx-space-3);
}

body.vx-app-shell .vx-details > summary::-webkit-details-marker {
  display: none;
}

/* A chevron drawn with borders (no external resource), turned when open. */
body.vx-app-shell .vx-details > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--vx-border-strong);
  border-bottom: 2px solid var(--vx-border-strong);
  transform: rotate(-45deg);
}

body.vx-app-shell .vx-details[open] > summary::before {
  transform: rotate(45deg);
}

body.vx-app-shell .vx-details > summary:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

/* The report trust chain as a vertical stepper: a neutral rail, and each
   step's mark in its own status's colour (teal done, blue current, gray
   waiting). No colour runs along the rail "up to here": the chain is not
   monotonic, so each step says only its own state. */
body.vx-app-shell .report-chain {
  gap: var(--vx-space-2);
  margin: var(--vx-space-3) 0;
}

body.vx-app-shell .report-chain-step {
  position: relative;
  margin-left: 28px;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-input);
  background: var(--vx-surface);
  padding: var(--vx-space-3) var(--vx-space-4);
}

body.vx-app-shell .report-chain-step::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--vx-space-2) - 1px);
  bottom: calc(-1 * var(--vx-space-2) - 1px);
  left: -19px;
  width: 2px;
  background: var(--vx-track);
}

body.vx-app-shell .report-chain-step:first-child::before {
  top: 18px;
}

body.vx-app-shell .report-chain-step:last-child::before {
  bottom: calc(100% - 18px);
}

body.vx-app-shell .report-chain-step::after {
  content: "";
  position: absolute;
  top: 11px;
  left: -26px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--vx-border-strong);
  border-radius: 50%;
  background: var(--vx-surface);
}

body.vx-app-shell .report-chain-step.report-chain-done::after {
  border-color: var(--vx-teal-600);
  background: var(--vx-teal-600);
}

body.vx-app-shell .report-chain-step.report-chain-current::after {
  border-color: var(--vx-blue-600);
  background: var(--vx-blue-050);
}

body.vx-app-shell .report-chain-step.report-chain-unavailable::after {
  border-style: dashed;
}

body.vx-app-shell .report-chain-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-gray-050);
  color: var(--vx-gray-600);
  padding: 2px 8px;
}

body.vx-app-shell .report-chain-done .report-chain-mark {
  background: var(--vx-teal-050);
  color: var(--vx-teal-700);
}

body.vx-app-shell .report-chain-current .report-chain-mark {
  background: var(--vx-blue-600);
  color: var(--vx-text-on-accent);
}

body.vx-app-shell .report-chain-waiting .report-chain-mark {
  background: var(--vx-gray-050);
  color: var(--vx-gray-600);
}

body.vx-app-shell .report-chain-mark .vx-chain-check {
  width: 12px;
  height: 12px;
}

@media (max-width: 720px) {
  /* One step to a row (marker, title, state), so no step stands under a
     segment that is not its own. */
  body.vx-app-shell .vx-readiness-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--vx-space-2);
  }

  body.vx-app-shell .vx-readiness-steps.vx-readiness-steps--five {
    grid-template-columns: minmax(0, 1fr);
  }

  body.vx-app-shell .vx-readiness-step {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  body.vx-app-shell .vx-readiness-marker {
    grid-row: auto;
  }

  body.vx-app-shell .vx-readiness-state {
    text-align: right;
  }

  body.vx-app-shell .vx-exception-place {
    margin-left: 0;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-readiness-marker, .report-chain-step, .report-chain-mark) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell .report-chain-step::after {
    border-color: CanvasText;
  }

  body.vx-app-shell .report-chain-step::before {
    background: CanvasText;
  }

  body.vx-app-shell .vx-details > summary::before {
    border-color: CanvasText;
  }
}

/* ---- Stage 7: consistency, accessibility --------------------------------- */
/* The legacy :focus rings on form fields and dashboard controls are a faint
   2px tint; in the shell every such control shows the shell's 3px ring when
   it has keyboard focus. */
body.vx-app-shell :is(.field, .dashboard-control) :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

/* Receivables: each client's group is a disclosure; its summary shows that
   it opens (a chevron that turns) and a visible ring under the keyboard. */
body.vx-app-shell .connected-receivables-client > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2);
  padding: var(--vx-space-2) 0;
  cursor: pointer;
  list-style: none;
}

body.vx-app-shell .connected-receivables-client > summary::-webkit-details-marker {
  display: none;
}

body.vx-app-shell .connected-receivables-client > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 var(--vx-space-1);
  border-right: 2px solid var(--vx-text-muted);
  border-bottom: 2px solid var(--vx-text-muted);
  transform: rotate(-45deg);
}

body.vx-app-shell .connected-receivables-client[open] > summary::before {
  transform: rotate(45deg);
}

body.vx-app-shell .connected-receivables-client > summary:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
  border-radius: var(--vx-radius-input);
}

/* A cost analysis's review state is a chip after its basis. */
body.vx-app-shell .vx-metric--text .vx-chip {
  margin-left: var(--vx-space-1);
  vertical-align: baseline;
}

@media (prefers-reduced-motion: reduce) {
  body.vx-app-shell .connected-receivables-client > summary::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell .connected-receivables-client > summary::before {
    border-color: CanvasText;
  }

  body.vx-app-shell :is(.vx-queue-select, .vx-step, .vx-subview-button, .vx-context-tab, .vx-approach):focus-visible {
    outline: 3px solid Highlight;
  }
}

/* Every disclosure in the shell (the receivables groups, the report
   content's sources, and any later one) is one target: 44px under a coarse
   pointer and the shell's 3px ring under the keyboard. The shell's coarse
   rule exempts checkboxes and radios, so a bare one (the reconciliation's
   indication radios, which sit in a cell with no label) is 24px (WCAG 2.5.8),
   as the comparable's Include box is, and a label that is a box's hit area
   (the map's layer checks) is 44px tall. */
body.vx-app-shell details > summary:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
  border-radius: var(--vx-radius-input);
}

@media (pointer: coarse) {
  /* min-height and padding, not flex, so a summary keeps its own marker */
  body.vx-app-shell details > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
  }

  body.vx-app-shell .connected-valuation-reconciliation input[type="radio"] {
    width: 24px;
    height: 24px;
    margin: 0;
  }

  body.vx-app-shell .connected-map-workspace .mapbox-check {
    min-height: 44px;
    margin: 0;
  }
}

/* The matrix's phone row: facts stand in one column at 720px and below
   (auto-fit would put two or three side by side from about 560px). */
@media (max-width: 720px) {
  body.vx-app-shell .vx-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Forced colours (Windows High Contrast), from the Stage 7 forced-colours
   shots: a transparent underline is drawn in the text colour there, so every
   tab looked current; only the current tab keeps a Highlight underline. The
   readiness segments keep their states in system colours (done filled,
   current ringed in Highlight, waiting empty, unavailable hatched); the count
   beside them still says the same in words. */
@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-worktab, .workspace-tab) {
    border-bottom-color: Canvas;
  }

  body.vx-app-shell :is(.vx-worktab[aria-current="page"], .workspace-tab-active) {
    border-bottom-color: Highlight;
  }

  body.vx-app-shell .vx-gate {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  body.vx-app-shell .vx-gate--done {
    background: CanvasText;
  }

  body.vx-app-shell .vx-gate--current {
    border-color: Highlight;
    box-shadow: inset 0 0 0 2px Highlight;
  }

  body.vx-app-shell .vx-gate--unavailable {
    background: repeating-linear-gradient(45deg, Canvas 0 3px, CanvasText 3px 4px);
  }
}

/* Slice 3a (design S3.7): the appraiser profile inside the signer block, the
   firm statement library page, and the issue of a render. */
body.vx-app-shell :is(.vx-appraiser-profile-form, .vx-firm-statement-form, .vx-firm-statement-approve, .vx-firm-statement-retire) {
  display: grid;
  gap: var(--vx-space-2);
  max-width: 44rem;
}

body.vx-app-shell :is(.vx-appraiser-profile-form, .vx-firm-statement-form, .vx-firm-statement-retire) label,
body.vx-app-shell :is(.vx-appraiser-licence, .vx-firm-statement-elements) label {
  display: grid;
  gap: var(--vx-space-1);
  color: var(--vx-text);
  font-size: var(--vx-text-sm);
  font-weight: 600;
}

body.vx-app-shell :is(.vx-appraiser-profile-form, .vx-firm-statement-form, .vx-firm-statement-approve, .vx-firm-statement-retire) > button {
  justify-self: start;
}

body.vx-app-shell :is(.vx-appraiser-licence, .vx-firm-statement-elements, .vx-native-report-issue) {
  display: grid;
  gap: var(--vx-space-2);
  margin: 0;
  padding: var(--vx-space-3);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius-card);
  min-width: 0;
}

body.vx-app-shell .vx-appraiser-licence legend,
body.vx-app-shell .vx-firm-statement-elements legend,
body.vx-app-shell .vx-native-report-issue legend {
  padding: 0 var(--vx-space-1);
  color: var(--vx-text);
  font-weight: 650;
}

@media (min-width: 721px) {
  body.vx-app-shell .vx-appraiser-licence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.vx-app-shell .vx-appraiser-licence > :is(legend, button) {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

body.vx-app-shell .vx-appraiser-profile > summary,
body.vx-app-shell .vx-firm-statement-new > summary,
body.vx-app-shell .vx-firm-statement-blocks > summary {
  color: var(--vx-text);
  font-weight: 650;
  cursor: pointer;
}

body.vx-app-shell .vx-appraiser-profile-lines {
  margin: 0;
  padding-left: var(--vx-space-5);
}

body.vx-app-shell .vx-firm-statements {
  display: grid;
  gap: var(--vx-space-3);
}

body.vx-app-shell .vx-firm-statement-slots {
  width: 100%;
}

body.vx-app-shell .vx-firm-statement-slots tr[aria-current="true"] {
  background: var(--vx-surface);
  box-shadow: inset 3px 0 0 var(--vx-blue-600);
}

body.vx-app-shell .vx-firm-statement-detail {
  display: grid;
  gap: var(--vx-space-3);
  min-width: 0;
}

body.vx-app-shell .vx-firm-statement-detail .vx-report-section-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-firm-statement-blocks ul {
  display: grid;
  gap: var(--vx-space-1);
  margin: var(--vx-space-2) 0 0;
  padding-left: var(--vx-space-4);
  overflow-wrap: anywhere;
}

body.vx-app-shell .vx-firm-statement-form textarea {
  width: 100%;
  min-height: 14rem;
}

body.vx-app-shell :is(.vx-appraiser-profile, .vx-firm-statements) :is(button, summary, textarea, input, select):focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  body.vx-app-shell :is(.vx-appraiser-profile, .vx-firm-statement-new, .vx-firm-statement-blocks) > summary {
    min-height: 44px;
  }
}

@media (forced-colors: active) {
  body.vx-app-shell :is(.vx-appraiser-licence, .vx-firm-statement-elements, .vx-native-report-issue, .vx-native-report-pilot-badge, .vx-native-report-issue-badge) {
    border: 1px solid CanvasText;
  }

  body.vx-app-shell .vx-firm-statement-slots tr[aria-current="true"] {
    outline: 2px solid Highlight;
    box-shadow: none;
  }
}

body.vx-app-shell .vx-firm-statement-slots :is(th, td),
body.vx-app-shell .vx-firm-statement-history :is(th, td) {
  text-align: left;
  vertical-align: top;
}

/* The library's grids never grow past their card at phone width. */
body.vx-app-shell :is(.vx-firm-statements, .vx-firm-statement-detail, .vx-firm-statement-latest, .vx-firm-statement-history) {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

body.vx-app-shell .vx-firm-statements .table-shell {
  max-width: 100%;
  overflow-x: auto;
}

/* Organization letterhead: bounded inputs and readable hashes on phones. */
body.vx-app-shell .vx-letterhead-card { grid-column: 1 / -1; }
body.vx-app-shell .vx-letterhead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vx-space-4);
  margin-top: var(--vx-space-4);
}
body.vx-app-shell .vx-letterhead-form label {
  display: grid;
  align-content: start;
  gap: var(--vx-space-2);
  min-width: 0;
}
body.vx-app-shell .vx-letterhead-form :is(input, textarea) {
  max-width: 100%;
  min-width: 0;
}
body.vx-app-shell .vx-letterhead-form :is(p, .save-button) {
  grid-column: 1 / -1;
}
body.vx-app-shell .vx-letterhead-sha,
body.vx-app-shell .vx-native-report-published code {
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  body.vx-app-shell .vx-letterhead-form { grid-template-columns: minmax(0, 1fr); }
}

/* Lane X1: the AI drafting models card takes the settings grid's whole width,
   and its per-section table never grows past the card. The table is laid out
   from its header widths, so a long model label cannot widen it: each select
   shrinks to its cell (the full label stays in the open list), and the source
   note wraps beneath it. DOM order, labels and focus order are unchanged. */
body.vx-app-shell .vx-narrative-models-card { grid-column: 1 / -1; min-width: 0; }
body.vx-app-shell .vx-narrative-models {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: var(--vx-space-4);
}
body.vx-app-shell .vx-narrative-models :is(th, td) {
  min-width: 0;
  padding: var(--vx-space-2);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
body.vx-app-shell .vx-narrative-models thead th:first-child { width: 28%; }
body.vx-app-shell .vx-narrative-models thead th:last-child { width: 5rem; }
body.vx-app-shell .vx-narrative-models select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: var(--vx-space-1);
}
/* Phones: each section is a small card, its label on the first line and its
   select beside Save under it. Only the display changes: the column headers
   (visually hidden, still in the tree) and every th and td stay. */
@media (max-width: 720px) {
  body.vx-app-shell .vx-narrative-models,
  body.vx-app-shell .vx-narrative-models > tbody { display: block; }
  body.vx-app-shell .vx-narrative-models > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  body.vx-app-shell .vx-narrative-models > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--vx-space-1) var(--vx-space-2);
    padding: var(--vx-space-2) 0;
    border-top: 1px solid var(--vx-border);
  }
  body.vx-app-shell .vx-narrative-models > tbody > tr > :is(th, td) { display: block; padding: 0; }
  body.vx-app-shell .vx-narrative-models > tbody > tr > th { grid-column: 1 / -1; }
}

/* Lane B6a: the inspection evidence beside the cost approach stands apart
   from the analyses table above it, and the "Cite these findings" control
   with its help and its status takes the form's whole width, so its words
   are not squeezed into one input column. */
body.vx-app-shell .connected-cost-approach .connected-cost-inspection-evidence {
  margin-top: var(--vx-space-6);
}
body.vx-app-shell .connected-cost-approach .connected-cost-approach-form > .connected-cost-inspection-cite {
  grid-column: 1 / -1;
}
/* A saved citation that no longer says what is confirmed now: a notice, in the
   reconciliation range warning's form (amber edge; an edge in forced colours). */
body.vx-app-shell .connected-cost-approach .connected-cost-citation-drift {
  border-left: 4px solid var(--vx-amber-600);
  border-radius: var(--vx-radius-input);
  background: var(--vx-amber-050);
  color: var(--vx-text);
  padding: var(--vx-space-2) var(--vx-space-3);
}
@media (forced-colors: active) {
  body.vx-app-shell .connected-cost-approach .connected-cost-citation-drift {
    border: 1px solid CanvasText;
    border-left-width: 4px;
  }
}

/* The hidden attribute always hides. The browser's own [hidden] rule is
   display: none, and any rule here that gives a class a display outranks
   it, so an element the shell renders hidden was drawn anyway: the Start
   work and completion dialogs showed "Vista could not confirm ..." with no
   error and the assignment form an empty red bar, each a role="alert"
   exposed to assistive technology. This holds for every element whatever
   its class's display; no rule may set a display other than none with
   !important, which is what keeps it unbeatable. The per-selector [hidden]
   rules above stay. */
[hidden] {
  display: none !important;
}