/*
 * Beibidi mobile experience.
 *
 * The desktop UI remains owned by styles.css. This layer establishes a
 * coherent tablet boundary and a distinct editorial mobile composition.
 */

:root {
  --mobile-gutter: 1rem;
  --mobile-control-size: 2.75rem;
  --mobile-app-bar-height: 4.35rem;
  --mobile-bottom-nav-height: 4.35rem;
  --mobile-sheet-radius: 1.6rem;
  --mobile-card-radius: 1.15rem;
  --mobile-card-padding: 1rem;
  --mobile-hairline: color-mix(in srgb, var(--color-border) 76%, transparent);
  --mobile-shadow-soft: 0 0.55rem 1.8rem color-mix(in srgb, var(--color-text) 8%, transparent);
  --mobile-shadow-sheet: 0 -1rem 3rem color-mix(in srgb, var(--color-text) 18%, transparent);
}

.mobile-bottom-nav,
.mobile-sheet,
.mobile-sheet-backdrop,
.reader-mobile-sheet-backdrop,
.read-pane-mobile-sheet-bar {
  display: none;
}

@media screen and (min-width: 701px) and (max-width: 980px) {
  .container {
    --mobile-gutter: 1.25rem;
  }

  .book-create-layout,
  .book-edit-shell,
  .language-editor-layout,
  .music-study-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .analytics-report,
  .book-archive-table-shell,
  .stats-table-shell,
  .unit-economics-table {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .shortcuts-btn,
  .stats-btn,
  .stats-language-option {
    min-height: var(--mobile-control-size) !important;
    box-sizing: border-box;
  }

  #reading-header .hamburger-btn,
  #reading-header .reading-home-btn,
  #reading-header .reading-undo-btn,
  #reading-header .reading-tools-toggle,
  #reading-header .quick-font-toggle,
  #reading-header .sentence-mode-mobile-btn,
  #reading-header .view-mode-icon-btn,
  #reading-header .read_page_nav {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media screen and (max-width: 700px) {
  :root {
    --mobile-gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  html {
    background: var(--color-bg);
    scroll-padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 1rem);
  }

  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-link) 7%, transparent), transparent 24rem),
      var(--color-bg);
  }

  body.has-mobile-shell {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  body.mobile-more-open {
    overflow: hidden;
  }

  .container {
    width: 100%;
    min-width: 0;
    padding-inline: var(--mobile-gutter);
  }

  .menu-bar {
    position: sticky;
    top: 0;
    z-index: 1050;
    min-height: var(--mobile-app-bar-height);
    box-sizing: border-box;
    margin-inline: calc(-1 * var(--mobile-gutter));
    padding:
      max(0.55rem, env(safe-area-inset-top))
      var(--mobile-gutter)
      0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    box-shadow: 0 0.3rem 1rem color-mix(in srgb, var(--color-text) 5%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
    backdrop-filter: blur(18px) saturate(1.18);
  }

  .menu-bar .header {
    min-width: 0;
  }

  .menu-bar .home-link {
    flex: none;
  }

  .menu-bar .lutelogo {
    width: 2.7rem;
    height: 2.7rem;
    margin-right: 0.45rem;
    object-fit: contain;
  }

  .menu-bar #luteTitle {
    max-width: calc(100vw - 5.75rem);
    font-size: clamp(1.15rem, 5.4vw, 1.45rem);
    letter-spacing: -0.025em;
  }

  .mobile-menu-toggle,
  #global_navigation,
  #mobile_menu_backdrop {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 2100;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
    box-sizing: border-box;
    padding:
      0.35rem
      max(0.35rem, env(safe-area-inset-right))
      max(0.35rem, env(safe-area-inset-bottom))
      max(0.35rem, env(safe-area-inset-left));
    border-top: 1px solid var(--mobile-hairline);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    box-shadow: 0 -0.5rem 1.8rem color-mix(in srgb, var(--color-text) 8%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
  }

  .mobile-bottom-nav__item {
    display: grid;
    grid-template-rows: 1.55rem auto;
    place-items: center;
    gap: 0.15rem;
    min-width: 0;
    min-height: 3.65rem;
    box-sizing: border-box;
    padding: 0.25rem 0.1rem;
    border: 0;
    border-radius: 0.9rem;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-bottom-nav__item:link,
  .mobile-bottom-nav__item:visited {
    color: var(--color-text-muted);
  }

  .mobile-bottom-nav__item.is-active,
  .mobile-bottom-nav__item[aria-current="page"] {
    background: color-mix(in srgb, var(--color-link) 10%, var(--color-surface));
    color: var(--color-text-strong);
  }

  .mobile-bottom-nav__icon {
    position: relative;
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    color: currentColor;
  }

  .mobile-bottom-nav__icon::before,
  .mobile-bottom-nav__icon::after {
    position: absolute;
    content: "";
  }

  .mobile-bottom-nav__icon--library::before {
    inset: 0.15rem 0.05rem;
    border: 2px solid currentColor;
    border-radius: 0.25rem;
    box-shadow: inset 0.35rem 0 0 color-mix(in srgb, currentColor 16%, transparent);
  }

  .mobile-bottom-nav__icon--new::before,
  .mobile-bottom-nav__icon--new::after {
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
  }

  .mobile-bottom-nav__icon--new::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .mobile-bottom-nav__icon--terms::before {
    inset: 0.08rem;
    border: 2px solid currentColor;
    border-radius: 50% 50% 45% 45%;
  }

  .mobile-bottom-nav__icon--terms::after {
    right: 0.05rem;
    bottom: 0.05rem;
    width: 0.45rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(48deg);
    transform-origin: right;
  }

  .mobile-bottom-nav__icon--stats::before {
    right: 0.08rem;
    bottom: 0.1rem;
    left: 0.08rem;
    height: 0.95rem;
    border-bottom: 2px solid currentColor;
    background:
      linear-gradient(to top, currentColor 0 100%) 0.05rem 100% / 0.22rem 48% no-repeat,
      linear-gradient(to top, currentColor 0 100%) 0.48rem 100% / 0.22rem 78% no-repeat,
      linear-gradient(to top, currentColor 0 100%) 0.91rem 100% / 0.22rem 100% no-repeat;
  }

  .mobile-bottom-nav__icon--more::before {
    top: 50%;
    left: 50%;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -0.48rem 0 currentColor, 0.48rem 0 currentColor;
    transform: translate(-50%, -50%);
  }

  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2140;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: color-mix(in srgb, var(--color-text-strong) 42%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms step-end;
  }

  .mobile-sheet {
    position: fixed;
    z-index: 2150;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    max-height: min(82dvh, 42rem);
    box-sizing: border-box;
    padding:
      0.55rem
      max(1rem, env(safe-area-inset-right))
      max(1.1rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--mobile-hairline);
    border-bottom: 0;
    border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
    background: var(--color-surface);
    box-shadow: var(--mobile-shadow-sheet);
    transform: translateY(calc(100% + 1rem));
    visibility: hidden;
    transition: transform 220ms ease, visibility 220ms step-end;
  }

  .mobile-more-open #mobile_more_backdrop,
  .mobile-term-details-open #term_mobile_details_backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease, visibility 0s;
  }

  .mobile-more-open .mobile-more-sheet {
    transform: translateY(0);
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }

  .mobile-term-details-open {
    overflow: hidden;
  }

  .mobile-term-details-open .terms-mobile-sheet {
    transform: translateY(0);
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }

  .mobile-sheet__handle {
    width: 2.75rem;
    height: 0.3rem;
    margin: 0 auto 0.55rem;
    border-radius: 999px;
    background: var(--color-border-strong);
  }

  .mobile-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
  }

  .mobile-sheet__eyebrow {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .mobile-sheet__header h2 {
    margin: 0.15rem 0 0;
    color: var(--color-text-strong);
    font-size: 1.45rem;
  }

  .mobile-sheet__close {
    display: inline-grid;
    width: var(--mobile-control-size);
    height: var(--mobile-control-size);
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
    font: inherit;
    font-size: 1.65rem;
    cursor: pointer;
  }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .mobile-more-grid a {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-height: 4.1rem;
    box-sizing: border-box;
    padding: 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    color: var(--color-text-strong);
    text-decoration: none;
  }

  .mobile-more-grid a > span {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-link) 11%, var(--color-surface));
    color: var(--color-link);
    font-weight: 850;
  }

  .mobile-more-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.84rem;
    line-height: 1.2;
  }

  /* Shared editorial composition */
  .book-cards-home,
  .book-create-page,
  .book-edit-page,
  .book-archive-page,
  .terms-page,
  .settings-page,
  .shortcuts-page,
  .language-settings-page,
  .language-editor-page,
  .stats-page,
  .account-page,
  .analytics-admin,
  .music-page,
  .music-study-page,
  .reading-notebook-page,
  .chapter-picker,
  .chapter-convert-page {
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-inline: 0 !important;
  }

  .book-create-hero,
  .book-edit-hero,
  .settings-hero,
  .shortcuts-hero,
  .language-settings-hero,
  .language-editor-hero,
  .stats-hero,
  .account-header,
  .analytics-header {
    gap: 0.6rem !important;
    margin-bottom: 0.85rem !important;
    padding: 0.85rem 0 0.95rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .book-create-hero h2,
  .book-edit-hero h2,
  .settings-hero h2,
  .shortcuts-hero h2,
  .language-settings-hero h2,
  .language-editor-hero h2,
  .stats-hero h2,
  .analytics-header h2 {
    margin-top: 0.15rem !important;
    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
    line-height: 1.12;
    letter-spacing: -0.035em;
  }

  .book-create-kicker,
  .book-edit-kicker,
  .settings-kicker,
  .shortcuts-kicker,
  .language-settings-kicker,
  .language-editor-kicker,
  .stats-kicker,
  .analytics-eyebrow {
    font-size: 0.68rem !important;
    letter-spacing: 0.09em !important;
  }

  .book-create-card,
  .book-edit-card,
  .settings-card,
  .shortcuts-card,
  .language-settings-panel,
  .language-empty-state,
  .language-editor-card,
  .stats-panel,
  .account-card,
  .analytics-report,
  .book-archive-card,
  .chapter-picker__section,
  .chapter-convert-card {
    min-width: 0;
    padding: var(--mobile-card-padding) !important;
    border: 1px solid var(--mobile-hairline) !important;
    border-radius: var(--mobile-card-radius) !important;
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-bg)) !important;
    box-shadow: var(--mobile-shadow-soft) !important;
  }

  .settings-grid,
  .shortcuts-grid,
  .book-create-layout,
  .book-edit-shell,
  .book-edit-grid,
  .book-edit-inline-grid,
  .book-create-field-grid,
  .language-settings-summary,
  .language-editor-grid,
  .stats-summary,
  .stats-filter-grid,
  .analytics-metric-grid,
  .analytics-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .book-create-layout,
  .book-edit-shell,
  .settings-grid,
  .shortcuts-grid {
    gap: 0.85rem !important;
  }

  .book-create-context,
  .book-edit-note {
    padding: 0.8rem !important;
    border-radius: 0.9rem !important;
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .book-create-mode-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .book-create-mode-option {
    min-height: 4.35rem !important;
    padding: 0.85rem 1rem !important;
  }

  .book-create-actions,
  .book-edit-actions,
  .settings-actions,
  .shortcuts-actions,
  .language-editor-actions {
    position: sticky !important;
    z-index: 900;
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 0.45rem);
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    width: auto !important;
    margin: 1rem -0.35rem 0 !important;
    padding: 0.55rem !important;
    border: 1px solid var(--mobile-hairline);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    box-shadow: 0 0.7rem 2rem color-mix(in srgb, var(--color-text) 14%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .book-create-actions > *,
  .book-edit-actions > *,
  .settings-actions > *,
  .shortcuts-actions > *,
  .language-editor-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--mobile-control-size) !important;
    box-sizing: border-box;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  [contenteditable="true"] {
    max-width: 100%;
    min-height: var(--mobile-control-size);
    box-sizing: border-box;
    font-size: 16px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }

  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .settings-field:has(input[type="checkbox"]),
  .shortcuts-option:has(input[type="checkbox"]) {
    min-height: var(--mobile-control-size);
    box-sizing: border-box;
  }

  /* Library */
  .book-cards-home {
    padding-top: 0.35rem;
  }

  .book-cards-header {
    gap: 0.75rem !important;
    margin-bottom: 0.9rem !important;
  }

  .book-cards-controls {
    gap: 0.55rem !important;
  }

  .book-cards-language-trigger,
  .book-cards-search,
  .book-cards-secondary-btn,
  .book-cards-cta {
    min-height: var(--mobile-control-size) !important;
    border-radius: 0.9rem !important;
  }

  .book-cards-grid {
    gap: 0.85rem !important;
  }

  .book-card {
    min-height: 0 !important;
    border-radius: var(--mobile-card-radius) !important;
    box-shadow: var(--mobile-shadow-soft) !important;
  }

  .book-card-top {
    min-height: 6.8rem !important;
    max-height: 8.6rem;
  }

  .book-card-body {
    gap: 0.55rem !important;
    padding: 0.85rem !important;
  }

  .book-card-actions-shell,
  .book-card-tts-btn,
  .book-card-select {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .book-card-actions-trigger,
  .book-card-tts-btn,
  .book-card-tags-trigger,
  .book-card-select {
    min-width: var(--mobile-control-size) !important;
    min-height: var(--mobile-control-size) !important;
  }

  /* Terms: a compact information list, not a desktop row unfolded vertically. */
  .terms-page {
    gap: 0.8rem !important;
  }

  .terms-page-toolbar,
  .terms-page-card {
    padding: 0.85rem !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  .terms-page-card--filters:not(:has(.terms-filter-panel:not(.hide))) {
    padding-bottom: 0.85rem !important;
  }

  .terms-page-card--table table#termtable tbody {
    gap: 0.65rem !important;
  }

  .terms-page-card--table table#termtable tbody tr {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto !important;
    border-radius: 1rem !important;
    box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--color-text) 5%, transparent);
  }

  .terms-page-card--table table#termtable tbody td {
    padding: 0.65rem 0.75rem !important;
  }

  .terms-page-card--table .terms-col-select {
    padding-top: 0.9rem !important;
  }

  .terms-page-card--table .terms-col-term {
    grid-column: 2 / 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.65rem;
  }

  .terms-page-card--table .terms-cell-term-wrap {
    grid-column: 1 / -1;
  }

  .terms-page-card--table .terms-col-translation {
    grid-column: 2 !important;
  }

  .terms-page-card--table .terms-col-status {
    grid-column: 3 !important;
    min-width: 7.1rem;
  }

  .terms-page-card--table .terms-col-select input {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }

  .terms-page-card--table .terms-cell-link {
    font-size: 1.2rem !important;
  }

  .terms-page-card--table .terms-term-usage-btn {
    min-width: var(--mobile-control-size) !important;
    min-height: var(--mobile-control-size) !important;
    opacity: 1 !important;
  }

  .terms-page-card--table .terms-col-translation,
  .terms-page-card--table .terms-col-status {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  .terms-mobile-details-toggle {
    width: auto;
    min-width: var(--mobile-control-size);
    min-height: var(--mobile-control-size) !important;
    margin: 0 !important;
  }

  .terms-mobile-frequency {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
  }

  .terms-mobile-details {
    display: none !important;
  }

  .terms-mobile-sheet__content {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    gap: 0;
    margin: 0;
  }

  .terms-mobile-sheet__content dt,
  .terms-mobile-sheet__content dd {
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-muted);
  }

  .terms-mobile-sheet__content dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
  }

  .terms-mobile-sheet__content dd {
    overflow-wrap: anywhere;
    color: var(--color-text-strong);
  }

  /* Statistics */
  .stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  .stats-summary-item {
    min-width: 0;
    padding: 0.85rem !important;
    border-radius: 1rem !important;
  }

  .stats-summary-value {
    overflow-wrap: anywhere;
    font-size: clamp(1.25rem, 7vw, 1.65rem) !important;
  }

  .stats-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .stats-btn {
    min-width: 0;
    min-height: 44px !important;
    padding-inline: 0.55rem !important;
    box-sizing: border-box;
    font-size: 0.82rem !important;
  }

  body[data-page-path^="/stats/"] .stats-btn,
  body[data-page-path^="/stats/"] .stats-language-option,
  body[data-page-path^="/language/"] .language-settings-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  .stats-language-options {
    flex-wrap: nowrap !important;
    margin-inline: -0.25rem;
    padding: 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .stats-language-option {
    min-height: var(--mobile-control-size) !important;
    flex: none;
    scroll-snap-align: start;
  }

  .stats-chart-shell {
    width: 100% !important;
    min-height: 15rem !important;
    height: 15rem !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  .stats-chart-shell canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 15rem !important;
  }

  .stats-table-shell {
    overflow: visible !important;
  }

  .statsWordsRead {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .statsWordsRead thead {
    display: none;
  }

  .statsWordsRead tbody {
    display: grid;
    gap: 0.7rem;
  }

  .statsWordsRead tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--mobile-hairline);
    border-radius: 1rem;
    background: var(--color-surface);
  }

  .statsWordsRead td {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 3.75rem;
    box-sizing: border-box;
    padding: 0.65rem !important;
    border: 0 !important;
    border-top: 1px solid var(--color-border-muted) !important;
    text-align: left !important;
  }

  .statsWordsRead td:first-child,
  .statsWordsRead td:nth-child(2) {
    border-top: 0 !important;
    background: var(--color-surface-muted);
  }

  .statsWordsRead td::before {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    content: attr(data-mobile-label);
  }

  .stats-count {
    min-width: 0 !important;
    text-align: left !important;
  }

  /* Settings, account, languages and keyboard-oriented screens */
  .settings-card-header,
  .shortcuts-card-header,
  .language-settings-panel-header,
  .stats-panel-header,
  .account-card-header {
    gap: 0.55rem !important;
    margin-bottom: 0.8rem !important;
  }

  .settings-pill,
  .shortcuts-pill,
  .language-settings-pill,
  .stats-pill {
    font-size: 0.64rem !important;
  }

  .settings-field,
  .shortcuts-option {
    padding: 0.75rem 0 !important;
  }

  .settings-control,
  .settings-control input,
  .settings-control select {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .settings-field:has(input[type="checkbox"]) {
    display: block !important;
    min-height: 0;
  }

  .settings-field:has(input[type="checkbox"]) > .settings-label {
    display: none !important;
  }

  .settings-field:has(input[type="checkbox"]) .settings-control {
    display: block;
    width: 100% !important;
  }

  .settings-field:has(input[type="checkbox"]) .settings-checkbox {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: var(--mobile-control-size);
    box-sizing: border-box;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--color-surface-muted);
  }

  .language-settings-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .language-stat {
    min-width: 0;
    padding: 0.75rem !important;
  }

  .language-stat-value {
    overflow-wrap: anywhere;
    font-size: 1.25rem !important;
  }

  .language-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .language-card {
    min-height: 0 !important;
    padding: 0.85rem !important;
    border-radius: 1rem !important;
  }

  /* Legacy operational surfaces */
  table[data-mobile-cards] {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
  }

  table[data-mobile-cards] colgroup,
  table[data-mobile-cards] thead {
    display: none !important;
  }

  table[data-mobile-cards] tbody {
    display: grid !important;
    gap: 0.7rem;
    width: 100% !important;
  }

  table[data-mobile-cards] tbody tr {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    border: 1px solid var(--mobile-hairline);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: var(--mobile-shadow-soft);
  }

  table[data-mobile-cards] tbody td {
    display: grid !important;
    grid-template-columns: minmax(6.5rem, 0.72fr) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.9rem;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border-muted) !important;
    overflow-wrap: anywhere;
  }

  table[data-mobile-cards] tbody td:last-child {
    border-bottom: 0 !important;
  }

  table[data-mobile-cards] tbody td::before {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    content: attr(data-mobile-label);
  }

  table[data-mobile-cards] tbody td:empty {
    display: none !important;
  }

  table[data-mobile-cards] a,
  table[data-mobile-cards] button,
  table[data-mobile-cards] input:not([type="hidden"]),
  table[data-mobile-cards] select {
    min-height: var(--mobile-control-size);
    box-sizing: border-box;
  }

  .book-archive-table-shell,
  .analytics-report,
  .unit-economics-table,
  body[data-page-path^="/bookmarks/"] .container > :has(table),
  body[data-page-path^="/termtag/"] .container > :has(table),
  body[data-page-path^="/termimport/"] .container > :has(table),
  body[data-page-path^="/ankiexport/"] .container > :has(table),
  body[data-page-path^="/backup/"] .container > :has(table) {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .analytics-toolbar,
  .analytics-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .analytics-tabs {
    margin-inline: calc(-1 * var(--mobile-gutter));
    padding-inline: var(--mobile-gutter);
    border-inline: 0;
    border-radius: 0;
    scroll-snap-type: x proximity;
  }

  .analytics-tabs a {
    min-height: var(--mobile-control-size);
    box-sizing: border-box;
    scroll-snap-align: start;
  }

  .analytics-report table,
  .unit-economics-table table {
    min-width: 48rem;
  }

  .analytics-report th:first-child,
  .analytics-report td:first-child,
  .unit-economics-table th:first-child,
  .unit-economics-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface);
    box-shadow: 1px 0 0 var(--color-border);
  }

  /* Reader becomes a content-first app with contextual sheets. */
  body.mobile-shell-hidden {
    padding-bottom: 0;
  }

  body.mobile-shell-hidden .container {
    padding-inline: 0;
  }

  #reading-header {
    min-height: 4.1rem !important;
  }

  #reading-header .reading_header_container {
    padding-inline: 0.5rem !important;
  }

  body > .reader-tools-mobile-docked {
    position: fixed !important;
    z-index: 1650;
    right: max(0.55rem, env(safe-area-inset-right)) !important;
    bottom: max(0.55rem, env(safe-area-inset-bottom)) !important;
    left: max(0.55rem, env(safe-area-inset-left)) !important;
    display: flex !important;
    width: auto !important;
    min-height: 3.5rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 0.4rem !important;
    margin: 0 !important;
    padding: 0.38rem 0.5rem;
    border: 1px solid var(--mobile-hairline);
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--reading-control-bg) 98%, var(--color-surface));
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--color-text) 14%, transparent);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }

  body.reader-mobile-sheet-open > .reader-tools-mobile-docked {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 1rem));
  }

  .reader-tools-mobile-docked .reader-header-left-appearance-mobile-docked {
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

  .reader-tools-mobile-docked .audio-player-trigger,
  .reader-tools-mobile-docked #play-btn.audio-player-trigger {
    width: var(--mobile-control-size) !important;
    min-width: var(--mobile-control-size) !important;
    height: var(--mobile-control-size) !important;
    min-height: var(--mobile-control-size) !important;
    flex: 0 0 var(--mobile-control-size) !important;
    border-radius: 999px !important;
  }

  .reader-tools-mobile-docked .audio-player-trigger::before {
    width: 1.15rem;
    height: 1.15rem;
  }

  body.reader-mobile-sheet-open {
    overflow: hidden;
  }

  div.term-hover-tooltip,
  div.ui-tooltip.term-hover-tooltip {
    display: none !important;
  }

  .reader-mobile-sheet-backdrop {
    position: fixed;
    z-index: 1590;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--color-text) 24%, transparent);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  body.reader-mobile-sheet-open .reader-mobile-sheet-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .read-pane-mobile-sheet-bar {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    grid-row: 1;
    align-items: center;
    min-height: 3.35rem;
    padding: 0.25rem 0.65rem;
    border-bottom: 1px solid var(--mobile-hairline);
    background: var(--color-surface);
    box-sizing: border-box;
  }

  .read-pane-mobile-sheet-bar strong {
    overflow: hidden;
    color: var(--color-text-strong);
    font-size: 0.9rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .read-pane-mobile-sheet-handle {
    justify-self: start;
    width: 1.8rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--color-border-strong);
  }

  .read-pane-mobile-sheet-close {
    display: grid;
    width: var(--mobile-control-size);
    min-width: var(--mobile-control-size);
    height: var(--mobile-control-size);
    min-height: var(--mobile-control-size);
    place-items: center;
    justify-self: end;
    padding: 0;
    border: 1px solid var(--reading-control-border);
    border-radius: 999px;
    background: var(--reading-control-bg);
    color: var(--reading-control-text);
    font: inherit;
    font-size: 1.6rem;
    line-height: 1;
  }

  #reading-header .hamburger-btn,
  #reading-header .reading-home-btn,
  #reading-header .reading-undo-btn,
  #reading-header .reading-tools-toggle,
  #reading-header .quick-font-toggle,
  #reading-header .reading-font-family-btn,
  #reading-header .page-sentence-translation-toggle-btn,
  #reading-header .page-sentence-audio-toggle-btn,
  #reading-header .annotation-highlighter-btn,
  #reading-header .sentence-ai-toggle-btn,
  #reading-header .view-mode-icon-btn,
  #reading-header .reading-chapter-icon-btn,
  #reading-header .read_page_nav,
  #reading-header .sentence-mode-mobile-btn,
  .reader-tools-mobile-docked > .reading-tools-toggle,
  .reader-tools-mobile-docked > .reader-header-left-appearance > .quick-font-control > .quick-font-toggle,
  .reader-tools-mobile-docked > .reading-tools-panel > .quick-font-control > .quick-font-toggle,
  .reader-tools-mobile-docked > .sentence-mode-mobile > .sentence-mode-mobile-btn {
    min-width: var(--mobile-control-size) !important;
    width: var(--mobile-control-size) !important;
    min-height: var(--mobile-control-size) !important;
    height: var(--mobile-control-size) !important;
  }

  #reading-header .reading-undo-btn {
    display: none !important;
  }

  #reading-header .read-slide-container {
    grid-template-columns: 44px minmax(0, 1fr) 44px minmax(4ch, auto) !important;
    gap: 0.4rem !important;
    min-height: 2.75rem;
    padding: 0.2rem 0 !important;
  }

  #read_pane_left {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #thetext {
    padding-inline: 1.05rem !important;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)) !important;
    font-size: max(1.08rem, var(--reading-font-size, 1.08rem));
    line-height: max(1.9, var(--reading-line-height, 1.9));
  }

  body > .sentence-mode-picker-mobile-docked {
    position: fixed !important;
    z-index: 1680;
    top: auto !important;
    right: max(0.65rem, env(safe-area-inset-right)) !important;
    bottom: calc(4.85rem + env(safe-area-inset-bottom)) !important;
    left: max(0.65rem, env(safe-area-inset-left)) !important;
    display: grid;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 6.25rem - env(safe-area-inset-top)) !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem !important;
    overflow-y: auto;
    padding: 1rem !important;
    border-radius: 1.25rem !important;
    background: var(--color-surface) !important;
    box-shadow: var(--mobile-shadow-sheet) !important;
  }

  body > .sentence-mode-picker-mobile-docked.hide {
    display: none !important;
  }

  .sentence-mode-picker-mobile-docked .sentence-mode-picker-copy {
    gap: 0.3rem;
  }

  .sentence-mode-picker-mobile-docked .sentence-mode-picker-title {
    font-size: 1.05rem;
  }

  .sentence-mode-picker-mobile-docked .sentence-mode-picker-help {
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .sentence-mode-picker-mobile-docked .sentence-mode-picker-cancel {
    width: 100%;
    min-height: var(--mobile-control-size);
  }

  .reader-tools-mobile-docked .quick-font-menu,
  .reader-tools-mobile-docked .sentence-mode-mobile-menu {
    position: fixed !important;
    z-index: 1690 !important;
    top: auto !important;
    right: max(0.55rem, env(safe-area-inset-right)) !important;
    bottom: calc(4.85rem + env(safe-area-inset-bottom)) !important;
    left: max(0.55rem, env(safe-area-inset-left)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 6.25rem - env(safe-area-inset-top)) !important;
    overflow-y: auto;
    box-sizing: border-box;
    transform: none !important;
    border-radius: 1.25rem !important;
    background: var(--reading-control-bg) !important;
    box-shadow: var(--mobile-shadow-sheet) !important;
  }

  .reader-tools-mobile-docked .sentence-mode-mobile-menu {
    padding: 0.55rem !important;
  }

  .reader-tools-mobile-docked .sentence-mode-mobile-menu button {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: var(--mobile-control-size) !important;
    border-radius: 0.8rem;
  }

  .reader-tools-mobile-docked .quick-font-menu button {
    width: auto !important;
    height: auto !important;
    min-height: var(--mobile-control-size) !important;
  }

  .reader-tools-mobile-docked .quick-font-menu .reading-font-family-option {
    width: 100% !important;
  }

  div#read_pane_right {
    z-index: 1600 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: min(76dvh, 44rem) !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
    grid-template-rows: auto minmax(7.5rem, 22%) minmax(0, 1fr) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    box-shadow: var(--mobile-shadow-sheet) !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    transform: translateY(calc(100% + 1rem)) !important;
  }

  div#read_pane_right.open-dict {
    transform: translateY(0) !important;
  }

  div#read_pane_right > .wordframecontainer {
    grid-row: 2 !important;
    min-height: 0;
  }

  div#read_pane_right > .read-sidebar-lower {
    grid-row: 3 !important;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] {
    grid-template-rows: auto auto auto !important;
    align-content: start;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] .dictcontainer {
    grid-row: 2 !important;
    height: auto !important;
    min-height: 18rem;
    overflow: visible;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] .dictcontainer-header {
    display: none;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] #dictframes,
  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] .dictframe {
    height: 14rem !important;
    min-height: 14rem !important;
    flex: 0 0 14rem;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] #dictframes {
    position: relative;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] #dictframes:has(.dict-active[aria-busy="true"])::before {
    content: attr(data-loading-label);
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    background:
      linear-gradient(
        110deg,
        var(--reading-surface) 8%,
        color-mix(in srgb, var(--reading-surface-muted) 76%, var(--reading-surface)) 18%,
        var(--reading-surface) 33%
      );
    background-size: 220% 100%;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    animation: mobile-dictionary-loading 1.25s ease-in-out infinite;
  }

  .read-sidebar-lower.annotation-sidebar-active[data-sidebar-view="dictionary"] #read_sidebar_status_dock {
    grid-row: 3 !important;
    margin-top: 0.6rem;
  }

  @keyframes mobile-dictionary-loading {
    to {
      background-position-x: -220%;
    }
  }

  div#read_pane_right > .read-pane-right-close-btn {
    display: none !important;
  }

  .annotation-sidebar-switcher {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 !important;
    padding: 0.75rem 1rem 0.55rem;
    background: var(--color-surface);
  }

  .annotation-sidebar-tab {
    min-height: var(--mobile-control-size) !important;
  }

  .dict-btn,
  .dict-menu-item,
  .dictcontainer-manage {
    min-height: var(--mobile-control-size) !important;
    box-sizing: border-box;
  }

  #reading_menu {
    width: min(92vw, 24rem) !important;
  }

  #reading_menu .reading-menu-item,
  #reading_menu button,
  #reading_menu a {
    min-height: var(--mobile-control-size);
    box-sizing: border-box;
  }

  .reading-tools-panel {
    top: auto !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    justify-content: space-between !important;
    padding: 0.55rem !important;
  }
}

@media screen and (max-width: 340px) {
  :root {
    --mobile-gutter: 0.75rem;
  }

  .mobile-bottom-nav__item {
    font-size: 0.6rem;
  }

  .mobile-more-grid,
  .stats-summary,
  .stats-actions,
  .language-settings-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mobile-more-grid a {
    min-height: 3.6rem;
  }

  .terms-container .terms-table tbody tr {
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
  }

  .terms-container .terms-col-term,
  .terms-container .terms-col-translation,
  .terms-container .terms-col-status {
    grid-column: 2 !important;
  }

  .terms-container .terms-col-status {
    min-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sheet,
  .mobile-sheet-backdrop,
  .mobile-bottom-nav__item {
    transition-duration: 0.01ms !important;
  }
}