/* Shared compact action sizing. Component fallbacks preserve desktop sizing. */
@media (max-width: 767px) {
  :root {
    --mobile-action-height: 38px;
    --mobile-action-padding: 8px 12px;
    --mobile-action-padding-x: 12px;
    --mobile-action-padding-y: 8px;
    --mobile-action-font-size: 13px;
    --mobile-action-font-weight: 600;
    --mobile-action-line-height: 1.35;
    --mobile-action-radius: 8px;
    --mobile-action-avatar-size: 18px;
    --mobile-icon-padding: 0;
  }
  .btn > svg { width: 16px; height: 16px; }
  .finance-controls .period-nav { grid-template-columns: var(--mobile-action-height) minmax(0, 1fr) var(--mobile-action-height); }
  .finance-date input { min-height: var(--mobile-action-height); padding-block: var(--space-1); }

  /* Only actions: informational variable chips and content cards keep their size. */
  .text-button,
  button.var-chip,
  .template-vars > button,
  .public-v2 .more-times-button,
  .showcase .showcase-return,
  .showcase .showcase-back-cta {
    min-height: var(--mobile-action-height);
    height: auto;
    min-width: 0;
    max-width: 100%;
    padding: var(--mobile-action-padding);
    border-radius: var(--mobile-action-radius);
    font-size: var(--mobile-action-font-size);
    font-weight: var(--mobile-action-font-weight);
    line-height: var(--mobile-action-line-height);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* The showcase already declares these font sizes as important. */
  .showcase .showcase-return,
  .showcase .showcase-back-cta { font-size: var(--mobile-action-font-size) !important; }

  /* Disclosure actions may grow when their labels wrap; their content is untouched. */
  .history-message > summary,
  .finance-basis > summary,
  .finance-demo-help > summary {
    min-height: var(--mobile-action-height);
    padding-block: var(--mobile-action-padding-y);
    border-radius: var(--mobile-action-radius);
    font-size: var(--mobile-action-font-size);
    font-weight: var(--mobile-action-font-weight);
    line-height: var(--mobile-action-line-height);
    overflow-wrap: anywhere;
  }

  .pagination-current { min-height: var(--mobile-action-height); }
  .sales-page .sales-demo-controls button img {
    width: var(--mobile-action-avatar-size);
    height: var(--mobile-action-avatar-size);
  }
}