/* The phone atlas occupies one viewport; research and details slide over its map. */
.app-only { display: none; }
#field-research-panel { display: contents; }
.app-more-actions { display: grid; gap: 10px; margin: 20px 0; }
.app-more-actions button { min-height: 48px; text-align: left; }

@media (max-width: 900px), (max-width: 1100px) and (max-height: 500px) {
  :root {
    --app-top: calc(60px + env(safe-area-inset-top, 0px));
    --app-field-top: calc(172px + env(safe-area-inset-top, 0px));
    --app-sheet-top: calc(72px + env(safe-area-inset-top, 0px));
    --app-bottom: env(safe-area-inset-bottom, 0px);
  }
  html, body, body.atlas-sheet-open {
    width: 100%; height: 100%; max-width: 100%;
    overflow: hidden; overscroll-behavior: none;
  }
  body { position: relative; }
  body[data-app-view="field"] { --app-sheet-top: var(--app-field-top); }
  body > header, body > .hub-nav, #hub-mobile-nav > label,
  .rail-title, .rail-divider, .rail-bottom, .map-top, .map-footer,
  .mobile-map-key, .mobile-map-reset, .hub-map-stat {
    display: none !important;
  }
  #hub-sheet-backdrop { display: none !important; }
  button, a, input, select, summary { touch-action: manipulation; }
  input, select { font-size: 16px; }

  /* One compact top bar is shared by all five sections. */
  #hub-mobile-nav {
    position: fixed; inset: 0 0 auto; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    height: var(--app-top); min-height: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px)) 8px
      max(12px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid #d5e2e7;
    background: #fff;
  }
  #hub-mobile-nav .app-brand {
    display: grid; place-items: center; flex: 0 0 34px; height: 38px;
    border-radius: 4px; background: #102936; color: #70d8df;
    font-size: 25px; font-weight: 700; letter-spacing: -.12em;
    text-decoration: none; padding-right: 3px;
  }
  #hub-section-select {
    flex: 1; min-width: 0; width: 0; height: 44px; min-height: 44px;
    padding: 8px; border: 1px solid #c8dde3; border-radius: 6px;
    background: #edf6f7; color: #173c4e; font-size: 16px; font-weight: 600;
    text-overflow: ellipsis;
  }
  #app-more {
    display: block; flex: 0 0 44px; width: 44px; height: 44px;
    min-height: 44px; padding: 0; border: 0; background: transparent;
    font-size: 26px; line-height: 1;
  }

  /* Maps keep the full viewport, including when a sheet is open. */
  #field-panel, body.hide-dossier #field-panel, #hub-explorer {
    position: fixed; inset: 0; display: block;
    width: 100%; height: 100dvh; min-height: 0; max-height: none;
    margin: 0; padding: 0; overflow: hidden; background: #e5edef;
  }
  #field-panel > .rail { display: contents; }
  #field-panel > .map-region, #hub-explorer > .hub-map-region {
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-width: 0; min-height: 0; max-height: none; margin: 0;
  }
  #map, #hub-map { position: absolute; inset: 0; width: 100%; height: 100%; }
  #layers {
    position: fixed; top: calc(var(--app-top) + 8px); left: 12px; right: 12px;
    z-index: 30; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; width: auto; min-width: 0; margin: 0; padding: 0;
  }
  #layers button {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 44px; padding: 9px 7px;
    border: 1px solid #c8dce3; border-radius: 7px;
    background: #fff; color: #345565;
    box-shadow: 0 2px 10px #17374312;
    font-size: 13px; line-height: 1.3; font-weight: 600;
    text-align: center;
  }
  #layers button.active { background: #143f50; color: #fff; border-color: #143f50; }
  #layers button span, #layers button b { display: none; }
  #map-status { top: calc(var(--app-field-top) + 6px); left: 12px; right: 12px; font-size: 12px; }
  .hub-map-tools {
    top: calc(var(--app-top) + 10px); left: 12px; right: 12px;
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px;
    z-index: 20;
  }
  .hub-map-tools > div { gap: 2px; padding: 3px; border-radius: 7px; }
  .hub-map-tools > div:nth-child(2) { display: none; }
  .hub-map-tools button { min-height: 44px; padding: 9px 12px; font-size: 13px; border-radius: 5px; }
  .hub-map-loading { top: calc(var(--app-top) + 72px); left: 12px; font-size: 12px; }

  /* All research uses the same independently scrolling bottom sheet. */
  #field-research-panel, #hub-explorer > .hub-sidebar,
  #dossier, body.hide-dossier #dossier, #hub-detail, #hub-detail.open {
    display: none; position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; height: 54dvh; min-height: 0;
    max-height: calc(100dvh - var(--app-sheet-top));
    z-index: 45; margin: 0; padding: 0 0 calc(14px + var(--app-bottom));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; scroll-padding-top: 68px;
    background: #fff; border: 0; border-top: 1px solid #c9dde4;
    border-radius: 17px 17px 0 0; box-shadow: 0 -8px 35px #102b3b25;
    visibility: visible;
  }
  body[data-app-view="field"]:is([data-app-panel="results"], [data-app-panel="filters"]) #field-research-panel,
  body:is([data-app-view="brands"], [data-app-view="us"], [data-app-view="owners"]):is([data-app-panel="results"], [data-app-panel="filters"]) #hub-explorer > .hub-sidebar {
    display: flex; flex-direction: column;
  }
  body[data-app-view="field"][data-app-panel="detail"] #dossier,
  body:is([data-app-view="brands"], [data-app-view="us"], [data-app-view="owners"])[data-app-panel="detail"] #hub-detail {
    display: block;
  }
  body[data-app-panel="filters"] #field-research-panel,
  body[data-app-panel="filters"] #hub-explorer > .hub-sidebar { height: 76dvh; }
  body.app-expanded #field-research-panel, body.app-expanded #hub-explorer > .hub-sidebar,
  body.app-expanded #dossier, body.app-expanded #hub-detail {
    height: calc(100dvh - var(--app-sheet-top));
  }
  .app-sheet-bar, .app-detail-bar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0;
    flex: 0 0 auto; z-index: 5; min-height: 60px; margin: 0;
    padding: 7px 12px; background: #fff; border-bottom: 1px solid var(--line);
  }
  .app-sheet-bar strong { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; }
  .app-sheet-bar button, .app-detail-bar button {
    min-height: 44px; padding: 8px 12px; border-radius: 7px;
    font-size: 13px; line-height: 1.35; white-space: nowrap;
  }
  .app-sheet-bar [data-app-close], .app-detail-bar [data-app-close] {
    background: #102936; border-color: #102936; color: #fff;
  }
  .app-detail-bar { justify-content: space-between; }
  .app-detail-bar button { flex: 1; }

  #field-research-panel > .search {
    display: flex; flex-shrink: 0; min-height: 46px;
    margin: 12px 14px 10px; padding: 0 10px;
  }
  #field-research-panel .search input {
    min-height: 44px; padding: 10px 0; font-size: 16px;
  }
  #field-research-panel #mode-controls {
    display: grid; flex: 0 0 auto; gap: 10px; min-width: 0;
    margin: 0; padding: 2px 14px 16px; font-size: 14px;
  }
  #field-research-panel #mode-controls > label {
    display: block; margin: 0; font-size: 13px; line-height: 1.5;
    letter-spacing: 0; text-transform: none;
  }
  #field-research-panel #mode-controls select {
    width: 100%; min-width: 0; min-height: 44px; margin: 0;
    padding: 9px 8px; font-size: 16px;
  }
  #field-research-panel #mode-controls .layer-toggle {
    display: flex; align-items: center; min-height: 44px; gap: 10px;
    font-size: 14px; line-height: 1.5;
  }
  #field-research-panel #mode-controls .layer-toggle input { width: 19px; height: 19px; accent-color: #007b8c; }
  #field-research-panel #mode-controls > .note { display: block; font-size: 13px; line-height: 1.6; margin: 0; }
  .app-filter-extras { display: grid; flex: 0 0 auto; gap: 10px; padding: 0 14px 16px; }
  .app-filter-extras button { min-height: 46px; padding: 10px 12px; font-size: 14px; }
  .app-filter-extras .presets, .app-filter-extras .app-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; }
  .app-filter-extras .presets button, .app-filter-extras .app-presets button { border: 1px solid var(--line); }
  .app-filter-extras [data-app-apply], .app-filter-extras .app-show-map { background: #102936; color: #fff; border-color: #102936; }
  .app-filter-extras [aria-pressed="true"] { background: #edf6f7; color: #007b8c; border-color: #8fbac3; }
  #field-research-panel .result-heading {
    display: flex; flex: 0 0 auto; position: static; margin: 0;
    padding: 13px 16px 10px; font-size: 11px;
  }
  #field-research-panel #results {
    display: block; flex: none; min-height: 0; max-height: none;
    margin: 0; overflow: visible; border-top: 1px solid var(--line);
  }
  #field-research-panel #results button { min-height: 72px; padding: 15px 16px; }
  #field-research-panel #results b { font-size: 16px; line-height: 1.4; }
  #field-research-panel #results small { font-size: 13px; line-height: 1.5; }
  #hub-explorer .hub-intro { flex-shrink: 0; padding: 12px 14px 10px; }
  #hub-explorer .hub-intro > .eyebrow, #hub-explorer .hub-intro > h1,
  #hub-explorer .hub-intro > p, #hub-explorer .hub-counts { display: none; }
  #hub-search { display: block; font-size: 16px; min-height: 46px; padding: 11px; }
  #hub-explorer .hub-sectors { display: flex; gap: 7px; padding: 14px 0; }
  #hub-explorer .hub-sectors button { min-height: 44px; font-size: 13px; padding: 9px 11px; }
  #hub-explorer .hub-filters { display: grid; gap: 10px; }
  #hub-explorer .hub-filters label { font-size: 11px; }
  #hub-explorer .hub-filters select { min-height: 44px; font-size: 16px; padding: 9px 7px; }
  #hub-explorer .hub-list-heading { flex-shrink: 0; padding: 10px 16px; font-size: 10px; gap: 10px; }
  #hub-explorer .hub-list-toggle button { min-height: 44px; font-size: 13px; padding: 9px 10px; }
  #hub-explorer .hub-list { display: block; flex: none; min-height: 0; max-height: none; overflow: visible; }
  #hub-explorer .hub-row { min-height: 78px; padding: 15px 16px; }
  #hub-explorer .hub-row b { font-size: 16px; }
  #hub-explorer .hub-row small { font-size: 13px; line-height: 1.5; }
  #hub-explorer .hub-row .row-count { font-size: 19px; }
  #hub-explorer .hub-row .row-count small { font-size: 11px; }
  #hub-explorer .hub-sidebar-foot { display: none; }
  body[data-app-panel="results"] #field-research-panel #mode-controls,
  body[data-app-panel="results"] .app-filter-extras,
  body[data-app-panel="results"] #hub-explorer .hub-sectors,
  body[data-app-panel="results"] #hub-explorer .hub-filters,
  body[data-app-panel="filters"] #field-research-panel .result-heading,
  body[data-app-panel="filters"] #field-research-panel #results,
  body[data-app-panel="filters"] #hub-explorer .hub-list-heading,
  body[data-app-panel="filters"] #hub-explorer .hub-list { display: none; }

  /* Detail controls stay reachable while the evidence scrolls. */
  #dossier .dossier-head, #hub-detail .hub-detail-close { display: none !important; }
  #detail { padding: 16px 20px 24px; }
  #hub-detail { padding: 0 20px calc(24px + var(--app-bottom)); }
  #hub-detail > .app-detail-bar { margin: 0 -20px 18px; }
  #hub-detail h1 { font-size: 29px; margin-top: 14px; padding-right: 0; }
  #hub-detail h2 { font-size: 17px; }
  #hub-detail p, #hub-detail .callout, #hub-detail dl { font-size: 14px; line-height: 1.7; }
  #hub-detail .detail-lead { font-size: 16px; }
  #hub-detail .detail-tag { font-size: 11px; padding: 5px 8px; }
  #hub-detail .detail-actions { flex-wrap: wrap; }
  #hub-detail .detail-actions button, #hub-detail .detail-actions a { min-height: 44px; font-size: 13px; padding: 11px 12px; }
  #hub-detail .site-row { min-height: 66px; padding: 14px 0; }
  #hub-detail .site-row b { font-size: 15px; }
  #hub-detail .site-row small { font-size: 13px; }
  #hub-detail .source-item { min-height: 44px; padding: 12px 0; font-size: 13px; }
  #hub-detail .source-item span, #hub-detail .hub-metrics span { font-size: 11px; }
  #hub-detail .source-register summary { min-height: 44px; font-size: 15px; }
  #dossier .intro-copy, #dossier .notice, #dossier .profile-card p { font-size: 15px; }
  #dossier .note { font-size: 13px; }
  #dossier button { min-height: 44px; }
  #dossier .dossier-tabs { overflow-x: auto; gap: 18px; }
  #dossier .dossier-tabs button { white-space: nowrap; }

  #app-dock {
    display: flex; position: fixed; z-index: 35;
    bottom: calc(12px + var(--app-bottom)); left: 12px; right: 12px;
    height: 54px; padding: 0; overflow: hidden;
    background: #fff; border: 1px solid #cadce4; border-radius: 12px;
    box-shadow: 0 5px 25px #12343d25;
  }
  #app-dock button { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; min-width: 0; min-height: 52px; border: 0; border-radius: 0; font-size: 15px; text-align: center; background: #fff; }
  #app-dock button span, #app-dock button b { display: inline; margin: 0; font: inherit; color: inherit; }
  #app-dock button + button { border-left: 1px solid var(--line); }
  #app-dock #app-result-number { color: #007b8c; font-weight: 700; }
  #app-dock #app-filter-count:not(:empty) {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    margin-left: 4px; padding: 0 5px; border-radius: 10px;
    background: #102936; color: #fff; font-size: 11px;
  }
  #app-map-actions {
    display: flex; justify-content: space-between; position: fixed;
    left: 12px; right: 12px; bottom: calc(86px + var(--app-bottom));
    z-index: 25; pointer-events: none;
  }
  #app-map-actions button {
    pointer-events: auto; min-height: 44px; padding: 9px 13px;
    background: #fff; border-color: #cadce4; border-radius: 7px;
    box-shadow: 0 2px 10px #17374312; font-size: 13px;
  }
  #map-legend, #hub-map-legend {
    display: none; position: fixed; z-index: 32; bottom: calc(142px + var(--app-bottom));
    left: 12px; right: 12px; width: auto; min-width: 0; max-width: 360px;
    max-height: min(35dvh, calc(100dvh - var(--app-sheet-top) - 148px));
    overflow: auto; overscroll-behavior: contain; pointer-events: auto;
    padding: 14px; border-radius: 7px; background: #fff; font-size: 13px;
  }
  #map-legend.mobile-open:not(:empty), #hub-map-legend.mobile-open:not(:empty) { display: block; }
  #map-legend h4, #hub-map-legend b { font-size: 14px; }
  #hub-map-legend p, .hex-key { font-size: 12px; }
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) #app-dock,
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) #app-map-actions,
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) #map-legend,
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) #hub-map-legend,
  body[data-app-view="terminology"] #app-dock,
  body[data-app-view="terminology"] #app-map-actions { display: none; }
  .maplibregl-ctrl-top-right, .maplibregl-ctrl-scale { display: none; }
  .maplibregl-ctrl-bottom-left { bottom: calc(66px + var(--app-bottom)) !important; left: 50%; transform: translateX(-50%); }
  .maplibregl-ctrl-bottom-right { bottom: calc(66px + var(--app-bottom)) !important; }
  .maplibregl-ctrl-attrib { margin-bottom: 0 !important; font-size: 10px; }
  :is(#map, #hub-map) .maplibregl-ctrl-attrib.maplibregl-compact {
    width: 24px; min-height: 24px; height: 24px; margin: 0; padding: 0;
  }
  :is(#map, #hub-map) .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
    position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%);
    width: min(340px, calc(100vw - 24px)); padding: 10px 12px;
    border: 1px solid #cadce4; border-radius: 7px; background: #fff;
    box-shadow: 0 3px 16px #17374320; font-size: 12px; line-height: 1.6;
  }
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) .maplibregl-ctrl-bottom-right,
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) .maplibregl-ctrl-bottom-left {
    top: calc(var(--app-sheet-top) + 4px); bottom: auto !important;
  }
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) :is(#map, #hub-map) .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
    top: 30px; bottom: auto;
  }

  /* The reference has its own scroll area below the same section selector. */
  #hub-terminology {
    position: fixed; top: var(--app-top); left: 0; right: 0; bottom: 0;
    height: calc(100dvh - var(--app-top)); min-height: 0;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scroll-padding-top: 18px; -webkit-overflow-scrolling: touch;
    padding: 24px 16px calc(36px + var(--app-bottom));
  }
  #hub-terminology .reference-head { display: block; margin-bottom: 20px; }
  #hub-terminology .reference-head h1 { font-size: 34px; }
  #hub-terminology .reference-head p { font-size: 15px; }
  #hub-terminology .reference-head button { min-height: 44px; margin-top: 18px; }
  #hub-terminology .reference-meta { font-size: 10px; line-height: 1.7; }
  #hub-terminology .reference-jumps { gap: 7px; }
  #hub-terminology .reference-jumps a { min-height: 44px; padding: 11px 13px; font-size: 13px; }
  #hub-terminology .reference-grid, #hub-terminology .term-cards, #hub-terminology .reference-side {
    display: grid; grid-template-columns: 1fr; gap: 12px;
  }
  #hub-terminology .term-card { padding: 12px 18px; }
  #hub-terminology .term-card summary { display: block; min-height: 44px; padding: 10px 0; }
  #hub-terminology .term-card h2 { font-size: 16px; padding-right: 15px; }
  #hub-terminology .term-card p { font-size: 14px; line-height: 1.75; padding-bottom: 7px; }
  #hub-terminology .reform-panel, #hub-terminology .reference-cost { padding: 23px 20px; }
  #hub-terminology .reform-panel h2 { font-size: 26px; }
  #hub-terminology .reform-panel p, #hub-terminology .reference-cost p { font-size: 14px; line-height: 1.75; }
  #hub-terminology .reform-panel a { font-size: 14px; line-height: 2; }
  #hub-terminology .reference-cost h2 { font-size: 21px; }
  #hub-terminology .reference-comparison { padding: 20px 17px; margin: 22px 0; }
  #hub-terminology .reference-comparison table, #hub-terminology .reference-comparison tbody,
  #hub-terminology .reference-comparison tr, #hub-terminology .reference-comparison td { display: block; width: 100%; }
  #hub-terminology .reference-comparison thead { display: none; }
  #hub-terminology .reference-comparison tr { border-top: 1px solid #dbe6eb; padding: 12px 0; }
  #hub-terminology .reference-comparison td { border: 0; padding: 4px 0; font-size: 14px; line-height: 1.6; }
  #hub-terminology .reference-comparison td:first-child { color: #557784; }
  #hub-terminology .reference-comparison td:first-child::before {
    content: 'US EXPRESSION'; display: block; font: 10px 'IBM Plex Mono', monospace;
    color: #7d949e; margin-bottom: 4px;
  }
  #hub-terminology .reference-comparison td:last-child::before {
    content: 'USE IN LONDON'; display: block; font: 10px 'IBM Plex Mono', monospace;
    color: #168292; margin: 6px 0 4px;
  }
  #hub-terminology .reference-sources { font-size: 14px; columns: 1; }
  #hub-terminology .reference-sources ul { padding-left: 18px; }
  #hub-terminology .reference-sources a { overflow-wrap: anywhere; }
  #hub-terminology :is(#reference-sources, #uk-terms, #uk-rent-reviews, #uk-comparison) { scroll-margin-top: 18px; }
  #modal {
    width: calc(100% - 20px); max-height: 85dvh; padding: 56px 20px 24px;
    overflow: auto; overscroll-behavior: contain;
  }
  #modal .modal-close {
    position: sticky; float: right; top: 0; right: auto; z-index: 10;
    min-width: 44px; min-height: 44px; margin: -44px -8px 0 0;
    background: #edf5f7; border-radius: 50%;
  }
  .hub-modal-grid, .download-grid { grid-template-columns: 1fr; }
  .hub-modal-grid a { min-height: 85px; }
  .hub-modal-grid b { font-size: 15px; }
  #modal-content table { display: block; overflow: auto; width: 100%; }
  #modal-content p { font-size: 15px; }
  #toast { bottom: calc(80px + var(--app-bottom)); max-width: calc(100% - 24px); z-index: 70; }
}

