/* help me rot: the app screen. Same Mold palette and type as the teaser (docs/design.md). */
:root {
  --bruise: #3a2342;
  --bruise-deep: #26152c;
  --fuzz: #eee8da;
  --fuzz-dim: #c9bfcf;
  --spore: #7fa88e;
  --spore-deep: #4e7462;
  --banana: #e2c84a;
  --blush: #d98ca0;
  --spot: #170c19;
  --skin: #c9a46c;
  --skin-shade: #a9834f;
  --sprout: #d9e6a6;
  --year: 1979;
  --p: 0;
  /* Text that sits straight on the mold gets a bruise halo so colonies never eat it. */
  --halo: 0 0 2px var(--bruise), 0 0 5px var(--bruise), 0 0 10px var(--bruise), 0 0 16px var(--bruise);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  height: 100%;
  background: var(--bruise);
  color: var(--fuzz);
  font-family: "Darker Grotesque", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-size: 1.25rem;
  line-height: 1.25;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The mold layer, behind everything */
#mold { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The mold stays bright at the left and right edges and fades to a trace behind the text
   column, so text stays readable however long someone rots (Nikhil's pick, Oct 29). */
#mold {
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.12) 22%, rgba(0, 0, 0, 0.12) 78%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.12) 22%, rgba(0, 0, 0, 0.12) 78%, #000 100%);
}
#mold .grow { transform-box: fill-box; transform-origin: center; transition: transform 1.2s linear, opacity 1.2s linear; }

