/* Viewer: the canvas and the chrome around it. The HUD is in hud.css. */

:root {
  /* One control button across. The key list clears the control bar by this,
     so the two cannot drift apart. */
  --cbtn: 3rem;
}

body.viewing { overflow: hidden; }

.viewer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.viewer[hidden] { display: none; }

.view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.view.dragging { cursor: grabbing; }

/* The complex plane, on its own canvas over the picture so showing it costs
   no fractal frame. Every pointer gesture belongs to the canvas underneath. */
.plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.plane[hidden] { display: none; }

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

.set-name {
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

/* Julia's parameter, next to the set name so it survives a screenshot. */
.set-c {
  color: var(--dim);
  overflow-wrap: anywhere;
}

.set-c[hidden] { display: none; }

/* Way back to the portal. Fixed, so it shows in the menu and over the viewer.
   The viewer is positioned but has no z-index, so any z-index wins over it.
   The fixed width keeps the narrow-screen control offset below predictable. */
.portal-link {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 2;
  min-width: 5.5rem;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
}

.portal-link:hover { border-color: var(--dim); color: var(--ink); }

/* The key list. It stands above the control bar and grows upward as it wraps,
   so a long list never reaches down across the buttons. Sideways it takes what
   the HUD leaves, down to the width of its longest key, and each key stays
   whole on its line because the item, not the line, is what wraps. On the last
   thin sliver where the two would still meet, this one is on top and readable
   rather than lost behind the panel. */
.help {
  position: absolute;
  z-index: 1;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + var(--cbtn) + 0.5rem);
  max-width: min(44ch, max(34ch, calc(100vw - var(--hud-w) - 2.25rem)));
  margin: 0;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1rem;
  color: var(--dim);
  text-align: right;
  pointer-events: none;
}

.help[hidden] { display: none; }

.help span { white-space: nowrap; }

/* Control bar: the plane, a dive, the timeline, the key list and a
   screenshot. Same on every device. */

.controls {
  position: absolute;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  gap: 0.5rem;
}

.cbtn {
  width: var(--cbtn);
  height: var(--cbtn);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 50%;
  backdrop-filter: var(--glass);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cbtn-accent { border-color: var(--magenta); color: var(--magenta); }
/* A toggle shows its state: on is the accent, off is the plain circle. */
.cbtn[aria-pressed="true"] { border-color: var(--magenta); color: var(--magenta); }
.cbtn:hover { border-color: var(--ink); }
.cbtn:active, .cbtn-accent:hover { background: var(--magenta); border-color: var(--magenta); color: #000; }

/* No keyboard, no key list, and no button to call it back. */
@media (pointer: coarse) {
  .help, #help-toggle { display: none; }
}

/* Narrow screens: the HUD owns the bottom, so the controls join the top bar. */
@media (max-width: 720px) {
  :root { --cbtn: 2.5rem; }
  .help, #help-toggle { display: none; }
  /* The buttons in a row would run across the set name, so they go two to a
     row and take the free canvas under the top bar instead. */
  .controls {
    top: max(0.75rem, env(safe-area-inset-top));
    bottom: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: calc(2 * var(--cbtn) + 0.5rem);
  }
  /* Up here the controls share the top-right corner with the portal link, so
     they sit one button width plus a gap to its left. */
  body.viewing .controls {
    right: calc(max(0.75rem, env(safe-area-inset-right)) + 5.5rem + 0.5rem);
  }
  .cbtn { font-size: 1rem; }
  .cbtn svg { width: 18px; height: 18px; }
  .set-name { font-size: 1rem; }
}