/* Làm xám (greymode.js): the small bar over the viewport while the level is grey. Everything is under
   .grey- so it cannot touch the rest of the page.

   It sits at the top centre, on a second row under the design's toolbar (top left, from 10 px for
   about 28 px) and the face-orientation toggle (top right), so it never covers either; the readout
   and the hints along the bottom edge are left alone too. The notes that go with it (playnotes.js)
   style themselves. */

.grey-bar {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; max-width: calc(100% - 20px);
  padding: 3px 4px 3px 12px;
  background: rgba(20, 21, 26, .86); border: 1px solid #9aa0ad; border-radius: 14px;
  color: var(--text); font-size: 12px; line-height: 1.3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-user-select: none; user-select: none;
}
.grey-bar [hidden] { display: none !important; }

.grey-label { padding-right: 2px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Every item placed: the count turns the colour a finished thing has everywhere else. */
.grey-bar.grey-done { border-color: var(--ok); }
.grey-bar.grey-done .grey-label { color: var(--ok); }

.grey-btn { padding: 2px 10px; font-size: 11px; border-radius: 10px; white-space: nowrap; }
.grey-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }