/* In a call with Memoir: one stage plays the four moments in turn, drawn in the app's own look, beside
   (on narrower windows, above) the list that names them. The playing moment's line sits in one slot
   under the stage, as tall as the longest line, so nothing below it moves when the stage moves on.
   Each beat moves one thing; a cut moves nothing. */

@font-face {
  font-family: "Excalifont";
  src: url("/fonts/excalifont-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.band-grid > .mo-module {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 44px auto auto;
  column-gap: 24px;
  margin-top: 80px;
}

.mo-stage {
  grid-column: 1 / span 7;
  grid-row: 1;
}

.mo-caption {
  grid-column: 1 / span 7;
  grid-row: 3;
}

.mo-foot {
  grid-column: 1 / span 7;
  grid-row: 4;
}

.mo-list {
  grid-column: 9 / span 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The four quotes: the moment's quote in its f88bbd38 type, the playing one in ink with its progress
   along the hairline under it, the waiting ones quieter so the playing one reads as the stage's. */

.said-line {
  font-family: var(--font-display);
  font-size: 30px;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.mo-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: calc(100% + 20px);
  margin: -6px 0 0 -10px;
  padding: 6px 10px 16px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--body);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mo-item .said-line {
  display: block;
  color: var(--quiet);
}

.mo-item:hover .said-line,
.mo-item[aria-pressed="true"] .said-line {
  color: var(--ink);
}

.mo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mo-progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.mo-progress > span {
  display: block;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.mo-item.is-running .mo-progress > span {
  animation: mo-progress var(--dur, 6s) linear forwards;
}

.mo-item.is-full .mo-progress > span {
  transform: scaleX(1);
}

@keyframes mo-progress {
  to {
    transform: scaleX(1);
  }
}

/* The playing moment's line: all four share one cell, so the slot keeps the longest one's height. */

.mo-caption {
  display: grid;
}

.mo-caption > p {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  text-wrap: pretty;
}

.mo-caption > p.is-on {
  visibility: visible;
}

.mo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.mo-pause {
  min-height: 24px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: 400 14px/1 var(--font-text);
  cursor: pointer;
  transition: color 150ms ease-out;
}

.mo-pause:hover {
  color: var(--ink);
}

.mo-pause[hidden] {
  display: none;
}

/* The stage holds one scene drawn at the app's size, 460 x 420, scaled to fit (moments.js). */

.mo-view {
  position: relative;
  aspect-ratio: 460 / 420;
  overflow: hidden;
  border: 1px solid var(--canvas-edge);
  border-radius: 12px;
  background: #111214;
}

.mo-view:has(> .mo-is-home:not([hidden])) {
  background: #181715;
}

/* The clock and a cut's label, in the strip under the dock's line: the site's words, not the app's.
   The strip is never under 22 px, so its 13 px words keep clear of the line and the stage's edge. */

.mo-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: max(22px, calc(22px * var(--s, 1)));
  margin: 0;
  padding: 0 calc(16px * var(--s, 1));
  color: #a3a3ab;
  font: 400 13px/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.mo-clock:empty,
.mo-cut:empty {
  display: none;
}

/* A stopped reading beside a later person's step, quieter so it never reads as the whole time. */
.mo-clock.is-past {
  color: #808088;
}

.mo-cut {
  padding: 2px 7px;
  border: 1px solid rgb(236 236 238 / 30%);
  border-radius: 999px;
  color: #d6d6da;
}

.mo-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 460px;
  height: 420px;
  overflow: hidden;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  background: #111214;
  color: #ececee;
  font:
    400 13px/1.4 -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    system-ui,
    sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.mo-scene p {
  margin: 0;
}

.mo-in {
  position: absolute;
  inset: 0;
  transition: opacity 300ms ease-out;
}

.mo-scene.is-fading .mo-in {
  opacity: 0;
}

.mo-scene.is-resetting,
.mo-scene.is-resetting *,
.mo-scene.is-resetting *::after {
  transition: none !important;
  animation: none !important;
}

.mo-i {
  flex: none;
  fill: currentColor;
}

/* The call window's set: the dock's line, and Memoir's folded M standing 5 px into it (#244). */

.mo-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  border-top: 1px solid #2b2c31;
}

@keyframes mo-nod {
  40% {
    transform: translateY(2px) rotate(-1.5deg);
  }
}

.mo-scene.s1:not(.s2) .mo-mk {
  animation: mo-nod 350ms ease-out 40ms;
}

/* The people in a Google Meet call, as Meet lays out three: Avery and you above, Memoir's tile
   below, drawn from the stage page (mem-134/bot-slice StageApp.tsx): its folded M, one status line
   in large type, and under it the title of what it makes, "Link in chat" once the link is posted,
   or the words it says. The call's chat beside them. The 2 px ring marks who is talking. */

.mo-grid {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 276px;
  height: 318px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 112px minmax(0, 1fr);
  gap: 10px;
}

.mo-tile {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #212226;
  transition: box-shadow 200ms ease-out;
}

.mo-tile-you {
  background: #25262a;
}

.mo-av {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #3a3c42;
  color: #ececee;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.mo-tile-you .mo-av {
  background: #474a52;
}

.mo-name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgb(0 0 0 / 60%);
  color: #ececee;
  line-height: 1.3;
  white-space: nowrap;
}

.mo-name span {
  color: #a3a3ab;
}

.mo-t-memoir {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 18px 32px;
  text-align: center;
}

.mo-mk {
  width: 34px;
  height: 34px;
  max-width: none;
  margin-bottom: 4px;
}

.mo-st {
  font-size: 19px;
  line-height: 1.25;
}

.mo-sub {
  color: #b9b9c0;
  font-size: 12px;
  line-height: 1.4;
  text-wrap: balance;
}

.mo-st > span,
.mo-sub > span {
  display: none;
}

.mo-chat {
  position: absolute;
  top: 12px;
  left: 302px;
  right: 16px;
  height: 318px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #1b1c20;
  color: #c9c9cf;
  font-size: 11px;
  line-height: 1.45;
}

.mo-chat-head {
  color: #ececee;
  font-weight: 600;
}

.mo-from {
  display: block;
  margin-bottom: 1px;
  color: #ececee;
  font-weight: 600;
}

.mo-url {
  color: #9cc0f5;
  overflow-wrap: anywhere;
}

.mo-msg-link {
  transition: opacity 300ms ease-out;
}

.mo-said {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 348px;
  display: flex;
  gap: 10px;
  color: #ececee;
  font-size: 14px;
  line-height: 1.4;
  transition: opacity 200ms ease-out;
}

.mo-said-who {
  flex: none;
  color: #8b8b93;
}

/* The page or sketch as anyone on the call sees it after opening the chat's link: the shared page,
   with its line naming who drafted it, on whose call and when. */

.mo-open {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 0 1px #2b2c31;
  color: #141414;
  transition: opacity 300ms ease-out;
}

.mo-open-bar {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: #ececee;
}

.mo-open-url {
  padding: 1px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #5e5e64;
  font-size: 10.5px;
}

.mo-open-head {
  padding: 8px 14px;
  border-bottom: 1px solid #e6e6e6;
  color: #5e5e64;
  font-size: 11px;
}

.mo-open-body {
  position: relative;
  flex: 1;
}

.mo-open-sketch {
  display: grid;
  place-items: center;
  background: #ffffff;
}

.mo-pw {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 10px 20px;
  background: #f3f6f1;
  color: #2f3a33;
}

.mo-pw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mo-pw-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2f4f40;
}

