/* v1.8.35 — native mobile/foldable shell. Desktop selectors remain in styles-v1.8.29.css. */

.mobile-settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.mobile-settings-form-grid > label {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.mobile-settings-form-grid > label > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mobile-settings-form-grid > label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.mobile-settings-form-grid input,
.mobile-settings-form-grid select {
  width: 100%;
  min-height: 44px;
}
.mobile-settings-form-grid small { color: var(--muted); }
.mobile-settings-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}
.mobile-settings-switches .check-row {
  flex: 1 1 230px;
  min-height: 48px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.mobile-settings-preview {
  --preview-font: 16px;
  --preview-heading-font: 20px;
  --preview-card-title-font: 14px;
  --preview-button-font: 14px;
  --preview-navigation-font: 11px;
  --preview-gap: 10px;
  --preview-button: 48px;
  --preview-nav: 72px;
  --preview-icon: 24px;
  --preview-padding: 16px;
  --preview-radius: 14px;
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(220px, 1fr);
  align-items: end;
  gap: var(--preview-gap);
  min-height: 220px;
  padding: var(--preview-padding);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--preview-radius);
  background: linear-gradient(160deg, var(--panel), var(--bg));
  font-size: var(--preview-font);
}
.mobile-settings-preview-card {
  display: grid;
  gap: var(--preview-gap);
  padding: var(--preview-gap);
  border: 1px solid var(--line-bright);
  border-radius: var(--preview-radius);
  background: var(--panel-2);
}
.mobile-settings-preview-card > span {
  font-size: var(--preview-card-title-font);
  font-weight: 800;
}
.mobile-settings-preview-card > div {
  aspect-ratio: 907 / 1306;
  border-radius: calc(var(--preview-radius) * .65);
  background: linear-gradient(145deg, var(--gold), #4b2e17 64%, #17100a);
}
.mobile-settings-preview-card button {
  min-height: var(--preview-button);
  border: 0;
  border-radius: calc(var(--preview-radius) * .65);
  background: var(--gold);
  color: #17100a;
  font-family: inherit;
  font-size: var(--preview-button-font);
  font-weight: 800;
}
.mobile-settings-preview-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: var(--preview-nav);
  border: 1px solid var(--line-bright);
  border-radius: var(--preview-radius);
  background: var(--panel-2);
}
.mobile-settings-preview-nav span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  font-size: var(--preview-icon);
}
.mobile-settings-preview-nav small { font-size: var(--preview-navigation-font); }
.mobile-settings-actions { justify-content: flex-start; margin-top: 16px; }
.mobile-settings-admin-link {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.mobile-settings-admin-link p { margin: 0; }

@media (max-width: 1200px) {
  html.mobile-device-layout .desktop-filter-title { display: none !important; }
  html.mobile-device-layout .mobile-filter-title { display: inline !important; }
  :root {
    --mobile-card-preferred-width: 154px;
    --mobile-phone-card-columns: 2;
    --mobile-wide-card-columns: 4;
    --mobile-card-columns: 2;
    --mobile-card-gap: 10px;
    --mobile-font-size: 16px;
    --mobile-heading-font-size: 20px;
    --mobile-card-title-font-size: 14px;
    --mobile-button-font-size: 14px;
    --mobile-navigation-font-size: 11px;
    --mobile-button-height: 48px;
    --mobile-nav-height: 72px;
    --mobile-icon-size: 24px;
    --mobile-image-size: 100%;
    --mobile-page-padding: 16px;
    --mobile-corner-radius: 14px;
    --mobile-animation-speed: 180ms;
    --mobile-safe-padding: 0px;
    --mobile-header-height: 54px;
    --mobile-viewport-height: 100dvh;
    --mobile-header-total: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px) + var(--mobile-safe-padding));
    --mobile-page-offset: calc(env(safe-area-inset-top, 0px) + var(--mobile-safe-padding));
    --mobile-nav-total: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--mobile-safe-padding));
  }

  html.mobile-device-layout,
  html.mobile-device-layout body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }
  html.mobile-device-layout body {
    font-size: var(--mobile-font-size) !important;
    line-height: 1.45;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  html.mobile-device-layout body,
  html.mobile-device-layout .app-shell,
  html.mobile-device-layout .main-content,
  html.mobile-device-layout .filters,
  html.mobile-device-layout dialog {
    transform: none !important;
    zoom: 1 !important;
  }

  /* The desktop header is absent on mobile. The rebuilt header exists only for administrators. */
  html.mobile-device-layout .topbar { display: none !important; }
  html.mobile-device-layout .mobile-page-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 2200 !important;
    display: none !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--mobile-header-total);
    box-sizing: border-box;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--mobile-safe-padding));
    padding-right: calc(max(var(--mobile-page-padding), env(safe-area-inset-right, 0px)) + var(--mobile-safe-padding));
    padding-left: calc(max(var(--mobile-page-padding), env(safe-area-inset-left, 0px)) + var(--mobile-safe-padding));
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(18px);
  }
  html.mobile-device-layout.mobile-admin-layout {
    --mobile-page-offset: var(--mobile-header-total);
  }
  html.mobile-device-layout.mobile-admin-layout .mobile-page-header {
    display: flex !important;
  }
  html.mobile-device-layout .mobile-page-header h1 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font: 800 var(--mobile-heading-font-size)/1.1 system-ui, sans-serif;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.mobile-device-layout .mobile-page-header .button {
    min-height: 38px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: var(--mobile-button-font-size) !important;
  }
  html.mobile-device-layout .app-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-top: var(--mobile-page-offset) !important;
  }
  html.mobile-device-layout #sidebarMasterToggle { display: none !important; }

  /* Five-item native bottom navigation with Notifications in the centre. */
  html.mobile-device-layout .mobile-app-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 2300 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: var(--mobile-nav-height) !important;
    height: auto !important;
    padding: 0 max(env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px))
      calc(env(safe-area-inset-bottom, 0px) + var(--mobile-safe-padding)) !important;
    border-top: 1px solid var(--line) !important;
    background: var(--bg) !important;
    background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(20px) !important;
  }
  html.mobile-device-layout .mobile-app-nav button {
    position: relative;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: var(--mobile-nav-height) !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    font: 700 var(--mobile-navigation-font-size)/1.05 system-ui, sans-serif !important;
    transition: color var(--mobile-animation-speed) ease, background var(--mobile-animation-speed) ease !important;
  }
  html.mobile-device-layout .mobile-app-nav button > span {
    font-size: var(--mobile-icon-size) !important;
    line-height: 1 !important;
  }
  html.mobile-device-layout .mobile-app-nav button.active,
  html.mobile-device-layout .mobile-app-nav button[aria-current="page"] {
    color: var(--gold-bright) !important;
    background: linear-gradient(to top, color-mix(in srgb, var(--gold) 13%, transparent), transparent 72%) !important;
  }
  html.mobile-device-layout .mobile-app-nav button b {
    position: absolute !important;
    top: 5px !important;
    right: calc(50% - 22px) !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #c53c36 !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 17px !important;
  }
  html.mobile-device-layout.mobile-labels-hidden .mobile-app-nav button small { display: none !important; }

  html.mobile-device-layout .main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: var(--mobile-page-padding) !important;
    padding-right: calc(max(var(--mobile-page-padding), env(safe-area-inset-right, 0px)) + var(--mobile-safe-padding)) !important;
    padding-bottom: calc(var(--mobile-nav-total) + var(--mobile-page-padding)) !important;
    padding-left: calc(max(var(--mobile-page-padding), env(safe-area-inset-left, 0px)) + var(--mobile-safe-padding)) !important;
    background: var(--bg) !important;
  }
  html.mobile-device-layout .button,
  html.mobile-device-layout button:not(.text-button):not(.mobile-app-nav button),
  html.mobile-device-layout input,
  html.mobile-device-layout select {
    min-height: var(--mobile-button-height);
    border-radius: var(--mobile-corner-radius);
  }
  html.mobile-device-layout .button,
  html.mobile-device-layout button:not(.text-button):not(.mobile-app-nav button) {
    font-size: var(--mobile-button-font-size) !important;
  }
  html.mobile-device-layout textarea { border-radius: var(--mobile-corner-radius); }

  /* Cards page. */
  html.mobile-device-layout #archivePage .hero { display: none !important; }
  html.mobile-device-layout #archivePage {
    display: block !important;
    min-height: calc(100dvh - var(--mobile-page-offset)) !important;
  }
  html.mobile-device-layout #archivePage .results-toolbar {
    position: sticky !important;
    top: var(--mobile-page-offset) !important;
    z-index: 40 !important;
    display: grid !important;
    gap: 10px !important;
    width: calc(100% + 2 * var(--mobile-page-padding)) !important;
    margin: calc(-1 * var(--mobile-page-padding)) calc(-1 * var(--mobile-page-padding)) var(--mobile-page-padding) !important;
    padding: 11px var(--mobile-page-padding) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: var(--bg) !important;
    background: color-mix(in srgb, var(--bg) 95%, transparent) !important;
    backdrop-filter: blur(18px) !important;
  }
  html.mobile-device-layout #archivePage .results-toolbar p { margin: 0 !important; }
  html.mobile-device-layout #archivePage .toolbar-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html.mobile-device-layout #archivePage .toolbar-controls label {
    min-width: 0 !important;
    font-size: .7rem !important;
  }
  html.mobile-device-layout #archivePage .toolbar-controls select {
    width: 100% !important;
    min-width: 0 !important;
  }
  html.mobile-device-layout #activeFilters {
    gap: 7px !important;
    margin-bottom: var(--mobile-page-padding) !important;
  }
  html.mobile-device-layout #cardGrid,
  html.mobile-device-layout #favouritesPageGrid,
  html.mobile-device-layout #recentPageGrid {
    display: grid !important;
    grid-template-columns: repeat(var(--mobile-card-columns), minmax(0, 1fr)) !important;
    gap: var(--mobile-card-gap) !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }
  html.mobile-device-layout #cardGrid.detailed { grid-template-columns: 1fr !important; max-width: 100% !important; }
  html.mobile-device-layout #cardGrid .card-tile,
  html.mobile-device-layout #favouritesPageGrid .card-tile,
  html.mobile-device-layout #recentPageGrid .card-tile {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: center !important;
    border-radius: var(--mobile-corner-radius) !important;
    font-size: inherit !important;
    transform: none !important;
    transition: border-color var(--mobile-animation-speed) ease, box-shadow var(--mobile-animation-speed) ease !important;
  }
  html.mobile-device-layout #cardGrid .card-image-button,
  html.mobile-device-layout #favouritesPageGrid .card-image-button,
  html.mobile-device-layout #recentPageGrid .card-image-button {
    width: var(--mobile-image-size) !important;
    margin-inline: auto !important;
    border-radius: calc(var(--mobile-corner-radius) - 1px) calc(var(--mobile-corner-radius) - 1px) 0 0 !important;
  }
  html.mobile-device-layout #cardGrid .card-image-button img,
  html.mobile-device-layout #favouritesPageGrid .card-image-button img,
  html.mobile-device-layout #recentPageGrid .card-image-button img {
    transform: none !important;
    transition: opacity var(--mobile-animation-speed) ease !important;
  }
  html.mobile-device-layout #cardGrid .card-body { padding: clamp(6px, calc(var(--mobile-page-padding) * .65), 14px) !important; }
  html.mobile-device-layout #cardGrid .card-body h2 { font-size: var(--mobile-card-title-font-size) !important; }
  html.mobile-device-layout #cardGrid .card-kicker,
  html.mobile-device-layout #cardGrid .card-tags { font-size: .65em !important; }
  html.mobile-device-layout #cardGrid .card-actions button,
  html.mobile-device-layout #cardGrid .archive-deck-controls button {
    min-height: var(--mobile-button-height) !important;
  }
  html.mobile-device-layout #relatedCards.related-card-list {
    grid-template-columns: repeat(var(--mobile-card-columns), minmax(0, 1fr)) !important;
    gap: var(--mobile-card-gap) !important;
    width: 100% !important;
  }
  html.mobile-device-layout #relatedCards .related-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: var(--mobile-corner-radius) !important;
  }

  /* Filters is a real full-screen page, never a scaled drawer. */
  html.mobile-device-layout body.filters-open {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  html.mobile-device-layout #scrim { display: none !important; }
  html.mobile-device-layout #filtersPanel.filters,
  html.mobile-device-layout.mobile-filter-page-open #filtersPanel.filters.open {
    position: fixed !important;
    top: var(--mobile-page-offset) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 2100 !important;
    display: none !important;
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    height: calc(var(--mobile-viewport-height) - var(--mobile-page-offset) - var(--mobile-nav-total)) !important;
    min-height: 0 !important;
    max-height: calc(var(--mobile-viewport-height) - var(--mobile-page-offset) - var(--mobile-nav-total)) !important;
    padding: 0 var(--mobile-page-padding) var(--mobile-page-padding) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    grid-column: 1 / -1 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bg) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.mobile-device-layout #filtersPanel.filters.open,
  html.mobile-device-layout.mobile-filter-page-open #filtersPanel.filters.open {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }
  html.mobile-device-layout #filtersPanel .filter-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 58px !important;
    margin: 0 calc(-1 * var(--mobile-page-padding)) 12px !important;
    padding: 0 var(--mobile-page-padding) !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--bg) !important;
    background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
    backdrop-filter: blur(16px) !important;
  }
  html.mobile-device-layout #filtersPanel .filter-header h2 { font: 800 var(--mobile-heading-font-size)/1 system-ui, sans-serif !important; }
  html.mobile-device-layout #filtersPanel .filter-section {
    margin-bottom: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--mobile-corner-radius) !important;
    background: var(--panel) !important;
  }
  html.mobile-device-layout #filtersPanel .filter-section > summary { min-height: var(--mobile-button-height) !important; padding: 12px !important; }
  html.mobile-device-layout #filtersPanel .filter-group-body { padding: 4px 12px 14px !important; }
  html.mobile-device-layout #filtersPanel .filter-chip { min-height: 38px !important; padding: 8px 11px !important; }

  /* Deck page. */
  html.mobile-device-layout #deckPage .deck-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-page-padding) !important;
    width: 100% !important;
  }
  html.mobile-device-layout #deckPage .deck-library-panel,
  html.mobile-device-layout #deckPage .deck-editor,
  html.mobile-device-layout #deckPage .deck-mode-toolbar,
  html.mobile-device-layout #deckPage .deck-page-header,
  html.mobile-device-layout #deckPage .deck-command-bar,
  html.mobile-device-layout #deckPage .deck-filter-bar,
  html.mobile-device-layout #deckPage .current-deck-collapsible {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: var(--mobile-corner-radius) !important;
  }
  html.mobile-device-layout #deckPage .deck-library-panel {
    position: static !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html.mobile-device-layout #deckPage .deck-page-header,
  html.mobile-device-layout #deckPage .deck-command-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: var(--mobile-page-padding) !important;
    background: var(--panel) !important;
  }
  html.mobile-device-layout #deckPage .deck-page-actions,
  html.mobile-device-layout #deckPage .deck-command-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }
  html.mobile-device-layout #deckPage .deck-filter-bar { grid-template-columns: 1fr 1fr !important; padding: var(--mobile-page-padding) !important; }
  html.mobile-device-layout #deckPage .deck-filter-bar > * { min-width: 0 !important; }
  html.mobile-device-layout #deckGrid {
    grid-template-columns: repeat(var(--mobile-card-columns), minmax(0, 1fr)) !important;
    gap: var(--mobile-card-gap) !important;
  }
  html.mobile-device-layout #deckGrid .deck-card { min-width: 0 !important; border-radius: var(--mobile-corner-radius) !important; }
  html.mobile-device-layout[data-mobile-viewport="wide"] #deckPage .deck-page-actions,
  html.mobile-device-layout[data-mobile-viewport="wide"] #deckPage .deck-command-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.mobile-device-layout[data-mobile-viewport="wide"] #deckPage .deck-filter-bar {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  }

  /* Native Profile page. */
  html.mobile-device-layout #profilePage {
    min-height: calc(100dvh - var(--mobile-page-offset)) !important;
  }
  html.mobile-device-layout #profilePage .profile-page-heading {
    margin: 0 0 var(--mobile-page-padding) !important;
    padding: var(--mobile-page-padding) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--mobile-corner-radius) !important;
    background: var(--panel) !important;
  }
  html.mobile-device-layout #profilePage .profile-page-heading .profile-exit-button,
  html.mobile-device-layout #profilePage .profile-page-heading .eyebrow,
  html.mobile-device-layout #profilePage .profile-page-heading > p:last-child { display: none !important; }
  html.mobile-device-layout #profilePage .profile-page-heading h1 { margin: 0 !important; font-size: var(--mobile-heading-font-size) !important; }
  html.mobile-device-layout #profilePageContent,
  html.mobile-device-layout #profilePageContent .account-dialog-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    gap: var(--mobile-page-padding) !important;
    padding: 0 !important;
  }
  html.mobile-device-layout #profilePageContent .account-settings,
  html.mobile-device-layout #profilePageContent .account-identity-card,
  html.mobile-device-layout #profilePageContent .account-social-tabs {
    border-radius: var(--mobile-corner-radius) !important;
  }

  /* Notifications remains navigable with the bottom bar and behaves as a page. */
  html.mobile-device-layout #notificationCentreDialog[open] {
    position: fixed !important;
    inset: var(--mobile-page-offset) 0 var(--mobile-nav-total) 0 !important;
    z-index: 2150 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bg) !important;
    color: var(--text) !important;
  }
  html.mobile-device-layout #notificationCentreDialog::backdrop { display: none !important; }
  html.mobile-device-layout #notificationCentreDialog .wide-dialog-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    padding: var(--mobile-page-padding) !important;
  }
  html.mobile-device-layout #notificationCentreDialog .dialog-close {
    position: sticky !important;
    top: 8px !important;
    z-index: 3 !important;
    float: right !important;
    margin: 8px 8px -52px 0 !important;
  }
  html.mobile-device-layout #notificationCentreDialog .notification-centre-heading {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: var(--mobile-page-padding) 56px var(--mobile-page-padding) var(--mobile-page-padding) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--mobile-corner-radius) !important;
    background: var(--panel) !important;
  }
  html.mobile-device-layout #notificationCentreDialog .notification-centre-heading .eyebrow,
  html.mobile-device-layout #notificationCentreDialog .notification-centre-heading p { display: none !important; }
  html.mobile-device-layout #notificationCentreDialog .notification-centre-heading h2 {
    margin: 0 !important;
    font-size: var(--mobile-heading-font-size) !important;
  }
  html.mobile-device-layout #notificationCentreList { gap: 10px !important; margin-top: var(--mobile-page-padding) !important; }
  html.mobile-device-layout #notificationCentreList > * { border-radius: var(--mobile-corner-radius) !important; }

  /* Admin stays as the one mobile header action. */
  html.mobile-device-layout #adminPage .admin-page-header { display: none !important; }
  html.mobile-device-layout #adminPage .admin-layout { grid-template-columns: 1fr !important; }
  html.mobile-device-layout #adminPage .admin-nav {
    display: flex !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0 0 10px !important;
    overflow-x: auto !important;
    border: 0 !important;
    background: transparent !important;
    scrollbar-width: none;
  }
  html.mobile-device-layout #adminPage .admin-nav::-webkit-scrollbar { display: none; }
  html.mobile-device-layout #adminPage .admin-nav-button {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
  }
  html.mobile-device-layout #adminPage .admin-content,
  html.mobile-device-layout #adminPage .admin-panel-section { width: 100% !important; min-width: 0 !important; }
  html.mobile-device-layout .mobile-settings-form-grid { grid-template-columns: 1fr !important; }
  html.mobile-device-layout .mobile-settings-preview { grid-template-columns: 1fr !important; }
  html.mobile-device-layout[data-mobile-viewport="wide"] .mobile-settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.mobile-device-layout[data-mobile-viewport="wide"] .mobile-settings-preview {
    grid-template-columns: minmax(150px, 220px) minmax(260px, 1fr) !important;
  }

  html.mobile-device-layout[data-mobile-layout-mode="compact"] {
    --mobile-header-height: 48px;
  }
  html.mobile-device-layout[data-mobile-layout-mode="compact"] .main-content { line-height: 1.3; }
  html.mobile-device-layout[data-mobile-layout-mode="compact"] #cardGrid .card-body { padding: 6px !important; }

  /* Route visibility is authoritative. A mobile page marked hidden must never
     be forced back on by the app-shell layout rules. */
  html.mobile-device-layout .main-content[hidden],
  html.mobile-device-layout #archivePage[hidden],
  html.mobile-device-layout #deckPage[hidden],
  html.mobile-device-layout #profilePage[hidden],
  html.mobile-device-layout #adminPage[hidden],
  html.mobile-device-layout #recentPage[hidden],
  html.mobile-device-layout #favouritesPage[hidden],
  html.mobile-device-layout #communityPage[hidden],
  html.mobile-device-layout #tagTeamPage[hidden],
  html.mobile-device-layout #newsPage[hidden] {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html.mobile-device-layout { --mobile-animation-speed: 0ms !important; }
  }
}