/* v131 mobile alignment and legacy-style isolation
   Use the Home title as the single mobile header metric and keep old dialog
   rules from changing the document flow of current controls. */
@media (max-width: 719px) {
  /* Profile is a non-modal tab page; every destination dialog must render above it. */
  html body > dialog[open]:not(#profileDialog):not(#showDialog) {
    z-index: 1400 !important;
  }

  /* Home is the reference: 18px / 600 / 19.8px, centered at y=17px. */
  html body #mobileWorkspaceTitle,
  html body.view-home #mobileWorkspaceTitle,
  html body.view-database #mobileWorkspaceTitle,
  html body.mobile-database-tab #mobileWorkspaceTitle,
  html body #profileDialog.mobile-tab-page #profileTitle {
    position: absolute !important;
    inset: 17px auto auto 50% !important;
    display: block !important;
    width: max-content !important;
    max-width: calc(100vw - 112px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--os-text, #161719) !important;
    font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: translateX(-50%) !important;
  }

  html body #profileDialog.mobile-tab-page .insights-head {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
  }

  html body #profileDialog.mobile-tab-page .insights-head > div {
    display: contents !important;
  }

  html body #profileDialog.mobile-tab-page .insights-head p {
    display: none !important;
  }

  /* The active-episode marker is decorative and never participates in grid width. */
  html body #showDialog .episode.next-up {
    padding-left: 0 !important;
  }

  html body #showDialog .episode.next-up::before {
    inset: 14px auto 14px -8px !important;
  }

  html body #showDialog .dialog-head-actions {
    gap: 6px !important;
  }

  html body #showDialog .dialog-head-actions > .icon-button {
    box-sizing: border-box !important;
    flex: 0 0 40px !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--os-line, #e2e3e5) !important;
    border-radius: 50% !important;
    color: var(--os-text, #161719) !important;
    background: var(--os-raised, #f4f5f6) !important;
    box-shadow: none !important;
  }

  html body #showDialog .dialog-head-actions > .icon-button .material-symbols-rounded {
    font-size: 22px !important;
  }

  /* Tighten only the content rail; the 14px gap between database rows stays. */
  html body.view-database main #showGrid.show-grid,
  html body.mobile-database-tab main #showGrid.show-grid {
    row-gap: 14px !important;
  }

  html body.view-database main #library #showGrid > article.show-card.database-card,
  html body.mobile-database-tab main #library #showGrid > article.show-card.database-card {
    grid-template-rows: auto 52px !important;
  }

  html body.view-database main #library #showGrid > article.show-card.database-card > .card-content,
  html body.mobile-database-tab main #library #showGrid > article.show-card.database-card > .card-content {
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding-top: 5px !important;
    grid-template-rows: 22px 13px 12px !important;
  }

  html body.view-database main #library #showGrid > article.show-card.database-card .card-top,
  html body.mobile-database-tab main #library #showGrid > article.show-card.database-card .card-top {
    min-height: 22px !important;
  }

  html body.view-database main #library #showGrid > article.show-card.database-card .next-episode,
  html body.mobile-database-tab main #library #showGrid > article.show-card.database-card .next-episode {
    margin-top: 1px !important;
  }

  html body.view-database main #library #showGrid > article.show-card.database-card .progress-row,
  html body.mobile-database-tab main #library #showGrid > article.show-card.database-card .progress-row {
    margin-top: 2px !important;
  }

  /* Wider profile rail: 12px visual margins instead of the previous 30px. */
  html body #profileDialog.mobile-tab-page .insights-scroll {
    box-sizing: border-box !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  html body #profileDialog.mobile-tab-page .profile-summary,
  html body #profileDialog.mobile-tab-page .profile-overview,
  html body #profileDialog.mobile-tab-page .mobile-profile-hub,
  html body #profileDialog.mobile-tab-page .profile-activity-section {
    box-sizing: border-box !important;
    width: calc(100% - 8px) !important;
    margin-right: 4px !important;
    margin-left: 4px !important;
  }

  /* Theme screen: each control owns one explicit row; no legacy pseudo layer. */
  html body #personalizeDialog[open],
  html body #personalizeDialog[open] * {
    box-sizing: border-box !important;
  }

  html body #personalizeDialog .headline-editor {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 14px 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #personalizeDialog .headline-editor::before,
  html body #personalizeDialog .headline-editor::after,
  html body #personalizeDialog .headline-actions::before,
  html body #personalizeDialog .headline-actions::after {
    display: none !important;
    content: none !important;
  }

  html body #personalizeDialog #heroTitleInput {
    flex: 0 0 48px !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--os-line, #d9dadd) !important;
    border-radius: 12px !important;
    background: var(--os-surface, #fff) !important;
  }

  html body #personalizeDialog .headline-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #personalizeDialog .headline-actions > button {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    transform: none !important;
  }

  html body #personalizeDialog .random-title-controls {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Profile editor: label and input are siblings, eliminating the duplicated label box. */
  html body #profileEditDialog[open],
  html body #profileEditDialog[open] * {
    box-sizing: border-box !important;
  }

  html body #profileEditDialog .profile-edit-fields {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  html body #profileEditDialog .profile-name-field {
    position: static !important;
    display: grid !important;
    grid-template-rows: auto 48px !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #profileEditDialog .profile-name-field::before,
  html body #profileEditDialog .profile-name-field::after {
    display: none !important;
    content: none !important;
  }

  html body #profileEditDialog .profile-name-field > label {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--os-muted, #777a80) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  html body #profileEditDialog .profile-name-field > #profileNameInput {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--os-line, #d9dadd) !important;
    border-radius: 12px !important;
    color: var(--os-text, #161719) !important;
    background: var(--os-surface, #fff) !important;
    font-size: 17px !important;
    font-weight: 520 !important;
    transform: none !important;
  }
}