/* Hallmark · genre: modern-minimal clinical operations · macrostructure: HSOL customer workbench · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · nav: pass · honest/chrome/tokens/responsive/icons/mobile: pass */
@import url("./tokens.css");

/*
 * HSOL customer-workbench fidelity layer.
 * This stylesheet intentionally loads after hsol-theme.css. It preserves the
 * application DOM and workflows while restoring the reference application's
 * customer-page proportions, softer surfaces, header voice, and control shape.
 */

html,
body {
  overflow-x: clip;
  background: var(--hsol-canvas);
}

body,
button,
input,
select,
textarea,
table {
  font-family: var(--hsol-font-family);
}

button,
input,
select,
textarea {
  border-radius: var(--hsol-radius-soft);
}

.primary-button,
.secondary-button,
.ghost-button,
.mini-button,
.icon-button {
  border-radius: var(--hsol-radius-soft);
}

.primary-button {
  border-color: var(--hsol-brand);
  background: var(--hsol-brand);
  color: var(--hsol-header-text);
}

.primary-button:hover {
  border-color: var(--hsol-brand-dark);
  background: var(--hsol-brand-dark);
  color: var(--hsol-header-text);
}

.secondary-button {
  border-width: 1px;
  border-color: var(--hsol-space);
  background: var(--hsol-paper);
  color: var(--hsol-space);
}

.secondary-button:hover {
  background: var(--hsol-space);
  color: var(--hsol-header-text);
}

.module-actions > .primary-button,
.customer-management-toolbar > .primary-button,
.customer-empty-state > .primary-button {
  min-height: var(--hsol-control-pill);
  border-radius: var(--hsol-radius-pill);
  padding-inline: var(--hsol-space-5);
  font-weight: 700;
}

.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea,
.inline-input,
.table-input,
.score-input,
.remarks-block textarea,
.customer-create-form input,
.customer-create-form select,
.customer-create-form textarea {
  border-radius: var(--hsol-radius-soft);
}

/* Header — white production wordmark voice on HSOL teal. */
.app-topbar {
  border-bottom-color: var(--hsol-brand-border);
  background: var(--hsol-header-bg);
  color: var(--hsol-header-text);
}

.app-topbar .topbar-brand,
.app-topbar .topbar-brand strong,
.app-topbar .topbar-nav > button,
.app-topbar .topbar-exam-button,
.app-topbar .topbar-account strong,
.app-topbar .topbar-new-customer,
.app-topbar .topbar-overview-toggle,
.app-topbar .customer-search-toggle {
  color: var(--hsol-header-text);
}

.app-topbar .topbar-current-customer,
.app-topbar .topbar-account span,
.app-topbar .topbar-exam-button span {
  color: var(--hsol-header-muted);
}

.app-topbar .topbar-exam-button strong {
  color: var(--hsol-header-text);
  font-weight: 700;
}

.app-topbar .brand-mark {
  border: 0;
  background: transparent;
  color: var(--hsol-header-text);
}

.app-topbar .brand-icon {
  stroke: currentColor;
}

.app-topbar .topbar-brand {
  border-right: 0;
}

.app-topbar .topbar-nav {
  border: 0;
  background: transparent;
}

.app-topbar .topbar-nav > button,
.app-topbar .topbar-exam-button,
.app-topbar .topbar-overview-toggle,
.app-topbar .topbar-new-customer,
.app-topbar .topbar-account,
.app-topbar .customer-search-toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-topbar .topbar-nav > button:hover,
.app-topbar .topbar-nav > button.is-active,
.app-topbar .topbar-exam-button:hover,
.app-topbar .topbar-overview-toggle:hover,
.app-topbar .topbar-new-customer:hover,
.app-topbar .topbar-account:hover,
.app-topbar .customer-search-toggle:hover {
  background: var(--hsol-header-hover);
  color: var(--hsol-header-text);
}

.app-topbar .topbar-nav > button.is-active {
  box-shadow: inset 0 -3px 0 var(--hsol-header-text);
}

.app-topbar .topbar-new-customer {
  min-width: 92px;
  font-weight: 700;
}

.app-topbar .customer-search {
  border-left-color: var(--hsol-brand-border);
}

.app-topbar .customer-search-toggle {
  width: var(--hsol-header-height);
  min-width: var(--hsol-header-height);
  background: var(--hsol-brand-border);
}

.app-topbar .topbar-exam-dropdown,
.app-topbar .account-menu,
.app-topbar .customer-search-panel {
  border-radius: 0 0 var(--hsol-radius-card) var(--hsol-radius-card);
  box-shadow: var(--hsol-shadow-modal);
}

.app-topbar .customer-search-panel {
  background: var(--hsol-canvas-dark);
}

.app-topbar .customer-search-input {
  height: var(--hsol-control-pill);
  border: 0;
  border-radius: var(--hsol-radius-pill);
  background: var(--hsol-paper);
  padding-inline: var(--hsol-space-4);
}

@media (min-width: 861px) {
  .app-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .app-topbar .topbar-brand {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    padding: 0 var(--hsol-space-5);
  }

  .app-topbar .topbar-nav {
    gap: 0;
    padding: 0;
  }

  .app-topbar .topbar-nav > button,
  .app-topbar .topbar-exam-button {
    min-width: 0;
    padding-inline: var(--hsol-space-3);
    font-size: var(--hsol-font-large);
    font-weight: 700;
  }

  .app-topbar .topbar-session {
    justify-self: end;
  }
}

/* Customer page — the reference 23.4375 / 53.125 / 23.4375 workbench. */
@media (min-width: 1101px) {
  body:not(.is-overview-mode) .app-shell,
  body:not(.is-overview-mode) .app-shell:not(.is-sidebar-collapsed) {
    grid-template-columns: clamp(270px, 23.4375vw, 300px) minmax(0, 1fr);
    max-width: 1400px;
    margin-inline: auto;
    background: var(--hsol-canvas);
  }

  body:not(.is-overview-mode) .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) clamp(280px, 23.4375vw, 300px);
    gap: 0;
    padding: var(--hsol-page-top) 0 0;
  }

  body:not(.is-overview-mode) .insight-surface {
    padding: 0 var(--hsol-column-padding);
  }
}

body:not(.is-overview-mode) .sidebar {
  border: 0;
  background: var(--hsol-canvas);
  padding: var(--hsol-page-top) var(--hsol-column-padding) var(--hsol-space-8);
}

body:not(.is-overview-mode) .sidebar-body {
  padding: 0;
  scrollbar-gutter: auto;
}

body:not(.is-overview-mode) .customer-panel {
  background: var(--hsol-canvas);
}

body:not(.is-overview-mode) .customer-card-header {
  min-height: 64px;
  border: 0;
  background: transparent;
  padding: 0 0 var(--hsol-space-3);
}

body:not(.is-overview-mode) .customer-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--hsol-radius-soft);
  box-shadow: var(--hsol-shadow-card);
}

body:not(.is-overview-mode) .customer-title > span {
  color: var(--hsol-space-light);
  font-size: var(--hsol-font-small);
}

body:not(.is-overview-mode) .patient-name-text {
  font-size: var(--hsol-font-large);
}

body:not(.is-overview-mode) .sidebar-toggle,
body:not(.is-overview-mode) .sidebar-panel-toggle {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-color: transparent;
  border-radius: var(--hsol-radius-pill);
  background: transparent;
}

body:not(.is-overview-mode) .sidebar-toggle:hover,
body:not(.is-overview-mode) .sidebar-panel-toggle:hover {
  background: var(--hsol-space);
}

body:not(.is-overview-mode) .customer-info-list {
  margin: 0;
  border-top: 1px solid var(--hsol-table-line);
  padding: var(--hsol-space-3) 0;
}

body:not(.is-overview-mode) .customer-info-list li {
  padding-block: var(--hsol-space-1);
}

