/* Colours and fonts in one place, so they are easy to change later */
:root {
  /* All-purple palette, inspired by the Magician site */
  --background: #0d0620;
  --sidebar: 0px; /* how much of the window's left side the sidebar takes */
  --text: #f5f1ff;
  --muted: #e4def7; /* light enough to read on the brightest purple of the background */
  --line: rgba(245, 241, 255, 0.35);
  --line-strong: rgba(245, 241, 255, 0.85);
  --glow-1: #3a138f; /* royal violet */
  --glow-2: #6b2fd6; /* bright purple */
  --glow-3: #22094f; /* deep indigo */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--background);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}

/* ---------- Flowing background ---------- */

/* Sits behind the page and fills the whole window */
.background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Each blob is a blurred blob of colour. Like wax in a lava lamp, it rises,
   sinks and changes shape, all the time. */
.blob {
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  filter: blur(60px);
  opacity: 0.65;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Each blob gets its own path and speed, so they never move in step */
.blob-1 { background: var(--glow-1); top: 10%; left: -10%; animation-name: lava-1; animation-duration: 18s; }
.blob-2 { background: var(--glow-2); top: 50%; right: -10%; animation-name: lava-2; animation-duration: 23s; }
.blob-3 { background: var(--glow-3); top: 20%; left: 35%; width: 35vmax; height: 35vmax; animation-name: lava-3; animation-duration: 15s; }

/* translate = where it moves, rotate = slow spin, border-radius = the wobbly shape */
@keyframes lava-1 {
  0%   { transform: translate(0, 0) rotate(0deg);        border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%  { transform: translate(25vw, 40vh) rotate(120deg); border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
  66%  { transform: translate(5vw, 55vh) rotate(240deg);  border-radius: 38% 62% 30% 70% / 62% 35% 65% 38%; }
  100% { transform: translate(0, 0) rotate(360deg);      border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
}

@keyframes lava-2 {
  0%   { transform: translate(0, 0) rotate(0deg);          border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { transform: translate(-35vw, -50vh) rotate(-180deg); border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%; }
  100% { transform: translate(0, 0) rotate(-360deg);        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes lava-3 {
  0%   { transform: translate(0, 0) scale(1);         border-radius: 50% 50% 35% 65% / 55% 40% 60% 45%; }
  25%  { transform: translate(-20vw, 35vh) scale(1.2); border-radius: 65% 35% 55% 45% / 40% 65% 35% 60%; }
  50%  { transform: translate(15vw, 50vh) scale(0.9);  border-radius: 35% 65% 45% 55% / 60% 40% 60% 40%; }
  75%  { transform: translate(20vw, 10vh) scale(1.1);  border-radius: 55% 45% 65% 35% / 45% 60% 40% 55%; }
  100% { transform: translate(0, 0) scale(1);         border-radius: 50% 50% 35% 65% / 55% 40% 60% 45%; }
}

/* Film grain on top of the colours. The image is a tiny SVG "noise" pattern
   written right here in the CSS, so no extra file is needed. Raise the opacity for more grain. */
.background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A soft beam of light shining down from the top centre */
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 60% at 50% -10%, rgba(200, 170, 255, 0.18), transparent 70%);
}

/* People who turn off motion in their system settings (it can make some feel ill)
   get a still background instead */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* ---------- Content ---------- */

/* Fills the whole window and puts everything in the exact middle */
.container {
  min-height: 100vh;
  max-width: 620px;
  margin: 0 auto;
  padding: 64px 16px 48px; /* room at the top for Back and Start new project */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* The space above the chat box. While a question is showing, it always has the
   same height, and its content sits at the bottom (flex-end). So a long question
   grows upwards, and the chat box below never moves. */
.prompt-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ":has" means "only when it contains a visible question". On the mirror and other
   screens the question is hidden, so this empty area takes no space. */
.prompt-area:has(#prompt:not([hidden])) {
  min-height: clamp(15rem, 38vh, 22rem);
}

/* ---------- Progress ---------- */

/* A row of short dashes, one per step */
.progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.progress li {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  opacity: 0.5;
  transition: background 0.4s, opacity 0.4s, width 0.4s;
}

/* Answered steps: solid light */
.progress li.done {
  background: var(--text);
  opacity: 0.9;
}

/* The step you are on: a bit wider and bright */
.progress li.current {
  width: 44px;
  background: var(--text);
  opacity: 1;
}

/* The headline or question: scales with the window (min 2rem, max 4rem) */
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

h1 em {
  color: var(--muted);
}

.subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 28px;
}

/* Each new question fades up gently instead of just appearing */
.fade-in {
  animation: fade-in 0.6s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- The mirror ---------- */

.mirror[hidden] {
  display: none;
}

/* Small uppercase labels above each part */
.label {
  margin: 0 0 12px;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The mirror is a little wider than the question screen, to fit three cards side by side */
.mirror {
  width: min(880px, calc(100vw - var(--sidebar) - 32px));
  align-self: center;
}

/* The mirror paragraph: serif, wide and left-aligned so it reads easily and stays short */
.mirror-text {
  margin: 0 auto;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.45;
  color: var(--muted);
  text-align: left;
}

/* The label lines up with the paragraph, except on the centred waiting screen */
#mirror:not(.waiting) > .label {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* The parts that matter are bold and bright; the words around them stay soft */
.mirror-text strong {
  font-weight: 700;
  color: var(--text);
}

/* The framework cards under the mirror paragraph: one column, left-aligned */
.framework {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: left;
}

.framework .edit-hint {
  margin-bottom: 16px;
  text-align: center;
}

.framework-cards {
  display: grid;
  gap: 16px;
}

.framework-card .guide-note {
  margin-bottom: 8px;
}

.framework-card .text-button {
  margin-top: 8px;
}

/* Placeholder text in empty card boxes, e.g. "If …, then …" */
.framework-card .line-edit::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

/* "+ Add…" buttons sit on their own lines, under the list they add to */
.add-buttons .guide-note {
  margin: 12px 0 0;
}

.framework-card .add {
  display: block;
  margin-top: 4px;
}

.framework-card .add[hidden],
.add-buttons .guide-note[hidden] {
  display: none;
}

/* More bets: "H2", the bet, then a small "Remove" */
.bet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bet {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: start;
}

.bet-id {
  padding-top: 5px;
  font-size: 0.8rem;
  color: var(--muted);
}

.framework-card .remove {
  margin-top: 0;
  font-size: 0.8rem;
}

/* Value list: feature → what it gives them */
.value-note {
  margin: 16px 0 8px;
}

.value-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.value-arrow {
  color: var(--muted);
}

/* Personas: one block each, with the "Assumption" badge on top */
.persona + .persona {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1.5px dashed var(--line);
}

.persona .field-label {
  margin: 12px 0 2px;
  font-size: 0.75rem;
}

.badge {
  display: inline-block;
  margin: 0 0 4px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: #f3c27a;
  border: 1px dashed #f3c27a;
  border-radius: 999px;
}

/* Three columns on wide screens, stacked on phones */
.mirror-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}

/* Four options: two by two, so the cards don't get too narrow */
.mirror-cards.four {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .mirror-cards,
  .mirror-cards.four {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: 20px;
  background: rgba(13, 6, 32, 0.6);
  border: 1.5px dashed var(--line);
  border-radius: 20px;
}

.card .label {
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
}

.card-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* Wide dashed button, used for "Choose how to research" */
.pill {
  margin-top: 40px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--text);
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

/* A page's main button stays at the bottom of the window until you scroll to where it
   belongs, so nobody has to scroll to find it. The background keeps it readable over the page. */
.sticky-action,
.sticky-row {
  position: sticky;
  bottom: 16px;
  z-index: 2;
}

.sticky-action,
.sticky-row .pill,
.sticky-row .form-status {
  background: var(--background);
  box-shadow: 0 0 28px 14px rgba(13, 6, 32, 0.75); /* a soft dark halo, so text behind it doesn't clash */
}

/* Some pages have more than one main button: they sit side by side, with a status line above */
.sticky-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
}

.sticky-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sticky-buttons .pill {
  margin-top: 0;
}

/* On phones the buttons are a little smaller, so two fit on a line */
@media (max-width: 640px) {
  .sticky-buttons .pill {
    padding: 12px 16px;
    font-size: 0.85rem;
  }
}

/* "or press Enter" under the mirror's Continue button */
.key-hint {
  margin: 12px 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* A button that can't be used yet: faded, no hover fill */
.pill:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ---------- Research options ---------- */

/* Option cards are buttons, so we reset the browser's button look and stack the text */
.option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.option .label {
  margin: 0;
}

.option-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
}

.option .card-text {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Small note at the bottom, pushed down so all three cards line up */
.option-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.option:hover {
  border-color: var(--line-strong);
}

/* The research menu: tight enough to fit on a laptop screen without scrolling */
.container:has(> #methods:not([hidden])) {
  padding-top: 32px;
  padding-bottom: 32px;
}

#methods h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

#methods .mirror-cards {
  gap: 12px;
}

#methods .card {
  padding: 16px 20px;
}

/* ---------- What next? and finish ---------- */

/* Sits at the bottom of each research page, set apart by a dashed line */
.next-steps {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1.5px dashed var(--line);
}

.next-steps[hidden] {
  display: none;
}

.next-steps h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8rem;
}

/* The two other methods, side by side (stacked on phones) */
.next-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .next-options {
    grid-template-columns: 1fr;
  }
}

.next-options .option-meta {
  color: var(--text);
}

.finished-summary {
  max-width: none;
  margin: 0 0 32px;
  text-align: left;
}

/* The "copy before you close" reminder, in the warm tip colour */
.warning {
  border-color: #f3c27a;
}

.warning p {
  margin: 0;
}

.warning strong {
  color: #f3c27a;
  font-weight: 500;
}

/* The results deck teaser: a card that looks a bit "not yet" */
.coming-soon {
  margin-bottom: 8px;
  opacity: 0.85;
}

.coming-soon .option-title {
  display: block;
  margin: 0 0 8px;
}

.coming-soon .card-text {
  color: var(--muted);
}

/* ---------- Preparing pause ---------- */

.preparing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: fade-in 0.6s ease-out;
}

.preparing[hidden] {
  display: none;
}

.preparing p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--muted);
}

/* A dashed circle that slowly turns and breathes */
.preparing-ring {
  width: 44px;
  height: 44px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 50%;
  animation: turn 3s linear infinite, breathe 1.6s ease-in-out infinite;
}

@keyframes turn {
  to { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preparing,
  .preparing-ring {
    animation: none;
  }
}

/* ---------- Interview guide ---------- */

/* A reading page: wider than the questions, text aligned left */
.guide {
  width: min(720px, calc(100vw - var(--sidebar) - 32px));
  align-self: center;
  padding: 8vh 0 12vh;
  text-align: left;
}

.guide[hidden] {
  display: none;
}

.guide h1 {
  margin-bottom: 32px;
}

/* The four facts at the top, as label + value rows */
.plan-facts {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1.5px dashed var(--line);
  border-radius: 20px;
  background: rgba(13, 6, 32, 0.45);
}

.plan-facts div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 8px 0;
}

.plan-facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}

.plan-facts dd {
  margin: 0;
}

/* Answers come in as typed ("built or not"), so every line starts with a capital here */
.plan-facts dd::first-letter {
  text-transform: uppercase;
}

/* "Testing first": the H1 bet at the top of every screen after the mirror.
   It's what the whole plan is testing, so it stands out a little. */
.testing-first {
  margin: 0 auto 32px;
  padding: 16px 24px;
  max-width: 620px;
  text-align: left;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.35;
  border: 1.5px dashed var(--line);
  border-radius: 20px;
  background: rgba(13, 6, 32, 0.45);
}

.testing-first[hidden] {
  display: none;
}

.testing-first .label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-style: normal;
}

/* On phones, the label sits above the value */
@media (max-width: 640px) {
  .plan-facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.edit-hint {
  margin: 0 0 40px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* "Open Google Form" is a link that looks like the buttons next to it */
.sticky-buttons a.pill {
  display: inline-block;
  text-decoration: none;
}

.sticky-buttons a.pill[hidden] {
  display: none;
}

/* "Making your Google Form…" and similar, just above the buttons */
.form-status {
  margin: 0;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.guide-section {
  margin-bottom: 40px;
}

.guide-section h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8rem;
}

.guide-note {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

.guide-section ol {
  margin: 0;
  padding-left: 24px;
}

.guide-section li {
  margin-bottom: 12px;
  color: var(--muted);
}

/* Editable lines look like plain text with a faint dashed underline,
   which turns bright while you edit */
.line-edit {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 4px 0 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed transparent;
  outline: none;
  resize: none;
  overflow: hidden;
  transition: border-color 0.3s;
}

.line-edit:hover {
  border-bottom-color: var(--line);
}

.line-edit:focus {
  border-bottom-color: var(--line-strong);
}

/* The bias tip: small, warm-coloured, right under the question */
.bias-tip {
  margin: 6px 0 0;
  padding-left: 12px;
  font-size: 0.8rem;
  color: #f3c27a;
  border-left: 2px solid #f3c27a;
}

.bias-tip[hidden] {
  display: none;
}

/* ---------- Questions grouped by bet (guide and survey) ---------- */

/* "tests H1": a small tag under each question, so you always know what it's for */
.tests-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 999px;
}

/* "Would they switch?": what this group of questions is about, under the H1 heading */
.bet-line {
  font-size: 1rem;
  color: var(--text);
}

.bet-group .group-warning {
  margin: 0 0 8px;
}

/* The survey keeps it simple: no "H1" headings or "tests H1" tags,
   only the plain heading of each group ("Would they switch?") */
#survey .bet-group h2,
#survey .tests-tag {
  display: none;
}

/* ---------- Results ---------- */

/* One card per person, stacked */
.participants {
  display: grid;
  gap: 16px;
  margin-bottom: 8px;
}

.participant-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.participant .remove {
  font-size: 0.8rem;
}

/* A row per bet: "H1", then ✓ ✗ ?, then their words */
.verdict-row {
  display: grid;
  grid-template-columns: 32px auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.verdict-row .bet-id {
  padding-top: 0;
}

.verdict-buttons {
  display: flex;
  gap: 6px;
}

/* Round buttons that fill in when picked */
.verdict {
  width: 40px;
  height: 40px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 1.5px dashed var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.verdict:hover {
  border-color: var(--line-strong);
}

.verdict:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 3px;
}

.verdict[aria-pressed="true"] {
  background: var(--text);
  color: var(--background);
  border-color: var(--text);
  border-style: solid;
}

/* On phones, their words go on a line of their own */
@media (max-width: 640px) {
  .verdict-row {
    grid-template-columns: 32px 1fr;
  }
  .verdict-row .finding-link {
    grid-column: 1 / -1;
  }
}

.add-person {
  display: block;
  margin-bottom: 32px;
}

.add-person[hidden] {
  display: none;
}

/* Survey counts: folded away until opened */
.tallies summary {
  font-family: var(--font-display);
  font-size: 1.5rem;
  cursor: pointer;
}

.tally {
  margin-top: 20px;
}

.tally-question {
  margin: 0 0 8px;
}

.tally-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--muted);
}

.tally-count {
  width: 72px;
  padding: 6px 12px;
  font: inherit;
  color: var(--text);
  background: rgba(13, 6, 32, 0.45);
  border: 1.5px dashed var(--line);
  border-radius: 999px;
  outline: none;
}

.tally-count:focus {
  border-color: var(--line-strong);
}

/* "Already talked to people?" under "What next?" */
.results-link {
  display: block;
  margin: 16px auto 0;
}

.results-link[hidden] {
  display: none;
}

/* ---------- Insights and report ---------- */

.pattern {
  margin: 0;
  line-height: 1.5;
}

/* Quotes from interviews: indented, in the display font */
.quote {
  margin: 8px 0 0;
  padding-left: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
  border-left: 2px solid var(--line);
}

/* Action and priority drop-downs, side by side */
.choices {
  display: flex;
  gap: 8px;
}

.choice {
  padding: 8px 14px;
  font: inherit;
  color: var(--text);
  background: rgba(13, 6, 32, 0.45);
  border: 1.5px dashed var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.choice:focus-visible {
  border-color: var(--line-strong);
  outline: none;
}

.choice option {
  color: #000;
}

.report-line {
  margin: 0 0 8px;
  line-height: 1.5;
}

#report-warning[hidden] {
  display: none;
}

/* ---------- Survey ---------- */

.survey-list {
  margin: 0 0 40px;
  padding-left: 24px;
}

.survey-q {
  margin-bottom: 32px;
  color: var(--muted);
}

/* The question line itself: no bullet, slightly larger */
.survey-question {
  margin: 0;
  padding: 0;
  list-style: none;
}

.survey-question .line-edit {
  font-size: 1.05rem;
}

.survey-note {
  margin: 4px 0 0;
  font-style: italic;
}

/* "Pick one", "Short answer"… as a small dashed tag */
.answer-type {
  display: inline-block;
  margin: 8px 0 8px;
  padding: 2px 10px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px dashed var(--line);
  border-radius: 999px;
}

/* Answer options: small circles, like a form */
.answer-options {
  margin: 0;
  padding-left: 20px;
  list-style: circle;
}

.answer-options li {
  margin-bottom: 0;
}

.answer-options .line-edit {
  padding: 2px 0 3px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Desk research ---------- */

.field-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* One-line text fields: dashed box, like the chat box */
.term,
.finding-link {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(13, 6, 32, 0.45);
  border: 1.5px dashed var(--line);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.3s;
}

.term:focus,
.finding-link:focus {
  border-color: var(--line-strong);
}

.finding-link::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

/* Search links as small dashed pills that wrap onto new lines */
.search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-link {
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  border: 1.5px dashed var(--line);
  border-radius: 999px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.search-link:hover {
  background: var(--text);
  color: var(--background);
  border-color: var(--text);
}

.search-link:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 4px;
}

/* The audit and profit tables. If one is too wide it scrolls sideways inside
   its own box, so the rest of the page stays still. */
.audit-scroll {
  overflow-x: auto;
  margin-bottom: 8px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  background: rgba(13, 6, 32, 0.45);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.audit-scroll:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 4px;
}

.audit {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.audit th {
  padding: 10px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  border-bottom: 1.5px dashed var(--line);
}

.audit td {
  padding: 6px 4px;
  vertical-align: top;
  border-bottom: 1px dashed var(--line);
}

.audit tr:last-child td {
  border-bottom: none;
}

/* The first column (the competitor's name) stays in view while the table scrolls */
.audit th:first-child,
.audit td:first-child {
  position: sticky;
  left: 0;
  background: var(--background);
}

.audit-field {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 8px;
  outline: none;
}

.audit-field:hover {
  border-color: var(--line);
}

.audit-field:focus {
  border-color: var(--line-strong);
}

.audit-field::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.audit-grid select.audit-field,
.currency-picker select {
  cursor: pointer;
}

.audit-grid select.audit-field option,
.currency-picker option {
  color: #000;
}

/* "Currency" above the profit table */
.currency-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.currency-picker select {
  width: auto;
  color: var(--text);
  border-color: var(--line);
}

.audit-grid .text-button {
  font-size: 0.8rem;
}

/* The competitor audit: the questions down the left, one column per competitor.
   8 questions + the Remove line = 9 rows. Every competitor shares those rows (subgrid),
   so each answer lines up with the same answer for the others, however long it is. */
.audit-grid {
  display: grid;
  grid-template-columns: 104px;
  grid-template-rows: repeat(9, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(145px, 1fr);
  font-size: 0.85rem;
}

#audit-rows {
  display: contents;
}

.audit-labels,
.audit-competitor {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  min-width: 0;
}

/* The questions stay in view when the table scrolls sideways */
.audit-labels {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--background);
}

.audit-label {
  padding: 12px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}

.audit-cell {
  min-width: 0;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--line);
}

.audit-label:last-child,
.audit-cell:last-child {
  border-bottom: none;
}

/* A text box that grows with its text: the box and an invisible copy of the text sit in
   the same spot, and the copy sets the height. The text and spacing must match exactly. */
.audit-grow {
  display: grid;
}

.audit-grow::after {
  content: attr(data-text) " ";
  visibility: hidden;
  white-space: pre-wrap;
}

.audit-grow textarea,
.audit-grow::after {
  grid-area: 1 / 1;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  line-height: 1.4;
  overflow-wrap: anywhere;
  border: 1px dashed transparent;
}

.audit-grow textarea {
  overflow: hidden;
  resize: none;
}

/* The competitor's name reads as the column's title */
.audit-grid [data-key="name"],
.audit-grow:has([data-key="name"])::after {
  font-weight: 500;
}

#add-competitor[hidden],
#desk-done-empty[hidden] {
  display: none;
}

/* The profit table: narrower than the audit, so it fits most screens without scrolling */
.profit-table {
  min-width: 560px;
}

.profit-table th[scope="row"] {
  padding: 10px 8px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed var(--line);
}

.metric-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.metric-estimate {
  padding: 10px 8px;
  color: var(--muted);
  white-space: nowrap;
}

.metric-input {
  width: 96px;
}

/* The founder's number and its unit stay on one line */
.profit-table td:last-child {
  white-space: nowrap;
}

.metric-unit {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* "Estimated" under a number the AI filled in, lined up with the number above it */
.metric-tag {
  display: block;
  padding-left: 9px;
  font-size: 0.75rem;
}

.metric-tag[hidden] {
  display: none;
}

/* "AI estimates: a starting point…" in the warm tip colour */
.warning-text {
  color: #f3c27a;
}

#profit-status[hidden],
#profit-retry[hidden],
#profit-verdicts-empty[hidden],
#desk-status[hidden],
#desk-retry[hidden],
#desk-done-empty[hidden],
#desk-unique-empty[hidden],
#desk-apart-empty[hidden],
.audit-open[hidden] {
  display: none;
}

/* "Open ↗" under the address, to check it */
.audit-open {
  display: block;
  padding: 2px 9px;
  font-size: 0.85rem;
  color: var(--text);
}

/* What the table tells you: a numbered list of editable lines */
.desk-insights {
  margin: 0 0 8px;
  padding-left: 24px;
}

.desk-insights li {
  margin-bottom: 8px;
}

.finding-link {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* A quiet text-only button, for "+ Add another finding" */
.text-button {
  padding: 4px 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
}

.text-button:hover {
  color: var(--text);
}

/* The overview: every project as a card */
.overview-new {
  margin: 12px 0 32px;
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 640px) {
  .project-cards {
    grid-template-columns: 1fr;
  }
}

.overview-note {
  margin: 24px 0 0;
}

.project-card {
  position: relative;
  padding: 0;
  transition: border-color 0.3s;
}

.project-card .option-title {
  padding-right: 28px; /* room for the "…" button */
}

.project-card:hover {
  border-color: var(--line-strong);
}

.project-open {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 20px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.project-open:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 4px;
}

.project-time {
  font-size: 0.8rem;
  color: var(--muted);
}

/* The idea and the bet can be long: a few lines are enough to recognise them */
.project-idea,
.project-bet {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.project-idea {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
}

.project-bet-label {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.project-bet {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.3;
  -webkit-line-clamp: 3;
}

.project-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.project-step {
  font-size: 0.8rem;
  color: var(--muted);
}

.project-step.opened {
  font-weight: 500;
  color: var(--text);
}

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 8px;
}

.backup-actions .text-button {
  color: var(--text);
  text-decoration: underline;
}

/* "Restore from a backup": for someone with no projects yet */
.restore-first {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 3;
  padding: 8px 16px;
  color: var(--text);
  background: var(--background);
  border: 1px dashed var(--line);
  border-radius: 999px;
}

.restore-first[hidden] {
  display: none;
}

/* Warnings about saving, in the warm tip colour, under the Back button's row */
.save-notice {
  position: fixed;
  top: 60px;
  left: calc(var(--sidebar) + 16px);
  right: 16px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  width: fit-content;
  max-width: calc(100vw - var(--sidebar) - 32px);
  margin: 0 auto;
  padding: 10px 18px;
  font-size: 0.9rem;
  color: #f3c27a;
  background: var(--background);
  border: 1px dashed #f3c27a;
  border-radius: 16px;
}

.save-notice[hidden] {
  display: none;
}

.save-notice-button {
  min-height: 32px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 500;
  color: var(--background);
  background: #f3c27a;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.save-notice-button[hidden] {
  display: none;
}

#save-notice-dismiss {
  color: #f3c27a;
  background: none;
  border: 1px dashed #f3c27a;
}

/* The "…" button on each project. It shows when you're on the project, and always on touch screens. */
.project-more {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--text);
  background: none;
  border: 1px dashed transparent;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, border-color 0.2s;
}

li:hover > .project-more,
.project-card:hover > .project-more,
.project-more:focus-visible,
.project-more[aria-expanded="true"] {
  opacity: 1;
}

.project-more:hover,
.project-more[aria-expanded="true"] {
  border-color: var(--line-strong);
}

@media (hover: none) {
  .project-more {
    opacity: 1;
  }
}

.project-popup {
  position: fixed;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 6px;
  background: var(--background);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
}

.project-popup[hidden] {
  display: none;
}

.project-popup button {
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.project-popup button:hover,
.project-popup button:focus-visible {
  background: rgba(245, 241, 255, 0.12);
  outline: none;
}

/* The text box that takes the project's place while renaming */
.project-rename {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(13, 6, 32, 0.8);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  outline: none;
}

.project-card .project-rename {
  width: calc(100% - 56px);
  margin: 14px 0 14px 14px;
}

/* The sidebar: the founder's projects, down the left side of the window.
   The rest of the page moves over to make room. */
body.has-sidebar {
  --sidebar: 264px;
  padding-left: var(--sidebar);
  transition: padding-left 0.25s;
}

body.has-sidebar.sidebar-collapsed {
  --sidebar: 64px;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: var(--sidebar);
  padding: 12px;
  overflow: hidden;
  background: rgba(13, 6, 32, 0.75);
  border-right: 1.5px dashed var(--line);
  transition: width 0.25s;
}

.sidebar[hidden] {
  display: none;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-left: 12px;
}

.sidebar-all {
  padding: 8px 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
}

.sidebar-all:hover {
  text-decoration: underline;
}

.sidebar-all:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 2px;
}

.sidebar-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text);
  background: none;
  border: 1px dashed var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.sidebar-toggle:hover {
  border-color: var(--line-strong);
}

.sidebar-toggle:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 2px;
}

.sidebar-projects {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.sidebar-projects li {
  position: relative;
}

.sidebar-new {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 12px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: none;
  border: 1.5px dashed var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s;
}

.sidebar-new:hover {
  background: rgba(245, 241, 255, 0.1);
}

.sidebar-new:focus-visible,
.sidebar-project:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 2px;
}

.sidebar-project {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 10px 36px 10px 12px; /* room on the right for the "…" button */
  font: inherit;
  color: var(--text);
  text-align: left;
  background: none;
  border: 1px dashed transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.sidebar-project:hover {
  border-color: var(--line);
}

/* The project that's open */
.sidebar-project[aria-current="true"] {
  background: rgba(245, 241, 255, 0.1);
  border-color: var(--line);
}

.sidebar-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.sidebar-time {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}

.sidebar-note {
  margin: 12px 0 0;
  padding: 12px 12px 4px;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
}

/* Collapsed: a thin strip with only the two buttons */
.sidebar-collapsed .sidebar-top {
  justify-content: center;
  padding-left: 0;
}

.sidebar-collapsed .sidebar-new {
  width: 40px;
  padding: 0;
  align-self: center;
}

.sidebar-collapsed .sidebar-all,
.sidebar-collapsed .sidebar-new-text,
.sidebar-collapsed .sidebar-projects,
.sidebar-collapsed .sidebar-note {
  display: none;
}

/* Only on phones */
.sidebar-open,
.sidebar-backdrop {
  display: none;
}

/* Too narrow for a sidebar beside the page: on phones it slides in over the page */
@media (max-width: 640px) {
  body.has-sidebar,
  body.has-sidebar.sidebar-collapsed {
    --sidebar: 0px;
    padding-left: 0;
  }

  body.has-sidebar .sidebar-open {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 3;
    display: block;
    padding: 8px 16px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--background);
    border: 1px dashed var(--line);
    border-radius: 999px;
    cursor: pointer;
  }

  body.drawer-open .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: block;
    background: rgba(13, 6, 32, 0.7);
  }

  .sidebar {
    z-index: 5;
    width: min(300px, 85vw);
    background: var(--background);
    transform: translateX(-100%);
    visibility: hidden; /* so keyboards and screen readers skip it while it's away */
    transition: transform 0.25s, visibility 0.25s;
  }

  body.drawer-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.25s, visibility 0s; /* visible straight away, so it can take keyboard focus */
  }

  /* A collapsed sidebar is a choice for wide screens: the drawer always shows everything */
  .sidebar-collapsed .sidebar-top {
    justify-content: space-between;
    padding-left: 12px;
  }

  .sidebar-collapsed .sidebar-new {
    width: auto;
    padding: 8px 12px;
    align-self: stretch;
  }

  .sidebar-collapsed .sidebar-all,
  .sidebar-collapsed .sidebar-projects,
  .sidebar-collapsed .sidebar-note {
    display: block;
  }

  .sidebar-collapsed .sidebar-new-text {
    display: inline;
  }

  /* Phones can't hover, so the "…" button is always there */
  .project-more {
    opacity: 1;
  }
}

/* "← Back": at the top left of the page, the same on every screen */
.back-link {
  position: fixed;
  top: 12px;
  left: calc(var(--sidebar) + 16px);
  z-index: 3;
  padding: 8px 16px;
  font-size: 0.95rem;
  /* A background, so it stays readable over the page as you scroll */
  background: var(--background);
  border: 1px dashed var(--line);
  border-radius: 999px;
}

.back-link[hidden] {
  display: none;
}

.tips {
  padding: 20px 24px;
  border: 1.5px dashed var(--line);
  border-radius: 20px;
}

.tips ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Each part starts invisible and slightly blurred, then comes into focus.
   script.js sets a small delay on each one so they appear one after another. */
.stage .reveal {
  opacity: 0;
  animation: reveal 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes reveal {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* No fades or blur for people who turn off motion: things just appear */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .stage .reveal {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Waiting for the AI ---------- */

/* Where the AI's text will go: a soft, blurred bar that slowly breathes, in the warm
   AI colour so it matches the loading words on top of it.
   On a text box, it hides the box's own text and placeholder while it waits. */
.ai-pending,
.ai-pending-bar {
  color: transparent !important;
  background: rgba(243, 194, 122, 0.22) !important;
  border-color: transparent !important;
  border-radius: 8px;
  filter: blur(3px);
  animation: ai-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}

.ai-pending::placeholder {
  color: transparent;
}

.ai-pending-bar {
  display: block;
  height: 1.2em;
  margin: 6px 0;
}

/* Placeholder lines in a list: no number, and a little shorter each time, like real text */
.ai-placeholder::marker {
  color: transparent;
}

.ai-placeholder:nth-child(2) .ai-pending-bar { width: 80%; }
.ai-placeholder:nth-child(3) .ai-pending-bar { width: 62%; }

/* The mirror while the AI is thinking: 4 blurred lines, as tall as the paragraph's own
   lines, and nothing else until the words arrive. The short last line is centred,
   like the rest of the waiting screen. */
.mirror-text .ai-pending-bar {
  height: 0.9em;
  margin: 0.45em 0;
}

.mirror-text .ai-pending-bar:last-child {
  width: 55%;
  margin-left: auto;
  margin-right: auto;
}

/* Gone, not just invisible, so the label, words and blur sit in the middle of the window */
.mirror.waiting .framework,
.mirror.waiting #to-decision,
.mirror.waiting .key-hint {
  display: none;
}

@keyframes ai-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* The words that say what's loading: a small pill in the warm AI colour */
.ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 12px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #f3c27a;
  background: var(--background);
  border: 1px dashed #f3c27a;
  border-radius: 999px;
}

/* On top of the blurred part it belongs to. The pill is about 40px tall, so a bottom margin
   of -40px lets the next thing slide up under it. "sticky" keeps it in view on long tables. */
.ai-over {
  position: sticky;
  top: 64px;
  z-index: 2;
  margin: 8px auto -48px;
}

/* The profit table: under the table's headings, on the first row of blurred numbers,
   to the right so it doesn't cover the row's name */
#profit-numbers-loading {
  margin: 56px 16px -96px auto;
}

.ai-loading[hidden] {
  display: none;
}

.ai-loading::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(243, 194, 122, 0.35);
  border-top-color: #f3c27a;
  border-radius: 50%;
  animation: ai-loading-spin 1s linear infinite;
}

@keyframes ai-loading-spin {
  to { transform: rotate(360deg); }
}

/* On the mirror, only while the AI is writing the paragraph */
.mirror-loading {
  display: none;
}

/* Above the 4 blurred lines */
.mirror.waiting .mirror-loading {
  display: flex;
  margin: 0 auto 20px;
}

/* The AI's answer arriving: it sharpens out of the blur and fades in.
   (Also on parts that already faded in with their page, like the mirror's paragraph.) */
.ai-arrive,
.stage .reveal.ai-arrive {
  animation: ai-arrive 0.9s ease-out both;
}

@keyframes ai-arrive {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-pending,
  .ai-pending-bar,
  .ai-loading::before,
  .ai-arrive,
  .stage .reveal.ai-arrive {
    animation: none;
  }
}

/* ---------- Chat box ---------- */

/* The dashed outline wraps both the text and the send button */
.chat-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 20px;
  background: rgba(13, 6, 32, 0.45);
  border: 1.5px dashed var(--line);
  border-radius: 28px;
  text-align: left;
  transition: border-color 0.3s;
}

/* Without this, "display: flex" above would win over the hidden attribute */
.chat-box[hidden] {
  display: none;
}

/* When you are typing, the whole box's dashed line brightens */
.chat-box:focus-within {
  border-color: var(--line-strong);
}

textarea {
  flex: 1;
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: hidden; /* no scrollbar: the box grows instead (see script.js) */
}

textarea::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

/* Round send button with an arrow */
.send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  color: var(--text);
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

/* On hover the button fills in with the light colour */
.send:hover,
.pill:hover {
  background: var(--text);
  color: var(--background);
}

/* A visible ring for keyboard users, on every button */
button:focus-visible {
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 4px;
}

/* Hides the label visually but keeps it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}