/* Nova Atlas branding, legal copy and map-control refinement. */
.brand-symbol {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg,#17171e,var(--panel));
  box-shadow: inset 0 0 0 1px #32323d,0 8px 22px rgba(0,0,0,.35);
}
.brand-symbol svg { width: 35px; height: 35px; stroke-linecap: round; stroke-linejoin: round; }
.brand-symbol svg path:first-child { stroke: #ef003c; stroke-width: 2; }
.brand-symbol svg path:nth-child(2) { stroke: #f7f7f8; stroke-width: 2.7; }
.brand-symbol svg circle { fill: #ef003c!important; stroke: none!important; }
.brand small { max-width: 150px; font-size: 7px; line-height: 1.45; }
.legal-updated { margin: 0 0 12px; color: #8e8e99!important; font-size: 8px!important; letter-spacing: .08em; text-transform: uppercase; }

.map-filter-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px!important;
  overflow: hidden!important;
  background: var(--panel);
}
.map-filter-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 2px; }
.map-filter-header > div { display: grid; gap: 1px; }
.map-filter-header strong { font-size: 16px; line-height: 1.15; }
.map-filter-header small { margin-top: 3px; color: #858590; font-size: 8px; line-height: 1.35; }
#map-result-count { flex: 0 0 auto; margin-top: 4px; padding: 4px 7px; border: 1px solid #30303a; border-radius: 999px; color: #d5d5da; background: #15151b; font-size: 8px; font-weight: 900; }
.map-filter-fields { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(110px,.75fr); gap: 7px; }
.map-filter-fields .field { min-width: 0; }
.map-filter-fields input,.map-filter-fields select { min-height: 38px; padding: 8px 10px; }
.map-switcher { margin: 0!important; }
.map-switcher button { min-height: 38px; }

.map-layer-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.map-layer-tabs button { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; min-height: 42px; padding: 7px 9px; border: 1px solid #292932; border-radius: 8px; color: #aaaab4; background: var(--panel); text-align: left; cursor: pointer; }
.map-layer-tabs button span { overflow: hidden; font-size: 8px; font-weight: 900; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.map-layer-tabs button em { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; color: #bdbdc7; background: #25252d; font-size: 8px; font-style: normal; font-weight: 900; }
.map-layer-tabs button:hover { border-color: #454551; color: var(--text); }
.map-layer-tabs button.active { border-color: rgba(239,0,60,.7); color: var(--text); background: linear-gradient(135deg,rgba(239,0,60,.2),var(--panel)); box-shadow: inset 3px 0 0 #ef003c; }
.map-layer-tabs button.active em { color: var(--text); background: #ef003c; }

.map-category-list { min-height: 0; padding-right: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a5a64 #17171d; }
.map-category-option { min-height: 50px!important; padding: 7px 8px!important; border: 1px solid #202027!important; border-radius: 9px!important; background: #0f0f14!important; }
.map-category-option:hover { border-color: #3c3c47!important; background: #14141a!important; }
.map-category-option:has(input:checked) { border-color: rgba(239,0,60,.35)!important; background: rgba(239,0,60,.055)!important; }
.map-layer-copy { display: grid; min-width: 0; gap: 2px; }
.map-layer-copy strong { color: #f3f3f5; font-size: 9px!important; }
.map-layer-copy small { color: #82828d; font-size: 7px; }
.map-filter-buttons { flex: 0 0 auto; margin: 0!important; }
.map-filter-buttons .button { min-height: 38px; }
#map-show-all { border-color: #40404a; }
#map-hide-all { border-color: rgba(239,0,60,.45); color: #ff7592; }
.map-hide-found { flex: 0 0 auto; margin: 0!important; }
.map-add-marker { flex: 0 0 auto; min-height: 42px; }
.map-sync-compact { flex: 0 0 auto; margin-top: 0!important; }

@media(max-width:1100px){
  .map-filter-fields { grid-template-columns: 1fr; }
}
@media(max-width:900px){
  .map-filter-panel { max-height: none; overflow: visible!important; }
  .map-category-list { max-height: 270px; }
  .map-filter-fields { grid-template-columns: minmax(0,1.25fr) minmax(110px,.75fr); }
}
@media(max-width:520px){
  .map-filter-fields { grid-template-columns: 1fr; }
}

.pal-spawn-detail-panel { display: grid; gap: 18px; }
.pal-spawn-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pal-spawn-heading h4 { margin-bottom: 4px; }
.pal-spawn-heading p, .spawn-more-note { margin: 0; color: var(--muted); font-size: 12px; }
.spawn-location-disclosure { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spawn-location-disclosure summary { cursor: pointer; display: flex; justify-content: space-between; padding: 14px 16px; font-weight: 800; }
.spawn-location-list { border-top: 1px solid var(--line); max-height: 320px; overflow: auto; }
.spawn-location-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.spawn-location-row span { display: grid; gap: 3px; }
.spawn-location-row small { color: var(--muted); }
.spawn-location-row code { color: var(--text); font-size: 12px; }
.spawn-more-note { padding: 12px 16px; }
@media (max-width: 700px) { .pal-spawn-heading { align-items: stretch; flex-direction: column; } .spawn-location-row { align-items: flex-start; flex-direction: column; } }
.item-browser-panel { display: grid; gap: 18px; }
.item-browser-controls { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, 280px); gap: 14px; }
.item-result-summary { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.item-card { appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 12px; height: 78px; padding: 11px 14px; text-align: left; overflow: hidden; }
.item-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.item-card img, .item-detail-hero img { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; object-fit: contain; flex-shrink: 0; }
.item-card img { width: 44px; height: 44px; }
.item-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
.item-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; }
.item-card small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-icon-placeholder { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); display: inline-flex; flex: 0 0 44px; font-size: 9px; font-weight: 900; height: 44px; justify-content: center; }
.item-detail-hero { align-items: center; display: flex; gap: 18px; margin-bottom: 18px; }
.item-detail-hero + .detail-panel { margin-bottom: 20px; }
.item-detail-hero ~ .detail-grid { row-gap: 16px; }
.item-detail-hero > div { display: grid; gap: 6px; }
.item-detail-hero h3 { font-size: 30px; margin: 0; }
.item-detail-hero code { color: var(--muted); }
.item-material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.item-material-grid > div { border: 1px solid var(--line); border-radius: 10px; display: flex; justify-content: space-between; padding: 11px 12px; }
.item-material-name { align-items: center; display: flex; gap: 10px; }
.item-material-name img { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; height: 38px; object-fit: contain; width: 38px; }
.item-material-name .item-icon-placeholder { border-radius: 8px; flex-basis: 38px; font-size: 7px; height: 38px; }
@media (max-width: 700px) { .item-browser-controls { grid-template-columns: 1fr; } }



/* Final readable light control overrides */
.map-category-option{background:#fff!important;border-color:#c6c8d0!important;color:#0f0f12!important}
.map-category-option:hover{background:#fff4f6!important;border-color:#d90a2c!important}
.map-category-option:has(input:checked){background:#ffe6ec!important;border-color:#d90a2c!important}
.map-layer-copy strong{color:#0f0f12!important}.map-layer-copy small{color:#4c4d55!important}

/* 2026-08 map-linked schematic visual hotfix */
.schematic-composite {
  --schematic-size: 54px;
  position: relative;
  display: grid;
  width: var(--schematic-size);
  height: var(--schematic-size);
  min-width: var(--schematic-size);
  place-items: center;
  overflow: hidden;
  border: 1px solid #75bcd2;
  border-radius: 10px;
  background: #0c2632;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 8px rgba(20,70,86,.16);
}
.schematic-composite > img { position: absolute; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.schematic-composite-base { inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; filter: brightness(.72) saturate(1.35) contrast(1.18); opacity: .92; }
.schematic-composite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg,rgba(4,27,36,.38),rgba(0,0,0,.02) 48%,rgba(4,27,36,.42)); pointer-events: none; }
.schematic-composite-item { z-index: 2; width: 72% !important; height: 72% !important; object-fit: contain !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(255,255,255,.35)); }
.schematic-composite-badge { position: absolute; z-index: 3; right: 2px; bottom: 2px; max-width: calc(100% - 4px); padding: 1px 3px; border-radius: 3px; color: #fff; background: rgba(6,39,50,.88); font-size: 5px; font-weight: 900; letter-spacing: .05em; line-height: 1.2; }
.item-card:has(.schematic-composite) { border-color: #b8d8e2; background: linear-gradient(90deg,#f8fdff,#fff 42%); }
.item-card:has(.schematic-composite):hover { border-color: #2b8dab; box-shadow: 0 5px 18px rgba(28,101,125,.11); }
.item-detail-hero .schematic-composite { --schematic-size: 96px; }
.schematic-outcome-panel { border-color: #c5dce4; background: #f8fcfd; }
.schematic-outcome-row { display:flex; align-items:center; gap:12px; }
.schematic-outcome-row > img { width:58px; height:58px; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:#fff; }
.schematic-outcome-row > div { display:grid; gap:3px; }
.schematic-outcome-row strong { font-size:14px; }
.schematic-outcome-row small { color:var(--muted); font-size:10px; }
.schematic-map-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; border-color:rgba(217,10,44,.28); background:#fff8fa; }
.schematic-map-panel > div { display:grid; gap:3px; }
.schematic-map-panel h4,.schematic-map-panel p { margin:0; }
.schematic-map-panel p { color:var(--muted); font-size:10px; }
.schematic-map-panel .button { flex:0 0 auto; }
@media (max-width:640px){.schematic-map-panel{align-items:stretch;flex-direction:column}.schematic-map-panel .button{width:100%}}

/* 2026-08 source-aware item + schematic overlay hotfix */
.schematic-composite-item { width: 82% !important; height: 82% !important; z-index: 4 !important; filter: drop-shadow(0 3px 3px rgba(0,0,0,.72)) drop-shadow(0 0 4px rgba(255,255,255,.72)) !important; }
.schematic-composite-base { opacity: .78 !important; filter: brightness(.64) saturate(1.15) contrast(1.15) !important; }
.schematic-composite::after { z-index: 1; }
.schematic-composite-badge { z-index: 5; }
.item-source-explanation { margin: 0 0 10px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.item-source-map-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.item-source-notes { display:grid; gap:5px; margin-top:10px; }
.item-source-notes > div { padding:8px 10px; border-left:3px solid var(--red); border-radius:6px; background:#fff5f7; color:var(--muted); font-size:9px; line-height:1.45; }
.item-fixed-map-panel { display:flex; align-items:center; justify-content:space-between; gap:16px; border-color:rgba(217,10,44,.25); background:#fff9fa; }
.item-fixed-map-panel h4,.item-fixed-map-panel p { margin:0; }
.item-fixed-map-panel p { margin-top:3px; color:var(--muted); font-size:9px; }
@media(max-width:700px){.item-fixed-map-panel{align-items:flex-start;flex-direction:column}}

/* Production responsive layout rules */
:root {
  --pa-mobile-gutter: clamp(12px, 3.5vw, 20px);
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body {
  overflow-x: clip !important;
}

.pal-atlas-layout,
.pal-atlas-content,
.view-container,
.view,
.panel,
.card,
.detail-panel,
.page-heading,
.toolbar,
.form-grid,
.interactive-map-shell,
.map-main-column,
.map-filter-panel,
.map-details-panel {
  min-width: 0;
  max-width: 100%;
}

.pal-atlas-content,
.view-container,
.view {
  overflow-wrap: anywhere;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Prevent large generated tables and dense data strips from forcing page width. */
.table-wrap,
.table-scroll,
.data-table-wrap,
.results-table-wrap,
.dis-table-wrap,
.tech-table-wrap,
[role="table"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Medium desktop / small laptop cleanup. */
@media (max-width: 1280px) and (min-width: 901px) {
  .view-container {
    padding-inline: clamp(16px, 2vw, 24px) !important;
  }

  .overview-hero {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 24px !important;
  }

  .overview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .overview-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .entity-grid,
  .item-browser-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }
}

/* Tablet and phone app shell. The desktop fixed sidebar becomes a proper drawer. */
@media (max-width: 900px) {
  .pal-atlas-layout {
    display: block !important;
    min-height: calc(100dvh - var(--pa-header-offset)) !important;
    background: var(--bg) !important;
  }

  .pal-atlas-layout::before {
    display: none !important;
  }

  .pal-atlas-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .topbar {
    position: sticky !important;
    top: var(--pa-header-offset) !important;
    z-index: 120 !important;
    display: flex !important;
    min-height: 60px !important;
    gap: 10px !important;
    padding: 9px var(--pa-mobile-gutter) !important;
    border-bottom: 1px solid var(--line) !important;
    background: rgba(255, 255, 255, .97) !important;
  }

  .topbar-left {
    min-width: 0;
  }

  .topbar-left > div {
    min-width: 0;
  }

  .topbar p {
    margin-bottom: 1px !important;
    font-size: 8px !important;
  }

  .topbar h1 {
    max-width: min(66vw, 520px);
    overflow: hidden;
    font-size: clamp(17px, 4.2vw, 23px) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-only {
    display: grid !important;
  }

  #mobile-menu-btn {
    flex: 0 0 42px;
    width: 42px !important;
    height: 42px !important;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .topbar-actions .button {
    display: none !important;
  }

  /* Mobile navigation drawer. */
  .pal-atlas-sidebar,
  .pal-atlas-sidebar.is-clean-fixed,
  .pal-atlas-sidebar.is-desktop-fixed,
  .pal-atlas-sidebar.is-footer-locked,
  .pal-atlas-sidebar.is-stable-fixed {
    position: fixed !important;
    top: var(--pa-header-offset) !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 140 !important;
    display: block !important;
    width: min(340px, 88vw) !important;
    min-width: 0 !important;
    max-width: 88vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 18px 0 48px rgba(15, 15, 18, .18) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(-104%, 0, 0) !important;
    transition: transform .22s ease !important;
    pointer-events: none !important;
  }

  .pal-atlas-sidebar.open {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  .pal-atlas-sidebar .brand,
  .pal-atlas-sidebar .sidebar-foot,
  .pal-atlas-sidebar .sidebar-status {
    display: none !important;
  }

  .pal-atlas-sidebar .sidebar-nav {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 3px 22px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin !important;
    white-space: normal !important;
  }

  .pal-atlas-sidebar .nav-item,
  .pal-atlas-sidebar .nav-item:hover,
  .pal-atlas-sidebar .nav-item:focus,
  .pal-atlas-sidebar .nav-item.active {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
    padding: 9px 10px !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    transform: none !important;
  }

  .pal-atlas-sidebar .nav-item.active {
    box-shadow: inset 3px 0 0 var(--red) !important;
  }

  .pal-atlas-sidebar .nav-dropdown,
  .pal-atlas-sidebar .nav-subdropdown {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .pal-atlas-sidebar .nav-dropdown-menu {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
  }

  .pal-atlas-sidebar .nav-subdropdown > .nav-dropdown-menu {
    margin-left: 0 !important;
    padding-left: 10px !important;
  }

  .sidebar-scrim {
    position: fixed !important;
    inset: var(--pa-header-offset) 0 0 0 !important;
    z-index: 130 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(5, 5, 7, .48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }

  .pal-atlas-sidebar.open ~ .sidebar-scrim {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .view-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px var(--pa-mobile-gutter) 32px !important;
  }

  .page-heading,
  .compact-heading,
  .section-heading,
  .section-heading-row,
  .target-summary,
  .recommendation-summary,
  .recommendation-control-row,
  .overview-onboarding,
  .backup-import-panel,
  .current-page-data-link,
  .dx-callout {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .page-heading {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .page-heading h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.02 !important;
  }

  .page-heading p {
    max-width: 100% !important;
  }

  .panel {
    padding: clamp(14px, 3vw, 20px) !important;
  }

  .overview-hero,
  .overview-grid,
  .overview-target-card,
  .dashboard-grid,
  .breeding-stage,
  .target-search-grid,
  .direct-pair-grid,
  .entity-detail-grid,
  .raw-data-grid,
  .detail-grid,
  .detail-grid-clean,
  .owned-data-layout,
  .detail-breeding-grid,
  .boss-page-layout,
  .boss-info-grid,
  .boss-stat-grid,
  .boss-guide-grid,
  .dx-row,
  .dx-card-grid,
  .dis-mechanics {
    grid-template-columns: 1fr !important;
  }

  .overview-hero {
    gap: 18px !important;
    padding: clamp(20px, 4vw, 30px) !important;
  }

  .overview-completion {
    width: 100% !important;
  }

  .overview-metrics,
  .collection-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .overview-tool-grid,
  .stat-grid,
  .backup-explainer-grid,
  .map-help-strip,
  .item-source-summary,
  .team-pal-list,
  .team-pal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .form-grid,
  .inventory-toolbar,
  .manual-pal-form,
  .passive-filter-grid,
  .item-browser-controls,
  .dx-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .toolbar,
  .data-toolbar {
    align-items: stretch !important;
  }

  .toolbar .field,
  .toolbar .search-field,
  .data-toolbar .field,
  .data-toolbar .search-field {
    min-width: 0 !important;
    flex: 1 1 220px !important;
  }

  .entity-grid,
  .item-browser-grid,
  .inventory-pal-grid,
  .pal-grid,
  .tier-pal-grid,
  .recommendation-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)) !important;
  }

  /* Interactive map becomes a vertical layout instead of squeezing three columns. */
  body.map-route-active .pal-atlas-content,
  body.map-route-active .main-content,
  body.map-route-active .view-container,
  body.map-route-active #view-interactive-map,
  body.map-route-active .interactive-map-shell,
  .interactive-map-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.map-route-active .interactive-map-shell,
  .interactive-map-shell {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .map-filter-panel,
  .map-details-panel {
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  .map-filter-panel {
    border-bottom: 1px solid var(--line) !important;
  }

  .map-details-panel {
    border-top: 1px solid var(--line) !important;
  }

  .map-main-column {
    min-height: 0 !important;
  }

  .map-viewport {
    width: 100% !important;
    min-height: clamp(430px, 62dvh, 620px) !important;
  }

  .map-toolbar {
    flex-wrap: wrap !important;
  }

  .map-toolbar > * {
    min-width: 0 !important;
  }

  .map-help-strip {
    margin-bottom: 10px !important;
  }

  .modal-container {
    padding: 14px !important;
  }

  .modal-shell,
  .modal-shell.modal-wide {
    width: min(100%, 760px) !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 28px) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --pa-mobile-gutter: 12px;
  }

  .topbar {
    min-height: 56px !important;
    padding-block: 7px !important;
  }

  .topbar p {
    display: none !important;
  }

  .topbar h1 {
    max-width: 62vw;
    font-size: clamp(16px, 5vw, 20px) !important;
  }

  .inventory-pill {
    display: none !important;
  }

  .view-container {
    padding-top: 14px !important;
    padding-bottom: 24px !important;
  }

  .page-heading h2 {
    font-size: clamp(26px, 9vw, 34px) !important;
  }

  .page-heading p,
  .hero-copy p,
  .panel p:not(.eyebrow),
  .card p:not(.eyebrow) {
    line-height: 1.55 !important;
  }

  .panel,
  .card {
    border-radius: 11px !important;
  }

  .button {
    min-height: 42px;
  }

  .overview-metrics,
  .collection-overview,
  .stat-grid,
  .overview-tool-grid,
  .backup-explainer-grid,
  .map-help-strip,
  .team-pal-list,
  .team-pal-grid,
  .item-source-summary,
  .form-grid,
  .inventory-toolbar,
  .manual-pal-form,
  .passive-filter-grid,
  .item-browser-controls,
  .dx-toolbar,
  .dx-system-grid,
  .dx-card-grid,
  .dx-materials,
  .dx-pal-grid,
  .pal-alpha-list,
  .work-handbook-grid {
    grid-template-columns: 1fr !important;
  }

  .entity-card,
  .item-browser-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .entity-card > b {
    grid-column: 2 !important;
  }

  .overview-progress-list a {
    grid-template-columns: 72px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
  }

  .action-row,
  .recommendation-control-actions,
  .map-detail-actions,
  .map-filter-buttons {
    width: 100% !important;
  }

  .action-row .button,
  .recommendation-control-actions .button {
    flex: 1 1 150px !important;
  }

  .map-layer-tabs {
    grid-template-columns: 1fr !important;
  }

  .map-toolbar {
    align-items: stretch !important;
    gap: 7px !important;
  }

  #map-coordinate-readout,
  #map-progress-readout {
    width: 100%;
    text-align: left !important;
  }

  .map-viewport {
    min-height: clamp(390px, 58dvh, 520px) !important;
  }

  .map-placement-hint {
    top: 10px !important;
    width: calc(100% - 20px) !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .modal-container {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  .modal-shell,
  .modal-shell.modal-wide {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }

  .toast-container {
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
  }

  .toast {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  .pal-atlas-sidebar,
  .pal-atlas-sidebar.is-stable-fixed {
    width: min(320px, 92vw) !important;
    max-width: 92vw !important;
  }

  .view-container {
    padding-inline: 10px !important;
  }

  .panel {
    padding: 13px !important;
  }

  .overview-hero {
    padding: 18px !important;
  }

  .completion-ring {
    width: 132px !important;
    height: 132px !important;
  }

  .completion-ring::before {
    width: 104px !important;
    height: 104px !important;
  }

  .map-viewport {
    min-height: 360px !important;
  }

  .entity-card,
  .item-browser-card,
  .inventory-pal-top,
  .compact-save-drop,
  .tech-material {
    column-gap: 9px !important;
  }
}

/* Safe-area support for modern phones. */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .topbar {
      padding-left: max(var(--pa-mobile-gutter), env(safe-area-inset-left)) !important;
      padding-right: max(var(--pa-mobile-gutter), env(safe-area-inset-right)) !important;
    }

    .view-container {
      padding-left: max(var(--pa-mobile-gutter), env(safe-area-inset-left)) !important;
      padding-right: max(var(--pa-mobile-gutter), env(safe-area-inset-right)) !important;
      padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    .pal-atlas-sidebar {
      padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pal-atlas-sidebar,
  .sidebar-scrim {
    transition: none !important;
  }
}


/* Mobile route bar and map control sizing. */
.pal-atlas-page .topbar { display: none !important; }
.pal-atlas-page { padding-top: 0 !important; }
@media (max-width: 900px) {
  .pal-atlas-page .topbar { display: flex !important; }
  .map-overlay-controls { top: 60px !important; right: 10px !important; width: min(190px, calc(100% - 20px)) !important; gap: 4px !important; }
  .map-overlay-controls .map-toggle-btn { min-height: 34px !important; padding: 6px 7px !important; font-size: 8px !important; }
}
@media (max-width: 520px) {
  .map-overlay-controls { top: 58px !important; width: 166px !important; }
  .map-data-loading.pal-atlas-boot-loader { min-height: 360px !important; padding: 28px 14px !important; }
  .map-data-loading .pal-atlas-loading-flipbook { width: 112px !important; height: 112px !important; }
}