body:not(.is-overview-mode) .customer-label-wrap {
  gap: var(--hsol-space-2);
  padding: 0 0 var(--hsol-space-4);
}

body:not(.is-overview-mode) .customer-label {
  border-radius: var(--hsol-radius-soft);
  padding: 5px var(--hsol-space-2);
  box-shadow: 3px 3px var(--hsol-ink-alpha-10);
}

body:not(.is-overview-mode) .customer-section-title {
  position: relative;
  min-height: 34px;
  border-top: 1px dashed var(--hsol-space-pale);
  background: var(--hsol-canvas);
  padding: var(--hsol-space-2) 0 0;
  line-height: 26px;
  text-transform: none;
}

body:not(.is-overview-mode) .condition-grid {
  gap: var(--hsol-space-3);
  padding: var(--hsol-space-3) 0 0;
}

body:not(.is-overview-mode) .field {
  justify-content: flex-start;
  gap: var(--hsol-space-2);
}

body:not(.is-overview-mode) .segmented-control {
  border-radius: var(--hsol-radius-soft);
}

body:not(.is-overview-mode) .segmented-control label:first-child span {
  border-radius: var(--hsol-radius-soft) 0 0 var(--hsol-radius-soft);
}

body:not(.is-overview-mode) .segmented-control label:last-child span {
  border-radius: 0 var(--hsol-radius-soft) var(--hsol-radius-soft) 0;
}

body:not(.is-overview-mode) .workspace {
  background: var(--hsol-canvas);
}

body:not(.is-overview-mode) .module-surface {
  overflow: visible;
  background: transparent;
}

body:not(.is-overview-mode) .module-header {
  min-height: 58px;
  gap: var(--hsol-space-5);
  padding: 0 0 var(--hsol-space-5);
}

body:not(.is-overview-mode) .module-header h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 38px;
}

body:not(.is-overview-mode) .module-actions {
  min-height: var(--hsol-control-pill);
}

/* Main records use the reference application's white paper and shallow lift. */
body:not(.is-overview-mode) .section-band {
  margin-bottom: var(--hsol-space-5);
  border-color: var(--hsol-table-line);
  border-radius: var(--hsol-radius-soft);
  background: var(--hsol-paper);
  box-shadow: var(--hsol-shadow-card);
}

body:not(.is-overview-mode) .section-title {
  min-height: 42px;
  border-bottom-color: var(--hsol-table-line);
  background: var(--hsol-paper);
  padding: var(--hsol-space-2) var(--hsol-space-4);
}

body:not(.is-overview-mode) .section-content {
  padding: var(--hsol-space-4);
}

body:not(.is-overview-mode) .wrs-table,
body:not(.is-overview-mode) .srs-table {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

body:not(.is-overview-mode) .table-wrap:has(.wrs-table) {
  width: 100%;
}


body:not(.is-overview-mode) .wrs-table .wrs-active-list-col,
body:not(.is-overview-mode) .srs-table .srs-active-list-col {
  width: auto;
}

body:not(.is-overview-mode) .wrs-table .wrs-response-col {
  width: clamp(150px, 22%, 280px);
}

body:not(.is-overview-mode) .srs-table .srs-response-col {
  width: 200px;
}

body:not(.is-overview-mode) .wrs-status-text {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.is-overview-mode) .session-status-text {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.is-overview-mode) .session-status-text::before {
  content: none;
  display: none;
}

body:not(.is-overview-mode) .wrs-table .wrs-judge-col {
  width: 108px;
}

body:not(.is-overview-mode) .srs-table .srs-score-col {
  width: 118px;
}

body:not(.is-overview-mode) .protocol-panel,
body:not(.is-overview-mode) .summary-strip,
body:not(.is-overview-mode) .question-list {
  border-radius: var(--hsol-radius-soft);
}

/* Customer management follows the same card rhythm as HSOL customer records. */
body:not(.is-overview-mode) .customer-management-layout {
  grid-template-columns: minmax(230px, 42%) minmax(0, 1fr);
  gap: var(--hsol-space-5);
}

body:not(.is-overview-mode) .customer-list-panel,
body:not(.is-overview-mode) .customer-detail-panel {
  overflow: hidden;
  border: 0;
  border-radius: var(--hsol-radius-soft);
  background: var(--hsol-paper);
  box-shadow: var(--hsol-shadow-card);
}

body:not(.is-overview-mode) .customer-management-header {
  min-height: 72px;
  border-bottom-color: var(--hsol-table-line);
  padding: var(--hsol-space-4);
}

body:not(.is-overview-mode) .customer-management-header h2 {
  font-size: var(--hsol-font-large);
}

body:not(.is-overview-mode) .customer-management-toolbar {
  gap: var(--hsol-space-2);
}

body:not(.is-overview-mode) .customer-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  gap: var(--hsol-space-3);
  align-items: start;
  padding: var(--hsol-space-4);
}

