/* layout.css: where things go (UI_STYLE_GUIDE section 6). Grid and areas only; no colours, no fonts.
   Dimensions come from tokens.css variables. The orientation / tier media queries below repeat the
   conditions of tokens.css because the structure (not only the size) changes there. */

@layer layout {
  html, body { height: 100%; }
  body { min-height: 100vh; min-height: 100dvh; overflow: hidden; }

  /* ================= field screen ================= */
  /* landscape l / xl / m: map + right rail, message and guide under the map */
  .ui-field {
    position: relative;
    display: grid;
    height: 100vh; height: 100dvh;
    padding: var(--lay-pad);
    gap: var(--lay-gap);
    grid-template-columns: minmax(0, 1fr) var(--lay-rail-w);
    grid-template-rows: minmax(0, 1fr) var(--lay-guide-h);
    grid-template-areas:
      "map   rail"
      "guide rail";
  }
  .ui-map   { grid-area: map; }
  .ui-log   { grid-area: log; }
  .ui-guide--field { grid-area: guide; }
  .ui-rail  { grid-area: rail; display: flex; flex-direction: column; gap: var(--sp-6); min-height: 0; }
  .ui-rail > .ui-log { flex: none; height: var(--lay-msg-h); }
  .ui-rail > .ui-minimap { --minimap-fill-w: auto; --minimap-fill-h: auto; --minimap-flex: 1 1 0; }
  .ui-deck  { display: none; }
  .ui-rail > .ui-log { cursor: pointer; }

  /* landscape tablets driven by touch: the guide keys are the action buttons, the deck adds the d-pad under the log */
  @media (orientation: landscape) and (min-height: 521px) {
    html[data-input="touch"] .ui-rail > .ui-deck { display: flex; justify-content: center; --lay-dpad-cell: var(--lay-hit-min); }
    html[data-input="touch"] .ui-rail > .ui-deck .ui-actions { display: none; }
    html[data-input="touch"] .ui-rail > .ui-minimap { min-height: 0; }
  }

  /* phone landscape: [left deck | map + message | right deck] */
  @media (orientation: landscape) and (max-height: 520px) {
    .ui-field {
      grid-template-columns: var(--lay-rail-w) minmax(0, 1fr) var(--lay-rail-w);
      grid-template-rows: minmax(0, 1fr) var(--lay-msg-h);
      grid-template-areas:
        "left map right"
        "left log right";
    }
    .ui-rail, .ui-deck { display: contents; }
    .ui-rail > .ui-hud      { grid-area: left; align-self: start; }
    .ui-rail > .ui-minimap  { grid-area: right; align-self: start; margin-top: 0; --minimap-fill-w: var(--minimap-w); --minimap-fill-h: var(--minimap-h); --minimap-flex: none; }
    .ui-rail > .ui-log { height: auto; }
    .ui-rail > .ui-threat   { grid-area: map; align-self: start; justify-self: start; z-index: var(--z-field); margin: var(--sp-2); }
    .ui-deck > .ui-dpad     { grid-area: left; align-self: end; justify-self: center; }
    .ui-deck > .ui-actions  { grid-area: right; align-self: end; justify-self: center; }
    .ui-guide--field { --d-guide: none; }
  }

  /* phone portrait: HUD strip, map, messages, control deck */
  @media (orientation: portrait) {
    .ui-field {
      padding: calc(var(--safe-t) + var(--lay-pad)) calc(var(--safe-r) + var(--lay-pad)) calc(var(--safe-b) + var(--lay-pad)) calc(var(--safe-l) + var(--lay-pad));
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--lay-hud-h) minmax(0, 1fr) var(--lay-msg-h) var(--lay-deck-h);
      grid-template-areas:
        "hud"
        "map"
        "log"
        "deck";
    }
    .ui-rail { display: contents; }
    .ui-rail > .ui-hud {
      grid-area: hud;
      --hud-cols: auto minmax(0, 1.6fr) minmax(0, 1fr) auto;
      --hud-areas: "title hp mp sp";
      --d-status: none; --title-bw: 0px;
      column-gap: var(--sp-3);
    }
    .ui-rail > .ui-hud .ui-title { padding-block: 0; }
    .ui-rail > .ui-minimap { grid-area: map; align-self: start; justify-self: end; margin: var(--sp-2); z-index: var(--z-field); --minimap-fill-w: var(--minimap-w); --minimap-fill-h: var(--minimap-h); --minimap-flex: none; }
    .ui-rail > .ui-log { height: auto; }
    .ui-rail > .ui-threat  { grid-area: map; align-self: start; justify-self: start; margin: var(--sp-2); z-index: var(--z-field); }
    .ui-deck { grid-area: deck; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-4); }
    .ui-guide--field { --d-guide: none; }
  }

  /* ================= menu screen ================= */
  .ui-menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    display: grid;
    padding: var(--lay-pad);
    gap: var(--lay-gap);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--lay-tab-h) auto minmax(0, 1fr) var(--lay-desc-h);
    grid-template-areas:
      "tabs"
      "head"
      "body"
      "desc";
  }
  .ui-menu > .ui-tabs { grid-area: tabs; }
  .ui-menu > .ui-menu__head { grid-area: head; }
  .ui-menu > .ui-desc { grid-area: desc; }
  .ui-menu__body {
    grid-area: body; min-height: 0;
    display: grid; gap: var(--lay-gap);
    grid-template-columns: var(--lay-menu-list-w) minmax(0, 1fr) var(--lay-portrait-w);
    grid-template-areas: "list detail portrait";
  }
  .ui-menu__body--plain { grid-template-columns: var(--lay-menu-list-w) minmax(0, 1fr); grid-template-areas: "list detail"; }
  .ui-menu__body > .ui-list { grid-area: list; }
  .ui-menu__body > .ui-detail { grid-area: detail; }
  .ui-menu__body > .ui-portrait { grid-area: portrait; }

  /* phone landscape: no portrait column */
  @media (orientation: landscape) and (max-height: 520px) {
    .ui-menu__body { grid-template-columns: var(--lay-menu-list-w) minmax(0, 1fr); grid-template-areas: "list detail"; }
  }

  /* phone portrait / tablet portrait: one column, portrait sits at the right end of the head row */
  @media (orientation: portrait) {
    .ui-menu {
      padding: calc(var(--safe-t) + var(--lay-pad)) calc(var(--safe-r) + var(--lay-pad)) calc(var(--safe-b) + var(--lay-pad)) calc(var(--safe-l) + var(--lay-pad));
      grid-template-rows: var(--lay-tab-h) auto minmax(0, 1fr) auto var(--lay-desc-h);
      grid-template-areas:
        "tabs"
        "head"
        "list"
        "detail"
        "desc";
    }
    .ui-menu__body { display: contents; }
    .ui-menu__body > .ui-list   { grid-area: list; }
    .ui-menu__body > .ui-detail { grid-area: detail; }
    .ui-menu > .ui-menu__head { align-self: end; margin-inline-end: var(--head-reserve); }
    .ui-menu__body > .ui-portrait { grid-area: head; justify-self: end; align-self: end; width: var(--lay-portrait-w); }
  }
}