.mo-pw-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: #e3ebe3;
  font-size: 10.5px;
  font-weight: 600;
}

.mo-pw-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
  padding: 10px 14px 12px;
  border: 1px solid #dde6dd;
  border-radius: 10px;
  background: #e8efe8;
}

.mo-pw-kicker {
  font-size: 10.5px;
  font-weight: 600;
}

.mo-pw-h1 {
  margin-top: 3px;
  font-size: 23px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #2f4f40;
}

.mo-pw-sub {
  margin-top: 5px;
  font-size: 11.5px;
  color: #5d6b62;
}

.mo-pw-form {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

.mo-pw-field {
  flex: 1;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #b9c4bb;
  border-radius: 6px;
  background: #ffffff;
  color: #6b756e;
  font-size: 11px;
  line-height: 24px;
}

.mo-pw-btn {
  height: 26px;
  padding: 0 11px;
  border-radius: 6px;
  background: #2f4f40;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 26px;
}

.mo-pw-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}

.mo-pw-feats span {
  padding: 10px;
  border: 1px solid #dde6dd;
  border-radius: 8px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 600;
}

.mo-sk {
  overflow: visible;
}

.mo-sk path {
  fill: none;
  stroke: #1e1e1e;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mo-sk text {
  fill: #1e1e1e;
  font-family: Excalifont, "Comic Sans MS", cursive;
  font-size: 15px;
  text-anchor: middle;
}