body:not(.is-overview-mode) .customer-detail-title,
body:not(.is-overview-mode) .customer-detail-title > div {
  min-width: 0;
}

body:not(.is-overview-mode) .customer-detail-actions {
  width: 100%;
  gap: var(--hsol-space-2);
  align-items: center;
  justify-content: flex-start;
}

body:not(.is-overview-mode) .customer-detail-actions .state-badge {
  box-sizing: border-box;
  min-height: 28px;
  max-width: 100%;
  border-radius: var(--hsol-radius-soft);
  padding: 5px 10px;
  line-height: 18px;
  white-space: nowrap;
}

body:not(.is-overview-mode) .customer-detail-actions .customer-save-state.is-saved {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 5px 0;
}

body:not(.is-overview-mode) .customer-detail-actions .customer-save-state.is-saved::before {
  content: none;
  display: none;
}

body:not(.is-overview-mode) .customer-view-tabs {
  flex: 1 1 auto;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--hsol-table-line);
  border-radius: 0;
  background: var(--hsol-paper);
  padding: 0;
}

body:not(.is-overview-mode) .customer-view-tab {
  min-width: 0;
  min-height: var(--hsol-control-pill);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: var(--hsol-space-3);
}

body:not(.is-overview-mode) .customer-view-tab:hover {
  border-bottom-color: var(--hsol-space);
  background: transparent;
}

body:not(.is-overview-mode) .customer-view-tab.is-active,
body:not(.is-overview-mode) .customer-view-tab[aria-selected="true"] {
  border-bottom-color: var(--hsol-brand-accessible);
  background: transparent;
  color: var(--hsol-brand-accessible);
  box-shadow: none;
}

body:not(.is-overview-mode) .customer-list-card:hover,
body:not(.is-overview-mode) .customer-list-card.is-active {
  background: var(--hsol-brand-action-soft);
}

body:not(.is-overview-mode) .customer-empty-state {
  min-height: 280px;
  background: var(--hsol-paper);
  padding: var(--hsol-space-8) var(--hsol-space-5);
}

body:not(.is-overview-mode) .customer-empty-icon {
  width: var(--hsol-control-pill);
  height: var(--hsol-control-pill);
  border: 0;
  border-radius: var(--hsol-radius-pill);
  background: var(--hsol-brand-action-soft);
  color: var(--hsol-brand-accessible);
}

/* Context rail — independent shallow cards instead of one rigid bordered slab. */
body:not(.is-overview-mode) .insight-surface {
  position: sticky;
  top: calc(var(--hsol-header-height) + var(--hsol-page-top));
  display: flex;
  min-height: calc(100vh - var(--hsol-header-height) - (2 * var(--hsol-page-top)));
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.is-overview-mode) .insight-surface > div {
  margin-bottom: var(--hsol-space-3);
  border: 0;
  border-radius: var(--hsol-radius-soft);
  background: var(--hsol-paper);
  box-shadow: var(--hsol-shadow-card);
}

body:not(.is-overview-mode) .insight-surface > div:last-child {
  margin-bottom: 0;
}

