/* zack demo banner + tutorial overlay. Lives above the web UI. */

.zd-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--tinte);
  color: var(--creme);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  z-index: 9998;
  border-bottom: 2px solid var(--comic-rot);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.zd-banner-link {
  color: var(--creme);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  font-family: inherit;
}
.zd-banner-link:hover { background: rgba(255, 248, 230, 0.12); }
.zd-banner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zd-banner-spacer { flex: 1; }
.zd-banner-btn {
  background: transparent;
  color: var(--creme);
  border: 1px solid var(--creme);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.zd-banner-btn:hover { background: var(--creme); color: var(--tinte); }
.zd-banner-btn:active { transform: translateY(1px); }

/* Push the LAN web UI down so the banner doesn't overlap.
 * html is 100% tall (from the web app's own CSS); border-box makes the
 * padding-top reserved inside that 100%, so html's content area is
 * 100vh - 36px. Body and #root keep their `height: 100%` and end up
 * exactly viewport height minus the banner. Internal tab scrolling
 * (defined in web/index.html) keeps working. */
html {
  padding-top: 36px;
  box-sizing: border-box;
}

/* Tutorial overlay */
.zd-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.zd-tour-card {
  background: var(--creme);
  border: 2px solid var(--petrol);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--tinte);
  max-width: 440px;
  width: 100%;
  padding: 28px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--tinte);
}
.zd-tour-step {
  font-size: 11px;
  font-weight: 700;
  color: var(--grau);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.zd-tour-title {
  font-family: 'Segoe UI Black', 'Arial Black', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  color: var(--comic-rot);
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
  transform: rotate(-1deg);
}
.zd-tour-body {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
  color: var(--tinte-soft);
}
.zd-tour-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}
.zd-tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.18);
}
.zd-tour-dot.active { background: var(--petrol); }
.zd-tour-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.zd-tour-actions .zd-tour-spacer { flex: 1; }
.zd-tour-btn {
  background: var(--creme);
  color: var(--tinte);
  border: 2px solid var(--tinte);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--tinte);
  font-family: inherit;
}
.zd-tour-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--tinte); }
.zd-tour-btn:hover { background: var(--senf-d); }
.zd-tour-next { background: var(--comic-rot); color: var(--creme); }
.zd-tour-next:hover { background: var(--comic-rot-d); }
.zd-tour-skip {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--grau);
  font-weight: 600;
  padding: 8px 6px;
}
.zd-tour-skip:hover { color: var(--tinte); background: transparent; }
.zd-tour-prev[hidden] { display: none; }