/* Phase 1 changes the visual foundation; existing grids, media and routes stay in place. */
@media (max-width: 700px) {
  html,
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: 1.5;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  body *,
  body *::before,
  body *::after {
    letter-spacing: normal !important;
    text-transform: none !important;
  }

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

  body :is(h1, h2, h3, h4) {
    color: var(--text);
    line-height: 1.2;
  }

  #welcome .home-showcase-message h1,
  #welcome .home-intro h2,
  .browse-shell .billboard h1,
  .browse-shell .category-view h1,
  .browse-shell .zc-search-page-heading h1,
  .page-hero h1 {
    font-size: var(--font-hero-size);
    font-weight: var(--font-hero-weight);
    line-height: 1.1;
  }

  .browse-shell .library-row-heading h2,
  .browse-shell .zc-catalog-directory h2,
  .browse-shell .zc-search-result-section > h2,
  .dzc-root .dzc-grid-title {
    font-size: var(--font-row-size);
    font-weight: var(--font-row-weight);
    line-height: 1.35;
  }

  .browse-shell :is(.eyebrow, .library-kicker, .browse-rail-label),
  #welcome :is(.home-kicker, .home-tab-name, .home-device-heading),
  .zc-catalog-directory-filter > span:first-child {
    text-transform: none;
  }

  .browse-shell :is(.library-kicker, .title-meta, .poster-meta, .poster-subtitle),
  #welcome :is(.home-kicker, .home-tab-number, .home-device-heading),
  .zc-catalog-directory :is(small, .zc-catalog-directory-count) {
    font-size: var(--font-caption-size);
  }

  .browse-shell :is(.poster-card > strong, .continue-card strong),
  .dzc-root .dzc-item-copy strong {
    color: var(--text);
    font-size: var(--font-caption-size);
    font-weight: 600;
    line-height: 1.4;
  }

  .browse-shell :is(.billboard-logline, .browse-count, .browse-result-count),
  #welcome .home-showcase-message > p:last-child,
  .zc-catalog-directory-head p,
  .zc-catalog-directory-empty {
    color: var(--text-muted);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: 1.5;
  }

  .browse-shell,
  .browse-content,
  .category-view,
  .browse-search-overlay,
  .dzc-root {
    color: var(--text);
    font-family: var(--font-ui);
  }

  .browse-shell,
  .browse-content,
  .browse-search-overlay {
    background: var(--bg);
  }

  .browse-shell .poster-art,
  .browse-shell .poster-card,
  .dzc-root :is(.dzc-item, .dzc-item-art) {
    border-radius: var(--radius-poster);
  }

  .browse-shell .poster-art:not(.live-art):not(.zc-tile),
  .dzc-root .dzc-item-art {
    background-color: var(--surface-2);
  }

  .browse-shell :is(.billboard, .browse-empty),
  .browse-shell .zc-catalog-directory,
  #welcome .home-showcase,
  .browse-search-overlay-match,
  .dzc-root :is(.dzc-feature-card, .dzc-empty) {
    border-color: var(--border);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    box-shadow: none;
  }

  .browse-shell .zc-catalog-directory {
    padding: var(--space-4);
    background: var(--surface);
    margin-block: var(--space-2) var(--space-5);
  }

  .zc-catalog-directory-head {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .zc-catalog-directory-count,
  .zc-catalog-directory-arrow {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-muted);
  }

  .zc-catalog-directory-count {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
  }

  .zc-catalog-directory-card {
    gap: var(--space-2);
    padding: var(--space-3);
    border-color: var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-2);
    color: var(--text);
  }

  .zc-catalog-directory-card strong {
    font-size: var(--font-caption-size);
    font-weight: 600;
    line-height: 1.4;
  }

  .zc-catalog-directory-card small,
  .zc-catalog-directory-filter > span:first-child {
    color: var(--text-muted);
  }

  .zc-catalog-directory-grid {
    gap: var(--space-2);
    scrollbar-color: var(--surface-2) var(--surface);
  }

  body .browse-shell .zc-classic-search-field input,
  body .browse-shell .zc-classic-category,
  body .browse-shell .zc-catalog-directory-filter input,
  .browse-search-overlay-bar input {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    border-radius: var(--radius-card);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: var(--font-body-weight);
    box-shadow: none;
  }

  .zc-classic-search-icon,
  .browse-shell input::placeholder,
  .browse-search-overlay-bar input::placeholder {
    color: var(--text-muted);
  }

  body .browse-shell .zc-classic-search-submit {
    border: 1px solid var(--brand);
    border-radius: var(--radius-card);
    background: var(--brand);
    color:var(--brand-ink,#03121e);
    font-size: var(--font-body-size);
    font-weight: 600;
    box-shadow: none;
    filter: none;
  }

  body .browse-shell .zc-classic-search-submit:hover {
    border-color: var(--brand-hover);
    background: var(--brand-hover);
  }

  .browse-shell :is(.zc-classic-category, .zc-catalog-directory-filter input, .zc-classic-search-field input):focus-visible,
  .zc-catalog-directory-card:focus-visible,
  .browse-shell .zc-classic-search-submit:focus-visible {
    border-color: var(--focus-ring);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  .browse-shell .rail-scroll {
    border-color: var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
  }

  #welcome .home-showcase-content,
  #welcome .home-showcase-controls {
    border-color: var(--border);
    background: var(--surface);
  }

  #welcome .home-showcase-tab {
    border-radius: var(--radius-card);
    color: var(--text-muted);
  }

  #welcome .home-showcase-tab[aria-pressed='true'] {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: none;
  }

  #welcome .home-tab-icon {
    border-color: var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-poster);
  }

  #welcome .home-showcase-tab[aria-pressed='true'] .home-tab-icon {
    border-color: var(--brand);
    background: var(--brand);
    box-shadow: none;
    color:var(--brand-ink,#03121e);
  }

  #welcome .home-tab-fill {
    background: var(--accent);
  }

  .browse-shell .poster-art > progress {
    accent-color: var(--accent);
    background: var(--surface-2);
  }

  .browse-shell .poster-art > progress::-webkit-progress-bar {
    background: var(--surface-2);
  }

  .browse-shell .poster-art > progress::-webkit-progress-value {
    background: var(--accent);
  }

  .browse-shell .poster-art > progress::-moz-progress-bar {
    background: var(--accent);
  }

  /* Standalone account and board pages share the mobile foundation as well. */
  .account-page .dashboard-heading h1,
  .account-page .account-login h2,
  .zc-lb-page .tk-hero h1 {
    font-size: var(--font-hero-size);
    font-weight: var(--font-hero-weight);
    line-height: 1.1;
  }

  .account-page .account-view .care-panel h2,
  .account-page .account-view .section-heading h2,
  .account-page .account-view .zc-lb-preview h3,
  .zc-lb-page .tk-board-head h2,
  .zc-lb-page .tk-ranks > h2,
  .zc-lb-page .tk-faq > div > h2,
  .zc-lb-page .tk-me-copy h2 {
    font-size: var(--font-row-size);
    font-weight: var(--font-row-weight);
    line-height: 1.35;
  }

  .account-page .account-view > .care-panel,
  .account-page .account-login,
  .account-page .account-achievements,
  .account-page .profile-card,
  .account-page .zc-lb-preview,
  .account-page .expiry-card {
    border-color: var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: none;
  }

  .account-page .account-view > .care-panel {
    padding: var(--space-4);
  }

  .account-page #section-subtitle,
  .account-page .account-view .care-panel > p,
  .account-page .account-card-sub,
  .zc-lb-page .tk-hero-copy > p:last-child,
  .zc-lb-page .tk-board-head p,
  .zc-lb-page .tk-section-intro,
  .zc-lb-page .tk-faq p {
    color: var(--text-muted);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    line-height: 1.5;
  }

  .account-page .ticket-form label,
  .account-page .account-eyebrow,
  .account-page .identity-field > span,
  .zc-lb-page .tk-eyebrow,
  .zc-lb-page .tk-board-eyebrow {
    color: var(--text-muted);
    font-size: var(--font-caption-size);
    font-weight: var(--font-body-weight);
  }

  .account-page .ticket-form :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    border-color: var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface-2);
    color: var(--text);
    font-size: 16px;
    font-weight: var(--font-body-weight);
    box-shadow: none;
  }

  .account-page .ticket-form :is(input, select, textarea):focus-visible {
    border-color: var(--focus-ring);
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  .account-page .ticket-form button,
  .account-page .account-security-shortcut {
    border-radius: var(--radius-card);
    font-size: var(--font-body-size);
    font-weight: 600;
  }

  .account-page .ticket-form .primary {
    border-color: var(--brand);
    background: var(--brand);
    color:var(--brand-ink,#03121e);
    box-shadow: none;
  }

  .account-page .ticket-form .primary:hover {
    border-color: var(--brand-hover);
    background: var(--brand-hover);
  }

  .zc-lb-page .tk-board,
  .zc-lb-page .tk-me,
  .zc-lb-page .tk-community-total {
    border-radius: var(--radius-card);
    background-color: var(--surface);
  }

  .zc-lb-page .tk-board,
  .zc-lb-page .tk-me {
    border-color: var(--border);
    box-shadow: none;
  }

  .zc-lb-page .tk-me-stat {
    border-color: var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-2);
  }

  body :is(button, .home-action, .poster-card, .zc-catalog-directory-card, .rail-scroll) {
    transition-duration: var(--motion-normal);
    transition-timing-function: var(--ease-out);
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  body :is(button, .home-action, .poster-card, .zc-catalog-directory-card, .rail-scroll) {
    transition: none;
  }
}