/*
 * The viewer page around the stage: the stage's fixed size, its scaling to the screen, showing
 * and hiding, and black bars where the screen isn't 16:9. The stage's look is the deck's master's.
 */

/* The presenter's faces, tobos.ai's own, under names no deck's master uses. A browser fetches a
   face only when text uses it, so the audience's page never loads them. */
@font-face {
  font-family: 'Tobos Sans';
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/hanken-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Tobos Mono';
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/geist-mono-latin.woff2') format('woff2');
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}
#tobos {
  position: fixed;
  inset: 0;
}
.tobos-letterbox {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* A long press on a slide steps, not iOS's menu to save its picture. */
  -webkit-touch-callout: none;
}
.tobos-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  contain: strict;
}
.tobos-layer {
  position: absolute;
  inset: 0;
}
/* The audience hides the pointer once fullscreen; before, it has to click there to get so. */
html.tobos-no-cursor:fullscreen,
html.tobos-no-cursor:fullscreen * {
  cursor: none !important;
}
.tobos-fullscreen-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font:
    14px/1 system-ui,
    sans-serif;
  pointer-events: none;
}
html:fullscreen .tobos-fullscreen-hint {
  display: none;
}
/* At the top, so it never covers the fullscreen hint; shown in fullscreen too. */
.tobos-sound-hint {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font:
    14px/1 system-ui,
    sans-serif;
  pointer-events: none;
}
.tobos-sound-hint[hidden] {
  display: none;
}

/* Embedded in a page, the stage shows that page's background where it doesn't reach. */
html.tobos-embedded,
html.tobos-embedded body,
html.tobos-embedded .tobos-letterbox {
  background: transparent;
}

/* The grid's guides, toggled with L; the master draws them into .tobos-guides-layer. */
html:not(.tobos-guides) .tobos-guides-layer {
  display: none;
}

/* Print: one page per beat. */
@page {
  size: 1920px 1080px;
  margin: 0;
}
html.tobos-print,
html.tobos-print body {
  height: auto;
  overflow: visible;
}
html.tobos-print #tobos {
  position: static;
}
html.tobos-print .tobos-page {
  position: relative;
  transform: none;
  break-after: page;
}

/* A share link's controls (share-bar.ts): in the bottom corners, while the pointer moves. */
.tobos-share-bar {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tobos-share-bar.tobos-share-left {
  right: auto;
  left: max(16px, env(safe-area-inset-left));
}
.tobos-share-bar.tobos-shown,
.tobos-share-bar.tobos-busy,
.tobos-share-bar:focus-within,
.tobos-share-bar:hover {
  opacity: 1;
  pointer-events: auto;
}
/* Square, in capitals, as the app's buttons are (brand/BRAND.md); dark, to read on any slide. */
.tobos-share-bar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  background: rgba(18, 26, 44, 0.78);
  color: #fff;
  font:
    500 10.5px/1 'Hanken Grotesk',
    system-ui,
    sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.tobos-share-bar button svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tobos-share-bar .tobos-fullscreen {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.tobos-share-bar .tobos-fullscreen svg {
  width: 16px;
  height: 16px;
}
.tobos-share-bar .tobos-animations[aria-pressed='false'] {
  color: rgba(255, 255, 255, 0.6);
}
.tobos-share-bar button:hover {
  border-color: #fff;
  background: rgba(18, 26, 44, 0.92);
}
@media (prefers-reduced-motion: reduce) {
  .tobos-share-bar,
  .tobos-share-bar button {
    transition: none;
  }
}
.tobos-share-bar button:disabled {
  cursor: progress;
}