/*
 * Hiếu's mobile-first layout layer.
 *
 * Breakpoints (match Bootstrap so upstream markup lines up):
 *   phone   < 768px   (designed for 360–430px)
 *   tablet  768–991px (nav still collapses)
 *   desktop ≥ 992px   (upstream layout, untouched)
 *
 * Every rule below the tokens is one of five patterns. Custom tabs reuse them
 * instead of adding one-off fixes:
 *   1. App bar      compact 56px bar, 24px icons in 44px targets
 *   2. Drawer       hamburger nav slides in from the left over a scrim
 *   3. Sheets       header menus drop as a sheet under the bar; in-page
 *                   dropdowns rise as a bottom sheet
 *   4. List rows    label, value below, action right, one divider
 *   5. Page frame   full-bleed rows, 44px touch targets, safe-area insets
 *
 * Never cap a Bootstrap `.row` with max-width: its negative margins must
 * reach the container edge, or a strip opens on the right.
 */

:root {
  --m-space-1: 4px;
  --m-space-2: 8px;
  --m-space-3: 12px;
  --m-space-4: 16px;
  --m-space-5: 24px;
  --m-gutter: 16px;
  --m-touch: 44px;
  --m-row: 56px;
  --m-icon: 24px;
  --m-icon-sm: 18px;
  --m-appbar: 56px;
  --m-radius: 8px;
  --m-radius-sheet: 16px;
  --m-drawer: min(320px, 86vw);
  --m-sheet-max: min(72vh, 560px);
  --m-scrim: rgba(12, 8, 20, 0.55);
  --m-divider: var(--h-border, #e1e0e3);
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-right: env(safe-area-inset-right, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 359.98px) {
  :root {
    --m-gutter: 12px;
  }
}

/* clip, not hidden: hidden makes a scroll container and breaks the sticky bar. */
body,
#app {
  overflow-x: clip !important;
}

/* Every other shop hides its filter sidebar below 576px (`d-none d-sm-block`);
   Customizations forgot to, which squeezed its tiles into one column. */
@media (max-width: 575.98px) {
  .row > .standard-sidebar {
    display: none !important;
  }
}

/* Header icon tooltips ("Người chơi", "Thông báo") are hover hints. On touch
   screens a tap leaves them stuck over the profile strip. */
@media (hover: none) {
  html:has(#habitica-menu [aria-describedby^="__bv_tooltip"]) .tooltip.b-tooltip {
    display: none !important;
  }
}

/* Fixed-width English labels ("Unequip") clip longer Vietnamese text. */
.select-list .with-icon .button-label {
  width: auto !important;
  min-width: 3.25rem;
  white-space: nowrap;
}

@keyframes h-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

@keyframes h-sheet-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes h-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ---------------------------------------------------------------- 1. App bar */
@media (max-width: 991.98px) {
  div:has(> #habitica-menu) {
    display: contents;
  }

  #habitica-menu.topbar {
    position: sticky !important;
    top: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    height: calc(var(--m-appbar) + var(--m-safe-top));
    min-height: 0 !important;
    max-height: none !important;
    padding: var(--m-safe-top) max(var(--m-space-1), var(--m-safe-right)) 0
      max(var(--m-space-1), var(--m-safe-left)) !important;
    background-image: none !important;
  }

  #habitica-menu .menu-toggle {
    order: 0;
    flex: none;
    width: var(--m-touch);
    height: var(--m-touch);
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #habitica-menu .menu-toggle .navbar-toggler-icon {
    width: var(--m-icon);
    height: var(--m-icon);
  }

  #habitica-menu .navbar-brand.brand {
    position: absolute;
    left: 50%;
    top: calc(var(--m-safe-top) + (var(--m-appbar) - var(--m-touch)) / 2);
    transform: translateX(-50%);
    width: var(--m-touch);
    height: var(--m-touch);
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
  }

  #habitica-menu .navbar-brand.brand > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  #habitica-menu .navbar-brand.brand .svg-icon:not(.logo) {
    display: none !important;
  }

  #habitica-menu .navbar-brand.brand .logo {
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
  }

  #habitica-menu .quick-menu {
    order: 2;
    margin-left: auto !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
  }

  #habitica-menu .quick-menu > .item-with-icon {
    position: relative;
    flex: none;
    width: var(--m-touch);
    height: var(--m-touch);
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #habitica-menu .quick-menu .habitica-menu-dropdown-toggle,
  #habitica-menu .quick-menu .habitica-menu-dropdown-toggle > div,
  #habitica-menu .quick-menu .habitica-menu-dropdown-toggle > div > div {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  #habitica-menu .quick-menu .top-menu-icon {
    width: var(--m-icon) !important;
    height: var(--m-icon) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: none;
  }

  #habitica-menu .quick-menu .message-count.top-count {
    left: auto !important;
    right: 2px !important;
    top: 4px !important;
    width: 18px;
    height: 18px;
    font-size: 11px;
    padding: 0 !important;
  }
}

/* ------------------------------------------------------- 2. Navigation drawer */
@media (max-width: 991.98px) {
  html.h-menu-open body {
    overflow: hidden !important;
  }

  html.h-menu-open body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--m-scrim);
    z-index: 1075;
  }

  #habitica-menu #menu_collapse.show,
  #habitica-menu #menu_collapse.collapsing {
    position: fixed !important;
    top: calc(var(--m-appbar) + var(--m-safe-top));
    left: 0;
    bottom: 0;
    width: var(--m-drawer);
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 var(--m-safe-bottom) var(--m-safe-left) !important;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    transition: none !important;
    animation: h-drawer-in 0.18s ease-out;
  }

  #habitica-menu #menu_collapse .menu-list {
    order: 1;
    width: 100%;
    text-align: left !important;
    flex-direction: column;
  }

  #habitica-menu #menu_collapse .topbar-item {
    position: relative;
    height: auto !important;
    padding: 0 !important;
  }

  #habitica-menu #menu_collapse .topbar-item > .nav-link,
  #habitica-menu #menu_collapse .topbar-item > a {
    display: flex !important;
    align-items: center;
    min-height: var(--m-row);
    padding: 0 calc(var(--m-touch) + var(--m-space-2)) 0 var(--m-gutter) !important;
    font-size: 16px;
  }

  #habitica-menu #menu_collapse .chevron {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--m-row) !important;
    height: var(--m-row) !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1;
  }

  #habitica-menu #menu_collapse .chevron-icon-down {
    position: static !important;
    width: 14px !important;
  }

  #habitica-menu #menu_collapse .topbar-dropdown-item {
    display: flex !important;
    align-items: center;
    min-height: var(--m-touch);
    padding: var(--m-space-2) var(--m-gutter) var(--m-space-2) calc(var(--m-gutter) * 2) !important;
    white-space: normal;
    text-align: left;
  }

  #habitica-menu #menu_collapse .currency-tray {
    order: 0;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: center;
    gap: var(--m-space-2) var(--m-space-5);
    min-height: var(--m-row);
    width: 100%;
    padding: var(--m-space-1) var(--m-gutter) !important;
    margin: 0 !important;
  }

  #habitica-menu #menu_collapse .currency-tray .item-with-icon {
    display: inline-flex !important;
    align-items: center;
    gap: var(--m-space-2);
    min-width: var(--m-touch);
    min-height: var(--m-touch);
    margin: 0 !important;
  }

  #habitica-menu #menu_collapse .currency-tray .top-menu-icon {
    width: var(--m-icon) !important;
    height: var(--m-icon) !important;
    margin: 0 !important;
  }
}

