/* Tablet Lage overrides — 721–1100px. Builds on mobile-lage compact chrome. */

@media (min-width: 721px) and (max-width: 1100px) {
  /* Use more space: HUD/Dock/Status centered, max ~760px. */
  .chrome-float--start {
    left: max(24px, calc(50% - 380px));
    right: max(24px, calc(50% - 380px));
    width: auto;
    max-width: none;
  }

  .lage-status,
  .lage-dock {
    left: max(24px, calc(50% - 380px));
    right: max(24px, calc(50% - 380px));
    width: auto;
    max-width: none;
  }

  .lage-dock {
    height: 68px;
    padding: 5px;
  }

  .lage-status {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + 68px + 10px);
    padding: 12px 16px;
  }

  .lage-dock-slot .material-symbols-outlined {
    font-size: 26px;
  }

  .lage-dock-slot .lage-dock-symbol {
    width: 26px;
    height: 26px;
  }

  .lage-dock-label {
    font-size: 11px;
  }

  /* Sheets / popovers a bit wider on tablet. */
  .lage-sheet--popover .lage-sheet-panel {
    margin-left: auto;
    margin-right: auto;
    max-width: min(520px, calc(100vw - 48px));
    max-height: 46vh;
  }

  .lage-sheet.lage-sheet--more .lage-sheet-panel {
    max-width: min(560px, 100%);
    margin-inline: auto;
  }

  .lage-symbol-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding-inline: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* List cards: two columns when space allows. */
  #einsaetze-list.project-list,
  #project-list.project-list,
  #uebungen-list.project-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* List fills overlay height (flex:1 from mobile-lage); without start
       alignment, auto rows stretch and cards take full column height. */
    align-content: start;
    align-items: start;
    gap: 12px;
    padding: 16px 20px calc(16px + 56px + 20px + env(safe-area-inset-bottom, 0px));
  }

  #einsaetze-list .objekte-list-empty,
  #project-list .objekte-list-empty,
  #uebungen-list .objekte-list-empty {
    grid-column: 1 / -1;
  }

  .map-side-chrome {
    top: calc(8px + env(safe-area-inset-top, 0px) + 56px + 16px);
    right: 20px;
  }

  .map-side-chrome .map-control-btn,
  .map-side-chrome [data-pane-layers],
  .map-side-chrome .style-fan {
    width: 44px;
    height: 44px;
  }

  body.lage-chrome .map-side-chrome .wind-control--map:not(.hidden) {
    width: 44px;
    height: 44px;
  }
}