/* Mobile interaction and browsing refinements */
@media (max-width: 800px) {
  button,
  .outline-button,
  .primary-button,
  .create-entry-button,
  .keyword-go,
  .youtube-link { text-align: center; }

  button > span,
  .outline-button > span,
  .primary-button > span,
  .create-entry-button > span { min-width: 0; text-align: center; }

  .topic-search button,
  .suggestions button,
  .segmented label span,
  .stage-nav,
  .keyword-language button,
  .keyword-go,
  .outline-button,
  .canvas-mode-switch button,
  .canvas-add-tail,
  .dialog-close,
  .node-menu button,
  .example-card button,
  .lesson-check,
  .node-orb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .primary-button,
  .create-entry-button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    align-items: center;
    justify-content: stretch;
    column-gap: 8px;
  }

  .primary-button > span,
  .create-entry-button > span { grid-column: 2; }

  .primary-button > b,
  .create-entry-button > b { grid-column: 3; justify-self: center; }

  .back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.35;
  }

  .roadmap-actions .outline-button,
  .canvas-header-actions .outline-button,
  .dialog-actions .outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Topic detail: keep only one useful sticky row on phones. */
  .roadmap-detail-trail {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 128px 0 10px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    border-bottom: 1px solid #d8d1c5 !important;
    background: rgba(248, 245, 238, .97) !important;
    backdrop-filter: blur(12px);
  }

  #detailBackToExplore {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    color: #765a25 !important;
    background: transparent !important;
    font-size: 0 !important;
  }

  #detailBackToExplore::before {
    content: "←";
    font-size: 23px;
    line-height: 1;
  }

  .roadmap-detail-trail nav {
    min-width: 0 !important;
    display: block !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .roadmap-detail-trail nav span,
  .roadmap-detail-trail nav i { display: none !important; }

  .roadmap-detail-trail nav b {
    display: block !important;
    overflow: hidden;
    color: #17201e !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #roadmapDetailClose {
    width: auto !important;
    min-width: 100px !important;
    height: 38px !important;
    padding: 0 12px !important;
    position: fixed !important;
    top: 9px !important;
    right: 12px !important;
    z-index: 80 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #b89a60 !important;
    border-radius: 999px !important;
    color: #6f5525 !important;
    background: #fffdf9 !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }

  #roadmapDetailClose::after {
    content: "我的修煉";
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }

  html[lang="en"] #roadmapDetailClose::after { content: "My practice"; }

  /* The cover is useful on desktop; on phones the title row and content are enough. */
  .roadmap-detail-dialog .roadmap-detail-cover { display: none !important; }

  /* Content tabs scroll away with the page instead of occupying permanent space. */
  .roadmap-detail-tabs.marketplace-main-tabs,
  .topic-hub-tabs,
  .marketplace-main-tabs {
    margin-top: 0 !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  .topic-hub-tabs button,
  .marketplace-main-tabs button {
    min-height: 54px !important;
    padding: 8px 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  .topic-hub-tabs button small,
  .marketplace-main-tabs button small { display: none !important; }

  .topic-hub-tabs button > span,
  .marketplace-main-tabs button > span {
    position: static !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  .topic-hub-tabs button > b,
  .marketplace-main-tabs button > em { font-size: 16px !important; }

  /* Degree filters become lightweight chips. */
  .topic-marketplace .topic-level-filters.compact-filters,
  .topic-level-filters.compact-filters {
    width: 100% !important;
    margin: 14px 0 6px !important;
    padding: 0 0 4px !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    border: 0 !important;
    background: transparent !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .topic-marketplace .topic-level-filters.compact-filters::-webkit-scrollbar,
  .topic-level-filters.compact-filters::-webkit-scrollbar { display: none; }

  .topic-level-filters.compact-filters button,
  .topic-marketplace .topic-level-filters button,
  button[data-marketplace-level] {
    box-sizing: border-box;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid #bdb4a5 !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .topic-level-filters.compact-filters button > span,
  .topic-level-filters.compact-filters button > b,
  .topic-marketplace .topic-level-filters button > span,
  .topic-marketplace .topic-level-filters button > b,
  button[data-marketplace-level] > span,
  button[data-marketplace-level] > b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    line-height: 1 !important;
  }

  .topic-level-filters.compact-filters button > em,
  .topic-marketplace .topic-level-filters button > em,
  button[data-marketplace-level] > em { display: none !important; }

  .topic-marketplace { padding: 18px 16px 30px !important; }
  .topic-results-heading { margin-top: 14px !important; align-items: center !important; }
  .topic-results-heading b { font-size: 22px !important; }
  .topic-results-heading small { font-size: 12px !important; }

  /* 01 / 02 / 03 course cards: Hahow-like swipe rail. */
  .topic-marketplace .marketplace-template-grid {
    box-sizing: border-box !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    margin: 12px -16px 0 0 !important;
    padding: 2px 34px 18px 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .topic-marketplace .marketplace-template-grid::-webkit-scrollbar { display: none; }

  .topic-marketplace .marketplace-template-card {
    box-sizing: border-box !important;
    flex: 0 0 min(78vw, 340px) !important;
    width: min(78vw, 340px) !important;
    min-width: min(78vw, 340px) !important;
    max-width: min(78vw, 340px) !important;
    height: 398px !important;
    min-height: 398px !important;
    max-height: 398px !important;
    margin: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .topic-marketplace .marketplace-card-visual {
    min-height: 128px !important;
    height: 128px !important;
    padding: 17px 16px !important;
  }

  .topic-marketplace .marketplace-card-visual > span { font-size: 34px !important; }

  .topic-marketplace .marketplace-card-body {
    min-height: 0 !important;
    padding: 15px 15px 14px !important;
    overflow: hidden !important;
  }

  .topic-marketplace .marketplace-card-top b { display: none !important; }

  .topic-marketplace .marketplace-template-card h4 {
    min-height: 54px !important;
    margin: 13px 0 8px !important;
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(20px, 5.7vw, 24px) !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .topic-marketplace .marketplace-card-body > p,
  .topic-marketplace .marketplace-template-card > p { display: none !important; }

  .topic-marketplace .marketplace-card-meta {
    margin-top: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  .topic-marketplace .marketplace-card-meta span {
    flex: 0 0 auto;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .topic-marketplace .template-instructor { margin-top: 11px !important; gap: 8px !important; }
  .topic-marketplace .teacher-avatar { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  .topic-marketplace .template-instructor b { font-size: 13px !important; }
  .topic-marketplace .template-instructor small { display: none !important; }

  .topic-marketplace .marketplace-rating,
  .topic-marketplace .template-price-row {
    margin-top: auto !important;
    padding-top: 11px !important;
    font-size: 12px !important;
  }

  .topic-marketplace .template-social-actions,
  .topic-marketplace .template-primary-action { display: none !important; }

  /* Other mobile horizontal rails. */
  .example-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(272px, 84vw);
    grid-template-columns: none;
    gap: 14px;
    margin-inline: -22px;
    padding: 0 22px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .example-card { min-height: 390px; scroll-snap-align: start; scroll-snap-stop: always; }

  .goal-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(238px, 78vw);
    grid-template-columns: none;
    gap: 11px;
    margin-inline: -18px;
    padding: 2px 18px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .goal-card { scroll-snap-align: start; scroll-snap-stop: always; }

  .lesson-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, calc(100vw - 44px));
    grid-template-columns: none;
    gap: 16px;
    margin-inline: -22px;
    padding: 0 22px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .lesson-stage {
    min-width: 0;
    margin-bottom: 0;
    padding: 18px 16px 20px;
    border: 1px solid #d0cabf;
    background: rgba(255, 253, 248, .78);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .lesson-stage .stage-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1eee6;
  }

  #stageNavigation {
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .stage-nav { scroll-snap-align: start; }
  .stage-nav span { text-align: center; }

  .keyword-go,
  .topic-search button,
  .outline-button,
  .primary-button,
  .create-entry-button,
  .canvas-add-tail {
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .roadmap-body,
  .builder,
  .examples,
  .brief-form { min-width: 0; }
}

@media (max-width: 380px) {
  .topic-marketplace .marketplace-template-card {
    flex-basis: 82vw !important;
    width: 82vw !important;
    min-width: 82vw !important;
    max-width: 82vw !important;
  }

  .example-grid { grid-auto-columns: minmax(250px, 88vw); }
  .goal-cards { grid-auto-columns: minmax(220px, 84vw); }

  .lesson-list {
    grid-auto-columns: minmax(276px, calc(100vw - 32px));
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
}