/* Styles for the /demo page (game + AI coach). Uses the site's tokens:
   black #000 background, Inter, gold #ffeb8c accent, #0f0f0f surfaces. */

.demo-page {
  padding: 92px 0 32px;
  min-height: 100vh;
  /* Hover tooltips (.demo-tip::after, the skills rubric) are laid out even
     while invisible, so one hanging past the right edge made the whole page
     pannable on a phone. Clip sideways - `clip` doesn't create a scroll
     container, and fixed-position layers (tour, nudges) are unaffected. */
  overflow-x: hidden;
  overflow-x: clip;
}


/* Two columns: board + coach, with the score strip and skills panel as
   their headers. */
.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* --- Game score strip: plain labeled numbers, solo-calm --- */

.demo-scorebar {
  display: flex;
  align-items: center;
  padding: 12px 8px;
}

.demo-sstat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 22px;
  border-right: 1px solid #2a2a2a;
  min-width: 0;
}

.demo-sstat:last-of-type {
  border-right: none;
}

.demo-sstat-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #737373;
  white-space: nowrap;
}

.demo-sstat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.demo-total-max {
  font-size: 0.68rem;
  color: #737373;
  font-weight: 600;
}

.demo-val-met {
  color: #10b981;
}

.demo-val-sat {
  color: #3b82f6;
}

.demo-scorebar .demo-timer-track {
  width: 80px;
  margin-top: 9px;
}

.demo-restart-strip {
  margin-left: auto;
  margin-right: 8px;
  padding: 7px 16px;
  font-size: 0.8rem;
}

/* --- Skills panel (above the coach) --- */

.demo-skillsbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  justify-content: center;
}

/* Same caps-label voice as the score strip's stat labels. */
.demo-skillsbar-title {
  color: #737373;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-skillsbar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

.demo-skillsbar-list .demo-skill-row {
  padding: 1px 0;
  margin: 0;
  gap: 7px;
  cursor: help;
}

/* Dotted underline = "hover me" - same signifier as the verdict chip. */
.demo-skillsbar-list .demo-skill-name {
  border-bottom: 1px dotted #4a4a4a;
  padding-bottom: 1px;
}

.demo-panel {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 20px;
}

.demo-gold {
  color: #ffeb8c;
}

.demo-timer-track {
  height: 2.5px;
  border-radius: 3px;
  background: #1a1a1a;
  overflow: hidden;
}

.demo-timer-fill {
  height: 100%;
  width: 100%;
  background: #8a8a8a;
  border-radius: 3px;
  transition: width 0.9s linear, background 0.3s;
}

/* MAX chips: a score sitting at its 14 cap says so, like the solo game. */

.demo-max-chip {
  display: none;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 1px 5px;
  color: #fff;
  margin-left: 6px;
  vertical-align: 3px;
}

.demo-max-chip.demo-max-on {
  display: inline-block;
}

.demo-max-sat {
  background: #3b82f6;
}

.demo-max-met {
  background: #10b981;
}

/* --- Score progress: how close to the max of 28 --- */

/* The bar IS the sum (used by the Session-complete popup): blue satisfaction
   segment + green metabolism segment. */
.demo-score-track {
  height: 4px;
  border-radius: 999px;
  background: #2a2a2a;
  overflow: hidden;
  display: flex;
}

.demo-seg-sat {
  height: 100%;
  background: #3b82f6;
  width: 0;
  transition: width 0.4s ease;
}

.demo-seg-met {
  height: 100%;
  background: #10b981;
  width: 0;
  transition: width 0.4s ease;
}

/* --- End-of-run verdict --- */

.demo-final-card {
  gap: 12px;
}

.demo-final-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: #ffeb8c;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.demo-final-max {
  font-size: 1rem;
  color: #737373;
  font-weight: 600;
}

.demo-final-barwrap {
  position: relative;
  width: 240px;
  margin: 0 auto;
  padding-top: 20px;
}

.demo-final-track {
  height: 6px;
}

/* Marker lives on the barwrap so the track can clip its rounded segments. */
.demo-final-marker {
  position: absolute;
  left: 92.86%;
  top: 13px;
  height: 20px;
  width: 2.5px;
  border-radius: 2px;
  background: #d9d9d9;
}

.demo-final-marker-done {
  background: #34d399;
}

.demo-final-flag {
  position: absolute;
  top: 0;
  right: 0;
  color: #737373;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* Verdict chip: the words live in its hover tip (dotted underline = ask me) */
.demo-final-verdict {
  position: relative;
  color: #a0a0a0;
  font-size: 0.78rem;
  border-bottom: 1px dotted #737373;
  cursor: help;
  padding-bottom: 1px;
}

.demo-final-verdict b {
  color: #fff;
}

.demo-final-verdict-grad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.08);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(52, 211, 153, 0.5);
}

/* One hover-info convention for the whole demo: cursor help + a styled tip
   from data-tip. Dotted underlines mark hoverable text. */
/* One tooltip chrome everywhere: #1a1a1a card, #333 border, 10px radius,
   soft shadow, 0.75rem body. The board tooltip and the skills rubric share
   these numbers - change one, change all. */
.demo-tip {
  position: relative;
  cursor: help;
}

button.demo-tip {
  cursor: pointer;
}

.demo-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 250px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 8;
}

.demo-tip:hover::after {
  opacity: 1;
}

@media (max-width: 700px) {
  .demo-tip::after {
    max-width: min(250px, calc(100vw - 32px));
  }
}

/* Placement variants: drop below instead of above / pin to the right edge
   instead of centering - for tips near a panel's top or right boundary. */
.demo-tip-down::after {
  bottom: auto;
  top: calc(100% + 9px);
}

.demo-tip-right::after {
  left: auto;
  right: 0;
  transform: none;
}

.demo-final-card .demo-beat-next {
  margin-left: 0;
}

/* The graduate's work button matches the Debrief button's type + height so
   the two read as a pair; it keeps its gold-outline look. */
.demo-final-card .demo-final-work {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 20px;
}

/* --- Last move: a sentence above the board, pin at its end --- */

.demo-lastline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 2px 0 10px;
  min-height: 34px;
  font-size: 0.85rem;
  color: #a0a0a0;
  flex-wrap: wrap;
}

/* Breathing room between the hint/lastline strip and the top bubbles. */
.demo-board {
  margin-top: 12px;
}

/* While the tour highlights the line, its normal asymmetric padding (2px
   top / 10px bottom, spacing it off the board) would sit the content high
   inside the yellow outline - even it out, same total height. */
.demo-lastline.demo-tour-target {
  padding: 6px 0;
}

.demo-lastline-label {
  color: #737373;
}

.demo-lastline b {
  color: #fff;
  font-weight: 700;
}

