/* 5. Working together (scenes/together.html, together.js). Sarah's side, the work thread between Scribbles and
   Nugget, and Mike's side. Wide: one window in three panes, laid out as a timeline (grid rows), so a note
   sits level with the thread message that caused it. Below 960 px: one column in the order things
   happen, Sarah's things set a little to the left and Mike's a little to the right. Everything is scoped
   under .tg. together.js adds .is-live, and only then are the steps hidden until their turn (.is-on);
   without JS or with reduced motion the conversation shows finished. White, ink, lime only on the
   small check; the teammates are their avatar stills, people are photo tiles. */

.tg {
  --tg-amber: #e59a0b;
  --tg-green: #2bb24c;
  --tg-tint: #f7f7f5;
  --tg-mono: "Geist Mono", ui-monospace, monospace;
}
.tg [hidden] { display: none !important; }
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tg-wrap { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 130px var(--gutter) 140px; }
.tg-copy { gap: 26px; max-width: 1100px; }
.tg-lede { max-width: 640px; }
.tg-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1200px; }

/* People are initials tiles (the page's tile); teammates are the cloud mark in their colour. */
.tg-tile { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #d6d6d2; color: var(--ink); font: 600 12px/1 var(--tg-mono); letter-spacing: 0.02em; }
.tg-tile-lg { width: 44px; height: 44px; border-radius: 11.6px; font-size: 15px; }
.tg-tile-sm { width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.tg-tile-xs { width: 24px; height: 24px; border-radius: 6.4px; font-size: 8.5px; }
/* A person's photo fills the tile; their two letters sit underneath. With JS the photo waits until it has
   loaded (together.js), so a missing one never shows a broken image. The founder stays a YOU tile. */
.tg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tg.tg-js .tg-tile img { opacity: 0; transition: opacity 0.3s ease; }
.tg.tg-js .tg-tile img.is-in { opacity: 1; }
.tg-tile:has(img.is-in), .tg:not(.tg-js) .tg-tile:has(img) { box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.1); }
/* Teammates are their avatar stills (white eyes and a smile), kept whole. */
.tg-mk { display: inline-block; flex-shrink: 0; width: 38px; height: 22px; object-fit: contain; }

/* The window: three panes behind a timeline grid. Row 1 says who is who; rows 2 to 4 are the steps. */
.tg-scene { position: relative; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto 6px; row-gap: 18px; border-radius: 24px; background: #fff; box-shadow: var(--card-shadow); overflow: hidden; text-align: left; }
.tg-lane { grid-row: 1 / -1; }
.tg-lane-a { grid-column: 1; }
.tg-lane-t { grid-column: 2; background: var(--tg-tint); box-shadow: inset 1px 0 var(--hair), inset -1px 0 var(--hair); }
.tg-lane-b { grid-column: 3; }

.tg-who { grid-row: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px 20px 16px; border-bottom: 1px solid var(--hair); }
.tg-who-a { grid-column: 1; }
.tg-who-t { grid-column: 2; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
.tg-who-b { grid-column: 3; }
.tg-who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-who-text b, .tg-who-pair { font-weight: 700; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; }
.tg-who-text span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.tg-who-text .tg-mk { width: 30px; height: 18px; }
.tg-nb { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tg-who-t .mono-small { font-weight: 600; font-size: 11px; line-height: 14px; color: var(--graphite); }
.tg-who-pair { display: flex; align-items: center; gap: 6px; }
.tg-who-pair .tg-mk { width: 36px; height: 21px; }
.tg-who-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tg-seen, .tg-watching { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 16px; color: var(--graphite); }
.tg-watching { font-weight: 600; color: var(--ink); }

/* Where each step sits on the timeline. */
.tg-scene > .tg-item { min-width: 0; margin: 0 18px; align-self: start; }
.tg-scene > [data-col="a"] { grid-column: 1; }
.tg-scene > [data-col="t"] { grid-column: 2; }
.tg-scene > [data-col="b"] { grid-column: 3; }
.tg-scene > [data-row="2"] { grid-row: 2; }
.tg-scene > [data-row="3"] { grid-row: 3; }
.tg-scene > [data-row="4"] { grid-row: 4; }

/* Labels: private (a lock) and shared (an eye). The shared label shows on phones only; on wide screens the
   thread pane's own header says it. */
.tg-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.tg-label .mono-small { font-weight: 600; font-size: 11px; line-height: 14px; color: var(--graphite); }
.tg-lock { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #f0f0ee; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--ink); }
.tg-phone { display: none; }

/* Sarah's private chat with Scribbles. */
.tg-private { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ring); }

/* Messages. */
.tg-thread { display: flex; flex-direction: column; gap: 12px; }
.tg-msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; }
.tg-msg > .tg-mk { margin-top: -1px; }
.tg-msg > .tg-tile { margin-top: -5px; justify-self: center; }
.tg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.tg-name { font-weight: 700; font-size: 13.5px; line-height: 18px; }
.tg-name small { margin-left: 3px; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.tg-say { position: relative; max-width: 100%; }
.tg-bubble { padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 16px -12px rgba(0, 0, 0, 0.3); font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
.tg-private .tg-bubble { background: #f2f2f0; box-shadow: none; }
.tg-msg.tg-me { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.tg-me .tg-bubble { max-width: 86%; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; }
.tg-posts { display: flex; gap: 6px; margin: 9px 0 2px; }
.tg-posts span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: #f2f2f0; box-shadow: inset 0 0 0 1px var(--ring); font-weight: 800; font-size: 13px; letter-spacing: -0.02em; }
.tg-posts span:nth-child(2) { background: var(--ink); color: #fff; box-shadow: none; }

/* Typing: three dots where the words will be (the bubble keeps its room, so nothing jumps). */
.tg-dots { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 4px; padding: 14px 14px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.tg-private .tg-dots { background: #f2f2f0; box-shadow: none; }
.tg-dots i { width: 6px; height: 6px; border-radius: 50%; background: #a3a39f; animation: tg-dot 1s ease-in-out infinite; }
.tg-dots i:nth-child(2) { animation-delay: 0.15s; }
.tg-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tg-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Nugget at work: checking, then checked. */
.tg-tool { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; color: var(--graphite); }
.tg-spin { display: none; width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 1.6px solid #d6d6d2; border-top-color: var(--ink); animation: tg-spin 0.8s linear infinite; }
.tg-ok { flex-shrink: 0; }
.tg-tool-now { display: none; }
@keyframes tg-spin { to { transform: rotate(360deg); } }

/* "Mike is told": the receipt under a thread message. */
.tg-told { display: flex; align-items: center; gap: 6px; margin: -3px 0 0 48px; font-weight: 500; font-size: 12.5px; line-height: 16px; color: var(--graphite); }

/* Notes and the approval. */
.tg-note, .tg-ask { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 18px 36px -22px rgba(0, 0, 0, 0.35); }
.tg-note::after, .tg-ask::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--ink); opacity: 0; pointer-events: none; }
.tg-note-head { display: flex; align-items: center; gap: 8px; }
.tg-note-head .mono-small { font-weight: 600; font-size: 11px; line-height: 14px; color: var(--graphite); }
.tg-when { margin-left: auto; font-family: var(--tg-mono); font-weight: 500; font-size: 11px; line-height: 14px; color: var(--muted); }
.tg-note-text { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 20px; }
.tg-note-text > .tg-mk { width: 32px; height: 19px; margin-top: 0.5px; }
.tg-note-text > .tg-tile { margin-top: -2px; }
.tg-note-text b { font-weight: 700; }
.tg-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-acts button { min-height: 34px; padding: 0 15px; }
.tg-acts .btn-soft[aria-pressed="true"] { background: var(--ink); color: #fff; }

.tg-ask { gap: 10px; padding: 14px 16px 13px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 22px 44px -24px rgba(0, 0, 0, 0.4); }
.tg-ask:focus { outline: none; }
.tg-dot { width: 9px; height: 9px; flex-shrink: 0; margin: 0 2px; border-radius: 50%; background: var(--tg-amber); box-shadow: 0 0 0 4px rgba(229, 154, 11, 0.16); }
.tg-ask .tg-ask-label { color: #a46b00; }
.tg-ask-text { font-weight: 700; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; }
.tg-ask-who, .tg-ask-told { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }
.tg-ask-who .tg-mk { width: 30px; height: 18px; }
.tg-ask-told { flex-wrap: nowrap; color: var(--graphite); }
.tg-ask-told-text { flex: 1; min-width: 0; margin-left: 2px; }
.tg-ask-acts button { min-height: 38px; padding: 0 18px; font-size: 14px; }
.tg-ask-foot { padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 17px; color: var(--muted); }
.tg-ask.is-yes .tg-dot { background: var(--tg-green); box-shadow: 0 0 0 4px rgba(43, 178, 76, 0.16); }
.tg-ask.is-yes .tg-ask-label { color: #1c7a34; }
.tg-ask.is-no .tg-dot { background: #a3a39f; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); }
.tg-ask.is-no .tg-ask-label { color: var(--muted); }

/* What is happening now, under the window. It sticks to the bottom of the screen while the scene is
   longer than the screen (a phone), so the story stays readable as you scroll. */
.tg-bar { position: sticky; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 14px; width: min(100%, 780px); min-height: 52px; margin-top: 22px; padding: 8px 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 16px 34px -18px rgba(0, 0, 0, 0.35); text-align: left; }
.tg-bar:focus { outline: none; }
.tg-bar-step { flex-shrink: 0; font-weight: 600; font-size: 11px; color: var(--ink); white-space: nowrap; }
.tg-bar-text { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; color: var(--graphite); }
.tg-replay { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 38px; margin-right: -10px; padding: 0 16px; }

/* The rules. */
.tg-rules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; width: 100%; max-width: 1200px; padding-top: 0; text-align: left; }
.tg-rules li { flex-direction: column; gap: 14px; }
.tg-rules b { font-size: 17px; line-height: 22px; }
.tg-rules p { font-size: 15px; line-height: 22px; }

/* Live (together.js): each step waits for its turn, then arrives. Notes slide in from the thread's side. */
.tg.is-live .tg-r { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 1.2, 0.4, 1); }
.tg.is-live .tg-r:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(8px); }
.tg.is-live .tg-to-b.tg-r:not(.is-on) { transform: translateX(-18px); }
.tg.is-live .tg-to-a.tg-r:not(.is-on) { transform: translateX(18px); }
.tg.is-live .tg-note.is-on::after, .tg.is-live .tg-ask.is-on::after { animation: tg-ring 1.3s ease 0.3s; }
@keyframes tg-ring { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
.tg.is-live .tg-bubble { transition: opacity 0.35s ease; }
.tg.is-live .tg-msg.is-typing .tg-bubble, .tg.is-live .tg-msg.is-working .tg-bubble { opacity: 0; visibility: hidden; }
.tg.is-live .tg-msg.is-typing .tg-dots { display: flex; }
.tg.is-live .tg-msg.is-working .tg-spin { display: block; }
.tg.is-live .tg-msg.is-working .tg-ok, .tg.is-live .tg-msg.is-working .tg-tool-done { display: none; }
.tg.is-live .tg-msg.is-working .tg-tool-now { display: inline; }
.tg.is-live .tg-ask.is-on:not(.is-yes):not(.is-no) .tg-dot { animation: tg-wait 1.6s ease-in-out infinite; }
@keyframes tg-wait { 50% { box-shadow: 0 0 0 8px rgba(229, 154, 11, 0.08); } }
/* Replay: everything back in place at once. */
.tg.is-reset .tg-r, .tg.is-reset .tg-bubble { transition: none !important; }
.tg.is-reset .tg-note::after, .tg.is-reset .tg-ask::after { animation: none !important; }

@media (max-width: 1179.98px) {
  .tg-wrap { gap: 44px; padding: var(--section) var(--gutter); }
  .tg-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; max-width: 900px; }
  .tg-scene > .tg-item { margin: 0 14px; }
  .tg-who { padding: 16px 14px 14px; gap: 10px; }
}

/* Below 960 px: one column, in the order things happen. The two people side by side on top; then each
   step with its own label; Sarah's things set left, Mike's set right, the thread full width. */
@media (max-width: 959.98px) {
  .tg-scene { max-width: 560px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; gap: 12px 10px; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .tg-lane, .tg-who-t { display: none; }
  .tg-who { padding: 10px 12px; border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ring); }
  .tg-who-a { grid-column: 1; grid-row: 1; }
  .tg-who-b { grid-column: 2; grid-row: 1; }
  .tg-who-text b { font-size: 16px; line-height: 20px; }
  .tg-who-text span { font-size: 12.5px; line-height: 17px; }
  .tg-scene > .tg-item { grid-column: 1 / -1; grid-row: auto; margin: 0; align-self: auto; }
  .tg-phone { display: flex; }
  .tg-thread { padding: 12px 14px 14px; border-radius: 18px; background: var(--tg-tint); box-shadow: inset 0 0 0 1px var(--hair); }
  .tg-scene > .tg-private, .tg-scene > .tg-to-a { margin-right: 24px; }
  .tg-scene > .tg-to-b { margin-left: 24px; }
  .tg.is-live .tg-to-a.tg-r:not(.is-on), .tg.is-live .tg-to-b.tg-r:not(.is-on) { transform: translateY(8px); }
  .tg-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .tg-bar { width: min(100%, 560px); border-radius: 18px; padding: 10px 14px; }
}

@media (max-width: 640px) {
  .tg-wrap { gap: 40px; }
  .tg-copy { gap: 22px; }
  .tg .h2 { font-size: min(52px, calc((100vw - 32px) / 7.4)); }
  .tg-scene { gap: 10px 8px; }
  .tg-who { gap: 8px; padding: 9px 10px; }
  .tg-scene > .tg-private, .tg-scene > .tg-to-a { margin-right: 16px; }
  .tg-scene > .tg-to-b { margin-left: 16px; }
  .tg-private, .tg-thread { padding: 11px 12px 13px; }
  .tg-msg { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
  .tg-msg > .tg-mk { width: 32px; height: 19px; margin-top: 0; }
  .tg-msg > .tg-tile-sm { width: 28px; height: 28px; border-radius: 7.4px; font-size: 10px; }
  .tg-tile-lg { width: 40px; height: 40px; border-radius: 10.5px; font-size: 13.5px; }
  .tg-told { margin-left: 41px; }
  .tg-bubble { font-size: 14.5px; line-height: 20px; padding: 8px 12px; }
  .tg-note, .tg-ask { padding: 12px 13px 13px; }
  .tg-ask-text { font-size: 16px; line-height: 21px; }
  .tg-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; bottom: 10px; }
  .tg-bar-step { grid-column: 1; grid-row: 1; }
  .tg-bar-text { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 19px; }
  .tg-replay { grid-column: 2; grid-row: 1; min-height: 34px; margin: -2px -4px -2px 0; padding: 0 13px; }
  .tg-rules { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tg-rules li { flex-direction: row; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-dots i, .tg-spin { animation: none; }
  .tg.is-live .tg-r, .tg.is-live .tg-bubble { transition: none; }
  .tg.is-live .tg-note.is-on::after, .tg.is-live .tg-ask.is-on::after, .tg.is-live .tg-ask.is-on .tg-dot { animation: none; }
}