/* R6: the thread on the page itself, no window; Chip's dock at the bottom. */
.r6 { grid-template-rows: auto minmax(0, 1fr) auto auto; }
/* On the landing the chapter heading sits in the pin too, so the whole chapter fits one screen. */
.r6.has-h { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.r6-stage { display: grid; justify-items: center; }
.r6-view { position: relative; width: min(780px, 100%); height: 100%; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 70px); mask: linear-gradient(transparent, #000 70px); }
.r6-msgs { list-style: none; margin: 0; padding: 60px 4px 12px; display: grid; gap: 14px; transition: transform 420ms var(--ease-out); }
.r6-m { display: none; gap: 12px; align-items: start; }
.r6-m.is-in { display: flex; animation: r6-in 320ms var(--ease-out) both; }
@keyframes r6-in { from { opacity: 0; transform: translateY(10px); } }
.r6-face { display: block; width: 34px; height: 34px; flex: none; } .r6-face .agent-persona { width: 100%; height: 100%; }
.r6-from { display: block; margin-bottom: 3px; font: 600 12.5px var(--sans); color: var(--grey-1); }
.r6-txt { font-size: 15px; line-height: 1.45; max-width: 56ch; }
.r6-m--me { justify-content: end; }
.r6-m--me .r6-txt { padding: 12px 16px; border-radius: 20px 20px 4px 20px; background: var(--ink); color: #fff; min-height: 1.45em; min-width: 40px; }
.r6-m--sys { justify-content: center; }
.r6-m--sys .r6-txt { padding: 4px 12px; border-radius: 999px; background: var(--canvas-deep); font: 500 11.5px var(--mono); color: var(--grey-1); }
.r6-gh { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #24292f; color: #fff; font-size: 8.5px; vertical-align: -6px; flex: none; }
.r6-card, .r6-log { display: grid; gap: 2px; margin-top: 6px; padding: 12px 14px; border-radius: 18px; max-width: 480px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 24px 50px -36px rgba(20, 20, 30, 0.4); }
.r6-card.is-hired { box-shadow: 0 0 0 1.5px var(--gold), 0 24px 50px -36px rgba(201, 166, 97, 0.6); }
.r6-card header, .r6-log header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.r6-card header > .agent-persona { width: 40px; height: 40px; }
.r6-card header b, .r6-log header b { display: block; font: 600 15px var(--sans); }
.r6-card header .mono, .r6-log header .mono { font-size: 11px; color: var(--grey-2); }
.r6-log header .mono { margin-left: auto; }
.r6-state { margin: 6px 0 0; font-size: 11px; color: var(--grey-2); }
.r6-card.is-hired .r6-state { color: #3f8f5a; }
.r6-line { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 3px 6px; margin: 0 -6px; border-radius: 8px; font-size: 13.5px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 240ms var(--ease-out), max-height 320ms var(--ease-out), background-color 300ms; }
.r6-line.is-in { opacity: 1; max-height: 60px; }
.r6-line.is-new, .r6-run.is-new { background: rgba(201, 166, 97, 0.16); }
.r6-line > .mono { font-size: 10.5px; color: var(--grey-2); padding-top: 3px; text-transform: uppercase; }
.r6-line .mk-face { vertical-align: -5px; margin-right: 2px; }
.r6-line em { font-style: normal; font-size: 10px; color: var(--gold-deep); }
.r6-line.is-rule span:last-child { font-weight: 600; }
.r6-run { display: none; grid-template-columns: 42px 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; font-size: 13.5px; }
.r6-run.is-in { display: grid; animation: r6-in 300ms var(--ease-out) both; }
.r6-run.is-wait { background: #fdf6e6; box-shadow: inset 0 0 0 1.5px var(--gold); }
.r6-run > .mono { font-size: 10.5px; color: var(--grey-2); padding-top: 4px; }
.r6-run .mk-face { display: block; }
.r6-made { margin-top: 6px; max-width: min(260px, 100%); }
.r6-made .rx { padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.r6-made .rx--reel { max-width: 150px; padding: 0; }

/* Chip's report: its own section, the lesson last; gold once you save it. */
.r6-report { display: grid; gap: 8px; margin-top: 6px; padding: 14px 16px; border-radius: 18px; max-width: 480px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 24px 50px -36px rgba(20, 20, 30, 0.4); transition: box-shadow 300ms var(--ease-out); }
.r6-report header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.r6-report header b { display: block; font: 600 15px var(--sans); } .r6-report header .mono { font-size: 11px; color: var(--grey-2); }
.r6-rstate { padding: 3px 9px; border-radius: 999px; background: var(--canvas-deep); white-space: nowrap; }
.r6-rbar { display: grid; grid-template-columns: 72px minmax(0, 1fr) 78px; align-items: center; gap: 10px; font-size: 13px; }
.r6-rbar i { height: 9px; border-radius: 5px; background: var(--canvas-deep); overflow: hidden; }
.r6-rbar i b { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--gold); transform-origin: left; transform: scaleX(var(--g, 0)); }
.r6-rbar em { font-style: normal; font-size: 10.5px; color: var(--gold-deep); opacity: var(--g, 0); }
.r6-learn { display: grid; gap: 4px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: #fdf6e6; box-shadow: inset 0 0 0 1px rgba(201, 166, 97, 0.5); }
.r6-learn .mono { font-size: 10.5px; color: var(--gold-deep); } .r6-learn p { margin: 0; min-height: 1.4em; font-size: 14.5px; font-weight: 500; }
.r6-report.is-asking .r6-learn { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 22px rgba(201, 166, 97, 0.35); }
.r6-report.is-saved { box-shadow: 0 0 0 1.5px var(--gold), 0 24px 50px -36px rgba(201, 166, 97, 0.6); }
.r6-report.is-saved .r6-rstate { background: rgba(201, 166, 97, 0.22); color: var(--gold-deep); }

/* Chip's dock: the agent, what it is doing, and the button it waits on. */
.r6-dock { justify-self: center; width: min(780px, 100%); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 20px 40px -24px rgba(20, 20, 30, 0.4); }
.r6-dock-face { width: 44px; height: 44px; flex: none; } .r6-dock-face .agent-persona { width: 100%; height: 100%; }
.r6-dock-say { flex: 1; min-width: 0; font: 500 14px var(--sans); color: var(--grey-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r6-ctas { display: flex; gap: 6px; }
.r6-cta { padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13.5px var(--sans); white-space: nowrap; animation: r6-pop 300ms var(--ease-out) both; transition: transform 160ms var(--ease-out), background-color 200ms; }
.r6-cta.is-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.r6-cta.is-pressed { transform: scale(0.95); background: #3f8f5a; }
@keyframes r6-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@media (max-height: 820px) and (min-width: 901px) { .r6-line, .r6-run { font-size: 12.5px; } .r6-made .rx--reel { max-width: 110px; } .r6-txt { font-size: 14px; } }
@media (max-width: 900px) {
  .r6-txt { font-size: 13.5px; }
  .r6-run { grid-template-columns: 36px 22px minmax(0, 1fr); gap: 6px; font-size: 12.5px; } .r6-line { font-size: 12.5px; } .r6-made .rx--reel { max-width: 120px; }
  .r6-dock { gap: 8px; } .r6-dock-face { width: 36px; height: 36px; } .r6-dock-say { font-size: 12.5px; }
  .r6-rbar { grid-template-columns: 64px minmax(0, 1fr) 64px; font-size: 12px; } .r6-learn p { font-size: 13px; }
  .r6-cta { padding: 8px 12px; font-size: 12.5px; } .r6-cta.is-ghost { display: none; }
}