/* The home page's motion scenes: a room drawn in the app's look (design/pictures),
   played once as a short demo when it scrolls into view. At rest (no script,
   reduced motion, or the end of the play) a scene shows its last frame. Every
   colour is a token. */

.scene {
  --scene-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --scene-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --scene-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  position: relative; display: grid; gap: var(--space-m);
}
.app {
  position: relative; height: 520px; overflow: hidden; isolation: isolate; container-type: inline-size;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-large); box-shadow: var(--elevation-pane);
  font-size: var(--type-row-size); line-height: var(--type-row-line-height); color: var(--ink);
}
@media (max-width: 720px) { .app { height: 560px; } }
.i { width: 16px; height: 16px; flex: none; }

/* The camera: everything in the room moves together when it pushes in. */
.camera { position: absolute; inset: 0; display: flex; flex-direction: column; transform-origin: 0 100%; transition: transform 1100ms var(--scene-ease-in-out); }

/* ---------- the room's header ---------- */
.app-head { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--hairline); flex: none; min-width: 0; }
.hash { color: var(--ink-3); font-size: var(--type-title-size); }
.room { white-space: nowrap; font-weight: 650; font-size: var(--type-title-size); }
.desc { margin-left: var(--space-s); padding-left: var(--space-m); border-left: 1px solid var(--hairline); color: var(--ink-2); font-size: var(--type-small-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.head-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-s); flex: none; }
.pile { display: flex; align-items: center; padding-left: 6px; }
.pile > * { width: 24px; height: 24px; margin-left: -6px; border: 2px solid var(--card); font-size: 8px; }
.pile .person { border-radius: var(--radius-pill); }
.pile .mark { border-radius: var(--radius-small); }
.count { color: var(--ink-2); font-weight: 600; font-size: var(--type-small-size); margin-right: var(--space-xs); }
.icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-medium); color: var(--ink-2); }
@media (max-width: 720px) { .desc { display: none; } }

/* ---------- people, AI teammates and their state ---------- */
.mark.xs { width: 14px; height: 14px; border-radius: 4px; font-size: 6.5px; display: inline-grid; vertical-align: -2px; }
.mark.sm { width: 22px; height: 22px; border-radius: var(--radius-small); font-size: 8.5px; }
.tile { position: relative; display: inline-grid; }
.av { width: 36px; height: 36px; display: grid; }
.av .person { width: 36px; height: 36px; }
.av .mark { width: 36px; height: 36px; border-radius: var(--radius-medium); font-size: var(--type-tag-size); }
.tile.sm .mark { width: 22px; height: 22px; border-radius: var(--radius-small); font-size: 8.5px; }
/* Working: a ring in the teammate's own hue turns around its tile. Needs you: yellow. Done: a green check. */
.tile[data-ring="working"]::before { content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2px solid color-mix(in srgb, var(--palette-teammate-cobalt) 18%, transparent); animation: turn 1.4s linear infinite; }
.tile.sm[data-ring]::before { border-radius: 9px; inset: -3px; }
.tile[data-ring="working"]:has([data-hue="cobalt"])::before { border-color: color-mix(in srgb, var(--palette-teammate-cobalt) 22%, transparent); border-top-color: var(--palette-teammate-cobalt); }
.tile[data-ring="working"]:has([data-hue="raspberry"])::before { border-color: color-mix(in srgb, var(--palette-teammate-raspberry) 22%, transparent); border-top-color: var(--palette-teammate-raspberry); }
.tile[data-ring="needs"]::before { content: ""; position: absolute; inset: -4px; border-radius: 13px; border: 2.5px solid var(--palette-spruce-highlight-strong); }
.tile[data-ring="done"]::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: var(--radius-pill); border: 2px solid var(--card); background: var(--palette-spruce-ok); }
.tile[data-ring="done"] .mark { box-shadow: none; }
.tile[data-ring="done"]::before { content: ""; position: absolute; z-index: 1; right: 0; bottom: 1px; width: 4px; height: 7px; border: solid var(--palette-teammate-letters); border-width: 0 1.6px 1.6px 0; rotate: 45deg; }
.ai-tag { margin-left: 6px; padding: 0 4px; border: 1px solid var(--hairline); border-radius: 4px; font-size: var(--type-tag-size); font-weight: 600; line-height: 1.5; color: var(--ink-2); }

/* ---------- the feed ---------- */
.feed { position: relative; flex: 1; overflow: hidden; }
.feed-list { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-l); padding: var(--space-l) var(--space-xl); will-change: transform; }
@media (max-width: 720px) { .feed-list { padding-inline: var(--space-l); } }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-m); align-items: start; }
.msg .body { display: grid; gap: 6px; min-width: 0; }
.msg .who { display: flex; align-items: center; line-height: 1.2; }
.msg .who b { font-weight: 650; }
.msg .who time { margin-left: var(--space-s); color: var(--ink-3); font-size: var(--type-meta-size); }
.msg p { color: var(--ink); }
.mention { display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: var(--radius-small); background: var(--ground); font-weight: 650; }
.mention-you { padding: 0 3px; border-radius: 4px; background: var(--palette-spruce-highlight); font-weight: 650; }
.chip-doc { display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: var(--radius-small); border: 1px solid var(--hairline); background: var(--card); font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.chip-doc .i { width: 13px; height: 13px; color: var(--ink-2); }
.note { color: var(--ink-3); font-size: var(--type-small-size); text-align: center; }
.note b { color: var(--ink-2); font-weight: 650; }
.activity { margin-left: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; color: var(--ink-2); font-size: var(--type-small-size); }
.activity b { color: var(--ink); font-weight: 650; }
.activity .link { display: inline-flex; align-items: center; color: var(--ink); font-weight: 650; }
.activity .link .i { width: 12px; height: 12px; }

/* While an AI teammate works on a short job: its ringed tile, what it is doing, the time and Stop. */
.working-row { margin-left: 48px; display: flex; align-items: center; gap: var(--space-m); padding: var(--space-s) var(--space-l) var(--space-s) var(--space-m); border-radius: var(--radius-large); background: var(--ground); }
.working-text { flex: 1; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.working-text b { color: var(--ink); font-weight: 650; }
.working-row time { color: var(--ink-3); font-size: var(--type-meta-size); white-space: nowrap; }
.working-row .stop { color: var(--ink-2); font-weight: 650; font-size: var(--type-small-size); }

/* The capsule under the header: the job, how many are ready, the step now. */
.capsule-row { display: flex; justify-content: center; padding: var(--space-s) var(--space-l) 0; flex: none; }
.capsule { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px var(--space-m) 4px 5px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--elevation-raised); font-size: var(--type-small-size); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.capsule .mark.xs { width: 20px; height: 20px; border-radius: var(--radius-small); font-size: 8px; }
.capsule b { color: var(--ink); font-weight: 650; }
.capsule-state { overflow: hidden; text-overflow: ellipsis; }
.capsule .i { width: 12px; height: 12px; }

/* The plan: one row per piece, its state on the right. */
.plan, .delivered, .receipt, .choice, .recurring { border: 1px solid var(--hairline); border-radius: var(--radius-large); background: var(--card); }
.plan-head { display: grid; gap: 2px; padding: var(--space-m) var(--space-l) var(--space-xs); }
.plan-head b { font-size: var(--type-title-size); font-weight: 650; }
.plan-head small, .ptext small { color: var(--ink-2); font-size: var(--type-small-size); }
.prow, .drow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--space-m); align-items: center; padding: 6px var(--space-l); }
.drow { grid-template-columns: 30px minmax(0, 1fr); border-top: 1px solid var(--hairline); padding-block: var(--space-s); }
.drow:first-child { border-top: 0; }
.picon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--ground); color: var(--ink-2); }
.delivered .picon { background: none; border: 1px solid var(--hairline); }
.ptext { display: grid; min-width: 0; }
.ptext b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptext small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstate { display: inline-flex; align-items: center; gap: 5px; font-size: var(--type-small-size); font-weight: 600; white-space: nowrap; }
.pstate.next { color: var(--ink-3); padding-right: var(--space-s); }
.pstate.working { padding: 2px var(--space-m) 2px var(--space-s); border-radius: var(--radius-pill); background: var(--ground); color: var(--ink); }
.pstate.working i { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ink-3); animation: dot 1s ease-in-out infinite; }
.pstate.ready { color: var(--palette-spruce-ok); padding-right: var(--space-s); }
.pstate .i { width: 13px; height: 13px; }
.plan-foot { display: flex; justify-content: space-between; margin-top: var(--space-xs); padding: var(--space-s) var(--space-l); border-top: 1px solid var(--hairline); font-size: var(--type-small-size); color: var(--ink-3); }
.plan-foot span:first-child { color: var(--ink-2); font-weight: 650; }
.ready-line { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: var(--space-m); align-items: center; }
.ready-line .mark.sm { width: 36px; height: 36px; border-radius: var(--radius-medium); font-size: var(--type-tag-size); }
.ready-text { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.ready-text b { color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.ready-text .i { color: var(--ink-2); }
.ready-line time { color: var(--ink-3); font-size: var(--type-meta-size); }
.ready-line .open { font-weight: 650; color: var(--ink-2); }
@media (max-width: 720px) { .ready-line time { display: none; } }
.delivered-foot { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-s) var(--space-l); border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: var(--type-small-size); }
.delivered-foot .i { color: var(--palette-spruce-ok); }

/* Backstage, from the room: a receipt while it works. */
.receipt { padding: var(--space-s) var(--space-m); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-left: 48px; }
.receipt-top { display: flex; align-items: center; gap: var(--space-s); }
.receipt-top b { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-top time { margin-left: auto; color: var(--ink-3); font-size: var(--type-meta-size); white-space: nowrap; }
.receipt-top .open { display: inline-flex; align-items: center; font-weight: 650; font-size: var(--type-small-size); white-space: nowrap; }
.receipt-top .open .i { width: 12px; height: 12px; }
.receipt-sub { display: flex; align-items: center; gap: 4px; padding-left: 4px; color: var(--ink-2); font-size: var(--type-small-size); }
.receipt-sub i, .backstage-foot i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ink); margin-right: 4px; }

