/* ---------- layout: idle (centered) vs active (dock at the bottom) ---------- */

#app {
  position: fixed;
  inset: 0;
  z-index: 1; /* above the theme's corner art (body::after, z-index 0) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 16px 18px;
}
#title {
  margin: 0;
  font: 400 clamp(36px, 4.6vw, 54px) / 1.1 var(--serif);
  letter-spacing: -0.015em;
  text-align: center;
  user-select: none;
}
/* the brand wordmark, as on tinker.click: TINKER in ink, CLICK in blue; cream and light blue in dark mode */
#title .wordmark {
  display: block;
  height: 1em;
  width: auto;
}
#title .wm-tinker { fill: #121212; }
#title .wm-click { fill: #2B4DFF; }
@media (prefers-color-scheme: dark) {
  #title .wm-tinker { fill: #EEE9E2; }
  #title .wm-click { fill: #7590FF; }
}
#stage { display: none; }
#dock {
  position: relative; /* the chatter box (dock.css) sits inside it */
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#app.active { justify-content: flex-start; gap: 10px; padding-top: 8px; }
/* the faded title leaves the flow so the stage reaches the top */
#app.active #title {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
}
#app.active #stage {
  display: block;
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ---------- stage ---------- */

/* faded in once start-up has settled (see app.js) */
#app #title, #app #dock { transition: opacity 0.3s ease; }
#app.booting #title, #app.booting #dock { opacity: 0; }