/* =====================================================================================================
   mh-phone.css - THE SHELL ON A PHONE (ROUND25, 4 Oct 2026, training note 95: "go ahead and finish them all").

   MEASURED BEFORE (375 x 812): the top bar's contents were 762px wide in a 289px bar and it never shrank, so the PAGE
   became 848px wide. Everything pinned to the window's right edge - the Matthew House AI bubble, the kept-on-top tabs -
   sat off the screen, the search circle was drawn outside its own box, and the bell / New / account menus opened
   wider than the screen.

   WHAT THIS DOES, at 640px and narrower ONLY (a tablet and a computer never read these rules):
     - the weather and the light/dark button step aside (dark mode stays in Settings and "turn on dark mode");
     - "+ New" is the plus alone, the account chip is the picture alone - both still open their menus;
     - the search circle sits at the left and opens across the whole bar;
     - the bell, New and account menus hang under the BAR, edge to edge, instead of under their own button.
   Loaded last, so nothing here has to out-shout another file.
   ===================================================================================================== */
@media (max-width: 640px) {
  .mh-app .topbar { padding: 0 10px; gap: 5px; }
  .mh-app .topbar .mhwx,
  .mh-app .topbar #darkBtn { display: none; }
  .mh-app .topbar .icon-btn { width: 36px; height: 36px; border-radius: 12px; }

  /* search: the circle at the left; open = the whole bar */
  .mh-app .topbar .gsearch { flex: 1 1 0; min-width: 42px; margin: 0; }
  .mh-app .topbar .gsearch:not([data-open="1"]) .bigbar { margin-left: 0; }
  .mh-app .topbar .gsearch[data-open="1"] { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); z-index: 6; }

  /* + New: the plus alone */
  .mh-app .topbar #topActionLbl { display: none; }
  .mh-app .topbar .top-action-wrap.taw-ring #topAction { padding: 0 9px; }

  /* the account chip: the picture alone */
  .mh-app .topbar .tb-user { padding: 3px; gap: 0; min-width: 0; }   /* mh-mail.css keeps the chip 248px wide for its menu */
  .mh-app .topbar .tb-user > div,
  .mh-app .topbar .tb-user .tb-chev { display: none; }

  /* Home: the Widgets button and the period buttons take two lines instead of pushing the page wider */
  .mh-app .kpi-controls { flex-wrap: wrap; }

  /* the menus hang under the bar (the bar is their anchor), from edge to edge */
  .mh-app .topbar .bell-wrap,
  .mh-app .topbar .top-action-wrap,
  .mh-app .topbar .tb-user-wrap { position: static; }
  .mh-app .topbar .bell-menu,
  .mh-app .topbar .top-menu,
  .mh-app .topbar .tb-user-wrap .tb-menu { left: 8px; right: 8px; top: calc(100% + 6px); width: auto; min-width: 0; max-width: none; }
}