/* ============================================
   Translation-safe UI layer

   Global CSS-only protection for localized labels that are longer than
   the source language. Keep this file loaded after view-level styles.
   ============================================ */

:root {
  --lpo-touch-target-min: 44px;
  --lpo-action-min-inline: 140px;
  --lpo-action-gap: 0.625rem;
  --lpo-readable-line-height: 1.2;
}

#app,
#app * {
  box-sizing: border-box;
}

#app :where(
  button,
  [type="button"],
  [type="submit"],
  [role="button"],
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .auth-button,
  .action-button,
  .voice-btn,
  .hc-btn,
  .lh-btn,
  .curated-button,
  .stash-button,
  .lpo-navbar__btn,
  .lpo-coming-soon__btn,
  .pricing-card__cta,
  .upgrade-modal-btn-cancel,
  .upgrade-modal-btn-upgrade,
  .checkout-submit,
  .pagination-btn,
  [class$="-btn"],
  [class*="__btn"],
  [class$="-button"],
  [class*="__button"]
) {
  max-width: 100%;
  min-width: 0;
  min-height: var(--lpo-touch-target-min);
  line-height: var(--lpo-readable-line-height);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

#app :where(
  button,
  [role="button"],
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .auth-button,
  .action-button,
  .voice-btn,
  .hc-btn,
  .lh-btn,
  .curated-button,
  .stash-button,
  .lpo-navbar__btn,
  .lpo-coming-soon__btn,
  .pricing-card__cta,
  [class$="-btn"],
  [class*="__btn"],
  [class$="-button"],
  [class*="__button"]
) :where(i, svg, .material-icons, .fas, .fa, [class*="icon"]) {
  flex: 0 0 auto;
}

#app :where(
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .auth-button,
  .action-button,
  .hc-btn,
  .lh-btn,
  .curated-button,
  .stash-button,
  .lpo-navbar__btn,
  .lpo-coming-soon__btn,
  .pricing-card__cta,
  [class$="-btn"],
  [class*="__btn"],
  [class$="-button"],
  [class*="__button"]
) :where(span, strong) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#app :where(
  .actions,
  .action-buttons,
  .auth-buttons,
  .guest-actions,
  .form-actions,
  .search-actions,
  .header-actions,
  .modal-footer,
  .card-actions,
  .pagination,
  .upgrade-modal-actions,
  .recipe-selector-actions,
  [class$="-actions"],
  [class*="__actions"],
  [class$="-footer"],
  [class*="__footer"]
) {
  min-width: 0;
  max-width: 100%;
  gap: var(--lpo-action-gap);
}

#app :where(
  .actions,
  .action-buttons,
  .auth-buttons,
  .guest-actions,
  .form-actions,
  .search-actions,
  .header-actions,
  .modal-footer,
  .card-actions,
  .pagination,
  .upgrade-modal-actions,
  .recipe-selector-actions,
  [class$="-actions"],
  [class*="__actions"]
) {
  flex-wrap: wrap;
}

#app :where(
  .actions,
  .action-buttons,
  .auth-buttons,
  .guest-actions,
  .form-actions,
  .search-actions,
  .modal-footer,
  .card-actions,
  .pagination,
  .upgrade-modal-actions,
  .recipe-selector-actions,
  [class$="-actions"],
  [class*="__actions"]
) > :where(
  button,
  [role="button"],
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .auth-button,
  .action-button,
  .hc-btn,
  .lh-btn,
  .curated-button,
  .stash-button,
  [class$="-btn"],
  [class*="__btn"],
  [class$="-button"],
  [class*="__button"]
) {
  flex: 1 1 var(--lpo-action-min-inline);
}

#app :where(
  .container,
  .container-fluid,
  .main-container,
  .page,
  .view,
  .card,
  .food-card,
  .recipe-card,
  .curated-card,
  .stash-card,
  .modal,
  .modal-content,
  .upgrade-modal-content,
  .checkout-modal,
  [class$="-container"],
  [class*="__container"],
  [class$="-content"],
  [class*="__content"],
  [class$="-card"],
  [class*="__card"]
) {
  min-width: 0;
  max-width: 100%;
}

#app :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  label,
  legend,
  summary,
  figcaption,
  .title,
  .subtitle,
  .label,
  .badge,
  .tag,
  .pill,
  .error,
  .message,
  .description,
  .modal-title,
  .modal-subtitle,
  .card-title,
  .card-subtitle,
  [class$="-title"],
  [class*="__title"],
  [class$="-label"],
  [class*="__label"],
  [class$="-badge"],
  [class*="__badge"],
  [class$="-description"],
  [class*="__description"],
  [class$="-message"],
  [class*="__message"]
) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

#app :where(
  .grid,
  .grid-auto,
  .grid-responsive,
  .cards-grid,
  .results-grid,
  .recipe-grid,
  .modules-grid,
  .dashboard-grid,
  .pricing-grid,
  [class$="-grid"],
  [class*="__grid"]
) {
  min-width: 0;
}

#app :where(
  input,
  select,
  textarea,
  .form-control,
  .search-input,
  [class$="-input"],
  [class*="__input"],
  [class$="-select"],
  [class*="__select"]
) {
  max-width: 100%;
  min-width: 0;
}

#app :where(.modal-overlay, .checkout-modal-root, [role="dialog"]) {
  max-width: 100%;
}

#app :where(.modal-overlay, .checkout-modal-root) {
  overflow-y: auto;
}

#app :where(.modal-content, .upgrade-modal-content, .checkout-modal, [role="dialog"] > *) {
  overflow-wrap: anywhere;
}

.translation-safe {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.translation-safe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--lpo-action-gap);
  min-width: 0;
  max-width: 100%;
}

.translation-safe-actions > * {
  flex: 1 1 var(--lpo-action-min-inline);
  min-width: 0;
  max-width: 100%;
}

.translation-safe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--lpo-action-gap);
  min-width: 0;
}

.translation-safe-nowrap,
.translation-safe-icon,
#app .translation-safe-nowrap,
#app .translation-safe-icon {
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 640px) {
  #app :where(
    .actions,
    .action-buttons,
    .auth-buttons,
    .guest-actions,
    .form-actions,
    .search-actions,
    .modal-footer,
    .card-actions,
    .pagination,
    .upgrade-modal-actions,
    .recipe-selector-actions,
    [class$="-actions"],
    [class*="__actions"]
  ) > :where(
    button,
    [role="button"],
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .auth-button,
    .action-button,
    .hc-btn,
    .lh-btn,
    .curated-button,
    .stash-button,
    [class$="-btn"],
    [class*="__btn"],
    [class$="-button"],
    [class*="__button"]
  ) {
    flex-basis: 100%;
  }

  #app :where(
    .grid-responsive,
    .cards-grid,
    .results-grid,
    .recipe-grid,
    .modules-grid,
    .dashboard-grid,
    .pricing-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}