.demo-ll-sat {
  color: #3b82f6;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.demo-ll-met {
  color: #10b981;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.demo-lm-pin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px dashed #ffeb8c;
  background: none;
  color: #ffeb8c;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
  transition: background 0.2s;
}

.demo-lm-pin:hover {
  background: rgba(255, 235, 140, 0.12);
}

/* The tour's pin stop: the pin throbs while its card is up. */
.demo-lm-pin.demo-pin-glow {
  animation: demo-pin-pulse 1.6s ease-in-out infinite;
}

@keyframes demo-pin-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 235, 140, 0.5);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 235, 140, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-lm-pin.demo-pin-glow {
    animation: none;
  }
}

.demo-lastline-pinned .demo-lm-pin {
  border-style: solid;
  background: rgba(255, 235, 140, 0.12);
  cursor: default;
}

/* Pinned-moment line in the board tooltip */
.demo-tooltip-pin {
  color: #ffeb8c;
  font-size: 0.7rem;
}

.demo-tooltip-rule {
  border-top: 1px solid #2a2a2a;
  margin: 4px 0 2px;
}

.demo-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.72rem;
  color: #a0a0a0;
}

.demo-tooltip-row b {
  font-variant-numeric: tabular-nums;
}

.demo-tooltip-sat {
  color: #3b82f6;
}

.demo-tooltip-met {
  color: #10b981;
}

.demo-restart-btn {
  background: none;
  border: 1px solid #ffeb8c;
  color: #ffeb8c;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.demo-restart-btn:hover {
  background: #ffeb8c;
  color: #000;
}

.demo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.demo-dot-sat { background: #3B82F6; }
.demo-dot-met { background: #10B981; }

/* --- Skill tracker --- */

.demo-skills-header {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding-bottom: 12px;
}

.demo-skill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  margin: 0 -6px;
  border-radius: 8px;
}

.demo-skill-flash {
  animation: demo-skill-glow 1.2s ease;
}

@keyframes demo-skill-glow {
  0% { background: rgba(255, 235, 140, 0.25); }
  100% { background: transparent; }
}

.demo-skill-name {
  color: #d9d9d9;
  font-size: 0.82rem;
}

.demo-skill-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.demo-skill-seg {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: #1a1a1a;
  border: 1px solid #333;
  transition: background 0.3s, border-color 0.3s;
}

.demo-skill-seg-on {
  background: #ffeb8c;
  border-color: #ffeb8c;
}

.demo-skill-tip {
  display: none;
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 30;
  width: 290px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.demo-skill-row {
  position: relative;
}

.demo-skill-row:hover .demo-skill-tip {
  display: block;
}

#demo-skills .demo-skill-row:nth-last-child(-n+2) .demo-skill-tip {
  left: auto;
  right: 0;
}

/* Two columns on a phone: anchor each tip on the side its row sits, and
   size it to the screen - the fixed 290px ran off both edges (the right
   column's tip past the right, the last row's past the left). */
@media (max-width: 700px) {
  .demo-skill-tip {
    width: min(290px, calc(100vw - 40px));
  }

  #demo-skills .demo-skill-row:nth-child(odd) .demo-skill-tip {
    left: 0;
    right: auto;
  }

  #demo-skills .demo-skill-row:nth-child(even) .demo-skill-tip {
    left: auto;
    right: 0;
  }
}

.demo-skill-tip-title {
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  margin-bottom: 6px;
}

/* Why the skill matters - one sentence of context below the mark rubric. */
.demo-skill-tip-why {
  color: #a0a0a0;
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid #2a2a2a;
}

.demo-skill-tip-line {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #737373;
  padding: 2px 0;
  display: flex;
  gap: 7px;
}

.demo-skill-tip-line strong {
  font-weight: 700;
  min-width: 20px;
  color: inherit;
}

.demo-skill-tip-done {
  color: #ffeb8c;
}

.demo-skill-tip-next {
  color: #fff;
}

.demo-skills-tip {
  color: #737373;
  font-size: 0.75rem;
  line-height: 1.45;
  padding-top: 10px;
  border-top: 1px solid #2a2a2a;
  margin-top: 6px;
}

/* --- Session report --- */

.demo-report-overlay {
  overflow-y: auto;
  align-items: flex-start;
  /* The OS-default scrollbar is a glaring white strip on the black screen -
     make it a slim dark thumb on a transparent track. */
  scrollbar-width: thin;
  scrollbar-color: #2f2f34 transparent;
}

.demo-report-overlay::-webkit-scrollbar {
  width: 9px;
}

.demo-report-overlay::-webkit-scrollbar-track {
  background: transparent;
}

.demo-report-overlay::-webkit-scrollbar-thumb {
  background: #2f2f34;
  border-radius: 999px;
}

.demo-report-overlay::-webkit-scrollbar-thumb:hover {
  background: #3a3a3e;
}

.demo-report-card {
  max-width: 460px;
  width: 100%;
  margin: auto 0;
  text-align: left;
  align-items: stretch;
}

.demo-report-card .demo-overlay-title {
  text-align: center;
}

/* The signup moment on the report: save the report, unlock the sessions. */
.demo-save-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255, 235, 140, 0.05);
  border: 1px solid rgba(255, 235, 140, 0.35);
  border-radius: 14px;
  padding: 14px 16px;
}

.demo-save-text {
  margin: 0;
  color: #d9d9d9;
  font-size: 0.85rem;
  text-align: center;
}

.demo-google-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #ececec);
  color: #1a1a1a;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 9px 20px;
  cursor: pointer;
  transition: filter 0.2s;
}

.demo-google-btn:hover {
  filter: brightness(1.05);
}

/* The report's primary CTA - matches the demo's own solid button (Start
   playing / Debrief with your coach), not the site-wide navbar pill. */
