/* ==========================================================================
   Menu Bar — Responsive Rules
   ========================================================================== */

/* Progressive hiding prevents left / right section collision.
   Priority (hidden first -> last):
     1. Clock date — least critical; time alone is sufficient.
     2. Window menu trigger — still reachable through the app menu.

   Density-aware thresholds via :has():
     When the Window trigger AND all three shortcut items are present
     (Calendar or Finder active with minimisable windows open) the left
     section reaches its widest layout (~7 elements).  The "crowded"
     tier fires ~100 px earlier so date / Window hide before overlap.
     When fewer items are present the original base thresholds still
     apply — elements stay visible longer.

   Container queries react to the menu-bar inline-size.
   @media fallbacks cover browsers without container-query support. */

/* -- Crowded tier: 3 shortcut items + Window trigger (~7 elements) -------- */

/* Hide date first when the bar is at max density. */
@container (max-width: 660px) {
  .menu-bar-left:has(.window-menu-trigger):has(.menu-bar-item + .menu-bar-item + .menu-bar-item)
    + .menu-bar-right .clock-date {
    display: none !important;
  }
}

/* Then collapse the Window trigger while three items are still rendered. */
@container (max-width: 560px) {
  .menu-bar-left:has(.menu-bar-item + .menu-bar-item + .menu-bar-item)
    .menu-trigger.window-menu-trigger {
    display: none !important;
  }
}

/* -- Base tier: standard density (≤ 2 items ± Window) --------------------- */

@container (max-width: 550px) {
  .clock-date { display: none !important; }
}

@container (max-width: 480px) {
  .menu-trigger.window-menu-trigger { display: none !important; }
}

/* -- Viewport @media fallbacks -------------------------------------------- */

@media (max-width: 660px) {
  .menu-bar-left:has(.window-menu-trigger):has(.menu-bar-item + .menu-bar-item + .menu-bar-item)
    + .menu-bar-right .clock-date {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .menu-bar-left:has(.menu-bar-item + .menu-bar-item + .menu-bar-item)
    .menu-trigger.window-menu-trigger {
    display: none !important;
  }
}

@media (max-width: 550px) {
  .clock-date { display: none !important; }
}

@media (max-width: 480px) {
  .menu-trigger.window-menu-trigger { display: none !important; }
}