/* This file is part of Chaos Accelerator, licensed under the Common Public
   Attribution License, Version 1.0 (CPAL-1.0) - see LICENSE in the project
   root, or https://chaosaccelerator.com/license for a hosted copy. */

/* Narrow/tall layout for both views, whenever the viewport itself is
   taller than it is wide.

   The two views want different things of it and no longer share a rule
   set. The editor's docked #panel moves from the left of #main to the
   bottom of it. The grid's menu column is already a floating stack over
   the fractal and stays in the upper left - the one corner a narrow window
   has room for - and only gives up its fixed card width and caps its
   height, so the picture is never entirely buried.

   The grid's ids are namespaced because both shells live in one document
   (see chaos.html).

   Deliberately keyed on orientation:portrait - a pure aspect-ratio media
   feature - rather than any device/UA check, so a desktop window resized
   into a tall shape gets exactly the same layout a phone does, and is
   exactly as easy to test. Both pages already share the #main/#panel/
   #canvas-area structure this depends on, so one shared rule set covers
   both instead of two hand-kept copies of the same layout.

   Loaded after both views' own stylesheets (see the <link> order in
   chaos.html) so these rules win the cascade over the base (landscape)
   #panel/#main/#canvas-area rules without needing higher specificity or
   !important. */
@media (orientation: portrait) {
  #main,
  #grid-main {
    flex-direction: column;
  }
  #panel {
    order: 2;
    width: 100%;
    max-height: 45vh;
    border: 0;
    border-top: 1px solid var(--border);
  }
  #canvas-area,
  #grid-canvas-area {
    order: 1;
    min-height: 0;
  }
  /* #grid-view only - #editor-view has no matching element, so this
     is a no-op there. The drag handle only makes sense for resizing a
     horizontal (left) panel; hidden here rather than building a second,
     vertical resize interaction that hasn't been asked for, and because
     the column below takes the full width anyway. */
  #panel-resizer {
    display: none !important;
  }

  /* #grid-view only. Its menu column is a floating stack over the grid
     (absolutely positioned - see fractal-grid.css) and stays in the upper
     left, which is the one corner a narrow window has room for; it just
     gives up the fixed card width and takes what the viewport has, and
     caps its height so the fractal is never entirely buried. Scoped by the
     body's own class so both views keep sharing this one file. */
  .page-grid #grid-menu-column {
    width: calc(100% - var(--panel-inset) * 2);
  }
  .page-grid #grid-menu-stack {
    max-height: 60vh;
  }
  /* The card's landscape cap is measured against the whole viewport; here
     the stack itself only gets 60vh of it, so the same arithmetic has to be
     redone against that - or one open card would fill the stack and push
     the menus below it out of reach. */
  .page-grid .menu-card {
    max-height: calc(60vh - var(--menu-reserved));
  }
  /* The right-hand column (Settings, Map Evolution) needs the same
     redone-against-60vh cap, spelled with its own id because the landscape
     rule it has to beat (in fractal-grid.css) is itself id-scoped and would
     otherwise outrank the class selector just above. Its reserve is one
     collapsed button plus the gap, not --menu-reserved: there are only ever
     two items in this column. */
  .page-grid #grid-right-menu-column {
    max-height: 60vh;
  }
  .page-grid #grid-right-menu-column .menu-card {
    max-height: calc(60vh - var(--settings-btn-size) - 8px);
  }
}