@import './base.css';

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ── STAGE ── */
#stage {
  position: fixed;
  inset: 0;
  padding-left: var(--stage-pad-x);
  padding-right: var(--stage-pad-x);
  display: flex;
  align-items: center;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── PHASES ── */
.phase {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: none;
}
.phase.active {
  display: block;
  animation: fadeUp 0.5s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PHASE 1 ── */
#phase1 .grid9 {
  grid-template-rows: minmax(var(--p1-line), auto) minmax(var(--p1-line), auto) minmax(var(--p1-line), auto);
  row-gap: 0;
}

.p1-dreaming {
  grid-column: 1 / 10;
  display: block;
  align-self: end;
  overflow: visible;
}

.p1-word-row {
  grid-column: 1 / 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5vw;
  min-height: var(--p1-line);
  align-self: center;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.p1-futures {
  grid-column: 5 / 10;
  display: block;
  align-self: start;
  overflow: visible;
}

.word-slot {
  position: relative;
  display: inline-block;
  cursor: text;
  min-width: 4ch;
  min-height: var(--p1-line);
  overflow: visible;
  vertical-align: baseline;
  letter-spacing: -1.4px;
  max-width: 100%;
}

#wordSlot {
  font-family: 'Eterne', serif;
  font-weight: 200;
  flex-shrink: 1;
  min-width: 0;
}

#cyclingSpan {
  font-family: 'Eterne', serif;
  font-style: italic;
  font-size: var(--fs);
  line-height: var(--lh-display);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.25s;
  display: inline-block;
  vertical-align: baseline;
}

#wordInput {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  font-family: 'Eterne', serif;
  font-style: italic;
  font-size: var(--fs);
  line-height: var(--lh-display);
  color: var(--fg);
  background: transparent;
  border: none;
  outline: none;
  caret-color: var(--fg);
  min-width: 4ch;
  max-width: 65vw;
  text-align: right;
  width: 4ch;
  padding: 0;
  margin: 0;
}

.word-slot.editing #cyclingSpan { visibility: hidden; }
.word-slot.editing #wordInput   { display: block; }

.type-hint.is-moderation {
  max-width: 14rem;
  white-space: normal;
  line-height: var(--lh-whisper);
}

.type-hint {
  opacity: 1;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  min-height: calc(var(--lh-whisper) * 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: text;
}

/* ── PHASE 3 — reference layout ── */
.entry-futures {
  line-height: var(--lh-sharp);
}

.p3-row {
  grid-column: 1 / 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
  max-width: 100%;
  min-width: 0;
}

.p3-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  row-gap: 0;
  line-height: var(--lh-display);
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.p3-headline {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
}

.p3-headline .sharp,
.p3-headline .eterne,
.p3-headline .entry-futures {
  white-space: nowrap;
  flex: 0 0 auto;
}

.p3-headline .sharp,
.p3-headline .entry-futures {
  line-height: var(--lh-sharp);
}

.p3-headline .eterne {
  line-height: var(--lh-display);
}

/* margin-right (not margin-left) so wrapped lines stay flush with Dreaming */
.p3-flow > * {
  margin-right: 0.35em;
}

.p3-flow > *:last-child {
  margin-right: 0;
}

.p3-prompt {
  flex: 0 0 auto;
  display: inline;
  font-family: 'Eterne Text', serif;
  font-style: normal;
  font-size: var(--fs-whisper);
  line-height: var(--lh-whisper);
  text-align: left;
  white-space: nowrap;
}

#p3wordSmall {
  font-family: 'Eterne', serif;
  font-style: italic;
  font-size: var(--fs-whisper);
  line-height: var(--lh-whisper);
  display: inline;
  vertical-align: baseline;
}

#adjContainer {
  flex: 0 0 auto;
  display: inline;
  min-width: 0;
}

#adjContainer.has-adjectives {
  display: contents;
}

#adjContainer.is-moderation-message {
  display: block;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  margin-top: 0.15em;
}

