/* The self-playing clarity call on withrinn.com. One call, five beats:
 * Listen -> Suggest -> Accept -> Show -> Agree. app.js sets data-beat on
 * .demo (0 means "between examples", when everything fades out) and swaps
 * the example's text into the [data-slot] elements. Anything with
 * data-show="1 2 3" is visible only in those beats. Without JS the page
 * shows beat 2 of the first example: Rinn's suggestion in the blank.
 * Colours are theme tokens only (styles.css); no hex here. */

.demo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 20px;
}

.examples {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.examples[hidden] { display: none; }
.example-tab {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.example-tab:hover { color: var(--text-primary); }
.example-tab .short { display: none; }
.example-tab[aria-selected="true"] {
  background: var(--input-bg);
  color: var(--text-primary);
}

/* ── Showing and hiding by beat ───────────────────────────────────────── */

.demo [data-show] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0s linear 0.35s;
}
.demo[data-beat="1"] [data-show~="1"],
.demo[data-beat="2"] [data-show~="2"],
.demo[data-beat="3"] [data-show~="3"],
.demo[data-beat="4"] [data-show~="4"],
.demo[data-beat="5"] [data-show~="5"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.5s ease var(--d, 0s),
    transform 0.5s ease var(--d, 0s),
    visibility 0s linear var(--d, 0s);
}
.d1 { --d: 0.9s; }
.d2 { --d: 1.7s; }
.d3 { --d: 2.4s; }

/* ── The call window ──────────────────────────────────────────────────── */

.frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
}

.frame-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.frame-where {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--text-secondary);
  font-weight: 500;
}
.live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: live 2s ease-in-out infinite;
}
@keyframes live {
  50% { opacity: 0.35; }
}

.frame-body {
  display: grid;
  grid-template-columns: minmax(220px, 290px) 1fr;
}

/* What was said: the transcript, one line at a time. */
.talk {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 24px 20px;
  list-style: none;
  border-right: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
.line .who {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.line.you { color: var(--text-secondary); }
.said {
  border-radius: 4px;
  transition: background-color 0.4s ease;
}
.demo[data-beat="2"] .said,
.demo[data-beat="3"] .said {
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The panels share one cell, so the window never changes height. */
.stack {
  display: grid;
  padding: 28px;
}
.panel {
  grid-area: 1 / 1;
  min-width: 0;
}
.panel-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Beats 1–3: one question on the table. */
.question {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
.known {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--text-secondary);
}
.known li::before {
  content: "·";
  margin-right: 8px;
  color: var(--text-muted);
}

.blank {
  display: grid;
  align-items: center;
  min-height: 52px;
  margin-top: 22px;
  padding: 10px 14px;
  border: 1px dashed var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  transition:
    border-color 0.4s ease,
    background-color 0.4s ease;
}
.blank > * { grid-area: 1 / 1; }
.demo[data-beat="3"] .blank {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.listening {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.listening svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  animation: listen 1.1s ease-in-out infinite;
}
@keyframes listen {
  50% { transform: scaleY(0.55); }
}
.ghost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ghost-text {
  color: var(--text-secondary);
  font-style: italic;
}
.ghost-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.ghost-actions svg {
  width: 14px;
  height: 13px;
  color: var(--accent);
}
.use {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.filled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.filled svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
}
.mirror {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Beat 4: a working screen on sample data, and the client's pin. */
.screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.screen-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.tag {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--input-bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.screen table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.screen th {
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.screen td {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.screen tr:last-child td { border-bottom: 0; }
.screen td:first-child,
.screen th:first-child { padding-left: 0; }
.pin {
  position: absolute;
  top: 50%;
  right: -2px;
  margin-top: -11px;
  color: var(--danger);
}
.pin svg {
  width: 22px;
  height: 22px;
}
.demo[data-beat="4"] .pin { animation: drop 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) var(--d) both; }
@keyframes drop {
  from { transform: translateY(-16px); }
}
.note {
  position: absolute;
  top: calc(50% + 16px);
  right: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 250px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--pop-shadow);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
}

/* Beat 5: the one scope both sides sign. */
.scope-title {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 600;
}
.scope-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}
.scope-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.scope-list svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--accent);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.price {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.price-term {
  font-size: 14px;
  color: var(--text-muted);
}
.signed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.signed svg {
  width: 18px;
  height: 18px;
  color: var(--live);
}

/* ── Under the window: what's happening, and the controls ─────────────── */

.demo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 16px;
}
.caption {
  display: grid;
  flex: 1 1 280px;
  margin: 0;
  font-size: 15px;
  color: var(--text-secondary);
}
.caption > span { grid-area: 1 / 1; }
.controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.controls[hidden] { display: none; }
.beats {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.beat {
  display: grid;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.beat:hover,
.beat[data-state="now"] { color: var(--text-primary); }
.beat-bar {
  position: relative;
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.beat-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.beat[data-state="done"] .beat-bar::after,
.beat[data-state="now"] .beat-bar::after { transform: none; }
/* The current beat's bar fills over what's left of the beat (app.js sets
 * --beat-ms each time the timer starts). */
.demo[data-animate="true"] .beat[data-state="now"] .beat-bar::after {
  animation: fill var(--beat-ms, 4s) linear both;
}
@keyframes fill {
  from { transform: scaleX(0); }
}
.beat-bar.restart::after { animation: none !important; }
#demo-toggle[hidden] { display: none; }
/* Paused or off screen: the current beat's bar reads as "here", full. */
.demo[data-playing="false"] .beat[data-state="now"] .beat-bar::after { animation: none; }
#demo-toggle .when-paused,
.demo[data-paused="true"] #demo-toggle .when-playing { display: none; }
.demo[data-paused="true"] #demo-toggle .when-paused { display: block; }

@media (max-width: 760px) {
  .frame-body { grid-template-columns: 1fr; }
  .talk {
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .stack { padding: 22px 18px; }
  .question,
  .scope-title { font-size: 19px; }
  .ghost {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .screen table { font-size: 12.5px; }
  .screen td,
  .screen th { padding-inline: 4px; }
  .screen th:nth-child(2),
  .screen td:nth-child(2) { display: none; }
  .note { width: 210px; }
  .beat-bar { width: 36px; }
  .beat-label { display: none; }
  .example-tab .long { display: none; }
  .example-tab .short { display: inline; }
  /* On a phone the transcript only holds the lines said so far, rather than
   * reserving room for the whole call above the panel. */
  .talk { min-height: 132px; }
  .talk .line { display: none; }
  .demo[data-beat="1"] .talk [data-show~="1"],
  .demo[data-beat="2"] .talk [data-show~="2"],
  .demo[data-beat="3"] .talk [data-show~="3"],
  .demo[data-beat="4"] .talk [data-show~="4"],
  .demo[data-beat="5"] .talk [data-show~="5"] {
    display: block;
    @starting-style {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}