body:not(.is-overview-mode) .insight-heading {
  min-height: 64px;
  background: var(--hsol-panel-blue);
  padding: var(--hsol-space-3) var(--hsol-space-4);
}

body:not(.is-overview-mode) .score-block,
body:not(.is-overview-mode) .progress-block,
body:not(.is-overview-mode) .chart-block,
body:not(.is-overview-mode) .remarks-block {
  padding: var(--hsol-space-4);
}

body:not(.is-overview-mode) .remarks-block textarea {
  border-radius: var(--hsol-radius-soft);
  background: var(--hsol-canvas-light);
}

/* Modal and floating surfaces keep HSOL's slightly softer 8–10px treatment. */
.oneflow-modal,
.customer-create-modal,
.customer-action-modal,
.user-admin-modal {
  border-radius: var(--hsol-radius-card);
  box-shadow: var(--hsol-shadow-modal);
}

@media (min-width: 861px) and (max-width: 1100px) {
  body:not(.is-overview-mode) .app-shell,
  body:not(.is-overview-mode) .app-shell:not(.is-sidebar-collapsed) {
    grid-template-columns: 270px minmax(0, 1fr);
    max-width: none;
    margin: 0;
  }

  body:not(.is-overview-mode) .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hsol-space-5);
    padding: var(--hsol-page-top) var(--hsol-column-padding);
  }

  body:not(.is-overview-mode) .insight-surface {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    gap: var(--hsol-space-3);
    padding: 0;
  }

  body:not(.is-overview-mode) .insight-surface > div {
    margin-bottom: 0;
  }
}

@media (max-width: 860px) {
  .app-topbar .topbar-brand,
  .app-topbar .topbar-brand strong,
  .app-topbar .topbar-current-customer,
  .app-topbar .topbar-account span {
    color: var(--hsol-header-text);
  }

  body:not(.is-overview-mode) .app-shell,
  body:not(.is-overview-mode) .app-shell:not(.is-sidebar-collapsed) {
    max-width: none;
    margin: 0;
  }

  body:not(.is-overview-mode) .sidebar {
    padding: var(--hsol-space-4);
  }

  body:not(.is-overview-mode) .dashboard-grid {
    gap: var(--hsol-space-4);
    padding: var(--hsol-space-4) !important;
  }

  body:not(.is-overview-mode) .insight-surface {
    position: static;
    min-height: 0;
    padding: 0;
  }

  body:not(.is-overview-mode) .customer-management-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  body:not(.is-overview-mode) .dashboard-grid {
    gap: var(--hsol-space-3);
    padding: var(--hsol-space-3) !important;
  }

  body:not(.is-overview-mode) .customer-management-header {
    padding: var(--hsol-space-3);
  }

  body:not(.is-overview-mode) .customer-management-toolbar {
    align-items: stretch;
  }

  body:not(.is-overview-mode) .customer-view-tabs,
  body:not(.is-overview-mode) .customer-management-toolbar > .primary-button {
    width: 100%;
  }

  body:not(.is-overview-mode) .section-title {
    padding-inline: var(--hsol-space-3);
  }

  body:not(.is-overview-mode) .section-content {
    padding: var(--hsol-space-3);
  }
}

