/* The Bar at phone size and a smaller mode switcher (Jesse, 2026-10-10: "looking pretty terrible";
   "make the mode select smaller"). Loaded after bar.css, bar_players.css and bar_who.css. */

/* The switcher's size is shared (house_controls.css: face and mode, no name; face only on phones). */

@media (max-width: 760px) {
  /* header: row 1 = sign, who's serving, mode; row 2 = the sections and + OPEN A TAB */
  .bar .bar-head { display: grid; gap: .4rem .5rem; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: .45rem .6rem; }
  .bar .bar-head .bar-sign { font-size: 1.75rem; }
  .bar .bar-head .who-chip { justify-self: end; max-width: 100%; min-height: 44px; }
  .bar .bar-head .who-chip-face { height: 34px; width: 34px; }
  .bar .bar-head .who-chip-words b { font-size: 1.15rem; max-width: 8rem; }
  .bar .bar-head .who-chip-switch { display: none; }
  .bar-head .mode-switch { grid-column: 4; grid-row: 1; justify-self: end; margin-left: 0; }
  .bar .bar-head .bar-sections { flex-wrap: nowrap; gap: .2rem; grid-column: 1 / -1; grid-row: 2; order: 0; overflow-x: auto; scrollbar-width: none; width: auto; }
  .bar .bar-head .bar-sections a { flex: none; font-size: .58rem; letter-spacing: .05em; min-height: 44px; padding: 0 .55rem; white-space: nowrap; }
  .bar .bar-head .bar-long { display: none; }

  /* no tab picked: just the list (the empty right pane only took space) */
  .bar-main:has(.bar-none) .bar-detail, .bar-main > :has(> .bar-none) { display: none; }

  /* OPEN A TAB: title and × on one row, the hint under it */
  .bar-sheet { border-radius: 18px; padding: .9rem .9rem 1rem; }
  .bar-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .bar-sheet-head h2 { grid-column: 1; grid-row: 1; }
  .bar-sheet-head .bar-close { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .bar-sheet-head span { font-size: 1.05rem; grid-column: 1; grid-row: 2; }

  /* RING UP and CLOSE OUT: one swipeable row of chips instead of three wrapped rows */
  .ring-chips, .barx-steps { flex-wrap: nowrap; margin: 0 -.7rem; overflow-x: auto; padding: 0 .7rem; scrollbar-width: none; }
  .ring-chips::-webkit-scrollbar, .barx-steps::-webkit-scrollbar, .bar-sections::-webkit-scrollbar { display: none; }
  .ring-chips > *, .bar .barx-steps a { flex: none; white-space: nowrap; }
  .bar .barx-steps a { min-height: 44px; padding: 0 .8rem; }
  .ring-top .ring-back { flex: none; }
}

/* + OPEN A TAB is a small round blue + in the header (Jesse, 2026-10-10) */
.bar .bar-head .bar-open { justify-content: center; min-height: 0; height: 44px; padding: 0; width: 44px; }
.bar .bar-head .bar-open svg { height: 22px; width: 22px; }
@media (max-width: 760px) { .bar .bar-head .bar-open { grid-column: 3; grid-row: 1; justify-self: end; min-height: 0; padding: 0; } }