/* A question with buttons, and the recurring mission. */
.choice { padding: var(--space-m) var(--space-l); display: grid; gap: var(--space-s); }
.choice-q { display: flex; align-items: center; gap: var(--space-m); }
.choice-q mark { background: var(--palette-spruce-highlight); color: var(--ink); font-weight: 650; padding: 0 3px; border-radius: 4px; }
.choice-chips { display: flex; flex-wrap: wrap; gap: var(--space-s); padding-left: 34px; }
.chip-btn, .btn-o { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-m); border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--card); font-weight: 600; font-size: var(--type-small-size); }
.chip-btn.picked { background: var(--action); border-color: var(--action); color: var(--on-action); }
.recurring { padding: var(--space-m) var(--space-l); display: grid; gap: 2px; }
.recurring small { color: var(--ink-3); font-size: var(--type-meta-size); }
.recurring b { font-weight: 400; margin-bottom: 2px; }
.recurring span { color: var(--ink-2); font-size: var(--type-small-size); }
.recurring-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-s); }

/* ---------- typing, and the composer where the reader's words are typed ---------- */
.typing { display: flex; align-items: center; gap: var(--space-s); height: 20px; padding: 0 var(--space-xl); color: var(--ink-3); font-size: var(--type-meta-size); flex: none; opacity: 0; transition: opacity var(--motion-settle) var(--scene-ease-out); }
.typing.is-on { opacity: 1; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--ink-3); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 150ms; }
.dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
.composer { margin: 0 var(--space-xl) var(--space-l); padding: var(--space-s) var(--space-m) 6px; border: 1px solid var(--hairline); border-radius: var(--radius-large); box-shadow: var(--elevation-raised); flex: none; transition: border-color var(--motion-quick) var(--scene-ease-out); }
@media (max-width: 720px) { .composer { margin-inline: var(--space-l); } .typing { padding-inline: var(--space-l); } }
.composer-line { min-height: 22px; display: flex; flex-wrap: wrap; align-items: center; }
.composer-text { display: contents; }
.composer-hint { color: var(--ink-3); }
.composer-text:not(:empty) + .composer-hint { display: none; }
.composer.is-typing .composer-line::after { content: ""; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--action); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.composer-tools { display: flex; align-items: center; gap: var(--space-m); margin-top: 6px; color: var(--ink-2); }
.composer-tools .send { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--ground); color: var(--ink-3); transition: background-color var(--motion-quick) var(--scene-ease-out), color var(--motion-quick) var(--scene-ease-out); }
.composer.is-typing .send { background: var(--action); color: var(--on-action); }

/* ---------- a sheet over the room: adding a teammate ---------- */
.sheet { position: absolute; left: 50%; top: 64px; width: min(330px, calc(100% - 32px)); translate: -50% 0; padding: var(--space-l); display: grid; gap: var(--space-m); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-sheet); box-shadow: var(--elevation-pane); z-index: 2; }
.sheet > b { font-size: var(--type-title-size); font-weight: 650; }
.field { display: grid; gap: 4px; }
.field small { color: var(--ink-2); font-size: var(--type-meta-size); font-weight: 650; }
.field > span { display: flex; align-items: center; gap: var(--space-s); min-height: 36px; padding: 0 var(--space-m); border: 1px solid var(--hairline); border-radius: var(--radius-medium); }
.field .mark { width: 20px; height: 20px; border-radius: var(--radius-small); font-size: 8px; }
.sheet-btn { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-l); border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); font-weight: 650; font-size: var(--type-small-size); }
.scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--palette-spruce-ink) 18%, transparent); z-index: 1; }