.demo-report-continue {
  align-self: center;
  border: none;
  border-radius: 999px;
  padding: 11px 26px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(180deg, #fff, #d0d0d0);
  color: #000;
  transition: filter 0.2s;
}

.demo-report-continue:hover {
  filter: brightness(1.06);
}

.demo-report-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-report-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-report-head {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.demo-report-mark {
  color: #ffeb8c;
  font-weight: 700;
}

.demo-report-bar {
  height: 7px;
  border-radius: 4px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  overflow: hidden;
}

.demo-report-fill {
  height: 100%;
  background: #ffeb8c;
  border-radius: 4px;
  transition: width 0.8s ease;
}

.demo-report-quote {
  color: #d9d9d9;
  font-size: 0.82rem;
  font-style: italic;
}

.demo-report-feedback {
  color: #a0a0a0;
  font-size: 0.8rem;
  line-height: 1.45;
}

/* --- Compact report rows (option C): name + the in-game mark dashes +
   a "why?" pill; the quote + coach note unfold on tap, one row at a time. --- */

.demo-repc-list {
  display: flex;
  flex-direction: column;
}

.demo-repc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #1d1d1f;
  padding: 11px 0;
  cursor: pointer;
}

.demo-repc-row:first-child {
  border-top: 0;
}

.demo-repc-row.demo-repc-static {
  cursor: default;
}

.demo-repc-name {
  font-size: 0.85rem;
  color: #d6d4cc;
  flex: 1;
  text-align: left;
}

.demo-repc-dashes {
  display: flex;
  gap: 4px;
  align-items: center;
}

.demo-repc-why {
  color: #6f6d66;
  font-size: 0.68rem;
  border: 1px solid #2a2a2e;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.demo-repc-row:hover .demo-repc-why {
  color: #b9b7ae;
}

.demo-repc-row.demo-repc-open .demo-repc-why {
  color: #ffeb8c;
  border-color: rgba(255, 235, 140, 0.4);
}

/* Smooth unfold: the wrapper's grid row animates 0fr -> 1fr (a real height
   transition), the clip hides the box while closed, and the box itself
   fades in a beat behind the height. */
.demo-repc-evwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.demo-repc-evwrap.demo-repc-evwrap-open {
  grid-template-rows: 1fr;
}

.demo-repc-evclip {
  overflow: hidden;
  min-height: 0;
}

.demo-repc-evid {
  background: #141416;
  border: 1px solid #232327;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 0 10px;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s;
}

.demo-repc-evwrap-open .demo-repc-evid {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .demo-repc-evwrap,
  .demo-repc-evid {
    transition: none;
  }
}

.demo-repc-q {
  color: #b9b7ae;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 5px;
}

.demo-repc-f {
  color: #9a988f;
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
}

/* --- Work bridge --- */

.demo-work-btn {
  border-style: dashed;
  font-size: 0.85rem;
  align-self: center;
  text-decoration: none;
}

/* Work card: centers when it fits, scrolls from the top when it doesn't -
   same behavior as the report card. */
.demo-work-card {
  max-width: 460px;
  width: 100%;
  margin: auto 0;
}

/* The work tracker renders the same five-step rail as the Notebook. */
.demo-work-steps {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}

.demo-work-plan {
  text-align: left;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #d9d9d9;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.demo-work-exit {
  color: #737373;
  font-size: 0.8rem;
  text-decoration: none;
}

.demo-work-exit:hover {
  color: #ffeb8c;
}

/* --- Five-step rail (Notebook panel, board ribbon, work tracker) ---
   One shape, everywhere: 1 Problem, 2 Research, 3 Data, 4 Hypothesis,
   5 Experiment. The repetition is the point - it makes the method stick. */

.demo-rail {
  display: flex;
  flex-direction: column;
}

.demo-rail-step {
  display: flex;
  gap: 10px;
  position: relative;
  padding-bottom: 12px;
}

.demo-rail-step:last-child {
  padding-bottom: 0;
}

.demo-rail-step::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 21px;
  bottom: 1px;
  width: 1.5px;
  background: #2a2a2a;
}

.demo-rail-step:last-child::before {
  display: none;
}

