/* r30: mobile-first desktop adaptation. Loaded after the existing r29 skin.
   No business logic, mobile breakpoint, or v-show display overrides. */
@media (min-width: 821px) {
  .nc-app .nc-app-main,
  .nc-app .nc-app-content,
  .nc-app .nc-app-content-inner {
    min-width: 0;
    min-height: 0;
  }
  .nc-app .nc-app-content-inner {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ink-overview .dashboard-page {
    width: 100%;
    max-width: 1120px;
  }
  .ink-overview .ink-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
  }
  .ink-overview .ink-body > * {
    min-width: 0;
    max-width: 100%;
  }
  .ink-overview .ink-profile {
    height: auto;
    min-height: 253px;
    display: flex;
    flex-direction: column;
  }
  .ink-overview .ink-profile .ink-lifetime {
    margin-top: auto;
    padding-top: 13px;
  }
  .ink-overview .ink-assets {
    height: auto;
    min-height: 253px;
  }
  .ink-overview .ink-supplies {
    height: auto;
    min-height: 195px;
  }
  .ink-overview .ink-countdowns {
    height: auto;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
  }
  .ink-overview .ink-statistics {
    grid-column: 1 / -1;
  }
  .ink-overview .ink-statistics-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .ink-overview #dashboard-overview .nc-log-panel {
    height: clamp(280px, 55dvh, 500px);
    min-width: 0;
  }
  .ink-route-page .nc-console-page,
  .ink-user-panel .nc-console-page,
  .ink-user-panel .user-panel-page,
  .account-management-page {
    min-width: 0;
    max-width: 100%;
  }
  .ink-route-page .settings-page .settings-switch-grid,
  .ink-route-page .settings-page .settings-switch-grid--3,
  .ink-route-page .settings-page .settings-switch-grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
  .ink-route-page .settings-section-actions,
  .ink-route-page .nc-console-header-actions,
  .ink-user-panel .user-panel-header {
    flex-wrap: wrap;
  }
  /* The original personal/security panels use the mobile bar instead of InkNav. */
  .nc-app .nc-mobile-tabbar {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    z-index: 900;
    left: 50%;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(610px, calc(100% - 28px));
    min-height: 64px;
    gap: 3px;
    padding: 4px;
    border: 1.5px solid #363b2e;
    border-radius: 17px;
    background: #f7f0e2;
    box-shadow: 0 3px 10px #52442c20;
  }
  .nc-app .nc-mobile-tabbar .nc-mobile-tab {
    min-height: 52px;
    border-radius: 12px;
    color: #626653;
  }
  .nc-app .nc-mobile-tabbar .nc-mobile-tab-active {
    background: #e6edd8;
    color: #596342;
  }
  .ink-menu-layer .nav-panel {
    max-height: calc(100dvh - 32px);
    max-width: calc(100vw - 32px);
  }
  .ink-menu-layer .nav-scroll {
    min-height: 0;
    overflow-y: auto;
  }
}
@media (min-width: 1280px) {
  .ink-overview .ink-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ink-overview .ink-profile {
    grid-column: span 2;
  }
  .ink-overview .ink-statistics {
    grid-column: auto;
  }
  .ink-overview .ink-statistics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ink-overview .ink-statistics-row {
    flex-wrap: wrap;
  }
  .ink-overview .ink-statistics-row > span:not(.ink-statistics-dot) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}