/* A panel's contents determine its row height, including at desktop density. */
html .reference-a .ra-prisma-scanrow {
  height: auto;
  min-height: 245px;
}
html .reference-a .ra-prisma-main { grid-template-rows: auto auto; }
html .reference-a .ra-prisma-scanner .sx-panel-body { height: auto; }
html .reference-a .ra-prisma-bottom { height: auto; min-height: 237px; }
html .reference-a .ra-nexo-center { height: auto; min-height: 402px; }
html .reference-a .ra-nexo-bottom { height: auto; min-height: 189px; }
html .reference-a .ra-nexo-right {
  grid-template-rows: minmax(min-content,1.35fr) minmax(min-content,.85fr);
}
@container reference-a (max-width:900px) {
  html .reference-a :is(.ra-prisma-scanrow,.ra-prisma-bottom,.ra-nexo-center,.ra-nexo-bottom) { min-height: 0; }
  html .reference-a .ra-nexo-right { grid-template-rows: auto; }
}

/* Native controls use the same surface/text pairs as their containing module.
   Legacy white cards must not inherit the light ink of a dark workspace. */
html[data-reference="true"] .ref-module {
  --ink: var(--ri-text);
  --muted: var(--ri-muted);
  --line: var(--ri-line);
  --card: var(--ri-panel);
  --teal: var(--ri-accent);
  --teal-2: var(--ri-accent);
}
html[data-reference="true"] .reference-app .modal {
  --ri-text: var(--theme-text);
  --ri-muted: var(--theme-muted);
  --ri-line: var(--theme-border);
  --ri-panel: var(--theme-surface);
  --ri-soft: var(--theme-surface-raised);
  --ri-accent: var(--theme-accent);
  --ink: var(--ri-text);
  --muted: var(--ri-muted);
  --line: var(--ri-line);
}
html[data-reference="true"] :is(.ref-module,.modal) :is(
  .check-row,.check-card,.preview-stat,.appearance-color-field,.appearance-preset,
  .bank-balance-card,.office-bank-row,.return-item-row,
  .receivable-invoice-summary>div,.receivable-customer-result,.receivable-customer-empty,
  .receiving-manual-option,.receiving-manual-confirm-item,.courier-card,.courier-profile,
  .receivable-payment-balance,.receivable-customer-picker,.receivable-customer-selected,
  .courier-architecture-flow>span
) {
  background: var(--ri-panel);
  color: var(--ri-text);
  border-color: var(--ri-line);
}
html[data-reference="true"] :is(.ref-module,.modal) :is(
  .report-preview pre,.office-allocation-preview,.return-credit-preview,
  .receiving-manual-confirm-check,.receivable-invoice-summary,.input-readonly
) {
  background: var(--ri-soft);
  color: var(--ri-text);
  border-color: var(--ri-line);
}
html[data-reference="true"] :is(.ref-module,.modal) .check-row strong { color: var(--ri-text); }
html[data-reference="true"] :is(.ref-module,.modal) .check-row small { color: var(--ri-muted); }
html[data-reference="true"] .ref-module .report-preview pre { font-size: 14px; line-height: 1.7; }
html[data-reference="true"] .ref-module.ri-prisma { --ri-muted: #526580; --ri-accent: #075ed1; }
html[data-reference="true"] .ref-theme-tema-2 .ref-nav-item.is-current { background: #2260d4; }
html[data-reference="true"] :is(.ref-module,.modal) .check-row {
  align-items: flex-start;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
}
html[data-reference="true"] :is(.ref-module,.modal) .check-row input {
  flex: 0 0 18px;
  accent-color: var(--ri-accent);
  margin-top: 2px;
}
html[data-reference="true"] :is(.ref-module,.modal) .check-row>span { min-width: 0; overflow-wrap: anywhere; }
html[data-reference="true"][data-theme-mode="dark"] .ref-module { --ri-contrast: #08161f; }
html[data-reference="true"] .ref-control-dark .ref-original-actions>.button.primary { --ri-contrast: #fff; }
html[data-design="modern"][data-reference="true"][data-theme-mode="dark"] .reference-app .ref-module .button.primary {
  color: var(--ri-contrast) !important;
}

/* Dashboard artwork and accent controls need their own readable ink pairs. */
html .ra-van-art p { color: #526b94; }
html[data-reference="true"] .reference-app .delivery-preview-link.button {
  background: var(--ref-soft);
  color: var(--ref-text);
  border-color: var(--ref-line);
}
html[data-reference="true"] .ref-theme-tema-6 .rx-b-person .sx-avatar { color: #fff; }
html[data-reference="true"] .ref-theme-tema-8 .rx-b-flujo-actions .sx-quick.sx-tone-blue,
html[data-reference="true"] .ref-theme-tema-10 .rx-b-orbita-assistant .experience-question-form .experience-button {
  background: #075ed1;
  color: #fff;
}
html .ref-theme-aurora-network .nx-mini-board>section[data-stage="in_transit"] { --nx-lane: #b39bff; }
html .ref-theme-cristal-cobalt .nn-sidebar .ref-nav-item.is-current {
  background: linear-gradient(120deg,#514bb8,#355bc1);
}
html[data-reference="true"] .ref-theme-cristal-cobalt .next-experience .nx-map-surface .delivery-map-coordinate {
  background: #132544ed;
  color: #f1f5ff;
}
html .ref-theme-pulso-control .nx-client-avatar { color: #06291f; }
html[data-reference="true"] .ref-theme-tema-2 { --ref-muted: #405475; }
html[data-reference="true"] .ref-module.ri-prisma { --ri-muted: #405475; }
html[data-reference="true"] .ref-theme-tema-5 .sx-tone-blue { --sx-tone: #69adff; }

/* Shared account, bank and settings cards follow the same surface pairing. */
html[data-reference="true"] :is(.ref-module,.modal) :is(
  .badge,.branch-count,.bank-balance-total,.branding-preview,
  .appearance-settings,.version-card
) {
  background: var(--ri-soft);
  color: var(--ri-text);
  border-color: var(--ri-line);
}
html[data-reference="true"] :is(.ref-module,.modal) .branding-preview-logo span { color: #fff; }
html[data-reference="true"] :is(.ref-module,.modal) .branding-preview strong { color: var(--ri-text); }
html[data-design="modern"][data-theme][data-reference="true"][data-theme-mode="dark"] .reference-app :is(.ref-module,.modal) .button.danger {
  color: #ffb7c2 !important;
  border-color: #cb7284 !important;
}
html[data-reference="true"][data-theme-mode="dark"] :is(.ref-module,.modal) .receivable-reminder-status { color: #8be2d1 !important; }
html[data-reference="true"][data-theme-mode="dark"] :is(.ref-module,.modal) .bank-balance-card.unidentified b { color: #f5d191; }
html[data-reference="true"][data-theme-mode="dark"] .ref-module :is(
  .tracking-mode-tabs button[aria-pressed="true"],.tracking-shared-heading>span,
  .tracking-state-card.idle>span,.theme-choice-check,.branch-avatar,.version-card>b
) { color: var(--ri-contrast); }
html[data-reference="true"] .ref-module.ri-orbita { --ri-accent: #78b9ff; }
html[data-design="modern"][data-reference="true"][data-theme-mode="dark"] .reference-app .modal .button.primary {
  background: var(--ri-accent) !important;
  color: #08161f !important;
}

/* Keep complete monetary readings together in the office summary cards. */
html[data-reference="true"] .ref-module[data-ref-view="office"] .ref-stat-money {
  container-type: inline-size;
}
html[data-reference="true"] .ref-module[data-ref-view="office"] .ref-stat-money :is(.ref-instrument-reading,.ref-business-reading,.ref-ledger-amount) {
  container-type: inline-size;
}
html[data-reference="true"] .reference-app .ref-module[data-ref-view="office"] .ref-stat-money .ref-stat-value {
  font-size: clamp(14px,calc(var(--ref-money-scale,8)*1cqw),32px) !important;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
}
html .ref-premium[data-ref-view="office"] .ref-stat-money:not(:first-child) .ref-ledger-amount {
  flex: 0 0 48%;
  max-width: 48%;
}
html .ref-premium[data-ref-view="office"] .ref-stat-money .ref-ledger-term { min-width: 0; }
html .ref-executive[data-ref-view="office"] .ref-stat:nth-child(-n+2) .ref-stat-note { color: #fff; }

/* Size containment needs an explicit flex share; otherwise the reading collapses
   to the width of a single word next to the icon. */
html[data-reference="true"] .ref-module .ref-business-reading,
html[data-reference="true"] .ref-module .ref-instrument-reading {
  flex: 1 1 0;
  min-width: 0;
}
html .ref-executive[data-ref-view="office"] .ref-stat-origin {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  align-items: stretch;
}
html .ref-executive[data-ref-view="office"] .ref-stat {
  grid-row: auto;
  min-height: 155px;
  padding: 20px;
  align-items: flex-start;
}
html .ref-executive[data-ref-view="office"] .ref-stat .ref-symbol {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
html .ref-executive[data-ref-view="office"] .ref-stat .ref-stat-label {
  font-size: 14px;
  line-height: 1.45;
}
html .ref-executive[data-ref-view="office"] .ref-stat .ref-stat-value { margin: 12px 0 0; }
html .ref-executive[data-ref-view="office"] .ref-stat .ref-stat-note {
  font-size: 12px;
  line-height: 1.55;
  margin-top: 10px;
}