.demo-rail-num {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  z-index: 1;
  background: linear-gradient(180deg, #fff 0%, #d0d0d0 100%);
  color: #000;
}

.demo-rail-todo .demo-rail-num {
  background: #1a1a1a;
  color: #737373;
  border: 1px solid #2a2a2a;
}

.demo-rail-active .demo-rail-num {
  background: #ffeb8c;
  color: #000;
  box-shadow: 0 0 0 3px rgba(255, 235, 140, 0.15);
}

.demo-rail-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.demo-rail-label {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffeb8c;
  font-weight: 700;
}

.demo-rail-todo .demo-rail-label {
  color: #737373;
}

.demo-rail-text {
  font-size: 0.74rem;
  color: #d9d9d9;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.demo-rail-todo .demo-rail-text,
.demo-rail-active .demo-rail-text {
  color: #737373;
  font-style: italic;
}

.demo-rail-sub {
  font-size: 0.66rem;
  color: #737373;
}

/* --- Your experiments (right column, above the coach) --- */

.demo-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* The panel is a two-row grid so collapse can ANIMATE: the list row goes
   1fr -> 0fr (the CSS accordion), while in the locked layout the panel and
   the chat also trade their flex share smoothly. */
/* Double class so this beats the responsive `.demo-panel { padding }` rule -
   the experiments panel supplies its own inner padding (header + list), so
   the panel wrapper must be flush, or the collapsed strip carries ~28px of
   dead panel padding on top of its header. */
.demo-panel.demo-experiments {
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.demo-experiments.demo-collapsed {
  grid-template-rows: auto 0fr;
}

/* One motion only: the two panels trade height. Everything else (text,
   padding, fades) switches instantly. */
@media (prefers-reduced-motion: no-preference) {
  .demo-experiments {
    transition: grid-template-rows 0.22s ease, flex-grow 0.22s ease;
  }
  .demo-chat {
    transition: flex-grow 0.22s ease;
  }
}

.demo-exp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 15px 20px;
  cursor: pointer;
  text-align: left;
}

.demo-exp-title {
  flex: 1;
  white-space: nowrap;
}

/* Live progress dots while the debrief builds a plan */

.demo-exp-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.demo-exp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a2a2a;
}

.demo-exp-dot-done {
  background: linear-gradient(180deg, #fff, #d0d0d0);
}

.demo-exp-dot-active {
  background: #ffeb8c;
  box-shadow: 0 0 0 2px rgba(255, 235, 140, 0.2);
}

.demo-exp-count {
  font-size: 0.62rem;
  font-weight: 600;
  color: #ffeb8c;
  border: 1px solid rgba(255, 235, 140, 0.5);
  background: rgba(255, 235, 140, 0.08);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Chevron: down = expanded, right = collapsed */

.demo-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
  transform: rotate(45deg);
  transition: transform 0.2s;
  margin: -2px 2px 2px;
}

.demo-collapsed .demo-chevron,
.demo-chat-collapsed .demo-chat-header .demo-chevron,
.demo-exp-entry:not(.demo-exp-entry-open) .demo-chevron {
  transform: rotate(-45deg);
}

.demo-exp-list {
  padding: 0 12px 12px;
  overflow-y: auto;
  max-height: 45vh;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Collapsed, the list row is 0fr - keep the list in the DOM (so the size
   interpolates), clip it, fade it, and let its padding go to zero so the
   strip really is just the header. */
.demo-collapsed .demo-exp-list {
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Collapsed panel is just its header - keep it a slim strip, not a full bar. */
.demo-experiments.demo-collapsed .demo-exp-header {
  padding: 8px 16px;
  font-size: 0.8rem;
}

.demo-experiments.demo-collapsed .demo-exp-count {
  font-size: 0.56rem;
  padding: 0 6px;
}

.demo-exp-entry {
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  background: #0a0a0a;
  flex-shrink: 0;
}

.demo-exp-entry-open {
  border-color: #2a2a2a;
}

.demo-exp-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: #d9d9d9;
  font: inherit;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.demo-exp-entry-title {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  font-size: 0.72rem;
}

.demo-exp-entry-snippet {
  flex: 1;
  min-width: 0;
  color: #a0a0a0;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-exp-chip {
  font-size: 0.58rem;
  font-weight: 600;
  color: #ffeb8c;
  border: 1px solid rgba(255, 235, 140, 0.5);
  background: rgba(255, 235, 140, 0.08);
  border-radius: 999px;
  padding: 0 7px;
  white-space: nowrap;
}

/* Verdict chips - the log doubles as a record of what the player proved. */
.demo-exp-chip-supported {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.08);
}

.demo-exp-chip-refuted {
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, 0.5);
  background: rgba(255, 138, 138, 0.08);
}

.demo-exp-chip-inconclusive {
  color: #a0a0a0;
  border-color: rgba(160, 160, 160, 0.5);
  background: rgba(160, 160, 160, 0.08);
}

.demo-exp-entry-body {
  padding: 2px 12px 12px;
}

.demo-exp-flash {
  animation: demoExpFlash 1.1s ease;
}

/* Generic gold attention flash - same pulse, any panel. */
.demo-flash {
  animation: demoExpFlash 1.1s ease;
}

@keyframes demoExpFlash {
  0%,
  100% {
    box-shadow: none;
  }
  30% {
    box-shadow: 0 0 0 1.5px #ffeb8c;
  }
}

/* Collapsed coach chat: header + the latest message + the input row. */

.demo-chat.demo-chat-collapsed {
  height: auto;
}

.demo-chat.demo-chat-collapsed .demo-chat-messages {
  flex: 0 0 auto;
  overflow: hidden;
  padding: 12px 2px;
}

.demo-chat.demo-chat-collapsed .demo-msg {
  display: none;
}

.demo-chat.demo-chat-collapsed .demo-msg:last-child {
  display: flex;
}

/* The preview is a glance, not a reader: two lines max, then ellipsis -
   never a scrollable wall of text (the plan lives in Your experiments). */
.demo-chat.demo-chat-collapsed .demo-msg:last-child .demo-msg-bubble {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.82rem;
}

/* --- Onboarding: intro beats, nudge tips, screen tour --- */

/* Double class beats .demo-overlay-card's centered defaults (defined later
   in this file). */
.demo-overlay-card.demo-beat {
  text-align: left;
  align-items: stretch;
  position: relative;
  gap: 12px;
  max-width: 440px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  /* Taller head zone: the skip link owns the top strip now that the
     eyebrow line is gone. Spacing in rem so it tracks text-size settings. */
  padding: 2.75rem 1.5rem 1.5rem;
  font-optical-sizing: auto;
  /* Same card recipe as the homepage panels: warm gold breath top-left,
     cool pool bottom-right - now over a translucent base with backdrop
     blur, so the board glows through the material. */
  background:
    radial-gradient(55% 40% at 16% 4%, rgba(255, 235, 140, 0.10) 0%, rgba(255, 235, 140, 0) 65%),
    radial-gradient(95% 100% at 86% 96%, rgba(96, 144, 255, 0.16) 0%, rgba(96, 144, 255, 0.05) 48%, rgba(96, 144, 255, 0) 78%),
    rgba(14, 14, 16, 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Every pop-up card fades and slides up as it appears - beats, the welcome
   card, the Session-complete popup, the report, the work overlay, the gate,
   and each tour spotlight. Cards appear via a display toggle (their own or
   their overlay's), so the animation replays every time one is shown - no
   JS needed. Nudge tips already fade/slide via their own transition. */
@media (prefers-reduced-motion: no-preference) {
  .demo-overlay-card,
  .demo-tour-card {
    /* Critically damped: fast start, no overshoot (response 0.4, bounce 0). */
    animation: demoBeatIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

@keyframes demoBeatIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apple-principles pass (Kowalski skill, 2026-08-21): display type is
   larger, tighter tracked and tighter leaded; the subline hugs the title
   while content blocks stand apart (proximity = relationship). */
.demo-beat-title {
  font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-align: left;
}

.demo-beat .demo-beat-text {
  margin-top: -4px;
}

.demo-beat .demo-bigstats,
.demo-beat .demo-qloop,
.demo-beat .demo-quote-pair,
.demo-beat .demo-micline,
.demo-beat .demo-flip {
  margin-top: 0.5rem;
}

/* The line after the contrast rows is a conclusion, not a caption - give it
   its own air rather than letting it hug the last row. */
.demo-beat .demo-flip + .demo-beat-text {
  margin-top: 0.35rem;
}

/* Respect a higher-contrast preference: lift the dim supporting text. */
@media (prefers-contrast: more) {
  .demo-beat-text,
  .demo-bigstat span {
    color: #d9d9d9;
  }

  .demo-beat-skip,
  .demo-bigstat em,
  .demo-qnode span {
    color: #a8a8a8;
  }
}

.demo-beat-skip {
  position: absolute;
  top: 0.95rem;
  right: 1.1rem;
  color: #8a8a8a;
  font-size: 0.72rem;
  /* Small text over a blurred surface: slightly heavier + a tracking bump. */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.demo-beat-skip:hover {
  color: #ffeb8c;
}

.demo-beat-eyebrow {
  color: #ffeb8c;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.demo-beat-text {
  color: #a0a0a0;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}

/* Subtitle tucked directly under the beat title */
.demo-beat-sub {
  color: #a0a0a0;
  font-size: 0.88rem;
  margin: -8px 0 0;
}

.demo-beat-text strong {
  color: #fff;
}

.demo-beat-freeze {
  margin: 0;
  border-left: 2px solid #2a2a2a;
  padding: 2px 0 2px 12px;
  color: #a0a0a0;
  font-size: 0.84rem;
  font-style: italic;
}

/* Before/after quote pair in beat 1 - the marks reuse the experiments
   panel's refuted/supported colors. */
.demo-quote-pair {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.demo-pq {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
}

.demo-pq-mark {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 800;
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 2px;
}

.demo-pq-bad {
  color: #737373;
}

.demo-pq-bad .demo-pq-mark {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.demo-pq-good {
  color: #d9d9d9;
}

.demo-pq-good .demo-pq-mark {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.demo-ladder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-rung {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  color: #737373;
}

.demo-rung-num {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.56rem;
  font-weight: 800;
  background: #1a1a1a;
  color: #737373;
  border: 1px solid #2a2a2a;
}

/* Stage 1 unfolds into a card - "you are here" by visual weight, with the
   freeze quote nested inside the stage it illustrates. */
.demo-rung-open {
  background: #1a1a1a;
  border: 1px solid rgba(255, 235, 140, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.demo-rung-open-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: #fff;
  font-weight: 700;
}

.demo-rung-open-head .demo-rung-num {
  background: #ffeb8c;
  color: #000;
  border: none;
}

.demo-rung-open .demo-beat-freeze {
  font-size: 0.78rem;
}

.demo-rung-tag {
  margin-left: auto;
  color: #ffeb8c;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Why-it-works beat: the stats are the hero. Fixed number column so the
   captions align regardless of the number's prefix. */
.demo-bigstats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-bigstat {
  /* Bare rows on the card itself - no box, no border. The gradient number
     carries all the warmth. */
  padding: 6px 0;
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  gap: 16px;
}

.demo-bigstat b {
  /* Gradient text, gold fading down - the number carries warmth without
     the flat solid gold that read as "Disneyland" (tester round 2026-08-21). */
  background: linear-gradient(180deg, #ffeb8c 0%, rgba(255, 235, 140, 0.25) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.demo-bigstat span {
  color: #a0a0a0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.demo-bigstat em {
  color: #737373;
  font-style: normal;
  font-size: 0.72rem;
}

/* The change beat: the five questions on a connected track, looping into a
   habit. Labels are full words, flat under each numbered node. */
.demo-qloop {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-qtrack {
  display: flex;
  align-items: flex-start;
}

.demo-qnode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  width: 60px;
}

.demo-qnode i {
  font-style: normal;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 235, 140, 0.22), rgba(255, 235, 140, 0.05));
  border: 1px solid rgba(255, 235, 140, 0.3);
  color: #ffeb8c;
  font-size: 0.66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-qnode span {
  color: #737373;
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.demo-qline {
  flex: 1;
  height: 1.5px;
  background: #2a2a2a;
  margin-top: 10px;
}

/* The conclusion of the subline's sentence ("Every run makes you answer
   ... until the method becomes your default way of thinking") - typeset
   identically to the subline so the two halves read as one voice. */
.demo-loopline {
  display: block;
  text-align: left;
  color: #a0a0a0;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* In the intro beat the rail is a compact index: label + question on one
   line per step, no connector lines (the observation box breaks the spine,
   so stubs would just look broken). The block shrink-wraps and centers. */
.demo-beat-rail {
  width: fit-content;
  margin: 0 auto;
}

.demo-beat-rail .demo-rail-step {
  padding-bottom: 8px;
  align-items: center;
}

.demo-beat-rail .demo-rail-step::before {
  display: none;
}

.demo-beat-rail .demo-rail-body {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}

.demo-beat-rail .demo-rail-label {
  font-size: 0.66rem;
}

.demo-beat-rail .demo-rail-text {
  color: #a0a0a0;
}

/* Phone width can't fit label + question on one row - stack them like the
   base rail does. */
@media (max-width: 560px) {
  .demo-beat-rail .demo-rail-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
}

/* Steps 2-3 are both observation - qualitative (notice) and quantitative
   (measure). The box binds them into the classic method shape: Problem,
   Observation, Hypothesis, Experiment. It hugs its content, and every
   number circle inside and outside sits on one vertical line. */
.demo-obsbox {
  position: relative;
  width: fit-content;
  background: #141414;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 12px 22px 9px 12px;
  margin: 5px 0 8px;
}

.demo-obsbox .demo-rail-step:last-child {
  padding-bottom: 0;
}

/* Steps outside the box indent by the box's border + padding, so all five
   number circles align. */
.demo-beat-rail > .demo-rail-step {
  margin-left: 13px;
}

.demo-obsbox-tag {
  position: absolute;
  top: -9px;
  left: 20px;
  background: #141414;
  border: 1px solid #2f2f2f;
  border-radius: 999px;
  color: #a0a0a0;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 9px;
  line-height: 1.2;
}

.demo-micline {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 235, 140, 0.4);
  border-radius: 12px;
  padding: 10px 12px;
}

.demo-micline span:last-child {
  font-size: 0.8rem;
  color: #fff;
  line-height: 1.45;
}

/* Same glyph as the real mic button in the chat, so the beat teaches the
   actual control the player will look for. */
.demo-micline-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffeb8c;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* --- The hidden-rules beat: most games tell you, this one doesn't. Two
   rows, the second one lit - the inversion is the whole point. --- */
.demo-flip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-flipr {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #232327;
  border-radius: 10px;
  padding: 13px 14px;
  color: #737373;
  font-size: 0.82rem;
  line-height: 1.4;
}

.demo-flip-tag {
  width: 78px;
  flex: 0 0 auto;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f6d66;
  white-space: nowrap;
}

.demo-flipr-now {
  border-color: rgba(255, 235, 140, 0.3);
  background: rgba(255, 235, 140, 0.035);
  color: #e8e6df;
}

.demo-flipr-now .demo-flip-tag {
  color: #ffeb8c;
}

@media (max-width: 560px) {
  .demo-flipr {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .demo-flip-tag {
    width: auto;
  }
}

/* --- Mic rehearsal (intro beat 5): one utterance before the game, so the
   speak -> captured loop is proven while the reason is still on screen.
   The permission prompt fires on this tap, a real user gesture. --- */
.demo-rehearse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
  text-align: center;
}

.demo-bigmic {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #ffeb8c;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .demo-bigmic:hover {
    background: #f2d873;
  }
}

.demo-bigmic:active {
  transform: scale(0.97);
}

.demo-bigmic.demo-bigmic-on::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 235, 140, 0.55);
  animation: demoMicPulse 1.2s ease-out infinite;
}

@keyframes demoMicPulse {
  from {
    transform: scale(0.92);
    opacity: 1;
  }
  to {
    transform: scale(1.18);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-bigmic {
    transition: background 160ms ease-out;
  }

  .demo-bigmic:active {
    transform: none;
  }

  .demo-bigmic.demo-bigmic-on::after {
    animation: none;
    opacity: 0.6;
  }
}

.demo-rehearse-line {
  margin: 0;
  color: #a0a0a0;
  font-size: 0.82rem;
  line-height: 1.5;
  min-height: 2.5em;
  max-width: 34ch;
}

.demo-rehearse-line i {
  color: #e8e6df;
}

.demo-rehearse-line b {
  color: #34d399;
  font-weight: 600;
}

/* --- Two ways into the game (welcome card): mic first, typing quiet --- */
.demo-startrow {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}

.demo-startrow .demo-beat-next {
  margin-left: 0;
  width: 100%;
  justify-content: center;
}

.demo-beat-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Double class: .demo-beat-next is defined later in the file and would
   otherwise win the gold background. */
.demo-beat-next.demo-beat-ghost {
  background: none;
  border: 1px solid #3a3a40;
  color: #d9d9d9;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .demo-beat-next.demo-beat-ghost:hover {
    background: none;
    border-color: #55555e;
  }
}

.demo-beat-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.demo-beat-dots {
  display: flex;
  gap: 6px;
}

.demo-bdot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2a2a2a;
  transition: width 0.45s cubic-bezier(0.25, 1, 0.5, 1), background 0.45s;
}

/* The active dot stretches into a pill and eases back as you advance. */
.demo-bdot-on {
  width: 20px;
  background: #ffeb8c;
}

/* One persistent intro card: only panels swap. Each panel fades and rises
   as it enters (display toggle replays the animation); min-height keeps the
   frame steady across beats so the card never jumps. */
.demo-beat-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 212px;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-beat-panel {
    animation: demoPanelIn 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  }
}

@keyframes demoPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 560px) {
  .demo-beat-panel {
    min-height: 0;
  }
}

/* Homepage-gold pill, design-eng discipline: flat solid gold, no glow at
   rest or on hover - the button answers with a shade shift and a 0.97
   press. Transitions name their properties (never `all`), strong ease-out
   so feedback starts instantly. */
.demo-beat-next {
  margin-left: auto;
  border: none;
  background: #ffeb8c;
  color: #000;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background 160ms ease-out,
    filter 160ms ease-out;
}

/* Hover only where a real pointer exists - no false triggers on touch.
   The solid (white) variant shades via filter so its gradient survives. */
@media (hover: hover) and (pointer: fine) {
  .demo-beat-next:not(.demo-beat-solid):hover {
    background: #f2d873;
  }

  .demo-beat-solid:hover {
    filter: brightness(0.96);
  }
}

.demo-beat-next:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .demo-beat-next {
    transition: background 160ms ease-out, filter 160ms ease-out;
  }

  .demo-beat-next:active {
    transform: none;
  }
}

.demo-beat-solid {
  background: linear-gradient(180deg, #fff, #d0d0d0);
  color: #000;
  border: none;
  font-weight: 700;
}

/* Floating nudge tip */

.demo-nudge-tip {
  position: fixed;
  z-index: 80;
  background: #1a1a1a;
  border: 1px solid #ffeb8c;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 0.76rem;
  color: #fff;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.demo-nudge-tip-on {
  opacity: 1;
  transform: translateY(0);
}

.demo-input-glow {
  border-color: #ffeb8c !important;
  animation: demoInputGlow 1.6s ease infinite;
}

@keyframes demoInputGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 235, 140, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 235, 140, 0.16);
  }
}

/* Focus mode: first visit shows ONLY the board with the beats - the other
   panels keep their layout space but stay invisible until the tour reveals
   them one by one. */
.demo-focus .demo-skillsbar,
.demo-focus .demo-scorebar,
.demo-focus .demo-right {
  visibility: hidden;
}

.demo-tour-hidden {
  visibility: hidden !important;
}

/* Screen tour */

.demo-tour-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 90;
}

.demo-tour-target {
  position: relative !important;
  z-index: 95 !important;
  outline: 1.5px solid #ffeb8c;
  outline-offset: 3px;
  border-radius: 16px;
}

.demo-tour-card {
  position: fixed;
  z-index: 96;
  width: 250px;
  background: #1a1a1a;
  border: 1px solid #ffeb8c;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.demo-tour-stepno {
  color: #ffeb8c;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
}

.demo-tour-text {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.45;
}

.demo-tour-row {
  display: flex;
  align-items: center;
}

/* A stop can carry its own action (the coach stop offers the mic when it
   isn't on yet); it sits above the skip/next row as the primary path. */
.demo-tour-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  background: #ffeb8c;
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .demo-tour-action:hover {
    background: #f2d873;
  }
}

.demo-tour-action:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .demo-tour-action {
    transition: background 160ms ease-out;
  }

  .demo-tour-action:active {
    transform: none;
  }
}

/* With an action present, Next becomes the quiet alternative. */
.demo-tour-card.demo-tour-has-action .demo-tour-next {
  background: none;
  border: 1px solid #3a3a40;
  color: #d9d9d9;
  font-weight: 600;
}

.demo-tour-skip {
  background: none;
  border: none;
  color: #737373;
  font-family: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
}

.demo-tour-skip:hover {
  color: #ffeb8c;
}

.demo-tour-next {
  margin-left: auto;
  background: linear-gradient(180deg, #fff, #d0d0d0);
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 5px 16px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

/* --- Email capture --- */

.demo-email-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.demo-email-input {
  flex: 1;
  min-width: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 16px;
  outline: none;
}

.demo-email-input:focus {
  border-color: #ffeb8c;
}

.demo-email-input::placeholder {
  color: #737373;
}

.demo-email-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  color: #000;
  background: linear-gradient(180deg, #ffffff 0%, #d0d0d0 100%);
  cursor: pointer;
  white-space: nowrap;
}

.demo-email-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.demo-email-status {
  min-height: 1.2em;
  color: #a0a0a0;
  font-size: 0.8rem;
  margin-top: 6px;
}

.demo-email-fineprint {
  color: #737373;
  font-size: 0.72rem;
  margin: 0;
}

.demo-report-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #2a2a2a;
  border-top-color: #ffeb8c;
  animation: demo-spin 0.9s linear infinite;
  margin: 0 auto;
}

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

/* --- Board --- */

.demo-board-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.demo-board {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.demo-board-svg {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 390px);
  display: block;
  margin: 0 auto;
}

.demo-board-fade {
  animation: demo-fadein 0.5s ease;
}

@keyframes demo-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Springy hover on playable bubbles, approximating the original's
   framer-motion spring (stiffness 300, damping 10). */
.demo-bubble {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.5, 1);
}

.demo-bubble-valid {
  cursor: pointer;
}

.demo-bubble-valid:hover {
  transform: scale(1.12);
}

/* Touch: the bubble waiting for its confirming tap wears a gold ring, so
   what the next tap will play is never in doubt. */
.demo-bubble-armed .demo-bubble-circle {
  stroke: #ffeb8c;
  stroke-width: 3;
}

.demo-bubble-armed {
  transform: scale(1.12);
}

.demo-bubble-pop {
  animation: demo-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes demo-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.demo-bubble-circle {
  transition:
    fill 0.2s ease-in-out,
    fill-opacity 0.2s ease-in-out,
    stroke 0.2s ease-in-out,
    stroke-width 0.2s ease-in-out;
}

.demo-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 180px;
}

.demo-tooltip strong {
  color: #fff;
  font-size: 0.85rem;
}

/* What the confirming tap will do (touch flow). */
.demo-tooltip .demo-tooltip-confirm,
.demo-tooltip .demo-tooltip-blocked {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #2f2f2f;
  font-size: 0.72rem;
  font-weight: 600;
}

.demo-tooltip .demo-tooltip-confirm {
  color: #ffeb8c;
}

.demo-tooltip .demo-tooltip-blocked {
  color: #8a8a8a;
  font-weight: 500;
}

.demo-tooltip span {
  color: #a0a0a0;
  font-size: 0.75rem;
}

.demo-banner {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid #ffeb8c;
  color: #ffeb8c;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 4;
}

/* On a phone the banner's one long line ran off both edges - the page
   could be panned side to side - and it landed on the last-move strip.
   It becomes a wrapping toast pinned to the top of the screen instead,
   out of the panel's layout entirely. */
@media (max-width: 700px) {
  .demo-banner {
    position: fixed;
    top: 82px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    white-space: normal;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.35;
    padding: 8px 14px;
    border-radius: 14px;
    z-index: 60;
  }
}

.demo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  padding: 24px;
}

.demo-overlay-card {
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.demo-overlay-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.demo-overlay-text {
  color: #d9d9d9;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.demo-overlay-steps {
  text-align: left;
  color: #d9d9d9;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-overlay-steps strong {
  color: #fff;
}

.demo-hint {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffeb8c;
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 4;
}

.demo-hint.demo-hint-visible {
  opacity: 1;
}

/* Narrow screens can't fit the hint on one line, and the last-move strip
   wraps to two rows - an absolutely placed hint lands on top of it. In
   flow it can't collide, and a reserved min-height keeps the board from
   jumping as the text comes and goes. */
@media (max-width: 700px) {
  .demo-hint {
    position: static;
    transform: none;
    width: 100%;
    min-height: 2.2em;
    margin: 0 0 2px;
    padding: 0 8px;
    white-space: normal;
    font-size: 0.82rem;
    line-height: 1.35;
  }
}

/* --- Chat --- */

.demo-chat {
  display: flex;
  flex-direction: column;
  height: clamp(420px, calc(100vh - 360px), 640px);
}

.demo-chat-header {
  color: #fff;
  font-weight: 700;
  padding-bottom: 14px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.demo-chat-header .demo-chevron {
  margin-left: auto;
}

/* The standing work-session entry. Hidden until the header carries
   .demo-has-work (first debrief onward); the chevron then gives up its auto
   margin to the button. */
.demo-work-entry {
  display: none;
  margin-left: auto;
  border: 1px solid rgba(255, 235, 140, 0.55);
  background: none;
  color: #ffeb8c;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

.demo-work-entry:hover {
  background: rgba(255, 235, 140, 0.12);
}

.demo-has-work .demo-work-entry {
  display: inline-block;
}

.demo-has-work .demo-chevron {
  margin-left: 10px;
}


.demo-chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 2px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.demo-msg {
  display: flex;
}

.demo-msg-user {
  justify-content: flex-end;
}

.demo-msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d9d9d9;
  overflow-wrap: break-word;
}

.demo-msg-assistant .demo-msg-bubble {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-bottom-left-radius: 4px;
}

.demo-msg-user .demo-msg-bubble {
  background: rgba(255, 235, 140, 0.12);
  border: 1px solid rgba(255, 235, 140, 0.35);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.demo-msg-compact .demo-msg-bubble {
  font-size: 0.8rem;
  color: #a0a0a0;
  background: transparent;
  border-style: dashed;
}

/* Corner badge: chips straddle the bubble's bottom edge, stamped on. */
.demo-msg {
  position: relative;
}

/* Evaluation chips sit in flow as a full-width row under the bubble, pulled
   up so the first row straddles its bottom edge. In flow (not absolute) so a
   second row of chips - narrow phones, long labels - pushes the next message
   down instead of climbing over the bubble's text. */
.demo-msg-tagged {
  flex-wrap: wrap;
}

.demo-msg-tags {
  position: relative;
  z-index: 1;
  flex: 0 0 100%;
  margin-top: -10px;
  padding-right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  box-sizing: border-box;
}

.demo-msg-tag {
  font-size: 0.68rem;
  color: #ffeb8c;
  background: #151515;
  border: 1px solid rgba(255, 235, 140, 0.55);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  animation: demo-tag-in 0.35s ease;
}

/* "Try again" inside a failed-reply bubble */
.demo-chat-retry {
  display: inline-block;
  margin-left: 2px;
  background: none;
  border: 1px solid rgba(255, 235, 140, 0.55);
  border-radius: 999px;
  color: #ffeb8c;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  cursor: pointer;
  vertical-align: baseline;
}

.demo-chat-retry:hover {
  background: rgba(255, 235, 140, 0.12);
}

@keyframes demo-tag-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-msg-tag {
    animation: none;
  }
}

.demo-chat-typing {
  display: flex;
  gap: 5px;
  padding: 4px 2px 10px;
}

.demo-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #737373;
  animation: demo-typing 1.2s infinite;
}

.demo-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.demo-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes demo-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.demo-chat-inputrow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-top: 1px solid #2a2a2a;
  padding-top: 12px;
}

.demo-chat-input {
  flex: 1;
  resize: none;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 10px 12px;
  outline: none;
  max-height: 120px;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.demo-chat-input::-webkit-scrollbar {
  width: 6px;
}

.demo-chat-input::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

.demo-chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.demo-chat-input:focus {
  border-color: #ffeb8c;
}

/* Smaller, single-line placeholder so it never clips against the one-row
   textarea; typed text keeps the normal size. */
.demo-chat-input::placeholder {
  color: #737373;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-chat-mic {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #a0a0a0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.demo-chat-mic:hover {
  color: #ffeb8c;
  border-color: #ffeb8c;
}

.demo-chat-mic.demo-mic-on {
  background: #ffeb8c;
  border-color: #ffeb8c;
  color: #000;
  animation: demo-mic-pulse 1.4s ease-out infinite;
}

@keyframes demo-mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 235, 140, 0.45); }
  100% { box-shadow: 0 0 0 9px rgba(255, 235, 140, 0); }
}

.demo-chat-input.demo-input-voice {
  border-color: #ffeb8c;
}

.demo-chat-send {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  background: linear-gradient(180deg, #ffffff 0%, #d0d0d0 100%);
  transition: opacity 0.2s;
}

.demo-chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- Responsive --- */

/* Shorter screens: compact the chrome so the whole game fits the viewport. */
@media (max-height: 960px) {
  .demo-page {
    padding-top: 84px;
  }
  .demo-panel {
    padding: 14px 16px;
  }
  .demo-skill-row {
    padding: 4px 6px;
  }
  .demo-skills-header {
    padding-bottom: 8px;
  }
}

@media (max-height: 820px) {
  .demo-page {
    padding-top: 78px;
  }
  .demo-board-panel {
    min-height: 320px;
  }
}

@media (max-width: 1100px) {
  .demo-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  /* Stacked, each panel sits with what it belongs to: the score strip reads
     the board beneath it, and the skills panel fills from the chat beneath
     it. (Side by side, the two columns already pair them this way.) The
     ordered items are the grid's own children - the chat lives inside
     .demo-right, so that wrapper carries the order, not .demo-chat. */
  .demo-scorebar {
    order: 1;
  }
  .demo-board-panel {
    order: 2;
    min-height: 320px;
  }
  .demo-skillsbar {
    order: 3;
  }
  .demo-right {
    order: 4;
  }
  .demo-chat {
    height: 480px;
  }
  .demo-sstat {
    padding: 0 14px;
  }
}

/* Stacked, the strip reads in two deliberate rows instead of wrapping
   wherever it runs out of width: the run's meters (moves, time) above,
   the three scores together below - they belong to each other. */
@media (max-width: 700px) {
  .demo-panel.demo-scorebar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 12px;
    padding: 14px 8px;
  }
  .demo-scorebar .demo-sstat {
    grid-column: span 2;
    padding: 0 12px;
  }
  .demo-scorebar .demo-sstat:nth-child(1),
  .demo-scorebar .demo-sstat:nth-child(2) {
    grid-column: span 3;
  }
  /* Row ends carry no divider. */
  .demo-scorebar .demo-sstat:nth-child(2),
  .demo-scorebar .demo-sstat:nth-child(5) {
    border-right: none;
  }
  .demo-scorebar .demo-restart-strip {
    grid-column: 1 / -1;
    margin: 0;
    justify-self: center;
  }
  .demo-scorebar .demo-timer-track {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .demo-page {
    padding-top: 96px;
  }
  .demo-scorebar {
    flex-wrap: wrap;
    gap: 8px 0;
  }
}

/* Desktop: lock the whole demo to the viewport - no page scroll. Falls back
   to normal scrolling on narrow or very short windows. Must stay LAST in this
   file so it wins the cascade over the base rules above. */
@media (min-width: 1101px) and (min-height: 640px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  /* Take the navbar out of flow so 100vh really is the whole screen; the
     page's 92px top padding already clears it. */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }
  .demo-page {
    box-sizing: border-box;
    height: 100vh;
    min-height: 0;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
  }
  .demo-page > .container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .demo-layout {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .demo-chat {
    height: auto;
    min-height: 0;
  }
  .demo-board-panel {
    min-height: 0;
  }
  .demo-board-svg {
    max-height: 100%;
  }
  /* Right column: experiments and chat share the height; a collapsed panel
     keeps only its header and the other takes the rest. */
  .demo-right {
    height: 100%;
    min-height: 0;
  }
  .demo-experiments {
    flex: 1 1 auto;
    min-height: 0;
  }
  .demo-experiments.demo-collapsed {
    flex: 0 0 auto;
  }
  .demo-exp-list {
    min-height: 0;
    max-height: none;
  }
  .demo-chat {
    flex: 1 1 auto;
  }
  .demo-chat.demo-chat-collapsed {
    flex: 0 0 auto;
  }
}

/* --- Account chip: signed-in identity, log out, delete account --- */

/* Sits in the navbar row opposite the logo (main.ts appends it there). The
   negative vertical margins keep the 36px avatar from making the row taller
   than the 18px logo, so the page does not shift for signed-in players. */
.demo-profile-chip {
  position: relative;
  margin: -9px 0 -9px auto;
  z-index: 2;
}

.demo-profile-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 235, 140, 0.45);
  background: #141414;
  color: #ffeb8c;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
}