/* ------------------------------------------------------- 3a. Header sheets */
@media (max-width: 991.98px) {
  #habitica-menu .quick-menu .habitica-menu-dropdown.open > .dropdown-menu {
    position: fixed !important;
    top: calc(var(--m-appbar) + var(--m-safe-top) + var(--m-space-1)) !important;
    right: max(var(--m-space-2), var(--m-safe-right)) !important;
    left: auto !important;
    width: min(400px, calc(100vw - 2 * var(--m-space-2) - var(--m-safe-left) - var(--m-safe-right))) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--m-appbar) - var(--m-safe-top) - var(--m-safe-bottom) - 2 * var(--m-space-2)) !important;
    margin: 0 !important;
    padding: var(--m-space-1) 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: var(--m-radius-sheet) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    animation: h-sheet-down 0.14s ease-out;
  }

  #habitica-menu .quick-menu .dropdown-menu .dropdown-item,
  #habitica-menu .quick-menu .dropdown-menu .user-dropdown {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #habitica-menu .quick-menu .dropdown-menu .topbar-dropdown-item {
    display: flex !important;
    align-items: center;
    min-height: var(--m-touch);
    padding: var(--m-space-2) var(--m-gutter) !important;
  }

  #habitica-menu .quick-menu .dropdown-menu .dropdown-title {
    min-width: 0;
  }

  #habitica-menu .quick-menu .dropdown-menu .small-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-touch);
    flex: none;
  }

  #habitica-menu .quick-menu .item-notifications .dropdown-item {
    padding: var(--m-space-3) var(--m-gutter) !important;
  }

  #habitica-menu .quick-menu .item-notifications .dropdown-item > *,
  #habitica-menu .quick-menu .item-notifications .notification-content,
  #habitica-menu .quick-menu .item-notifications .no-notifications .svg-icon {
    max-width: 100% !important;
    min-width: 0;
  }
}

/* ------------------------------------------------------- 3b. Bottom sheets */
@media (max-width: 767.98px) {
  .b-dropdown > .dropdown-menu.show:not(:has(input)) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: var(--m-sheet-max) !important;
    margin: 0 !important;
    padding: var(--m-space-2) 0 calc(var(--m-space-2) + var(--m-safe-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: var(--m-radius-sheet) var(--m-radius-sheet) 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25), 0 0 0 100vmax var(--m-scrim) !important;
    z-index: 1100 !important;
    animation: h-sheet-up 0.16s ease-out;
  }

  .b-dropdown > .dropdown-menu.show:not(:has(input)) .dropdown-item {
    display: flex !important;
    align-items: center;
    min-height: var(--m-touch);
    height: auto !important;
    padding: var(--m-space-2) var(--m-gutter) !important;
    white-space: normal !important;
  }

  .b-dropdown > .dropdown-menu.show:has(input) {
    max-width: calc(100vw - 2 * var(--m-space-2)) !important;
  }

  .popover {
    max-width: calc(100vw - 2 * var(--m-space-2)) !important;
  }
}

@media (max-width: 991.98px) {
  .selectListItem .dropdown-item {
    min-height: var(--m-touch);
    height: auto !important;
    display: flex;
    align-items: center;
  }
}

