/**
 * Tipsy Layout Design System — new-track pages only
 * User · Auth · Static labels · Error · future VIP / Message / Feedback
 * Policy: docs/LAYOUT_DESIGN_SYSTEM.md
 */
.tipsy-layout--user,
.tipsy-layout--auth,
.tipsy-layout--static,
.tipsy-layout--error {
  --layout-padding-inline: var(--layout-padding-mobile);
  --layout-hero-padding: var(--layout-card-padding);
  --layout-user-grid-cols: 3;
  --tipsy-gutter: var(--layout-padding-inline);
  --tipsy-container-max: var(--layout-max-width);
  --tipsy-user-container-max: var(--layout-max-width);
  --tipsy-user-page-pad-y: var(--layout-section-gap);
  --tipsy-user-page-pad-bottom: calc(var(--layout-section-gap) + 8px);
  --tipsy-page-section-gap: var(--layout-section-gap);
  --tipsy-card-gap: var(--layout-card-gap);
  --tipsy-grid-gap: var(--layout-grid-gap);
  --tipsy-radius-card: var(--layout-surface-radius);
}

@media (min-width: 768px) {
  .tipsy-layout--user,
  .tipsy-layout--auth,
  .tipsy-layout--static,
  .tipsy-layout--error {
    --layout-padding-inline: var(--layout-padding-tablet);
    --layout-hero-padding: 32px;
    --layout-user-grid-cols: 4;
  }
}

@media (min-width: 1024px) {
  .tipsy-layout--user,
  .tipsy-layout--auth,
  .tipsy-layout--static,
  .tipsy-layout--error {
    --layout-padding-inline: var(--layout-padding-desktop);
    --layout-hero-padding: 48px;
    --layout-user-grid-cols: 6;
  }
}

.tipsy-layout--user .tipsy-page__content,
.tipsy-layout--auth .tipsy-page__content {
  max-width: var(--layout-max-width);
  padding-inline: var(--layout-padding-inline);
}

.tipsy-layout--static .tipsy-page__content,
.tipsy-layout--error .tipsy-page__content {
  max-width: var(--layout-max-width);
  padding-inline: var(--layout-padding-inline);
}