@media (max-width: 380px) {
  body:not(.is-overview-mode) .dashboard-grid,
  body:not(.is-overview-mode) .sidebar {
    padding-right: var(--hsol-space-2) !important;
    padding-left: var(--hsol-space-2) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* Compact HSOL mobile chrome: utility row plus a scrollbar-free nav row. */
@media (max-width: 860px) {
  body {
    padding-top: 104px;
  }

  .app-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--hsol-header-height) 44px;
    width: 100%;
    height: 104px;
    min-height: 104px;
    overflow: visible;
  }

  .app-topbar .topbar-brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--hsol-header-height);
    padding: 0 var(--hsol-space-3);
  }

  .app-topbar .brand-mark {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .app-topbar .topbar-brand-copy {
    min-width: 0;
  }

  .app-topbar .topbar-brand-copy strong,
  .app-topbar .topbar-current-customer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-topbar .topbar-session {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: auto;
    height: var(--hsol-header-height);
  }

  .app-topbar .topbar-overview-toggle,
  .app-topbar .topbar-new-customer,
  .app-topbar .topbar-account,
  .app-topbar .customer-search-toggle {
    width: 50px;
    min-width: 50px;
    height: var(--hsol-header-height);
    padding: 0;
  }

  .app-topbar .overview-mode-label,
  .app-topbar .topbar-new-customer span:last-child,
  .app-topbar .topbar-account span {
    display: none;
  }

  .app-topbar .topbar-account strong {
    display: block;
    overflow: hidden;
    padding-inline: var(--hsol-space-1);
    font-size: var(--hsol-font-small);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-topbar .topbar-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--hsol-ink-alpha-16);
    background: var(--hsol-header-bg);
    scrollbar-width: none;
  }

  .app-topbar .topbar-nav::-webkit-scrollbar {
    display: none;
  }

  .app-topbar .topbar-nav > button,
  .app-topbar .topbar-exam-button {
    height: 44px;
    min-height: 44px;
    padding-inline: var(--hsol-space-3);
    white-space: nowrap;
  }

  .app-topbar .topbar-exam-dropdown {
    top: 44px;
  }

  .app-topbar .account-menu,
  .app-topbar .customer-search-panel {
    top: var(--hsol-header-height);
  }
}

@media (max-width: 640px) {
  .app-topbar .topbar-overview-toggle {
    display: none;
  }

  .app-topbar .topbar-account {
    width: 60px;
    min-width: 60px;
  }

  .app-topbar .topbar-brand-copy strong {
    font-size: var(--hsol-font-medium);
  }
}

@media (min-width: 861px) {
  body:not(.is-overview-mode) .app-shell.is-sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
    max-width: none;
    margin-inline: 0;
  }
}

/* Final accessibility and narrow-layout contract. */
.module-header h1,
.section-title h2,
.section-title h3,
.customer-empty-state strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

.app-topbar button,
.module-actions button,
.customer-management-toolbar button,
.customer-view-tab {
  white-space: nowrap;
}

/* Large-type scale picker: a compact clinical control that preserves the existing overview layout. */
.overview-mode-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-self: stretch;
  align-items: stretch;
  height: var(--hsol-header-height);
}

.app-topbar .overview-mode-control > .topbar-overview-toggle {
  width: auto;
  min-width: max-content;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  padding: 0 14px;
}

.overview-mode-scale {
  display: inline-flex;
  min-width: 38px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--hsol-radius-pill);
  padding-inline: 7px;
  font-size: var(--hsol-font-small);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 0.9;
}

.overview-mode-chevron {
  display: inline-grid;
  width: 18px;
  height: 22px;
  place-items: center;
  border-left: 1px solid currentColor;
  padding-left: 6px;
  opacity: 0.75;
}

.overview-mode-chevron svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform var(--hsol-duration-short) var(--hsol-ease-out);
}

.topbar-overview-toggle[aria-expanded="true"] .overview-mode-chevron svg {
  transform: rotate(180deg);
}

.app-topbar .topbar-overview-toggle[data-overview-active="true"] {
  background: transparent;
  color: var(--hsol-header-text);
}

.app-topbar .overview-mode-control > .topbar-overview-toggle:hover,
.app-topbar .overview-mode-control > .topbar-overview-toggle[aria-expanded="true"] {
  background: var(--hsol-header-hover);
  color: var(--hsol-header-text);
}

.overview-scale-menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 180;
  width: 330px;
  border: 1px solid var(--hsol-table-border);
  border-top: 3px solid var(--hsol-space-dark);
  border-radius: 0 0 var(--hsol-radius-card) var(--hsol-radius-card);
  background: var(--hsol-paper);
  color: var(--hsol-space-dark);
  padding: var(--hsol-space-4);
  box-shadow: var(--hsol-shadow-modal);
}

.overview-scale-menu[hidden] {
  display: none;
}