/* Each beat changes one thing. Before Memoir hears its name Avery's ring is on; when her words end
   it goes. The status line says Listening, then Drafting with the title, then Page ready or Sketch
   ready; then the link reaches the chat and the tile says Link in chat; then the page opens. */

.mo-scene:not(.s2) .mo-t-avery {
  box-shadow: 0 0 0 2px rgb(236 236 238 / 55%);
}

.mo-scene:not(.s3) .mo-st-listen,
.mo-scene.s3:not(.s4) :is(.mo-st-draft, .mo-st-think),
.mo-scene.s4 :is(.mo-st-ready, .mo-st-speak, .mo-sub-words),
.mo-scene.s3:not(.s5) .mo-sub-title,
.mo-scene.s5 .mo-sub-link {
  display: inline;
}

.mo-scene.s3:not(.s4) .mo-mk {
  animation: mo-working 1.6s ease-in-out infinite;
}

@keyframes mo-working {
  50% {
    opacity: 0.55;
  }
}

.mo-scene[data-moment="answer"].s4 .mo-t-memoir {
  box-shadow: 0 0 0 2px rgb(236 236 238 / 55%);
}

.mo-scene:not(.s5) .mo-msg-link,
.mo-scene:not(.s6) .mo-open {
  opacity: 0;
}

/* 4. The call ends: the home after the call, with the follow-up row's verb as its button. Send, then
   Sending and Undo with the ten second window, which a cut skips, then the send, then Sent. */

.mo-is-home {
  background: #181715;
  color: #f3f1ec;
}

.mo-hm-when {
  position: absolute;
  left: 16px;
  top: 9px;
  display: flex;
  flex-direction: column;
  color: #8f8b84;
}

.mo-hm-main {
  position: absolute;
  left: 92px;
  right: 16px;
  top: 8px;
}

.mo-scene .mo-hm-title {
  color: #aaa69f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.mo-fu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: 10px;
  background: rgb(255 246 232 / 7%);
}

.mo-fu-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.mo-hb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgb(255 246 232 / 12%);
  border-radius: 6px;
  background: #201f1c;
  color: #f3f1ec;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.mo-hb-primary {
  border-color: transparent;
  background: #f3f1ec;
  color: #171614;
}

.mo-hb-plain {
  border-color: transparent;
  background: transparent;
  color: #aaa69f;
}

.mo-fu-card {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgb(255 246 232 / 7%);
  border-radius: 10px;
  background: #201f1c;
}

.mo-fu-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 8px 10px 12px;
}

.mo-fu-row + .mo-fu-row {
  border-top: 1px solid rgb(255 246 232 / 7%);
}

.mo-fu-main {
  min-width: 0;
}

.mo-scene .mo-fu-s {
  color: #f3f1ec;
  font-size: 14px;
  line-height: 1.5;
}

.mo-fu-s .mo-hb,
.mo-fu-lead,
.mo-chip {
  vertical-align: middle;
}

.mo-fu-q,
.mo-fu-receipt {
  display: block;
  margin-top: 4px;
  color: #8f8b84;
  line-height: 1.45;
}

.mo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px 0 5px;
  border-radius: 6px;
  background: rgb(255 246 232 / 7%);
  color: #aaa69f;
  line-height: 1;
}

.mo-fu-via {
  white-space: nowrap;
}

.mo-fu-lead {
  display: inline-flex;
  align-items: center;
}

.mo-fu-sending {
  color: #8f8b84;
  font-size: 13px;
  font-weight: 500;
}

.mo-fu-undo {
  color: #9fb3ff;
}