@media (max-width: 360px) {
  #hub-mobile-nav { padding-left: 8px; padding-right: 8px; gap: 5px; }
  #hub-mobile-nav .app-brand { flex-basis: 29px; font-size: 23px; }
  #hub-section-select { padding-left: 6px; }
  #layers { left: 8px; right: 8px; }
  #layers button { font-size: 12px; }
  .app-sheet-bar, .app-detail-bar { gap: 5px; padding: 7px 9px; }
  .app-sheet-bar button, .app-detail-bar button { padding: 8px; font-size: 12px; }
}

/* Landscape leaves a useful map on the left and a full-height sheet on the right. */
@media (min-width: 600px) and (max-width: 1100px) and (max-height: 500px) {
  #hub-mobile-nav { right: auto; width: calc(100% - 230px); max-width: none; border-radius: 0 0 10px 0; }
  #layers { right: auto; width: calc(54% - 24px); }
  #app-dock { left: auto; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + var(--app-bottom)); width: 210px; height: 48px; }
  #app-dock button { min-height: 46px; font-size: 13px; }
  #app-map-actions { bottom: calc(14px + var(--app-bottom)); right: 236px; }
  #field-research-panel, #hub-explorer > .hub-sidebar,
  #dossier, body.hide-dossier #dossier, #hub-detail, #hub-detail.open {
    top: 0; right: 0; bottom: 0; left: auto; width: 46%;
    height: 100dvh; max-height: 100dvh; border-radius: 14px 0 0 14px;
    border-top: 0; border-left: 1px solid #c9dde4;
  }
  body[data-app-panel="filters"] #field-research-panel,
  body[data-app-panel="filters"] #hub-explorer > .hub-sidebar,
  body.app-expanded #field-research-panel, body.app-expanded #hub-explorer > .hub-sidebar,
  body.app-expanded #dossier, body.app-expanded #hub-detail { height: 100dvh; max-height: 100dvh; }
  body.app-expanded #field-research-panel, body.app-expanded #hub-explorer > .hub-sidebar,
  body.app-expanded #dossier, body.app-expanded #hub-detail { width: 65%; }
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) #hub-mobile-nav { width: 54%; }
  body.app-expanded:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) #hub-mobile-nav { width: 35%; }
  body.app-expanded #layers { width: calc(35% - 24px); }
  .app-sheet-bar { gap: 5px; padding: 7px 8px; }
  .app-sheet-bar button { padding: 8px; }
  .app-sheet-bar strong { font-size: 14px; }
  #map-legend, #hub-map-legend { bottom: calc(74px + var(--app-bottom)); max-height: calc(100dvh - var(--app-sheet-top) - 80px); max-width: 320px; }
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: calc(66px + var(--app-bottom)) !important; }
  .maplibregl-ctrl-bottom-left { left: 12px; transform: none; }
  :is(#map, #hub-map) .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
    left: 0; bottom: 30px; transform: none; width: min(320px, calc(54vw - 24px));
  }
  body.app-expanded :is(#map, #hub-map) .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { width: calc(35vw - 24px); }
  body:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) .maplibregl-ctrl-bottom-right {
    top: auto; left: 4px; right: auto; bottom: calc(8px + var(--app-bottom)) !important; max-width: 50%;
  }
  body.app-expanded:is([data-app-panel="results"], [data-app-panel="filters"], [data-app-panel="detail"]) .maplibregl-ctrl-bottom-right { max-width: 32%; }
  body[data-app-view="terminology"] #hub-mobile-nav { width: 100%; border-radius: 0; }
}

@media print {
  .app-only, #app-dock, #app-map-actions { display: none !important; }
  body.hub-print-reference, body.hub-print-reference #hub-terminology {
    position: static; height: auto; width: auto; max-height: none; overflow: visible;
  }
}