.overview-scale-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hsol-space-3);
  margin-bottom: var(--hsol-space-3);
}

.overview-scale-menu-header strong,
.overview-scale-menu-header span {
  display: block;
}

.overview-scale-menu-header strong {
  font-size: var(--hsol-font-xl);
  line-height: 1.3;
}

.overview-scale-menu-header span {
  margin-top: 2px;
  color: var(--hsol-space-medium);
  font-size: var(--hsol-font-small);
}

.overview-scale-close {
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--hsol-radius-small);
  background: transparent;
  color: var(--hsol-space-medium);
  padding: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.overview-scale-close:hover,
.overview-scale-close:focus-visible {
  border-color: var(--hsol-table-border);
  background: var(--hsol-canvas-dark);
  color: var(--hsol-space-dark);
}

.overview-scale-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
}

.overview-scale-options legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.overview-scale-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 94px;
  grid-template-rows: 34px auto auto;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--hsol-table-border);
  border-radius: var(--hsol-radius);
  background: var(--hsol-canvas-light);
  padding: 9px 5px 8px;
  color: var(--hsol-space-medium);
  cursor: pointer;
  transition: border-color var(--hsol-duration-short) ease, background var(--hsol-duration-short) ease;
}

.overview-scale-option:hover {
  border-color: var(--hsol-brand-light);
  background: var(--hsol-canvas-dark);
}

.overview-scale-option:has(input:checked) {
  border-color: var(--hsol-brand);
  background: #e5f7f3;
  color: var(--hsol-brand-accessible);
  box-shadow: inset 0 0 0 1px var(--hsol-brand);
}

.overview-scale-option:focus-within {
  outline: 2px solid var(--hsol-focus-ring);
  outline-offset: 2px;
}

.overview-scale-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.overview-scale-sample {
  align-self: end;
  font-weight: 800;
  line-height: 1;
}

.overview-scale-option:nth-of-type(1) .overview-scale-sample {
  font-size: 16px;
}

.overview-scale-option:nth-of-type(2) .overview-scale-sample {
  font-size: 20px;
}

.overview-scale-option:nth-of-type(3) .overview-scale-sample {
  font-size: 24px;
}

.overview-scale-option strong {
  align-self: end;
  font-size: 13px;
  line-height: 1.25;
}

