/* Viewer chrome for an exported Claude Design deck. Paired with deck-shell.js,
   which builds the markup — a talk page only needs to link these two files. */
:root { --ink: #161600; --amber: #FBFF56; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--ink); }
#deck-frame { display: block; width: 100%; height: 100%; border: 0; }

/* Bottom-right so it never collides with the deck's own bottom-centre overlay. */
#bar {
  position: fixed;
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  background: rgba(22, 22, 0, 0.72);
  -webkit-backdrop-filter: blur(6px); /* Safari only dropped the prefix in 18 */
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font: 600 0.85rem/1 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  z-index: 10;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
/* Author `display` rules below outrank the UA's `[hidden] { display: none }`,
   so `hidden` needs restating or it silently does nothing. */
#bar[hidden], #bar [hidden] { display: none; }
#bar:hover, #bar:focus-within { opacity: 1; }
/* Touch devices get no hover, so the controls stay legible at all times. */
@media (hover: none) { #bar { opacity: 1; } }

#bar button {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font: inherit;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
#bar button[data-busy] { opacity: 0.55; }
#count {
  padding: 0 0.4rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Transient "Copied"/"Failed" feedback, so a clipboard write isn't silent. */
#toast {
  position: fixed;
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  padding: 0.4rem 0.7rem;
  background: var(--amber);
  color: var(--ink);
  border-radius: 999px;
  font: 600 0.8rem/1 "IBM Plex Sans", -apple-system, sans-serif;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
#toast[data-show] { opacity: 1; }

@media (max-width: 820px) {
  #bar { opacity: 1; }
  #bar button { min-width: 2.75rem; height: 2.75rem; }
}

/* 640px is where the deck hides its own thumbnail rail, so below it the toggle
   is moot — it has to match the deck exactly, or there's a band where the rail
   shows with no way to dismiss it. Needs the #bar prefix to outrank
   `#bar button` above. */
@media (max-width: 640px) {
  #bar #rail { display: none; }
}