.adj-word {
  font-family: 'Eterne', serif;
  font-style: italic;
  font-size: var(--fs);
  line-height: var(--lh-display);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.adj-word::after { content: '.'; }
.adj-word:hover:not(.selected) { opacity: 0.45; }
.adj-word.selected,
.adj-word.selected:hover { opacity: 0.5; }

.adj-message {
  display: block;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: var(--lh-sharp);
  font-size: var(--fs);
}

.reveal-hidden {
  opacity: 0;
  visibility: hidden;
}

.reveal-show {
  opacity: 1;
  visibility: visible;
  animation: fadeUp 0.45s ease forwards;
}

.adj-word.reveal-hidden {
  opacity: 0;
  visibility: visible;
}

/* ── PHASE 4 ── */
#phase4 .grid9,
#phase3 .grid9 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.p4-body {
  grid-column: 1 / 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
  max-width: 100%;
  min-width: 0;
}

/* Phase 4 layout — see landing/LAYOUT.md (same flow model as .p3-flow) */
.p4-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0;
  line-height: var(--lh-display);
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.p4-headline {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
  margin-right: 0;
}

.p4-line-rest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  row-gap: 0;
}

.p4-headline .sharp,
.p4-headline .eterne {
  white-space: nowrap;
  flex: 0 0 auto;
}

.p4-headline .sharp {
  line-height: var(--lh-sharp);
}

.p4-headline .eterne {
  line-height: var(--lh-display);
}

/* All tokens (whisper + manifesto words) are direct flex children — no wrapper */
.p4-line-rest > * {
  margin-right: 0.35em;
}

.p4-line-rest > *:last-child {
  margin-right: 0;
}

.p4-line-rest .p4-word {
  flex: 0 0 auto;
  white-space: nowrap;
}

.p4-line-rest .p4-word.sharp {
  line-height: var(--lh-sharp);
}

.p4-line-rest .p4-word.eterne {
  line-height: var(--lh-display);
}

.p4-whisper-line,
.p4-line-rest .bobby.p4-word {
  flex: 0 0 auto;
  font-family: 'EterneText', serif;
  font-style: normal;
  font-size: var(--fs-whisper);
  line-height: var(--lh-whisper);
  letter-spacing: 0.2px;
  opacity: 0.65;
}

.p4-line-rest .bobby.p4-word {
  white-space: nowrap;
}

.p4-whisper-line {
  display: inline-flex;
  align-items: center;
  align-self: center;
  white-space: normal;
  margin-right: 0.55em;
}

.p4-whisper-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 0.95;
}

.p4-whisper-kicker,
.p4-whisper-adj {
  display: block;
}

.p4-whisper-adj::after {
  content: '.';
}

.p4-whisper-line.reveal-hidden {
  opacity: 0;
  visibility: visible;
}

#phase4 .p4-whisper-line.reveal-show {
  animation: fadeIn 0.28s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#phase4 .reveal-show {
  animation-duration: 0.28s;
}

/* ── DOWNLOAD ── */
#dlBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  color: var(--fg);
  font-family: 'SharpEarth', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, background 0.2s, color 0.2s;
  z-index: 100;
}
#dlBtn.show { opacity: 1; pointer-events: all; }
#dlBtn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
#dlBtn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ── DEV KEY PANEL (local only) ── */
.dev-key-panel {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 100;
  max-width: 22rem;
}
.dev-key-label {
  margin-bottom: 0.5rem;
}
.dev-key-row {
  display: flex;
  gap: 0.5rem;
}
#devKeyInput {
  flex: 1;
  min-width: 0;
  font-family: 'SharpEarth', sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  padding: 0.5rem 0.65rem;
  outline: none;
}
#devKeyInput:focus {
  border-color: color-mix(in srgb, var(--fg) 70%, transparent);
}
#devKeySave {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  color: var(--fg);
  font-family: 'SharpEarth', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
}
#devKeySave:hover {
  background: var(--fg);
  color: var(--bg);
}

@media (max-width: 720px) {
  .p1-futures {
    grid-column: 3 / 10;
  }

  #wordInput {
    max-width: 58vw;
  }


}