/* ==========================================================================
   Basenine Labs — study v5: the scroll story, with people and real tools.
   Loads after /v4/v4.css and only adds or overrides what v5 needs.
   ========================================================================== */

/* Ten beats instead of seven: give the pinned scroll a little more room */
.page > .story { height: 640vh; }

/* ---------- People ---------- */

.pp {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9e4da;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0;
}
.pp--red { background: var(--signal); color: var(--white); }
.pp--ink { background: var(--ink); color: var(--paper); }
.pp--sand { background: #e9e4da; color: var(--ink); }
.pp--sq { width: 24px; height: 24px; border-radius: 6px; font-size: 10px; }
.pp--xs { width: 18px; height: 18px; font-size: 8.5px; }

.sc-bubble5 { gap: 7px; padding: 11px 13px 12px; border-radius: 16px; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.who .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-bubble5 .sc-msg { font-size: 13px; line-height: 1.4; }

/* ---------- App chrome ---------- */

.app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-bottom: 7px;
  border-bottom: 0.75px solid var(--rule-soft);
}
.app-ico { display: block; flex: none; width: 16px; height: 16px; }
.app-ico svg { display: block; width: 100%; height: 100%; }
.app-ico--fig { width: 11px; }
.app-ico--wide { width: auto; height: 12px; }
.app-ico--mini { width: 14px; height: 14px; }
.app-name { flex: 1; min-width: 0; overflow: hidden; font-size: 12px; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.app-bar .lbl { white-space: nowrap; }

/* Google Doc */
.doc-body { display: grid; gap: 6px; padding: 2px 1px; }
.doc-h { font-size: 13px; letter-spacing: -0.02em; }
.doc-comment {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff4cf;
  font-size: 11.5px;
  letter-spacing: -0.01em;
}

/* Figma: a collaborator's cursor sitting on the frames */
.fig-cursor { position: absolute; right: 16%; bottom: 14%; display: flex; align-items: flex-start; gap: 1px; pointer-events: none; }
.fig-cursor svg { width: 12px; height: 12px; }
.fig-cursor span { margin-top: 9px; padding: 2px 6px; border-radius: 3px 9px 9px 9px; background: #a259ff; color: var(--white); font-size: 10px; letter-spacing: -0.01em; }

/* Slack thread */
.slack-msg { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; }
.slack-msg .lbl { margin-bottom: 2px; }
.slack-reply { padding-top: 8px; border-top: 0.75px solid var(--rule-soft); }

/* Asana task */
.task-row { display: flex; align-items: center; gap: 8px; }
.task-check { flex: none; width: 14px; height: 14px; border: 1px solid rgba(30, 30, 30, 0.35); border-radius: 50%; }
.task-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Icon tiles: Gmail and the burning folder */
.sc-tile { justify-items: center; gap: 6px; padding: 14px 8px 10px; border-radius: 16px; text-align: center; }
.tile-ico { display: block; width: 34px; height: 26px; }
.tile-ico svg { display: block; width: 100%; height: 100%; }
.tile-emoji { position: relative; font-size: 30px; line-height: 1; }
.tile-emoji .fire { position: absolute; top: -16px; left: 50%; font-size: 22px; transform: translateX(-50%); }

/* ---------- Resolution reply ---------- */

.story-reply {
  position: absolute;
  top: calc(50% + 124px);
  left: 50%;
  z-index: 4;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  width: min(300px, 80%);
  padding: 10px 13px 11px;
  border: 0.75px solid var(--rule);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 18px 40px -26px rgba(30, 30, 30, 0.35);
  opacity: 0;
  transform: translate(-6%, 8px);
}
.story-reply .sc-msg { font-size: 13.5px; }

/* ---------- Static mode (mobile / reduced motion) ---------- */

.story--static .story-reply { position: relative; top: auto; left: auto; margin: 16px auto 0; opacity: 1; transform: none; }