/* ------------------------------------------------------- 5. Page frame (phone) */
@media (max-width: 767.98px) {
  .btn:not(.btn-block):not(.d-block):not(.btn-sm):not(.btn-xs) {
    min-height: var(--m-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-block {
    min-height: var(--m-touch);
  }

  .form-control:not(textarea) {
    min-height: var(--m-touch);
  }

  /* Flex items default to min-width:auto; one wide child would otherwise
     stretch the page past the viewport. */
  .standard-page {
    min-width: 0;
  }

  /* Profile strip */
  #app-header {
    flex-wrap: nowrap !important;
    align-items: center;
    padding: var(--m-space-3) var(--m-gutter) !important;
    min-height: 0;
  }

  #app-header > .member-details {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    gap: var(--m-space-3);
    white-space: normal !important;
  }

  #app-header > .member-details > .avatar-container {
    flex: none;
    zoom: 0.6667;
    margin: 0 !important;
  }

  #app-header .member-stats {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0 !important;
  }

  #app-header .profile-first-row {
    min-width: 0;
    align-items: flex-start !important;
    margin-bottom: var(--m-space-2) !important;
  }

  #app-header .profile-first-row > :first-child {
    flex: none;
  }

  #app-header .profile-first-row > .flex-column {
    min-width: 0;
    flex: 1 1 auto;
  }

  #app-header .character-name,
  #app-header .character-name > div,
  #app-header .character-name span {
    display: block;
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #app-header .character-level {
    margin: 2px 0 0 !important;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #app-header .progress-container {
    display: flex !important;
    align-items: center;
    gap: var(--m-space-2);
    height: 20px !important;
    margin: 0 0 6px !important;
    max-width: none;
  }

  #app-header .progress-container > .svg-icon {
    flex: none;
    width: var(--m-icon-sm) !important;
    height: var(--m-icon-sm) !important;
    margin: 0 !important;
  }

  #app-header .progress-container > .progress {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
  }

  #app-header .progress-container > .small-text {
    flex: none;
    min-width: 56px;
    margin: 0 !important;
    font-size: 12px;
    text-align: right;
  }

  /* Tasks toolbar: search and tags on one row, add-task below at full width. */
  .tasks-navigation {
    margin-bottom: var(--m-space-4) !important;
    row-gap: var(--m-space-2);
  }

  .tasks-navigation > .col-12 > .d-flex {
    gap: var(--m-space-2);
  }

  .tasks-navigation .input-search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tasks-navigation .search-button {
    flex: none;
    margin-left: 0 !important;
  }

  .tasks-navigation .create-task-area {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 12px;
  }

  .tasks-navigation .create-task-area .create-btn {
    width: 100%;
    height: var(--m-touch) !important;
    justify-content: center;
  }

  .tasks-navigation .create-task-area .dropdown {
    left: 12px;
    right: 12px !important;
    width: auto !important;
    z-index: 1000;
  }

  .tasks-navigation .create-task-area .dropdown .dropdown-item {
    min-height: var(--m-touch);
    align-items: center;
  }

  .filter-panel {
    left: 0 !important;
    right: 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Tab bars scroll sideways instead of wrapping or clipping. The doubled
     class outranks Bootstrap's `.justify-content-center !important`, which
     would otherwise push the first tab past the left edge. */
  nav.secondary-menu.secondary-menu {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto !important;
    min-height: 48px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .secondary-menu::-webkit-scrollbar {
    display: none;
  }

  .secondary-menu > :first-child {
    margin-left: auto;
  }

  .secondary-menu > :last-child {
    margin-right: auto;
  }

  .secondary-menu .nav-link {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 14px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }

  /* Settings page fills the phone instead of the 751px desktop column. */
  .settings-content,
  .full-width-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .input-area {
    width: 100% !important;
    max-width: 360px;
  }

  /* Modals use the whole width minus a small margin. */
  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-md,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    width: auto !important;
    max-width: none !important;
    margin: var(--m-space-2) !important;
  }

  .modal-content {
    max-width: 100%;
  }

  #avatar-modal .modal-dialog {
    margin: 0 !important;
  }

  #avatar-modal .modal-content {
    border-radius: 0;
    min-height: 100vh;
    padding-bottom: var(--m-safe-bottom);
  }

  .page-2#avatar-modal .modal-dialog.modal-md {
    margin-top: 0 !important;
  }

  .justin-outer-section.top {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: var(--m-space-3) 0 0 !important;
  }

  .justin-outer-section,
  .justin-section {
    width: 100%;
    max-width: 100%;
  }

  .justin-message {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #profile .flex-container {
    flex-direction: column !important;
  }

  #profile .flex-left,
  #profile .flex-right,
  #profile .edit-profile,
  #profile .send-message {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  #profile .member-details,
  #profile .member-stats,
  #profile .avatar,
  #profile .progress-container {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  #profile .progress-container > .progress {
    min-width: 0 !important;
    width: 100% !important;
  }

  #profile .header {
    padding-bottom: var(--m-space-3);
  }

  /* Inventory and shop drawer */
  .drawer-container {
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    padding-bottom: var(--m-safe-bottom);
  }

  .drawer-title,
  .drawer-container .header-tabs,
  .drawer-container .title-row {
    height: auto !important;
    min-height: var(--m-touch);
    overflow: visible !important;
  }

  .drawer-container .header-tabs {
    width: 100%;
  }

  .drawer-tab-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    width: 100%;
  }

  .drawer-tab {
    flex: 0 0 auto !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .drawer-tab-text {
    display: flex !important;
    align-items: center;
    min-height: var(--m-touch);
    padding: 6px var(--m-space-2);
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .drawer-container .header-tabs {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .drawer-container .header-tabs .help-item {
    flex: 1 1 100%;
    right: 0 !important;
    top: 0 !important;
    text-align: center !important;
  }

  .drawer-container .drawer-help-text {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    min-height: var(--m-touch);
    margin: 0 !important;
    white-space: normal;
  }

  /* Page title rows: "Sort by / Group by" filter clusters float right on
     desktop and would run off a phone, so they wrap below the title. */
  .standard-page > .clearfix > .float-right,
  .standard-page > .clearfix > .top-menu,
  .standard-page > div > .clearfix > .float-right {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m-space-2);
    width: 100%;
    margin-bottom: var(--m-space-3);
  }

  .standard-page > .clearfix > .float-left {
    float: none !important;
  }

  .standard-page .top-menu .divider {
    display: none;
  }

  .standard-page .dropdown-label {
    margin: 0 !important;
  }

  /* Shop section headers (layoutSection.vue): title on its own line, filter
     dropdowns wrap beneath it. */
  .layout-section .filters,
  .layout-section .filters-title {
    float: none !important;
  }

  .layout-section .filters > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-space-2) var(--m-space-4);
  }

  .layout-section .filters > div > span {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-2);
  }

  .layout-section .filters button {
    margin: 0 !important;
  }

  /* Drawer item strips scroll sideways rather than cutting tiles off. */
  .drawer-container .drawer-slider {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .drawer-container .drawer-slider::-webkit-scrollbar {
    display: none;
  }

  /* Static long-form pages (FAQ family): one column, sidebar below. */
  .static-wrapper .top-container {
    width: 100% !important;
    padding: 0 var(--m-gutter);
    flex-direction: column;
  }

  .static-wrapper .main-text {
    flex: 1 1 auto !important;
    width: 100%;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .static-wrapper .sidebar,
  .static-wrapper .sidebar .tier-list {
    width: 100% !important;
  }

  .static-wrapper .w-75 {
    width: 100% !important;
  }

  /* Quest shop groups keep their tiles but wrap inside the viewport. */
  .standard-page .w-75 {
    width: 100% !important;
  }

  .quest-container {
    min-width: 0 !important;
    max-width: 100%;
  }

  .quest-group {
    max-width: 100%;
  }

  .quest-group .items {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* ------------------------------------------------------- 4. List rows (phone) */
@media (max-width: 767.98px) {
  .standard-page table.table {
    display: block;
    width: 100%;
    margin-bottom: var(--m-space-5);
  }

  .standard-page table.table > tbody,
  .standard-page table.table .d-content {
    display: contents;
  }

  .standard-page table.table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label action"
      "value action";
    align-items: center;
    column-gap: var(--m-space-3);
    min-height: var(--m-row);
    padding: var(--m-space-3) 0;
    border-top: 1px solid var(--m-divider);
  }

  .standard-page table.table td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .standard-page table.table td.settings-label {
    grid-area: label;
    font-weight: 700;
  }

  .standard-page table.table td.settings-value {
    grid-area: value;
    margin-top: 2px;
    opacity: 0.85;
  }

  .standard-page table.table td.settings-button {
    grid-area: action;
    justify-self: end;
    width: auto !important;
    text-align: end;
  }

  .standard-page table.table td.settings-button > a,
  .standard-page table.table td.settings-button > button,
  .standard-page table.table td.settings-button .edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--m-touch);
    min-height: var(--m-touch);
    padding: 0 var(--m-space-1);
  }

  .standard-page table.table tr.expanded,
  .standard-page table.table tr:has(> td[colspan]) {
    display: block;
    min-height: 0;
  }

  .standard-page table.table tr:has(> td[colspan]:empty) {
    padding: 0;
  }

  .standard-page table.table tr.expanded > td[colspan] {
    padding: var(--m-space-2) 0 !important;
  }
}

/* ------------------------------------------------------- Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
  #app-header .progress-container > .progress {
    min-width: 120px !important;
  }

  /* The 751px settings column is wider than a 768px screen minus gutters. */
  .settings-content {
    flex: 0 1 751px !important;
    min-width: 0 !important;
  }

  .drawer-container .drawer-slider {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  /* Static header expands at 768px but its 24px link padding needs ~1000px. */
  nav.navbar.fixed-top .navbar-header {
    margin-right: var(--m-space-4) !important;
  }

  nav.navbar.fixed-top .navbar-collapse {
    flex-wrap: nowrap;
    align-self: stretch;
    min-width: 0;
    background: transparent !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  nav.navbar.fixed-top .navbar-nav {
    flex-wrap: nowrap;
  }

  nav.navbar.fixed-top .nav-item .nav-link {
    padding: 16px 12px !important;
    white-space: nowrap;
  }
}