/* Customer workspace density. Scoped sizing only; chart geometry stays unchanged. */
#app .cx-page {
  --cx-panel-inset: 20px;
  font-size: 14px;
  line-height: 1.5;
  padding: 22px 28px 32px;
}
#app .cx-page .cx-hero { padding-bottom: 14px; gap: 16px; }
#app .cx-page .cx-hero h1 { font-size: 26px; line-height: 1.25; margin: 2px 0 6px; }
#app .cx-page .cx-hero p:not(.cx-eyebrow) { font-size: 13px; line-height: 1.5; }
#app .cx-page .cx-hero-actions { margin-top: 8px; }
#app .cx-page h2 { font-size: 18px; line-height: 1.4; }
#app .cx-page .cx-eyebrow { margin-bottom: 4px; }
#app .cx-page .cx-page-nav { margin-bottom: 14px; padding-bottom: 10px; gap: 6px; }
#app .cx-page .cx-page-nav .cx-button { font-size: 14px !important; padding-inline: 16px; }
#app .cx-page .cx-filters { padding: 12px 14px 10px; margin-bottom: 14px; }
#app .cx-page .cx-filter-meta { margin-top: 8px; min-height: 20px; font-size: 12px; }
#app .cx-page .cx-entry-banner { padding: 16px 20px; margin-bottom: 14px; gap: 14px; }
#app .cx-page .cx-entry-banner h2 { font-size: 18px; line-height: 1.4; }
#app .cx-page .cx-entry-banner p { font-size: 13px; line-height: 1.5; }
#app .cx-page .cx-entry-banner .cx-progress { margin-block: 12px 0; }
#app .cx-page .cx-panel-head { padding: 16px var(--cx-panel-inset) 12px; gap: 12px; }
#app .cx-page .cx-panel-head h2 { font-size: 18px; }
#app .cx-page .cx-panel-head h2+p { margin-top: 4px; font-size: 13px; line-height: 1.5; }
#app .cx-page .cx-panel-footer { padding: 12px var(--cx-panel-inset); gap: 8px; line-height: 1.5; }
#app .cx-page .cx-chart-toolbar { padding: 0 var(--cx-panel-inset) 12px; gap: 10px; }
#app .cx-page .cx-chart-scroll { margin-bottom: 8px; padding-block: 6px 10px; }
#app .cx-page .cx-channel-overview { gap: 16px; margin: 16px 0; }
#app .cx-page .cx-channel-card { padding: 20px; }
#app .cx-page .cx-channel-card header h2 { font-size: 18px; }
#app .cx-page .cx-channel-stock { margin: 18px 0 16px; gap: 6px; }
#app .cx-page .cx-channel-stock strong { font-size: 36px; letter-spacing: -1px; }
#app .cx-page .cx-channel-metrics { gap: 16px; margin-bottom: 16px; }
#app .cx-page .cx-channel-metrics strong { font-size: 24px; }
#app .cx-page .cx-channel-finance { padding-top: 12px; gap: 12px; }
#app .cx-page .cx-channel-finance b { font-size: 17px; }
#app .cx-page .cx-channel-card footer { margin-top: 12px; }
#app .cx-page .cx-channel-signals { margin: 8px 0 18px; gap: 8px; }
#app .cx-page :is(.cx-channel-growth,.cx-fan-details,.cx-channel-trend,.cx-channel-drivers) { margin-bottom: 18px; }
#app .cx-page .cx-channel-selected { margin-bottom: 14px; padding: 12px 14px; gap: 18px; }
#app .cx-page .cx-channel-selected strong { font-size: 22px; }
#app .cx-page .cx-fan-summary { margin-bottom: 14px; gap: 8px 16px; font-size: 13px; }
#app .cx-page .cx-channel-business { gap: 18px; margin-bottom: 18px; }
#app .cx-page .cx-pace-cards { margin-bottom: 16px; gap: 12px; }
#app .cx-page .cx-pace-cards>div { padding: 14px; gap: 6px; }
#app .cx-page .cx-pace-cards strong { font-size: 24px; }
#app .cx-page .cx-concentration-columns { padding-bottom: 18px; gap: 18px; }
#app .cx-page .cx-concentration-total>strong { font-size: 30px; }
#app .cx-page .cx-channel-drivers .cx-driver-row { min-height: 96px; padding-block: 12px; }
#app .cx-page .cx-editor>header { padding: 18px 22px 16px; }
#app .cx-page .cx-editor h2 { font-size: 20px; }
#app .cx-page .cx-editor-body { padding: 0 22px 20px; }
#app .cx-page .cx-form-fields { gap: 16px; }
#app .cx-page .cx-form-fields label>span { font-size: 14px; }
#app .cx-page .cx-editor footer { padding: 14px 20px; }
#app .cx-page .cx-record-meta { padding-top: 14px; }
#app .cx-page .cx-config-accounts { padding: 0 20px 20px; gap: 12px; }
#app .cx-page .cx-config-accounts article { padding: 16px; }
#app .cx-page .cx-config-accounts h3 { font-size: 16px; }
#app .cx-page .cx-config-fields { gap: 16px; }
#app .cx-page .cx-config-fields article { padding: 18px; }
#app .cx-page .cx-config-fields h2 { font-size: 18px; margin-bottom: 14px; }
#app .cx-page .cx-config-fields label { font-size: 13px; margin-bottom: 12px; }
#app .cx-page .cx-config-save { padding: 14px 18px; margin-top: 16px; }

