/* Focus mode: while a project is open on the monitor, show this bar and hide the tour overlay. */

.focusbar {
  position: fixed; z-index: 7; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 10px 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.focusbar .btn { align-self: center; }
.focusbar a { font-weight: 600; padding: 10px 6px; }

.focus-nav { display: flex; align-items: center; gap: 8px; }
.focus-nav button {
  font: inherit; font-size: 20px; line-height: 1; width: 44px; height: 44px; border-radius: 50%;
  background: none; border: 1px solid var(--line); color: var(--fg); cursor: pointer;
}
.focus-nav button:hover { border-color: var(--muted); }
.focus-nav strong { font-family: var(--display); font-size: 17px; min-width: 12ch; text-align: center; }

/* Phones and tall screens: a readable full-width copy of the project page (js/ui/project-sheet.js) */
.project-sheet { display: none; }
@media (max-width: 720px), (max-aspect-ratio: 1/1) {
  body.focused .project-sheet {
    display: block; position: fixed; z-index: 6;
    top: calc(76px + env(safe-area-inset-top, 0px));
    left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
    width: calc(100% - 32px); height: auto; aspect-ratio: 16 / 9;
    border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
  /* The picture's small text is hard to read on a phone, so show the project description in the bar too */
  .focusbar #focusDesc {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    order: -1; flex-basis: 100%; margin: 0 4px; font-size: 14px; line-height: 1.5; color: #C9CEDA; text-align: center;
  }
}

body.focused .card,
body.focused .pin,
body.focused .rail,
body.focused .cue { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }