/* The header on a phone (remade 3 Nov, front.css; before that Chris, 26 Oct: "a more comfortable arrangement of the elements at the top"). On the Desk the title block was squeezed
   into a narrow column by the notifications chip, the reload button and his medallion, so the date broke into four lines. Since 3 Nov the
   title and the day stand stacked beside the round buttons in one row, and anything live goes in the alert strip under it (front.css). */
@media (max-width: 700px) {
  /* 3 Nov: one slim row. Studio over the day and time on the left; reload, the meeting, Plan my time and his sessions on the right. */
  body:not(.in-room) .top {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; column-gap: 8px; padding-block: 2px 10px;
  }
  body:not(.in-room) .top .top-id { grid-column: 1; grid-row: 1; }
  body:not(.in-room) .top .reload-top { grid-column: 2; grid-row: 1; margin: 0; }
  body:not(.in-room) .top .meet-btn { grid-column: 3; grid-row: 1; margin: 0; }
  body:not(.in-room) .top .plan-open { grid-column: 4; grid-row: 1; margin: 0; }
  body:not(.in-room) .top .mine-spot, body:not(.in-room) .top .mine-open { grid-column: 5; grid-row: 1; margin: 0; }
  /* Over the Yacht the strip is already one row: the date keeps one line instead of breaking at the buttons. */
  html.yacht3d body.in-room .top > div { flex: 1 1 auto; min-width: 0; }
  html.yacht3d body.in-room .top .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* One order for the header's round buttons on the Desk and over the Yacht (Chris, 28 Oct: "they are in multiple positions"): refresh, the map
   and his medallion stand in the same places on both, and the Yacht's full-screen button takes the place to their left instead of pushing them. */
html.yacht3d body.in-room .top > div { order: 0; }
html.yacht3d body.in-room .top .yacht-full { order: 1; }
html.yacht3d body.in-room .top .reload-top { order: 2; }
html.yacht3d body.in-room .top .meet-btn { order: 3; }
html.yacht3d body.in-room .top .plan-open { order: 4; }
html.yacht3d body.in-room .top .mine-open { order: 5; }
html.yacht3d body.in-room .top .yacht-full, html.yacht3d body.in-room .top .reload-top, html.yacht3d body.in-room .top .meet-btn, html.yacht3d body.in-room .top .plan-open,
html.yacht3d body.in-room .top .mine-open, html.yacht3d body.in-room .top .mine-open.pinned, html.yacht3d body.in-room .top .mine-open.pinned.unplaced { margin-left: 0; }
html.yacht3d body.in-room .top { gap: 10px; }
html.yacht3d body.in-room .top .yacht-full { margin-top: 6px; }