/* Intopia lexica mobile refinements. Desktop styles stay in each page. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

pre,
code,
kbd,
samp {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

table {
  max-width: 100%;
}

@media (max-width: 820px) {
  .wrap,
  .page {
    width: 100% !important;
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 56px !important;
  }

  .top {
    display: block !important;
    padding-bottom: 18px !important;
    margin-bottom: 32px !important;
  }

  .brand {
    display: inline-block !important;
    margin-bottom: 14px !important;
  }

  .nav {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hero {
    padding-top: 34px !important;
    padding-bottom: 22px !important;
    margin-bottom: 26px !important;
  }

  .hero::before,
  .hero::after {
    display: none !important;
  }

  .hero-eyebrow,
  .kicker,
  .eyebrow {
    font-size: 10px !important;
    letter-spacing: .18em !important;
    line-height: 1.6 !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(30px, 13vw, 46px) !important;
    letter-spacing: .02em !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .hero-sub,
  .hero-ko,
  .lead {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .crumb {
    margin: 0 0 18px !important;
    text-align: left !important;
    letter-spacing: .12em !important;
    line-height: 1.9 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tools,
  .unisearch {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 20px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .tools input,
  .unisearch input,
  input[type="search"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: 16px !important;
  }

  .dir,
  .pill,
  .theme-btn,
  .filter-btn,
  button {
    min-height: 38px !important;
    touch-action: manipulation;
  }

  .filter-pills,
  .filters {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    padding-bottom: 8px !important;
    margin-bottom: 22px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .pill,
  .filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    letter-spacing: .12em !important;
  }

  .stats,
  .hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px 0 !important;
    text-align: left !important;
  }

  .stats > div,
  .hero-meta > div {
    padding: 10px 12px !important;
    border: 1px solid rgba(154, 138, 106, .35) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, .38) !important;
  }

  .modules,
  .cards,
  .grid,
  .entries,
  .catalog,
  .lesson-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .module,
  .card,
  .entry,
  .lesson-card {
    padding: 16px !important;
    border-radius: 8px !important;
    min-height: 0 !important;
  }

  .module:hover,
  .card:hover {
    transform: none !important;
  }

  .mod-icon {
    font-size: clamp(38px, 15vw, 58px) !important;
  }

  .mod-title {
    font-size: 20px !important;
  }

  .entry-head {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .lemma,
  .lemma-gr {
    font-size: clamp(24px, 9vw, 32px) !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .lemma-translit,
  .lemma .gen,
  .lemma-gr .gen {
    font-size: 15px !important;
  }

  .gloss {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
  }

  .field-tags {
    width: 100% !important;
  }

  .expand-btn {
    margin-left: 0 !important;
    min-height: 38px !important;
    padding-left: 0 !important;
  }

  .han,
  .han.han-2,
  .han.han-3,
  .han.han-4 {
    width: auto !important;
    max-width: 100% !important;
    min-width: 64px !important;
    height: auto !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
    font-size: clamp(32px, 14vw, 44px) !important;
    letter-spacing: .04em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .hun-eum {
    width: 100% !important;
  }

  .slice-grid,
  .meta-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .compound-list {
    grid-template-columns: 1fr !important;
  }

  .compound-row {
    padding: 12px !important;
  }

  .compound-sources a {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .slice-grid .label,
  .meta-grid .key {
    padding-top: 0 !important;
  }

  .slice,
  .svg-tree,
  .entry-body {
    margin-top: 12px !important;
  }

  .svg-tree {
    overflow-x: auto !important;
    padding: 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .svg-tree svg {
    max-width: none !important;
    min-width: 520px !important;
  }

  .tri-map,
  .slice-row,
  .roadmap-flow {
    grid-template-columns: 1fr !important;
  }

  .tri-cell,
  .slice-row > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(154, 138, 106, .25) !important;
  }

  .gr-la-link,
  .grammar-link {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .grammar-link .gl-arr,
  .gr-la-link a {
    margin-left: 0 !important;
  }

  .roadmap {
    padding: 20px 16px !important;
    margin: 36px 0 !important;
  }

  .flow-arrow {
    transform: rotate(90deg) !important;
    justify-self: center !important;
  }

  .section-head {
    display: block !important;
  }

  .hint {
    margin-top: 6px !important;
  }
}

@media (max-width: 520px) {
  .wrap,
  .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero {
    padding-top: 28px !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(28px, 15vw, 40px) !important;
  }

  .tools,
  .unisearch {
    border-radius: 8px !important;
  }

  .stats,
  .hero-meta {
    grid-template-columns: 1fr !important;
  }

  .entry,
  .module,
  .card,
  .lesson-card {
    padding: 14px !important;
  }

  .slice-showcase {
    padding: 22px 16px !important;
  }
}

/* Older DC page uses inline styles, so these mobile rules target recurring
   layout fragments and keep the page readable without changing its source model. */
@media (max-width: 820px) {
  x-dc,
  x-dc > div,
  .sc-host {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body [style*="padding:24px 56px"],
  body [style*="padding: 24px 56px"],
  body [style*="padding:56px 56px"],
  body [style*="padding: 56px 56px"],
  body [style*="padding:30px 56px"],
  body [style*="padding: 30px 56px"],
  body [style*="padding:22px 56px"],
  body [style*="padding: 22px 56px"],
  body [style*="padding:0 56px"],
  body [style*="padding: 0px 56px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body [style*="display:flex"][style*="justify-content:space-between"][style*="padding:24px"],
  body [style*="display: flex"][style*="justify-content: space-between"][style*="padding: 24px"] {
    display: block !important;
  }

  body [style*="display:flex"][style*="gap:38px"],
  body [style*="display: flex"][style*="gap: 38px"] {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 14px !important;
  }

  body [style*="grid-template-columns:1.1fr .9fr"],
  body [style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body [style*="grid-template-columns:repeat(2,1fr)"],
  body [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  body [style*="min-width:300px"],
  body [style*="min-width: 300px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  body [style*="display:flex"][style*="gap:0"][style*="border-bottom"],
  body [style*="display: flex"][style*="gap: 0px"][style*="border-bottom"] {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body [style*="font-size:44px"],
  body [style*="font-size: 44px"] {
    font-size: clamp(30px, 10vw, 40px) !important;
    line-height: 1.2 !important;
  }

  body [style*="font-size:30px"],
  body [style*="font-size: 30px"] {
    font-size: clamp(24px, 10vw, 34px) !important;
  }

  body [style*="display:flex"][style*="align-items:baseline"][style*="justify-content:space-between"],
  body [style*="display: flex"][style*="align-items: baseline"][style*="justify-content: space-between"] {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
}