.overview-scale-option small {
  color: currentColor;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.overview-scale-menu > p {
  margin: var(--hsol-space-3) 0 0;
  color: var(--hsol-space-medium);
  font-size: var(--hsol-font-small);
  line-height: 1.45;
}

@media (max-width: 1280px) {
  .app-topbar .overview-mode-control > .topbar-overview-toggle {
    width: 60px;
    min-width: 60px;
    padding: 0 4px;
  }

  .overview-mode-scale {
    display: none;
  }
}

@media (max-width: 640px) {
  .app-topbar .overview-mode-control {
    display: none;
  }
}

/* The 125% option intentionally preserves the established overview density. */
@media (min-width: 861px) {
  body.is-overview-mode[data-overview-scale="150"] .module-surface {
    font-size: 21px;
  }

  body.is-overview-mode[data-overview-scale="150"] .module-header {
    min-height: auto;
    padding: 6px 10px;
  }

  body.is-overview-mode[data-overview-scale="150"] .module-header h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  body.is-overview-mode[data-overview-scale="150"] .section-title {
    min-height: auto;
    padding-block: 5px;
  }

  body.is-overview-mode[data-overview-scale="150"] .section-title h2,
  body.is-overview-mode[data-overview-scale="150"] .section-title h3 {
    font-size: 23px;
    line-height: 1.2;
  }

  body.is-overview-mode[data-overview-scale="150"] .tab-button,
  body.is-overview-mode[data-overview-scale="150"] .primary-button,
  body.is-overview-mode[data-overview-scale="150"] .secondary-button,
  body.is-overview-mode[data-overview-scale="150"] .ghost-button,
  body.is-overview-mode[data-overview-scale="150"] .mini-button,
  body.is-overview-mode[data-overview-scale="150"] .module-actions > button {
    height: auto;
    min-height: 36px;
    padding: 5px 10px;
    font-size: 19px;
    line-height: 1.2;
  }

  body.is-overview-mode[data-overview-scale="150"] .data-table {
    font-size: 22px;
    line-height: 1.2;
  }

  body.is-overview-mode[data-overview-scale="150"] .data-table thead th,
  body.is-overview-mode[data-overview-scale="150"] .clinical-table .list-header-button {
    font-size: 19px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.is-overview-mode[data-overview-scale="150"] .data-table th,
  body.is-overview-mode[data-overview-scale="150"] .data-table td {
    height: auto;
    padding: 3px 7px;
  }

  body.is-overview-mode[data-overview-scale="150"] .table-input,
  body.is-overview-mode[data-overview-scale="150"] .score-input,
  body.is-overview-mode[data-overview-scale="150"] .score-cell .score-input,
  body.is-overview-mode[data-overview-scale="150"] .derived-value,
  body.is-overview-mode[data-overview-scale="150"] .srs-response-input {
    height: auto;
    min-height: 34px;
    font-size: 21px;
    line-height: 1.2;
  }

  body.is-overview-mode[data-overview-scale="150"] .word-token,
  body.is-overview-mode[data-overview-scale="150"] .scored-sentence,
  body.is-overview-mode[data-overview-scale="150"] .checkbox-line,
  body.is-overview-mode[data-overview-scale="150"] .radio-line,
  body.is-overview-mode[data-overview-scale="150"] .state-badge {
    font-size: 20px;
    line-height: 1.25;
  }

  body.is-overview-mode[data-overview-scale="150"] .field span,
  body.is-overview-mode[data-overview-scale="150"] .field legend,
  body.is-overview-mode[data-overview-scale="150"] .form-field span,
  body.is-overview-mode[data-overview-scale="150"] .protocol-field > span,
  body.is-overview-mode[data-overview-scale="150"] .audio-field > span {
    font-size: 17px;
  }

  body.is-overview-mode[data-overview-scale="150"] .field input,
  body.is-overview-mode[data-overview-scale="150"] .field select,
  body.is-overview-mode[data-overview-scale="150"] .field textarea,
  body.is-overview-mode[data-overview-scale="150"] .inline-input,
  body.is-overview-mode[data-overview-scale="150"] textarea,
  body.is-overview-mode[data-overview-scale="150"] .audio-field input,
  body.is-overview-mode[data-overview-scale="150"] .audio-field select {
    height: auto;
    min-height: 38px;
    font-size: 20px;
    line-height: 1.25;
  }

  body.is-overview-mode[data-overview-scale="150"] .audio-player-heading h2,
  body.is-overview-mode[data-overview-scale="150"] .audio-now-playing strong {
    font-size: 21px;
  }
}

@media (min-width: 1000px) {
  body.is-overview-mode[data-overview-scale="150"] .insight-surface {
    font-size: 17px;
  }

  body.is-overview-mode[data-overview-scale="150"] .insight-heading strong {
    font-size: 22px;
  }

  body.is-overview-mode[data-overview-scale="150"] .score-value strong {
    font-size: 40px;
  }

  body.is-overview-mode[data-overview-scale="150"] .score-block p,
  body.is-overview-mode[data-overview-scale="150"] .block-title span,
  body.is-overview-mode[data-overview-scale="150"] .remark-list,
  body.is-overview-mode[data-overview-scale="150"] .remarks-block textarea {
    font-size: 17px;
  }
}

body.is-overview-mode[data-overview-scale="150"] {
  overflow-y: auto;
}

body.is-overview-mode[data-overview-scale="150"] .app-shell {
  height: auto;
  max-height: none;
}

body.is-overview-mode[data-overview-scale="150"] .workspace,
body.is-overview-mode[data-overview-scale="150"] .dashboard-grid {
  height: auto;
  max-height: none;
}