/* Dedicated mobile layer. Every rule is scoped below 760px so the restored
   desktop interface remains byte-for-byte in control at larger widths. */
@media (max-width: 760px) {
  :root {
    --pi-mobile-gutter: 14px;
    --pi-mobile-dock-h: 82px;
  }

  html {
    width: 100%;
    overflow-x: hidden;
    scroll-padding-bottom: calc(var(--pi-mobile-dock-h) + 18px);
  }

  body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
    padding-bottom: calc(var(--pi-mobile-dock-h) + env(safe-area-inset-bottom, 0px));
    font-size: 15px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  #root,
  .pi-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .pi-page {
    background-size: 34px 34px !important;
  }

  header,
  .pi-chrome,
  .pi-entity-bar,
  .pi-workspace,
  .pi-band,
  .pi-spatial,
  .pi-datatable {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  header,
  .pi-chrome {
    min-height: 58px !important;
    padding: 10px var(--pi-mobile-gutter) !important;
    gap: 10px !important;
    position: sticky !important;
    inset-block-start: 0;
    z-index: 55;
    background: rgba(6, 11, 20, 0.94) !important;
    border-block-end: 1px solid rgba(148, 163, 184, 0.14) !important;
    backdrop-filter: blur(16px);
  }

  header nav,
  .pi-chrome nav {
    display: none !important;
  }

  .pi-mobile-nav-item {
    display: none !important;
  }

  .pi-mobile-legacy-nav-group {
    display: none !important;
  }

  /* Hide only elements explicitly classified as duplicate legacy chrome. The
     former broad :has() selector could match the Home application wrapper
     before asynchronous filters were mounted and leave the page blank. */
  .pi-mobile-active #root > .pi-mobile-legacy-nav-group,
  .pi-mobile-active #root > .pi-mobile-original-brand {
    display: none !important;
  }

  .pi-mobile-original-brand {
    display: none !important;
  }

  .pi-mobile-update-date {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px var(--pi-mobile-gutter) 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .pi-mobile-brand {
    position: sticky;
    inset-block-start: 0;
    z-index: 900;
    min-height: 56px;
    display: grid;
    grid-template-columns: 34px auto 1fr;
    align-items: center;
    gap: 9px;
    padding: 9px var(--pi-mobile-gutter);
    background: rgba(6, 11, 20, 0.96);
    border-block-end: 1px solid rgba(242, 194, 48, 0.2);
    backdrop-filter: blur(18px);
  }

  .pi-mobile-brand-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 194, 48, 0.55);
    border-radius: 50%;
    color: #f2c230;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 700;
  }

  .pi-mobile-brand strong {
    color: #f2c230;
    font-size: 19px;
    letter-spacing: -0.02em;
  }

  .pi-mobile-brand small {
    justify-self: end;
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
  }

  header img,
  .pi-chrome img {
    max-height: 30px !important;
    width: auto !important;
  }

  header input,
  .pi-chrome input {
    min-height: 42px !important;
    font-size: 16px !important;
  }

  .pi-entity-bar {
    padding: 12px var(--pi-mobile-gutter) !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .pi-entity-bar::-webkit-scrollbar,
  .pi-tabs::-webkit-scrollbar {
    display: none;
  }

  .pi-tab,
  .pi-tabs > *,
  .pi-entity-bar button,
  .pi-entity-bar a {
    min-height: 44px !important;
    min-width: max-content !important;
    padding: 9px 13px !important;
    font-size: 14px !important;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  .pi-workspace {
    margin: 12px var(--pi-mobile-gutter) 0 !important;
    padding: 14px 12px 12px !important;
    border-radius: 13px !important;
  }

  .pi-headline,
  .pi-headline2,
  h1 {
    font-size: clamp(23px, 7vw, 30px) !important;
    line-height: 1.17 !important;
    letter-spacing: -0.025em !important;
  }

  h2,
  .pi-dt-title,
  .pi-rail-head {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .pi-meta,
  .pi-info,
  .pi-support,
  .pi-dt-note {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .pi-tabs {
    display: flex !important;
    width: 100% !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding-block: 4px 8px !important;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .pi-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 12px !important;
    border: 1px solid var(--pi-line) !important;
    border-radius: 12px !important;
    overflow: hidden;
  }

  .pi-kpi {
    min-height: 112px !important;
    padding: 13px 12px !important;
    border: 0 !important;
    border-block-end: 1px solid var(--pi-line) !important;
    border-inline-start: 1px solid var(--pi-line) !important;
  }

  .pi-kpi:nth-child(2n) {
    border-inline-start: 0 !important;
  }

  .pi-value,
  .pi-value-sm,
  .pi-kpi strong {
    font-size: clamp(23px, 7vw, 31px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap;
  }

  .pi-hero,
  .pi-trend-split,
  .pi-spatial {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .pi-hero {
    margin-top: 12px !important;
  }

  .pi-hero > *,
  .pi-trend-split > *,
  .pi-spatial > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  .pi-hero .recharts-responsive-container,
  .pi-trend-split .recharts-responsive-container {
    min-height: 300px !important;
  }

  .recharts-wrapper,
  .recharts-surface {
    max-width: 100% !important;
  }

  .recharts-cartesian-axis-tick text {
    font-size: 11px !important;
  }

  .pi-pulse {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-block: 10px 0 !important;
    padding: 13px 14px !important;
    font-size: 13px !important;
  }

  .pi-siderail {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .pi-rail-item {
    min-height: 54px !important;
    padding: 10px 7px !important;
    font-size: 14px !important;
    touch-action: manipulation;
  }

  .pi-band {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 12px var(--pi-mobile-gutter) 0 !important;
    padding: 14px 12px !important;
    border-radius: 13px !important;
  }

  .pi-band-col,
  .pi-row,
  .pi-card,
  .pi-dt-card {
    min-width: 0 !important;
  }

  .pi-row,
  .pi-card,
  .pi-dt-card {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .pi-map-wrap,
  .mapboxgl-map {
    width: 100% !important;
    min-height: 370px !important;
    border-radius: 12px !important;
  }

  .mapboxgl-ctrl-group button {
    width: 42px !important;
    height: 42px !important;
  }

  .pi-datatable {
    padding: 0 var(--pi-mobile-gutter) !important;
    margin-top: 14px !important;
  }

  .pi-dt-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .pi-dt-search,
  .pi-dt-bar input,
  .pi-dt-bar select,
  .pi-dt-bar button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .pi-dt-scroll,
  .rt-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pi-datatable:has(.pi-dt-cards > *) .pi-dt-scroll {
    display: none !important;
  }

  .pi-dt-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pi-dt-card {
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .pi-dt-pager {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .pi-dt-pager button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: rgba(242, 194, 48, 0.18);
    touch-action: manipulation;
    pointer-events: auto;
  }

  button:active,
  a:active,
  [role="button"]:active {
    transform: scale(0.98);
  }

  .pi-mobile-dock {
    position: fixed;
    z-index: 1000;
    inset-inline: 10px;
    inset-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
    height: 58px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    background: rgba(8, 15, 27, 0.96);
    border: 1px solid rgba(242, 194, 48, 0.24);
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    pointer-events: auto;
  }

  .pi-mobile-dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 46px;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 700;
    transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .pi-mobile-dock a span:first-child {
    font-size: 18px;
    line-height: 1;
  }

  .pi-mobile-dock a[aria-current="page"] {
    color: #ffd95a;
    background: rgba(242, 194, 48, 0.12);
  }

  .pi-mobile-skip {
    position: fixed;
    z-index: 999;
    inset-inline-end: 14px;
    inset-block-end: calc(var(--pi-mobile-dock-h) + 18px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #08101d;
    background: #f2c230;
    border: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
  }

  .pi-mobile-skip[hidden] { display: none !important; }
}

@media (max-width: 390px) {
  .pi-kpis {
    grid-template-columns: 1fr !important;
  }

  .pi-kpi,
  .pi-kpi:nth-child(2n) {
    min-height: 96px !important;
    border-inline-start: 0 !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}