@media (min-width: 721px) {
  #app .cx-page .cx-button { min-height: 36px; padding-block: 6px; }
  #app .cx-page .cx-page-nav .cx-button { min-height: 38px; }
  #app .cx-page .cx-square { width: 38px; }
  #app .cx-page .cx-month-control .cx-square { min-height: 36px; width: 30px; }
  #app .cx-page input[type=month] { min-height: 36px; padding-block: 6px; font-size: 14px; }
  #app .cx-page .cx-type select { min-height: 38px; padding-block: 7px; font-size: 13px; }
  #app .cx-page .cx-search { min-height: 38px; }
  #app .cx-page .cx-search input { padding-block: 7px; font-size: 13px; }
  #app .cx-page .cx-compact-label select { min-height: 36px; padding-block: 7px; }
  #app .cx-page .cx-table :is(th,td) { padding: 10px 14px; }
  #app .cx-page .cx-table tbody :is(th,td) { font-size: 14px; line-height: 1.5; }
  #app .cx-page .cx-table .cx-namebutton { min-height: 32px; font-size: 14px !important; padding-block: 2px !important; }
  #app .cx-page .cx-table small { font-size: 12px; line-height: 1.5; }
  #app .cx-page .cx-table :is(th,td):first-child { padding-left: var(--cx-panel-inset); }
  #app .cx-page .cx-table :is(th,td):last-child { padding-right: var(--cx-panel-inset); }
  #app .cx-page :is(.cx-form-fields input,.cx-form-fields select,.cx-goal-account select,.cx-config-fields input) { min-height: 40px; padding: 8px 11px; font-size: 14px; }
  #app .cx-page.cx-config .cx-filters :is(input,select) { min-height: 38px; padding: 7px 10px; font-size: 14px; }
}

@media (max-width: 720px) {
  #app .cx-page { --cx-panel-inset: 16px; padding: 18px 14px 28px; }
  #app .cx-page .cx-hero h1 { font-size: 24px; }
  #app .cx-page .cx-hero-actions { margin-top: 0; }
  #app .cx-page .cx-entry-banner { padding: 14px 16px; }
  #app .cx-page .cx-entry-banner>.cx-button { margin-top: 12px; }
  #app .cx-page .cx-channel-card { padding: 18px; }
  #app .cx-page .cx-channel-stock strong { font-size: 32px; }
  #app .cx-page .cx-channel-selected { gap: 10px; }
  #app .cx-page .cx-editor>header { padding: 18px 18px 14px; }
  #app .cx-page .cx-editor-body { padding: 0 18px 18px; }
  #app .cx-page .cx-editor footer { padding: 14px 16px max(18px,env(safe-area-inset-bottom)); }
  #app .cx-page .cx-config-accounts { padding-inline: 16px; }
  #app .cx-page .cx-config-fields article { padding: 16px; }
  #app .cx-page .cx-month-control { flex: 1 1 234px; max-width: none; }
  #app .cx-page .cx-month-control label { flex: 1; min-width: 0; }
  #app .cx-page .cx-month-control input { width: 100%; min-width: 0; }
  #app .cx-page .cx-store-select,
  #app .cx-page .cx-type { flex: 1 1 150px; min-width: 0; }
}

/* Keep touch controls and form text comfortable on phones and touch tablets. */
@media (max-width: 720px), (any-pointer: coarse) {
  #app .cx-page .cx-button,
  #app .cx-page .cx-namebutton { min-height: 44px; }
  #app .cx-page .cx-month-control .cx-square { min-height: 44px; width: 36px; }
  #app .cx-page .cx-search { min-height: 44px; }
  #app .cx-page :is(input[type=month],.cx-type select,.cx-compact-label select,.cx-form-fields input,.cx-form-fields select,.cx-form-fields textarea,.cx-goal-account select,.cx-config-fields input) { min-height: 44px; font-size: 16px; }
  #app .cx-page .cx-search input { font-size: 16px; }
  #app .cx-page.cx-config .cx-filters :is(input,select) { min-height: 44px; font-size: 16px; }
}