.demo-profile-btn:hover {
  filter: brightness(1.2);
}

/* Not signed in: a quiet text pill in the same slot. Same height as the
   avatar so the row stays put whichever of the two renders. */
.demo-signin-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 235, 140, 0.45);
  background: #141414;
  color: #ffeb8c;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.2s;
}

.demo-signin-btn:hover {
  filter: brightness(1.2);
}

.demo-profile-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 230px;
  flex-direction: column;
  gap: 4px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.demo-profile-menu.demo-profile-open {
  display: flex;
}

.demo-profile-email {
  color: #8a8a8a;
  font-size: 0.78rem;
  padding: 2px 8px 8px;
  border-bottom: 1px solid #222;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-profile-item {
  background: none;
  border: none;
  text-align: left;
  color: #d9d9d9;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.demo-profile-item:hover {
  background: #1a1a1a;
}

.demo-profile-danger {
  color: #ff8d7a;
}

a.demo-profile-item {
  display: block;
  text-decoration: none;
}

.demo-feedback-form {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 2px 8px 8px;
}

.demo-feedback-form.demo-open {
  display: flex;
}

.demo-feedback-input {
  width: 100%;
  resize: vertical;
  background: #171717;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  color: #e5e5e5;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 8px;
}

.demo-feedback-input:focus {
  outline: none;
  border-color: rgba(255, 235, 140, 0.5);
}