.mo-fu-working {
  display: inline-grid;
  color: #8f8b84;
  font-size: 13px;
  font-weight: 500;
}

.mo-fu-working::after {
  content: attr(data-room);
  visibility: hidden;
}

.mo-fu-working > span,
.mo-fu-working::after {
  grid-area: 1 / 1;
}

.mo-fu-working > span,
.mo-fu-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.mo-fu-done {
  gap: 6px;
  color: #8f8b84;
}

/* The undo window's bar, full: the window itself is the cut. */
.mo-fu-drain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: 2px;
}

.mo-fu-drain > span {
  display: block;
  height: 100%;
  background: #9fb3ff;
}

.mo-fu-side {
  display: flex;
}

.mo-fu-foot {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  border-top: 1px solid rgb(255 246 232 / 7%);
}

.mo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  transform-origin: 1px 1px;
}

.mo-cursor path {
  fill: #111111;
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.mo-scene[data-moment="rows"] .mo-cursor {
  transform: translate(52px, 300px);
}

.mo-scene[data-moment="rows"].s1 .mo-cursor {
  transform: translate(119px, 117px);
  transition: transform 700ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.mo-scene[data-moment="rows"].s2:not(.s3) .mo-cursor {
  transform: translate(119px, 117px) scale(0.88);
  transition: transform 100ms ease-out;
}

.mo-scene[data-moment="rows"].s3 .mo-cursor {
  transform: translate(404px, 122px);
  transition: transform 450ms ease-out;
}

.mo-scene[data-moment="rows"].s4 .mo-cursor {
  visibility: hidden;
}

.mo-scene[data-moment="rows"]
  :is(.mo-fu-verb, .mo-fu-sending, .mo-fu-working, .mo-fu-drain, .mo-fu-n3),
.mo-scene[data-moment="rows"] .mo-fu-r1 .mo-fu-side,
.mo-scene[data-moment="rows"]:not(.s5) :is(.mo-fu-done, .mo-fu-receipt),
.mo-scene[data-moment="rows"]:not(.s3) .mo-fu-n2 {
  display: none;
}

.mo-scene[data-moment="rows"]:not(.s3) :is(.mo-fu-verb, .mo-fu-n3) {
  display: inline-flex;
}

.mo-scene[data-moment="rows"]:not(.s3) .mo-fu-r1 .mo-fu-side {
  display: flex;
}

.mo-scene[data-moment="rows"].s2:not(.s3) .mo-fu-verb {
  background: #c9c6bf;
}

.mo-scene[data-moment="rows"].s3:not(.s4) .mo-fu-sending {
  display: inline;
}

.mo-scene[data-moment="rows"].s3:not(.s4) .mo-fu-drain {
  display: block;
}

.mo-scene[data-moment="rows"].s4:not(.s5) .mo-fu-working {
  display: inline-grid;
}

/* Narrower windows: the stage over its line, then the four. */

@media (max-width: 1079px) {
  .band-grid > .mo-module {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    max-width: 720px;
    margin-top: 56px;
  }

  .mo-stage,
  .mo-caption,
  .mo-foot,
  .mo-list {
    grid-column: 1;
    grid-row: auto;
  }

  /* The note and Pause under the stage, then the caption's slot, so a short caption's spare lines
     fall before the list. */
  .mo-foot {
    order: 1;
    margin-top: 0;
  }

  .mo-caption {
    order: 2;
    margin-top: 16px;
  }

  .mo-list {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin-top: 40px;
  }

  .mo-list li {
    display: flex;
  }

  .mo-item {
    align-self: stretch;
  }
}

@media (max-width: 719px) {
  .band-grid > .mo-module {
    margin-top: 44px;
  }

  .said-line {
    font-size: 25px;
  }

  .mo-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 32px;
  }

  /* A stage drawn under 460 px wide keeps the strip at 22 px: the scene's dock line stays the
     strip's top, and the stage grows below the scene by what the scaled dock is short of 22 px. */
  .mo-view {
    box-sizing: content-box;
    padding-bottom: max(0px, calc(22px - 22px * var(--s, 1)));
  }

  .mo-time {
    gap: 8px;
  }

  .mo-cut {
    padding: 1px 6px;
  }
}