/*! PeoplePlotr story trees. Copyright © 2026 Webalon Ltd. All rights reserved.
 * Licensed for use on peopleplotr.com only. Copying, modifying, redistributing or hosting this code
 * elsewhere, in whole or in part, is not permitted without written permission from Webalon Ltd. */
/*
 * The shared or embedded tree (viewer.html): the tree fills the whole window or iframe.
 * Load css/tree.css first.
 */

html, body { height: 100%; }
body { background: var(--bg); overflow: hidden; }

.viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.viewer .stage { flex: 1 1 0px; min-height: 0; border: 0; }

/* no tree to show, or one that can't be read */
.viewer-message {
  margin: auto;
  max-width: 30em;
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}

/* the secret word form, and the notice for a private tree, when the site hosting the tree asks for them */
.viewer-lock {
  margin: auto;
  width: 340px;
  max-width: calc(100% - 32px);
  padding: 28px 24px 24px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.viewer-lock-icon {
  display: block;
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3zm3 4a2 2 0 0 1 1 3.7V19h-2v-1.3A2 2 0 0 1 12 14z'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.viewer-lock h1 { margin: 0 0 4px; font-size: 20px; }
.viewer-empty p { margin-bottom: 0; }
.viewer-lock p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.viewer-lock-field { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); }
.viewer-lock-field input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 12px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  background: var(--page); border: 1px solid var(--line); border-radius: 10px;
}
.viewer-lock-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.viewer-lock .viewer-lock-error { margin: 10px 0 0; color: var(--unknown); font-weight: 600; }
.viewer-lock button {
  width: 100%; margin-top: 16px; padding: 9px 16px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer;
}
.viewer-lock button:disabled { opacity: 0.6; cursor: default; }