/* ISSUE-012 | Common HUD / condition bar / operation layout master v1.0
   Canonical ownership: Top HUD height, condition-bar height, and page content start.
   Operation pages MUST derive their top position from these tokens.
   Do not add page-specific top-offset rules elsewhere.
*/

:root{
  /* Physical height of the compact top HUD. Vertical responsive unit keeps HUD/page geometry synchronized. */
  --ui-top-hud-height:clamp(24px,6.2vh,38px);

  /* Minimal visual gap between HUD edge and page content. */
  --ui-page-top-gap:2px;

  /* Canonical starting inset for pages placed directly below the HUD. */
  --ui-page-top-inset:calc(var(--ui-top-hud-height) + var(--ui-page-top-gap));

  /* Canonical operation-page top edge. This is the ONLY vertical start token for
     manufacturing / warehouse / listings / orders pages. */
  --ui-operation-top-inset:var(--ui-page-top-inset);

  /* Reserved for later layout-token expansion. */
  --ui-page-side-gap:6px;
  --ui-page-content-gap:4px;
}

/* The HUD and the page inset share one canonical height token. */
.top.top-dashboard{
  height:var(--ui-top-hud-height);
}

/* Layout type: ordinary page directly below the HUD. */
.page.ui-layout-under-hud{
  padding-top:var(--ui-page-top-inset);
}

/* UI-HUD-002: ordinary pages always begin directly below the Top HUD.
   Shared HP/MP/Hunger Condition HUD no longer owns vertical page offset. */

/* Layout type: operation / production page.
   The page itself is the HUD-safe viewport. Its children start in the content
   box directly below Top HUD. Legacy 4px / 31px offsets are intentionally not
   allowed to own this edge. */
.page.ui-layout-operation{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  padding-top:var(--ui-operation-top-inset);
  overflow:hidden;
}

/* Canonical operation shells: fill the remaining content box, never the HUD
   overlay. Width/inner padding remain page-specific. */
.page.ui-layout-operation > .armor-operation-shell,
.page.ui-layout-operation > .production-operation-shell,
.page.ui-layout-operation > .weapon-operation-shell,
.page.ui-layout-operation > .production-generic-shell{
  box-sizing:border-box;
  margin-top:0;
  height:100%;
  min-height:0;
  max-height:none;
}

/* Layout type: full-screen page. It may use the HUD overlay area. */
.page.ui-layout-fullscreen{
  padding-top:0;
}

@media (max-width:560px) and (orientation:landscape){
  :root{
    --ui-top-hud-height:24px;
  }
}