/* The Mosaics tab in the Chat edition (js/soon.js): what is coming. */

#app[data-view="soon"] #dock,
#app[data-view="soon"] #statusline { display: none; }
#app[data-view="soon"] #workbench { width: 0; border-left-width: 0; }
#app[data-view="soon"] #workbench-resize,
#app[data-view="soon"] .bench-toggles { display: none; }
/* Nothing of Chat's in the sidebar here: no New chat, no search, no chats.
   Hidden, not removed, so the sidebar keeps its shape and Settings its place. */
#app[data-view="soon"] #sidebar :is(.side-actions, .side-scroll, .rail-chat) { visibility: hidden; }

.soon { position: absolute; inset: 0; overflow-y: auto; scrollbar-gutter: stable; }

/* The page is always night, in either theme: a starry sky laid in tiles
   (js/starry.js) fills it, and the words and cards are set for the dark. */
#view-soon {
  color-scheme: dark;
  background: var(--night-sky);
  --text: var(--night-text);
  --text2: color-mix(in srgb, var(--night-text) 80%, transparent);
  --text3: color-mix(in srgb, var(--night-text) 62%, transparent);
  --border: color-mix(in srgb, var(--night-line) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--night-line) 24%, transparent);
  --surface: color-mix(in srgb, var(--night-panel) 74%, transparent);
  --surface-hover: color-mix(in srgb, var(--tile-navy-deep) 86%, transparent);
  --surface-pressed: color-mix(in srgb, var(--tile-navy) 90%, transparent);
  color: var(--text);
}
.soon-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* A shade under the words, painted once: no blur (it flickers on Windows). */
.soon-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 66% 78% at 42% 42%, color-mix(in srgb, var(--night-sky) 84%, transparent),
    color-mix(in srgb, var(--night-sky) 52%, transparent) 70%, transparent);
}

/* Stars and curls of wind drifting over the sky (js/soon.js). Each floats
   on its own slow loop, turning a little, a star's heart brightening now and
   then, and the field leans from the pointer by --px/--py, the near ones
   most. Transforms and opacity only, on small layers, and no blur: Windows
   flickers when a large blurred area is redrawn. */
.soon-drift {
  --px: 0;
  --py: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.soon-piece {
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  transform: translate(calc(var(--px) * var(--depth) * -38px), calc(var(--py) * var(--depth) * -30px));
  transition: transform 900ms var(--ease-out);
  animation: soon-piece-in 1600ms var(--ease-out) both;
}
.soon-piece:nth-child(odd) { animation-delay: 140ms; }
.soon-piece:nth-child(3n) { animation-delay: 300ms; }
.soon-piece-float {
  position: relative;
  width: 100%;
  height: 100%;
  animation: soon-float var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
}
.soon-piece-float.star::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--night-text) 70%, transparent) 0 12%,
    color-mix(in srgb, var(--night-text) 18%, transparent) 30%, transparent 52%);
  opacity: 0;
  animation: soon-twinkle calc(var(--dur, 16s) * 0.45) ease-in-out var(--delay, 0s) infinite;
}
.soon-piece-tiles { display: block; width: 100%; height: 100%; }
@keyframes soon-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35% { transform: translate3d(7px, var(--rise), 0) rotate(calc(var(--turn) * 0.6)); }
  70% { transform: translate3d(-5px, calc(var(--rise) * 0.4), 0) rotate(var(--turn)); }
}
@keyframes soon-twinkle {
  0%, 55%, 100% { opacity: 0; }
  75% { opacity: 1; }
}
@keyframes soon-piece-in {
  from { opacity: 0; scale: 0.7; }
  to { scale: 1; }
}
html.reduced-motion :is(.soon-piece, .soon-piece-float, .soon-piece-float::after) { animation: none; transition: none; }
html.reduced-motion .soon-piece { transform: none; }
.soon-inner { position: relative; }
.soon-inner {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(36px, 8vh, 88px) 32px 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.soon-inner > * { animation: rise-in 520ms var(--ease-out) both; }
.soon-inner > :nth-child(2) { animation-delay: 40ms; }
.soon-inner > :nth-child(3) { animation-delay: 80ms; }
.soon-inner > :nth-child(4) { animation-delay: 120ms; }
.soon-inner > :nth-child(n + 5) { animation-delay: 170ms; }

/* A band of tiles that stops before its end: the mosaic is still being laid. */
.soon-band {
  width: 100%;
  height: 92px;
  margin-bottom: 18px;
  border-radius: var(--radius-md, 12px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 48%, rgba(0, 0, 0, 0.35) 70%, transparent 88%);
  mask-image: linear-gradient(90deg, #000 0 48%, rgba(0, 0, 0, 0.35) 70%, transparent 88%);
}

.soon-kicker {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-wash, color-mix(in srgb, var(--accent) 16%, transparent));
  color: var(--accent-ink, var(--accent));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.soon-inner h1 {
  margin: 4px 0 0;
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 520;
  letter-spacing: -0.022em;
  line-height: 1.08;
  font-variation-settings: "SOFT" 50, "opsz" 72;
}
.soon-text { margin: 0; max-width: 60ch; color: var(--text2); font-size: 15px; line-height: 1.65; }
/* Words that sit on the sky itself get a close shadow, so the tiles never show through their strokes. */
:is(.soon-text, .soon-note) { text-shadow: 0 1px 2px var(--night-sky), 0 0 6px var(--night-sky); }

.soon-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 18px;
}
.soon-point {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
}
.soon-point b { font-weight: 600; font-size: 13.5px; }
.soon-point span:last-child { color: var(--text2); font-size: 13px; line-height: 1.55; }
.soon-glyph { color: var(--accent); }
.soon-glyph .icon { width: 18px; height: 18px; }

.soon-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.soon-links .btn { height: 34px; padding: 0 14px; text-decoration: none; }
.soon-note { margin: 6px 0 0; color: var(--text2); font-size: 12.5px; }

@media (max-width: 720px) {
  .soon-points { grid-template-columns: 1fr; }
}

/* The Mosaics tab carries a small amber mark while Mosaics is on its way. */
.modes button.soon { position: relative; }
.modes button.soon.on::after { display: none; }
.modes button.soon::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}