/* ---------- backstage, opened beside the room when the scene is wide enough for both, else its own screen ---------- */
.backstage { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--hairline); box-shadow: var(--elevation-pane); z-index: 2; }
@container (min-width: 560px) {
  .scene:not(.is-playing) .camera:has(.backstage), .scene.is-playing .camera:has(.backstage.is-shown) { padding-right: 300px; }
  .scene:not(.is-playing) .camera:has(.backstage) .app-head :is(.desc, .icon), .scene.is-playing .camera:has(.backstage.is-shown) .app-head :is(.desc, .icon) { display: none; }
}
@container (max-width: 559.98px) {
  .backstage { width: 100%; border-left: 0; }
  .scene:not(.is-playing) .backstage { display: none; }
}
.backstage-head { display: flex; align-items: center; gap: var(--space-m); padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--hairline); }
.bicon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--ground); color: var(--ink-2); flex: none; }
.btitle { display: grid; min-width: 0; flex: 1; }
.btitle b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btitle small { color: var(--ink-2); font-size: var(--type-meta-size); }
.backstage .feed-list { gap: var(--space-m); padding-inline: var(--space-l); }
.backstage .msg { grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-s); }
.backstage .av, .backstage .av .mark { width: 30px; height: 30px; }
.backstage .msg p { font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
.backstage-note { display: flex; gap: var(--space-s); margin: 0 var(--space-l); padding: var(--space-s) var(--space-m); border-radius: var(--radius-medium); background: var(--ground); color: var(--ink-2); font-size: var(--type-meta-size); line-height: var(--type-meta-line-height); }
.backstage-note .i { margin-top: 1px; }
.backstage-foot { display: flex; align-items: center; padding: var(--space-s) var(--space-l) var(--space-m); color: var(--ink-2); font-size: var(--type-meta-size); }
.backstage-foot span { display: inline-flex; align-items: center; }

/* ---------- the pointer: an arrow on a laptop, a touch on a phone; it never scales with the camera ---------- */
.cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 18px; height: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--palette-spruce-ink) 40%, transparent)); transition: transform 750ms var(--scene-ease-in-out), opacity var(--motion-settle) var(--scene-ease-out); }
.cursor::before { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 0 82%, 24% 64%, 40% 100%, 54% 94%, 39% 59%, 72% 59%); transition: scale var(--motion-quick) var(--scene-ease-out); transform-origin: 0 0; }
.cursor.is-on { opacity: 1; }
.cursor.is-pressing::before { scale: .85; }
@media (max-width: 720px) {
  .cursor { width: 28px; height: 28px; margin: -14px 0 0 -14px; filter: none; }
  .cursor::before { clip-path: none; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--palette-spruce-ink) 22%, transparent); border: 2px solid var(--card); transform-origin: 50% 50%; }
}
.is-pressed { scale: .95; transition: scale var(--motion-quick) var(--scene-ease-out); }

/* ---------- under the scene: what is happening ---------- */
.scene-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: 36px; }
.scene-caption { font-size: var(--type-small-size); line-height: var(--type-small-line-height); color: var(--ink-2); transition: opacity var(--motion-settle) var(--scene-ease-out), translate var(--motion-settle) var(--scene-ease-out); }
.scene-caption.is-leaving { opacity: 0; translate: 0 4px; }

/* ---------- at rest every step is in place and every passing state gone; while playing, steps arrive when shown ---------- */
.scene:not(.is-playing) [data-transient] { display: none !important; }
.scene.is-playing [data-id]:not(.is-shown) { display: none !important; }
.scene.is-playing .is-entering { animation: scene-in 340ms var(--scene-ease-out) both; }
.scene.is-playing .pstate.is-entering, .scene.is-playing .mark.is-entering, .scene.is-playing .count.is-entering, .scene.is-playing .chip-btn.is-entering { animation-name: scene-pop; animation-duration: 220ms; }
.scene.is-playing .capsule-state.is-entering { animation: scene-fade 220ms var(--scene-ease-out) both; }
.scene.is-playing .capsule.is-entering { animation: scene-drop 300ms var(--scene-ease-out) both; }
.scene.is-playing .scrim.is-entering { animation: scene-fade 220ms var(--scene-ease-out) both; }
.scene.is-playing .sheet.is-entering { animation: scene-sheet 260ms var(--scene-ease-out) both; }
.scene.is-playing .backstage.is-entering { animation: scene-drawer 520ms var(--scene-ease-drawer) both; }
@keyframes scene-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes scene-pop { from { opacity: 0; scale: .9; } }
@keyframes scene-fade { from { opacity: 0; } }
@keyframes scene-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes scene-sheet { from { opacity: 0; scale: .96; } }
@keyframes scene-drawer { from { transform: translateX(100%); } }

/* The headline's word that changes. */
.swap-word { display: inline-block; color: var(--action); transition: opacity var(--motion-settle) var(--scene-ease-out), translate var(--motion-settle) var(--scene-ease-out); }
.swap-word.is-leaving { opacity: 0; translate: 0 -.12em; }

@media (prefers-reduced-motion: reduce) {
  .dots i, .pstate.working i, .tile[data-ring="working"]::before { animation: none; }
  .camera, .cursor, .swap-word, .scene-caption { transition: none; }
}