/* One screen, one thumb */
.app {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(0.7rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; }
.brand {
  font-family: "Climate Crisis", "Arial Black", sans-serif;
  font-variation-settings: "YEAR" var(--year);
  transition: font-variation-settings 3s ease-out;
  /* Scales down on narrow phones so the title, privacy and "new modes?" share one line. */
  font-size: min(1.55rem, 5.9vw);
  line-height: 1;
  white-space: nowrap;
}
.tags { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.plain { color: var(--fuzz-dim); font-size: min(0.95rem, 3.8vw); font-weight: 600; text-underline-offset: 0.2em; }
/* Turnstile's invisible widget needs a place to live; it shows nothing. */
.ts { position: absolute; width: 0; height: 0; overflow: hidden; }
.tag {
  font: inherit;
  cursor: pointer;
  color: var(--fuzz-dim);
  font-size: min(0.95rem, 3.8vw);
  font-weight: 600;
  border: 1.5px dashed rgba(238, 232, 218, 0.35);
  border-radius: 1rem;
  padding: 0.05rem 0.6rem 0.15rem;
  background: var(--bruise-deep);
}

/* Modes: two rows across the top, never a sideways scroll */
.modes {
  flex: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.tab {
  grid-column: span 2;
  min-width: 0;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.5rem 0.3rem 0.6rem;
  border-radius: 999px;
  border: 2px solid rgba(238, 232, 218, 0.22);
  background: var(--bruise-deep);
  color: var(--fuzz-dim);
  white-space: nowrap;
}
.tab:nth-child(n + 4) { grid-column: span 3; }
.tab[aria-pressed="true"] { background: var(--spore); border-color: var(--spore); color: var(--bruise-deep); }
.modedesc {
  flex: none;
  margin: 0.45rem 0 0;
  font-size: 1.08rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--fuzz);
  text-shadow: var(--halo);
}
.modedesc strong { color: var(--fuzz); font-weight: 800; }

/* Middle: potato and reply */
.stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding-top: 0.4rem; }
.potato-row { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.potato { width: clamp(4.8rem, 14dvh, 8rem); height: auto; flex: none; overflow: visible; }
.potato .sprout { opacity: 0; transform: scale(0); transform-box: fill-box; transition: transform 1.5s ease-out, opacity 1.5s ease-out; }
.potato .sprout.on { opacity: 1; transform: scale(1); }
.potato .sprout.s1 { transform-origin: 100% 100%; }
.potato .sprout.s2 { transform-origin: 0% 100%; }
.potato .sprout.s3 { transform-origin: 0% 0%; }
.potato .sprout.s4 { transform-origin: 100% 0%; }
.potato .sprout.s5 { transform-origin: 0% 100%; }
.potato .rotspot { opacity: 0; transition: opacity 4s linear; }
.potato .rotspot.on { opacity: 0.8; }
/* While a reply is on its way: the potato mulls it over (a slow bob), then talks (a little chew). */
.potato[data-state="thinking"] { animation: mull 1.2s ease-in-out infinite; }
.potato[data-state="talking"] { animation: chew 0.42s ease-in-out infinite; }
@keyframes mull { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes chew { 50% { transform: scale(1.03, 0.96) translateY(1px); } }
.status { margin: 0; font-size: 1.1rem; line-height: 1.15; font-weight: 600; color: var(--fuzz); text-shadow: var(--halo); }
.status strong { color: var(--banana); font-weight: 800; font-variant-numeric: tabular-nums; }

.talk { margin-top: auto; padding: 0.8rem 0 0.2rem; }
.said { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 600; color: var(--fuzz-dim); text-shadow: var(--halo); }
/* Under a cap or error line: the real-talk card is one tap away even when the model can't run. */
.notok { font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--fuzz-dim); background: none; border: 0; padding: 0; margin: -0.2rem 0 0.6rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; align-self: flex-start; }
.err { margin: 0 0 0.5rem; font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--blush); text-shadow: var(--halo); }
.reply {
  margin: 0;
  min-height: 2.4em;
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.12;
  text-shadow: var(--halo);
  white-space: pre-wrap;
}
.reply.intro { color: var(--fuzz); font-weight: 700; }
.hint { margin: 0.35rem 0 0; font-size: 1.05rem; font-weight: 600; color: var(--fuzz); text-shadow: var(--halo); }
.reply.excuse:not(:empty)::before { content: "\201C"; }
.reply.excuse:not(:empty)::after { content: "\201D"; }
.reply[aria-busy="true"]::after { content: "\2009\25CF"; color: var(--spore); animation: blink 0.9s steps(2) infinite; }
.err:not([hidden]) ~ .reply { font-size: 1.25rem; color: var(--fuzz-dim); }
@keyframes blink { 50% { opacity: 0; } }

/* Bottom half: everything you tap */
.controls { flex: none; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.6rem; }

.starters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.starter {
  min-height: 3.5rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.05;
  padding: 0.55rem 0.8rem 0.65rem;
  border-radius: 1.2rem 0.8rem 1.3rem 0.7rem;
  background: var(--bruise-deep);
  border: 2px solid var(--spore-deep);
  color: var(--fuzz);
}
.starter:active { background: var(--spore-deep); }
.big {
  width: 100%;
  min-height: 4rem;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.85rem 1rem 0.95rem;
  border: 0;
  border-radius: 1.4rem 1rem 1.6rem 0.9rem;
  background: var(--banana);
  color: var(--bruise-deep);
}
.big:active { background: #ecd765; }
/* Disabled controls stay solid (see-through buttons let the mold in) and just go dim. */
.big:disabled, .starter:disabled, .second:disabled, .act:disabled { filter: grayscale(0.6) brightness(0.62); cursor: default; }

.more { display: flex; gap: 0.45rem; }
.more:empty { display: none; }
.second {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.05;
  padding: 0.45rem 0.6rem 0.55rem;
  border-radius: 1rem 0.8rem 1.1rem 0.7rem;
  background: var(--bruise-deep);
  border: 2px solid rgba(238, 232, 218, 0.4);
  color: var(--fuzz);
}

.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; }
.act {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem 0.8rem 0.45rem;
  border-radius: 999px;
  background: var(--bruise-deep);
  border: 2px solid rgba(238, 232, 218, 0.28);
}
.flash { margin: 0; min-height: 1.3rem; font-size: 1.05rem; font-weight: 600; color: var(--sprout); text-shadow: var(--halo); }
.flash:empty { min-height: 0; margin-top: -0.55rem; }

.inrow { display: flex; align-items: center; gap: 0.7rem; }
.mic {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: conic-gradient(var(--blush) calc(var(--p) * 1turn), rgba(238, 232, 218, 0.22) 0);
  display: grid;
  place-items: center;
}
.mic::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bruise-deep); }
.mic svg { position: relative; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--fuzz); stroke-width: 1.8; stroke-linecap: round; }
.mic[data-state="recording"]::before { background: #4a2635; }
.mic[data-state="recording"] svg { stroke: var(--blush); }
.mic[data-state="sending"] { animation: spin 0.9s linear 1; }
.mic[data-state="asking"], .mic[data-state="sending"] { opacity: 0.75; }
@keyframes spin { to { transform: rotate(1turn); } }
.miclabel { flex: 1 1 auto; font-size: 1.1rem; font-weight: 600; color: var(--fuzz); font-variant-numeric: tabular-nums; text-shadow: var(--halo); }
.kbd {
  flex: none;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.35rem 0.75rem 0.45rem;
  border-radius: 999px;
  background: var(--bruise-deep);
  border: 2px solid rgba(238, 232, 218, 0.28);
  color: var(--fuzz-dim);
}
.typer { display: flex; gap: 0.5rem; }
.typer input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fuzz);
  background: var(--bruise-deep);
  border: 2px solid var(--fuzz-dim);
  border-radius: 1rem;
  padding: 0.45rem 0.8rem 0.55rem;
}
.typer input::placeholder { color: #9a8ca2; }
.send {
  flex: none;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 0.45rem 1rem 0.55rem;
  border: 0;
  border-radius: 1rem;
  background: var(--banana);
  color: var(--bruise-deep);
}

/* The real-talk card: the one screen with no joke on it */
.real {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bruise-deep);
  overflow-y: auto;
  display: flex;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.4rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.4rem, env(safe-area-inset-left));
}
.real-in { margin: auto; max-width: 28rem; font-size: 1.4rem; line-height: 1.3; }
.real h2 { font-size: 1.9rem; font-weight: 800; line-height: 1.05; margin: 0 0 1rem; }
.real h2:focus { outline: none; }
.real p { margin: 0 0 0.9rem; }
.real-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.6rem; }
.real-links a {
  color: var(--fuzz);
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--fuzz-dim);
  border-radius: 1rem;
  padding: 0.45rem 1rem 0.55rem;
}
.back {
  font-weight: 800;
  font-size: 1.35rem;
  padding: 0.5rem 1.6rem 0.6rem;
  border: 0;
  border-radius: 1rem;
  background: var(--fuzz);
  color: var(--bruise-deep);
}

/* Sheets: the "new modes?" signup, and the safety set (only at /?safety) */
.panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(23, 12, 25, 0.6);
  display: flex;
  align-items: flex-end;
}
.panel-in {
  width: 100%;
  max-width: 34rem;
  max-height: 88dvh;
  overflow-y: auto;
  margin: 0 auto;
  background: var(--bruise-deep);
  border-top: 3px solid var(--spore-deep);
  border-radius: 1.6rem 1.6rem 0 0;
  padding: 1.2rem 1.2rem max(1.2rem, env(safe-area-inset-bottom));
}
.panel h2 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.panel h2:focus { outline: none; }
.joinform { margin: 0.2rem 0 0.4rem; }
.joinnote { min-height: 1.4em; margin: 0 0 0.9rem; font-size: 1.1rem; font-weight: 700; color: var(--fuzz-dim); }
.joinnote.ok { color: var(--spore); }
.joinnote.no { color: var(--blush); }
/* The honeypot: bots fill it, people never see it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { margin: 0.2rem 0 0.7rem; font-size: 1.05rem; color: var(--fuzz-dim); }
.pgrid { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }
.pgrid button {
  font-weight: 700;
  font-size: 1.08rem;
  padding: 0.4rem 0.85rem 0.5rem;
  border-radius: 999px;
  background: var(--bruise);
  border: 2px solid rgba(238, 232, 218, 0.28);
}

@media (min-height: 760px) {
  .reply { font-size: 1.8rem; }
}
/* Short screens (iPhone SE with Safari's bars): smaller potato and reply, tighter gaps. */
@media (max-height: 620px) {
  .potato { width: 3.8rem; }
  .status { font-size: 1rem; }
  .reply { font-size: 1.38rem; }
  .modes { margin-top: 0.5rem; }
  .tab { padding: 0.4rem 0.3rem 0.5rem; font-size: 1.02rem; }
  .modedesc { font-size: 1rem; }
  .talk { padding-top: 0.4rem; }
  .big { min-height: 3.4rem; font-size: 1.4rem; padding: 0.7rem 1rem 0.8rem; }
  .starter { min-height: 3.1rem; font-size: 1.1rem; }
  .second { min-height: 2.6rem; }
  .controls { gap: 0.45rem; padding-top: 0.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  #mold .grow, .potato .sprout, .potato .rotspot, .brand { transition: none !important; }
  .mic, .reply[aria-busy="true"]::after, .potato { animation: none !important; }
  .mic { background: rgba(238, 232, 218, 0.22); }
  .mic[data-state="recording"] { background: var(--blush); }
}