/* ==========================================================================
   Lexicon — Main Stylesheet
   Imports all partials in dependency order.
   ========================================================================== */

@import './tokens.css';
@import './base.css';
@import './animations.css';

/* Components */
@import './components/header.css';
@import './components/lang-switcher.css';
@import './components/keyboard.css';
@import './components/search.css';
@import './components/suggestions.css';
@import './components/recent.css';
@import './components/results.css';
@import './components/bookmarks.css';
@import './components/states.css';
@import './components/footer.css';

/* ==========================================================================
   Responsive overrides
   ========================================================================== */

@media (max-width: 600px) {
  :root {
    --header-h: 52px;
  }

  .header-inner {
    padding: 0 var(--sp-4);
  }

  .main {
    padding: 0 var(--sp-4);
  }

  .search-section {
    padding: var(--sp-10) 0 var(--sp-6);
  }

  .search-section.compact {
    padding: var(--sp-5) 0 var(--sp-4);
  }

  .result-word {
    font-size: 36px;
  }

  .pos-block {
    margin-bottom: var(--sp-8);
  }
}