/* The practice copy's bar along the top. Only in the practice build. */
:root { --practice-h: 52px; }
.practice-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
  padding: 7px 16px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 15px;
}
.practice-note { margin: 0; }
.practice-views { display: flex; flex-wrap: wrap; gap: 4px; }
.practice-views a, .practice-reset {
  font: inherit; font-weight: 620; color: #fff; text-decoration: none; cursor: pointer;
  min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: transparent;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.practice-views a:hover, .practice-reset:hover { border-color: #fff; }
.practice-views a:active, .practice-reset:active { transform: translateY(1px); }
.practice-views a[aria-current="page"] { background: #fff; color: var(--ink); border-color: #fff; }
.practice-reset { margin-left: 8px; border-style: dashed; }
.practice-reset[data-sure="1"] { background: #fff; color: var(--danger); border-style: solid; border-color: #fff; }
.practice-bar :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* the pages are built to fill the screen, so give the bar its share of the height */
@media (min-width: 861px) {
  .app { min-height: calc(100dvh - var(--practice-h)); }
  .panel { max-height: calc(100dvh - var(--practice-h)); }
  .board-grid { height: calc(100dvh - var(--practice-h)); }
  .stage .rose { max-height: calc(100dvh - var(--practice-h) - 70px); }
  .board-map .rose { max-height: calc(100dvh - var(--practice-h) - 32px); }
  .topbar { top: var(--practice-h); }
  .board-side { justify-content: safe center; }
}

@media (max-width: 860px) { .practice-bar { position: static; } }
@media (max-width: 700px) {
  .practice-bar { padding: 8px 12px; font-size: 14.5px; }
  .practice-views a, .practice-reset { padding: 0 11px; }
}