.demo-feedback-send {
  align-self: flex-end;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #d0d0d0);
  color: #000;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  cursor: pointer;
}

.demo-feedback-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.demo-profile-name {
  display: block;
  color: #e5e5e5;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.demo-profile-sessions {
  color: #ffeb8c;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 8px 2px;
}

.demo-profile-sessions:empty {
  display: none;
}

/* --- Mobile: overlays (beats, session-complete, report/gate walls) pin to
   the viewport and scroll, instead of clipping inside the board panel --- */

@media (max-width: 767px) {
  /* Phantom layout overflow (SVG intrinsic width) - nothing visible sits
     out there, so kill the sideways scroll entirely. */
  body {
    overflow-x: hidden;
  }

  .demo-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    z-index: 90;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    /* Full-screen walls sit over bright panels on mobile - near-opaque so
       nothing ghosts through the text. */
    background: rgba(0, 0, 0, 0.94);
  }

  /* Flex min-width:auto stops cards and their rows from shrinking below
     their content width - force shrinkability so nothing clips off-screen.
     Double selectors out-rank the .demo-overlay-card.demo-beat sizing. */
  .demo-overlay .demo-overlay-card,
  .demo-overlay-card.demo-beat {
    margin: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .demo-overlay .demo-overlay-card * {
    min-width: 0;
    max-width: 100%;
  }
}

/* Navbar logo: same rendered size as the homepage header/footer wordmark. */
.navbar-logo{height:18px;width:auto}

/* Compiled-plan receipt: sits in the coach's bubble where the plain-text
   EXPERIMENT PLAN block used to print. The plan itself lives in Your
   experiments, so this only confirms it landed and offers a way there. */
.demo-plan-receipt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 235, 140, 0.45);
  background: rgba(255, 235, 140, 0.06);
  border-radius: 8px;
}

.demo-plan-receipt-text {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffeb8c;
}

.demo-plan-receipt-btn {
  flex: 0 0 auto;
  background: #ffeb8c;
  color: #000;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
}

.demo-plan-receipt-btn:hover {
  background: #fff3ad;
}

.demo-plan-receipt-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}