/* Desktop workspace only. Keep every rule behind the 1024px boundary so the
   existing phone/tablet layout, markup and input handlers remain unchanged. */
@media (min-width: 1024px) {
  body:has(#navigation:not([hidden])):not(.battle-active) .site-header {
    width: min(1480px, calc(100% - 32px));
  }

  body:has(#navigation:not([hidden])):not(.battle-active, :has(.zone-entry-preparation-backdrop)) #navigation {
    position: fixed;
    top: calc(var(--app-header-height) + 16px);
    left: max(16px, calc((100vw - 1480px) / 2));
    bottom: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    width: 164px;
    max-height: calc(100dvh - var(--app-header-height) - 32px);
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--ga-radius-panel, 4px);
    background: rgb(var(--chrome-rgb) / 96%);
  }
  body:has(#navigation:not([hidden])):not(.battle-active, :has(.zone-entry-preparation-backdrop)) #navigation button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 8px;
    border: 0;
    border-left: 2px solid transparent;
    text-align: left;
    font-size: var(--ga-font-control, .875rem);
  }
  body:has(#navigation:not([hidden])):not(.battle-active, :has(.zone-entry-preparation-backdrop)) #navigation button.active {
    border-left-color: var(--gold);
    background: var(--surface-2);
  }
  body:has(#navigation:not([hidden])):not(.battle-active, :has(.zone-entry-preparation-backdrop)) #navigation .nav-icon {
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }
  body:has(#navigation:not([hidden])):not(.battle-active) #app {
    width: min(1300px, calc(100% - 196px));
    margin-left: max(180px, calc((100vw - 1480px) / 2 + 164px));
    margin-right: auto;
    padding: 16px 16px 64px;
    min-width: 0;
  }
  /* The home scene keeps its design plane; reclaim the old horizontal nav row. */
  body:has(#navigation:not([hidden])):not(.battle-active):has(.home-town-screen) #app {
    height: calc(100dvh - var(--app-header-height));
    padding: 0 16px;
  }
  body:has(#navigation:not([hidden])).app-update-available:not(.battle-active):has(.home-town-screen) #app {
    height: calc(100dvh - var(--app-header-height) - var(--app-update-flow-space));
  }

  #app > .explore-rest-screen .expedition-zone-list:has(> .expedition-zone-card) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
  #app > .explore-rest-screen .tower-zone-toolbar { grid-column: 1 / -1; }
  #app > .explore-rest-screen .expedition-zone-card { margin: 0; min-width: 0; }
  #app > .forge-layout-screen .workshop-forge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  #app > .menu-list-screen .menu-console-grid { gap: 24px; }
}

@media (min-width: 1280px) {
  /* Two content columns plus the navigation rail. Dialogs retain fixed layers. */
  body:not(.battle-active) #app:has(> .equipment-deck-shell) {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 20px;
  }
  #app:has(> .equipment-deck-shell) > * { grid-column: 1 / -1; min-width: 0; }
  #app:has(> .equipment-deck-shell) > .equipment-deck-shell {
    grid-column: 1;
    position: sticky;
    top: calc(var(--app-header-height) + 12px);
    max-height: calc(100dvh - var(--app-header-height) - 28px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #app:has(> .equipment-deck-shell) > .equipment-accordion-stack {
    grid-column: 2;
    margin-top: 0;
  }
  #app > .equipment-deck-shell .hero-equipment-summary { grid-template-columns: minmax(0, 1fr); }
  #app > .equipment-deck-shell .hero-command-slot strong { white-space: normal; overflow-wrap: anywhere; }
  #app > .equipment-accordion-stack .inventory-control-deck { top: calc(var(--app-header-height) + 12px); }

  #app > .party-teams-screen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px 24px;
    max-width: none;
  }
  #app > .party-teams-screen > * { grid-column: 1 / -1; min-width: 0; }
  #app > .party-teams-screen > .party-team-card {
    grid-column: 1;
    position: sticky;
    top: calc(var(--app-header-height) + 12px);
  }
  #app > .party-teams-screen > .party-team-standby {
    grid-column: 2;
    margin: 0;
    padding-top: 0;
  }

  /* Legacy refund notices keep the original single-column reading order. */
  #app > .magic-orb-screen:has(> .orb-setting-card + .orb-combat-buttons) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px 24px;
  }
  #app > .magic-orb-screen:has(> .orb-setting-card + .orb-combat-buttons) > * { grid-column: 1 / -1; min-width: 0; }
  #app > .magic-orb-screen:has(> .orb-setting-card + .orb-combat-buttons) > .orb-setting-card { grid-column: 1; }
  #app > .magic-orb-screen:has(> .orb-setting-card + .orb-combat-buttons) > .orb-combat-buttons {
    grid-column: 2;
    position: sticky;
    top: calc(var(--app-header-height) + 12px);
  }
  #app > .magic-orb-screen > .orb-person-card {
    grid-template-columns: 64px minmax(0, 1fr) minmax(260px, .8fr);
    align-items: center;
  }
  #app > .magic-orb-screen .orb-person-card > .orb-counts {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  #app > .magic-orb-screen .orb-slot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #app > .magic-orb-screen > .orb-save-bar {
    position: sticky;
    bottom: 16px;
    z-index: 19;
    box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
  }
  body.chat-ready #app > .magic-orb-screen > .orb-save-bar { bottom: 72px; }
  #app > .magic-orb-screen:has(.orb-backdrop) > .orb-save-bar { visibility: hidden; }
}

@media (min-width: 1600px) {
  #app > .explore-rest-screen .expedition-zone-list:has(> .expedition-zone-card),
  #app > .forge-layout-screen .workshop-forge-grid,
  #app > .menu-list-screen .menu-console-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}