/*
 * Sections of the combined landing page (index.html).
 *
 * The page is "buttoned up" only: tokens come from the html[data-style="suit"]
 * block in themes.css. The four product figures were first built as separate
 * first-screen studies in heroes/ (today-with, terminal-first, plain-sentence,
 * page-is-product); their markup and styles are copied in here, re-scoped under
 * .tw, .tf, .ps and .pp, so this page loads nothing from heroes/ at runtime.
 */

html[data-style="suit"] { --accent-hover: #2a1a11; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

/* ---------- top bar ---------- */
.site-head .nav-cta { transition: border-color .15s ease; }
.brand:focus-visible,
.nav-cta:focus-visible,
.site-foot a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

/* ---------- one button, one email row ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: var(--r-btn);
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 15px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn[disabled]:hover { background: var(--accent); border-color: var(--accent); }

.wl { width: min(440px, 100%); margin: 28px 0 0; }
.wl-row { display: flex; }
.wl-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: var(--r-btn) 0 0 var(--r-btn);
  background: var(--field);
  color: var(--ink);
  font: 400 15px/1 var(--font);
  transition: border-color .15s ease;
}
.wl-row input::placeholder { color: var(--muted); opacity: .75; }
.wl-row input:hover { border-color: var(--muted); }
.wl-row input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -1px; }
.wl-row input[disabled] { background: var(--tint); }
.wl-row input[disabled]:hover { border-color: var(--line-strong); }
.wl-row .btn { border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.wl-note { margin: 10px 0 0; font: 400 11.5px/1.6 var(--mono); color: var(--muted); }
.wl-error { margin: 10px 0 0; font: 500 13px/1.45 var(--font); color: var(--err); }
@media (max-width: 760px) {
  .wl-row input { font-size: 16px; }
}
@media (max-width: 460px) {
  .wl-row { flex-direction: column; gap: 8px; }
  .wl-row input { flex: none; border-right: 1px solid var(--line-strong); border-radius: var(--r-btn); }
  .wl-row .btn { border-radius: var(--r-btn); }
}

/* ---------- hero ---------- */
.top { padding-top: clamp(32px, 5vw, 68px); text-align: left; }
/* Every break in the headline is set by hand: two lines, or four on a phone. */
.top-h {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--dw);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: var(--dls);
  color: var(--ink);
  white-space: nowrap;
}
.top-h .top-h-b { display: block; color: color-mix(in srgb, var(--ink) 48%, var(--bg, #fff)); }
.top-h .br-m { display: none; }
.top-sub {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 650px;
  font: 400 clamp(17px, 1.5vw, 19px)/1.5 var(--font);
  color: var(--muted);
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .top-h { font-size: clamp(31px, 9.4vw, 46px); }
  .top-h .br-m { display: inline; }
}

/* ---------- the chain headline, now the team section's heading ---------- */
/* The biggest heading below the hero. Three hand-set lines, or five on a
   phone; the line never wraps on its own, so a pill is never split. */
.chain-h {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--dw);
  font-size: clamp(30px, 4.3vw, 54px);
  line-height: 1.24;
  letter-spacing: var(--dls);
  color: var(--ink);
  white-space: nowrap;
}
.chain-h .punch { display: block; }
.chain-h .br-m { display: none; }
.chain-h + .sec-sub { max-width: 600px; margin-top: 18px; }
@media (max-width: 600px) {
  .chain-h { font-size: clamp(28px, 8.4vw, 40px); }
  .chain-h .br-m { display: inline; }
  .chain-h .br-d { display: none; }
}

/* ---------- section rhythm ---------- */
.sec { padding-top: clamp(76px, 10vw, 136px); scroll-margin-top: 0; }
.sec-h {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--dw);
  font-size: clamp(29px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: var(--dls);
  color: var(--ink);
}
/* Headings only break between these phrases, never inside one. */
.sec-h span { white-space: nowrap; }
.sec-h .sec-h-b { display: block; white-space: normal; color: color-mix(in srgb, var(--ink) 48%, var(--bg, #fff)); }
.sec-sub {
  margin: 14px 0 0;
  max-width: 560px;
  font: 400 clamp(17px, 1.4vw, 18px)/1.5 var(--font);
  color: var(--muted);
}
.sec-fig { margin: clamp(30px, 4vw, 48px) 0 0; }
.top .sec-fig { margin-top: clamp(40px, 5vw, 64px); }
/* The footer's "The terminal" link lands on the hero's figure. */
#terminal { scroll-margin-top: 24px; }
.fig-cap { margin: 18px 0 0; font: 400 11.5px/1.6 var(--mono); color: var(--muted); }
.fig-cap b { margin-right: 10px; font-weight: 400; color: var(--ink); }

/* ---------- three points ---------- */
.sec .points { padding: 0; }
.point p { line-height: 1.5; text-wrap: pretty; }

/* ---------- the tour ---------- */
/* Still sized from the window height so the stage and its caption fit on one
   screen, but it keeps the left edge every other figure uses. */
.sec .tour {
  width: min(100%, max(320px, calc((100vh - 160px) * 1.6)));
  width: min(100%, max(320px, calc((100svh - 160px) * 1.6)));
  margin: clamp(30px, 4vw, 48px) 0 0;
}
html[data-style="suit"] .caption { margin-top: 22px; }
html[data-style="suit"] .label { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; }
html[data-style="suit"] .blurb { font-size: 16px; }
html[data-style="suit"] .label-box { min-height: 4.4em; }
html[data-style="suit"] .dot,
html[data-style="suit"] .pause { transition: border-color .15s ease, background-color .15s ease; }
html[data-style="suit"] .dot[aria-current="true"] { transform: none; }
html[data-style="suit"] .dot:hover { border-color: var(--ink); }
html[data-style="suit"] .pause:hover { border-color: var(--ink); }
html[data-style="suit"] .label.pop,
html[data-style="suit"] .blurb.pop { animation: sec-fade .3s ease both; }
@keyframes sec-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 720px) {
  html[data-style="suit"] .label-box { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="suit"] .label.pop,
  html[data-style="suit"] .blurb.pop { animation: none; }
}

/* ---------- why duzzin ---------- */
.sec.thesis { padding-bottom: 0; }

/* ---------- the signup card, shown under the join window once an email is in ---------- */
.signup { margin-top: 28px; padding: 0; scroll-margin-top: clamp(88px, 20vh, 200px); }
html[data-style="suit"] .card { padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); }
html[data-style="suit"] .card h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
html[data-style="suit"] .card .lede { font-size: 16px; line-height: 1.5; }
html[data-style="suit"] .q h3 { font-size: clamp(20px, 2.2vw, 24px); }
html[data-style="suit"] .q-count { font-weight: 500; font-size: 11px; }
html[data-style="suit"] .cta { transition: background-color .15s ease, border-color .15s ease; }
html[data-style="suit"] .cta:hover,
html[data-style="suit"] .cta:active {
  transform: none;
  box-shadow: none;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
html[data-style="suit"] .q-nav .cta { height: 44px; margin-top: 0; padding: 0 22px; font: 500 15px/1 var(--font); }
html[data-style="suit"] .chip span { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
html[data-style="suit"] .skip { transition: opacity .15s ease; }
html[data-style="suit"] .done { padding: 0; text-align: left; }
html[data-style="suit"] .done .big { font-size: 40px; }
html[data-style="suit"] .done h3 { margin-top: 12px; font-size: clamp(26px, 3vw, 34px); }
html[data-style="suit"] .done p { margin-left: 0; font-size: 16px; color: var(--muted); }

/* ---------- footer ---------- */
.site-foot {
  margin-top: clamp(76px, 10vw, 136px);
  padding: 44px 0 36px;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
}
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(40px, 7vw, 96px); row-gap: 32px; }
.foot-brand p { margin: 12px 0 0; max-width: 30ch; line-height: 1.5; color: var(--muted); }
.foot-col { min-width: 132px; }
.foot-h { margin: 6px 0 12px; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li + li { margin-top: 8px; }
.foot-col a { color: var(--ink); text-decoration: none; transition: color .15s ease; }
.foot-col a:hover { color: var(--accent-text); }
.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 400 11.5px/1.6 var(--mono);
  color: var(--muted);
}
@media (max-width: 640px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col { min-width: 0; }
}

/* =====================================================================
   fig. 3: today / with (from heroes/today-with)
   ===================================================================== */
/* "Today / With Duzzin": one decision in four tools, then in one thread. */

.tw {
  text-align: left;
  color: var(--ink);
  font-family: var(--font);
}
.tw p,
.tw ul { margin: 0; padding: 0; }
.tw ul { list-style: none; }
.tw i { font-style: normal; }

/* ---------- the split ---------- */
.tw .tw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(58, 36, 24, .10), 0 8px 20px rgba(58, 36, 24, .06);
  overflow: hidden;
}
.tw .tw-half { display: flex; flex-direction: column; min-width: 0; padding: 0 26px 30px; }
.tw .tw-today { background: var(--tint); border-right: 1px solid var(--line-strong); }
.tw .tw-with { background: var(--paper); }

/* mono labels that sit either side of the centre hairline */
.tw .tw-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  height: 40px;
  padding-top: 14px;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tw .tw-label b { font-weight: 600; color: var(--ink); }
.tw .tw-today .tw-label { flex-direction: row-reverse; margin-right: -10px; }
.tw .tw-with .tw-label { margin-left: -10px; }

.tw .tw-kind {
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.tw .tw-fade { color: var(--muted); }
.tw .tw-code { font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em; }
.tw time { margin-left: 4px; font: 400 11px/1 var(--mono); color: var(--muted); }

/* ---------- left: four tools ---------- */
.tw .tw-scatter { position: relative; flex: 1 1 auto; min-height: 396px; margin-top: 10px; }
.tw .tw-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tw .tw-wires path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.tw .tw-tile {
  position: absolute;
  width: 50%;
  max-width: 258px;
  padding: 0 12px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(58, 36, 24, .06);
  font-size: 12.5px;
  line-height: 1.45;
}
.tw .tw-tile header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0 -12px 8px;
  padding: 6px 12px 5px;
  border-bottom: 1px solid var(--line);
}
.tw .tw-meta {
  overflow: hidden;
  font: 400 10.5px/1.5 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tw .tw-chat { left: 0;    top: 0;       transform: rotate(-2deg);   z-index: 2; }
.tw .tw-ticket { right: 0;   top: 34px;    transform: rotate(1.6deg);  z-index: 1; width: 52%; }
.tw .tw-pr { left: 1%;   bottom: 0;    transform: rotate(1.3deg);  z-index: 1; }
.tw .tw-doc { right: 0;  bottom: 30px; transform: rotate(-2.6deg); z-index: 2; width: 47%; }

.tw .tw-who { font-weight: 600; font-size: 12px; }
.tw .tw-who + .tw-line { margin-bottom: 6px; padding-left: 13px; }
.tw .tw-who + .tw-line:last-child { margin-bottom: 0; }
.tw .tw-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.tw .tw-name { font-weight: 600; font-size: 13px; }
.tw .tw-name.tw-code { font-weight: 500; }
.tw .tw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 5px 0 7px; font-size: 12px; }
.tw .tw-status {
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font: 500 10.5px/1.5 var(--mono);
  color: var(--ink);
}
.tw .tw-quiet { color: var(--muted); }
.tw mark { padding: 1px 3px; background: var(--s-hl, #fdeeb0); color: var(--ink); font-weight: 600; }
.tw .tw-comment {
  margin-top: 8px;
  padding-left: 9px;
  border-left: 2px solid var(--line-strong);
  font-size: 12px;
  color: var(--muted);
}
.tw .tw-comment b { font-weight: 600; color: var(--ink); }

.tw .tw-paste {
  position: absolute;
  z-index: 3;
  padding: 1px 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  background: var(--tint);
  font: 400 10px/1.6 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.tw .tw-paste-a { left: 3%;  top: 49%; transform: rotate(-3deg); }
.tw .tw-paste-b { right: 1%; top: 52%; transform: rotate(2deg); }
.tw .tw-paste-c { left: 36%; top: 43%; transform: rotate(-1deg); }

/* ---------- right: one thread ---------- */
.tw .tw-thread { margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
.tw .tw-crumb {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font: 400 11.5px/1.5 var(--mono);
  color: var(--muted);
}
.tw .tw-crumb span:first-child { color: var(--ink); font-weight: 500; }
/* The thread's messages are fig. 1's (.tf-msg, .tf-av, .tf-msg-meta): see
   "one hand" at the end of this file. */
.tw .tw-objs { margin-top: 8px; border-top: 1px solid var(--line); }
.tw .tw-objs li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tw .tw-objs li:last-child { border-bottom: 0; padding-bottom: 0; }
.tw .tw-obj { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tw .tw-objs .tw-fade { font-size: 12px; white-space: nowrap; }

.tw .tw-decision {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  margin-top: 12px;
  padding: 10px 14px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  transition: background-color .4s ease, border-color .4s ease;
}
.tw .tw-what { font-weight: 600; font-size: 14px; }
.tw .tw-state {
  grid-column: 2;
  display: flex;
  align-items: center;
  min-height: 22px;
  margin-top: 7px;
  font: 400 11px/1.6 var(--mono);
  color: var(--muted);
}
.tw .tw-decision[data-state="confirmed"] { border-color: var(--ok); background: var(--ok-soft); }
.tw .tw-decision[data-state="confirmed"] .tw-proposed,
.tw .tw-decision[data-state="proposed"] .tw-confirmed { display: none; }
.tw .tw-decision[data-state="proposed"] { border-style: dashed; }

/* ---------- stacked: today on top, no tilts ---------- */
@media (max-width: 980px) {
  .tw .tw-split { grid-template-columns: minmax(0, 1fr); }
  .tw .tw-half { padding: 0 20px 22px; }
  .tw .tw-today { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .tw .tw-today .tw-label { flex-direction: row; margin-right: 0; }
  .tw .tw-with .tw-label { margin-left: 0; }
  .tw .tw-tile,
.tw .tw-paste { transform: none; }
}

/* phones: the four tools become a plain column joined by pasted links */
@media (max-width: 600px) {
  .tw .tw-half { padding: 0 14px 18px; }
  .tw .tw-scatter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    background: linear-gradient(var(--line-strong) 50%, transparent 0) 22px 0 / 1px 8px repeat-y;
  }
  .tw .tw-wires { display: none; }
  .tw .tw-tile { position: static; width: auto; max-width: none; }
  .tw .tw-ticket,
.tw .tw-doc { width: auto; }
  .tw .tw-paste { position: static; align-self: flex-start; margin: 7px 0 7px 38px; }
  .tw .tw-objs li { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 8px; }
  .tw .tw-decision { grid-template-columns: minmax(0, 1fr); }
  .tw .tw-state { grid-column: 1; }
}
@media (max-width: 440px) {
  .tw .tw-label span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tw .tw-decision { transition: none; }
}

/* =====================================================================
   fig. 1: session to record (from heroes/terminal-first)
   ===================================================================== */
/* Terminal First: a session in the terminal becomes a record in the channel. */

.tf {
  --tf-term: var(--s-term, #1f1a17);
  --tf-term-ink: #ebe3da;
  --tf-term-dim: #9a8e84;
  --tf-term-line: #37302b;
  text-align: left;
}

.tf .tf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- figure ---------- */
.tf .tf-fig {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(58, 36, 24, .10), 0 8px 20px rgba(58, 36, 24, .06);
  overflow: hidden;
}
.tf .tf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 34px;
  padding: 0 6px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.tf .tf-cap {
  font: 400 11px/1 var(--mono);
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}
.tf .tf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 400 11px/1 var(--mono);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tf .tf-toggle:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
}
.tf .tf-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.tf .tf-toggle svg { width: 9px; height: 9px; fill: currentColor; }
.tf .tf-toggle .tf-ico-play { display: none; }
.tf.tf-paused .tf-toggle .tf-ico-play { display: block; }
.tf.tf-paused .tf-toggle .tf-ico-pause { display: none; }
/* Nothing to pause until the script is running, or when motion is reduced. */
.tf:not(.tf-live) .tf-toggle { display: none; }

.tf .tf-panes {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

/* ---------- terminal ---------- */
.tf .tf-term {
  background: var(--tf-term);
  color: var(--tf-term-ink);
  font-family: var(--mono);
}
.tf .tf-term-bar,
.tf .tf-chan-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 38px;
  padding: 0 18px;
  font: 400 11px/1 var(--mono);
}
.tf .tf-term-bar {
  border-bottom: 1px solid var(--tf-term-line);
  color: var(--tf-term-dim);
}
.tf .tf-term-tab { color: var(--tf-term-ink); }
.tf .tf-term-path { white-space: nowrap; }
.tf .tf-term-path i { font-style: normal; color: var(--s-mint); margin-left: 6px; }

.tf .tf-term-body {
  padding: 18px 18px 22px;
  font-size: 12.5px;
  line-height: 1.65;
}
.tf .tf-l { display: flex; min-width: 0; }
.tf .tf-gap { height: .85em; }
.tf .tf-chev { flex: 0 0 auto; width: 2ch; color: var(--s-pink); }
.tf .tf-ptext { min-width: 0; overflow-wrap: anywhere; }
.tf .tf-rest { visibility: hidden; }

.tf .tf-caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: -0.12em;
}
.tf .tf-caret::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: .58em;
  height: 100%;
  background: var(--tf-term-ink);
  animation: tf-blink 1.05s steps(1, end) infinite;
}
@keyframes tf-blink { 50% { opacity: 0; } }
.tf .tf-caret.tf-off { display: none; }
.tf .tf-idle { min-height: 1.65em; }

.tf .tf-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: .62em calc(2ch - 6px) 0 0;
  border-radius: 50%;
  background: var(--s-mint);
}
.tf .tf-verb { flex: 0 0 7ch; color: var(--tf-term-ink); }
.tf .tf-arg { min-width: 0; color: var(--tf-term-dim); overflow-wrap: anywhere; }
.tf .tf-arg i { font-style: normal; opacity: .75; margin-left: 1ch; }
.tf .tf-arg b { font-weight: 400; color: var(--s-mint); margin-left: 1ch; }
.tf .tf-say { display: block; padding-left: 2ch; max-width: 66ch; color: var(--tf-term-ink); }
.tf .tf-posted { color: var(--s-mint); }
.tf .tf-arrow { flex: 0 0 2ch; }

/* ---------- channel ---------- */
.tf .tf-chan {
  border-left: 1px solid var(--line);
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font);
}
.tf .tf-chan-bar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
}
.tf .tf-chan-name { font: 600 13px/1 var(--font); color: var(--ink); }
.tf .tf-chan-name i { font-style: normal; font-weight: 400; color: var(--muted); }

.tf .tf-chan-body { padding: 18px 18px 22px; }
.tf .tf-msg {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
}
.tf .tf-msg + .tf-msg { margin-top: 16px; }
.tf .tf-av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font: 600 12px/1 var(--font);
  color: var(--ink);
}
.tf .tf-av-person { background: var(--s-pink); }
.tf .tf-av-agent { background: var(--s-mint); }
.tf .tf-av svg { width: 14px; height: 14px; }
.tf .tf-msg-meta { margin: 0; font: 400 11px/1.3 var(--mono); color: var(--muted); }
.tf .tf-msg-meta b { font: 600 13px/1.3 var(--font); color: var(--ink); margin-right: 4px; }
.tf .tf-msg-text { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }

.tf .tf-card {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
}
.tf .tf-card-head,
.tf .tf-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 12px;
}
.tf .tf-card-title {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.tf .tf-card-title i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--muted);
  margin-left: 6px;
}
.tf .tf-status { display: inline-flex; flex: 0 0 auto; }
.tf .tf-status-rec { display: none; font: 400 11px/1 var(--mono); color: var(--muted); }

.tf .tf-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font: 500 11.5px/1 var(--font);
  color: var(--ink);
  white-space: nowrap;
}
.tf .tf-tag-agent { background: var(--s-mint-soft); box-shadow: inset 0 0 0 1px var(--s-mint); }
.tf .tf-tag-ok { background: var(--s-pink-soft); box-shadow: inset 0 0 0 1px var(--s-pink); }
.tf .tf-tag-ok svg { width: 10px; height: 10px; color: var(--accent-text); }
.tf .tf-tag-wait { display: none; box-shadow: inset 0 0 0 1px var(--s-pink); color: var(--muted); }

.tf .tf-rows { margin: 0; }
.tf .tf-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.tf .tf-row dt {
  font: 400 11px/1.5 var(--mono);
  color: var(--muted);
}
.tf .tf-row dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.tf .tf-row dd span { transition: opacity .28s ease; }
.tf .tf-row code {
  font: 400 12px/1 var(--mono);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tf .tf-card-foot { border-top: 1px solid var(--line); }
.tf .tf-foot-time { font: 400 11px/1 var(--mono); color: var(--muted); }

/* ---------- animation states (set by the script) ---------- */
.tf .tf-hide { visibility: hidden; }
.tf .tf-row dd span.tf-hide { visibility: visible; opacity: 0; }
.tf .tf-card.tf-recording .tf-status-rec { display: inline; }
.tf .tf-card.tf-recording .tf-tag-agent { display: none; }
.tf .tf-card.tf-waiting .tf-tag-wait { display: inline-flex; }
.tf .tf-card.tf-waiting .tf-tag-ok { display: none; }
.tf .tf-card.tf-waiting .tf-foot-time { visibility: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .tf .tf-panes { grid-template-columns: minmax(0, 1fr); }
  .tf .tf-chan { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .tf .tf-term-bar,
.tf .tf-chan-bar { padding: 0 14px; }
  .tf .tf-term-body,
.tf .tf-chan-body { padding: 14px 14px 18px; }
  .tf .tf-row { grid-template-columns: 1fr; gap: 2px; }
  .tf .tf-card-title i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tf .tf-caret::after { animation: none; }
  .tf .tf-row dd span { transition: none; }
}

/* =====================================================================
   fig. 4: the whole workspace (from heroes/plain-sentence)
   ===================================================================== */
/* The whole workspace: one large product window. Nested under .ps with
   native CSS nesting, as in the study it came from. */

.ps {
  --ps-term-bg: #1f1a17;
  --ps-term-ink: #ece4dc;
  --ps-term-dim: #9b8f86;
  --ps-term-line: #3a322d;
  --ps-wash: rgba(31, 26, 23, .06);
  text-align: left;
  color: var(--ink);

  /* ---------- the figure ---------- */

  & .ps-win {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 24px 60px rgba(58, 36, 24, .10), 0 8px 20px rgba(58, 36, 24, .06);
    font: 400 13px/1.55 var(--font);
    color: var(--ink);
    cursor: default;
    user-select: none;
  }
  & .ps-win svg { display: block; flex: none; }
  /* :where keeps this reset weaker than the margins fig. 1's parts set */
  & :where(.ps-win) p { margin: 0; }

  /* The figure's top bar (.tf-bar) is the window's only chrome, as in fig. 1. */
  & .ps-app {
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr) 340px;
    min-height: 588px;
  }

  /* shared small parts */
  & .ps-hash { color: var(--muted); font-weight: 400; }
  & .ps-ico { width: 14px; height: 14px; color: var(--muted); }
  /* ---------- sidebar ---------- */
  & .ps-side {
    padding: 12px 10px 16px;
    border-right: 1px solid var(--line);
    background: var(--tint);
  }
  & .ps-space { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; }
  & .ps-space-mark {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-ink);
    font: 600 11px/1 var(--font);
  }
  & .ps-space-name { font-weight: 600; font-size: 13px; }
  & .ps-chev { width: 12px; height: 12px; margin-left: -2px; color: var(--muted); }
  & .ps-search {
    display: flex; align-items: center; gap: 7px;
    height: 28px;
    margin: 10px 0 4px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--muted);
    font-size: 12px;
  }
  & .ps-search svg { width: 13px; height: 13px; }
  & .ps-search kbd { margin-left: auto; font: 400 10px/1 var(--mono); color: var(--muted); }
  & .ps-group {
    margin: 16px 0 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
  }
  & .ps-item {
    display: flex; align-items: center; gap: 7px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    color: #4a413b;
    white-space: nowrap;
  }
  & .ps-item .ps-hash { width: 14px; text-align: center; }
  & .ps-item.is-on { background: var(--ps-wash); color: var(--ink); font-weight: 500; }
  & .ps-item.is-unread { color: var(--ink); font-weight: 600; }
  & .ps-count {
    margin-left: auto;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-text);
    color: #fff;
    font: 600 10px/18px var(--font);
    text-align: center;
  }
  & .ps-dot { width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; }
  & .ps-dot-p { background: var(--s-pink); }
  & .ps-dot-a { background: var(--s-mint); }

  /* ---------- thread ---------- */
  & .ps-main { display: flex; flex-direction: column; min-width: 0; background: var(--paper); }
  & .ps-head {
    display: flex; align-items: center; gap: 12px;
    height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
  }
  & .ps-chan { display: flex; gap: 4px; font-size: 14px; font-weight: 600; }
  & .ps-topic {
    padding-left: 12px;
    border-left: 1px solid var(--line);
    font-size: 12px;
    line-height: 16px;
    color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  & .ps-members { display: flex; margin-left: auto; }

  & .ps-feed { flex: 1 1 auto; padding: 4px 20px 8px; }
  & .ps-day {
    display: flex; align-items: center; gap: 12px;
    margin: 10px 0 6px;
    font-size: 11px; font-weight: 500; color: var(--muted);
  }
  & .ps-day::before,
& .ps-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  & .ps-composer {
    display: flex; align-items: center;
    height: 42px;
    margin: 4px 20px 18px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--muted);
  }
  & .ps-send {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    margin-left: auto;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-ink);
  }
  & .ps-send svg { width: 14px; height: 14px; }

  /* ---------- terminal ---------- */
  & .ps-term {
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--ps-term-bg);
    color: var(--ps-term-ink);
  }

  & .ps-term-body {
    flex: 1 1 auto;
    padding: 14px 16px;
    font: 400 12px/19px var(--mono);
    overflow-wrap: anywhere;
  }
  & .ps-term-foot {
    display: flex; align-items: center;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--ps-term-line);
  }
  & .ps-recap {
    display: flex; align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #5a4e46;
    border-radius: 6px;
    font-size: 12px; font-weight: 500;
  }
  & .ps-elapsed { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--ps-term-dim); }

  /* ---------- narrower ---------- */
  @media (max-width: 760px) {
    & .ps-side { display: none; }
    & .ps-head { padding: 0 14px; }
    & .ps-feed { padding: 4px 14px 8px; }
    & .ps-composer { margin: 4px 14px 14px; }
    & .ps-topic { display: none; }
  }
}

/* =====================================================================
   fig. 5: the join window (from heroes/page-is-product)
   ===================================================================== */
/* "The Page Is the Product": one app window; the composer is the signup. */

.pp {
  text-align: left;
  color: var(--ink);
}
.pp *,
.pp *::before,
.pp *::after { box-sizing: border-box; }
.pp p,
.pp ul,
.pp ol { margin: 0; padding: 0; list-style: none; }

/* ---------- the window ---------- */
.pp .pp-win {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(58, 36, 24, .10), 0 8px 20px rgba(58, 36, 24, .06);
  font: 400 13px/1.5 var(--font);
}
.pp .pp-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.pp .pp-dots { display: flex; gap: 6px; }
.pp .pp-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.pp .pp-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 500 11px/1 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.pp .pp-body {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
}

/* ---------- channel list ---------- */
.pp .pp-side {
  display: flex;
  flex-direction: column;
  padding: 12px 8px 10px;
  border-right: 1px solid var(--line);
  background: var(--tint);
  color: var(--muted);
  user-select: none;
}
.pp .pp-space {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 10px;
  font: 600 13px/1 var(--font);
  color: var(--ink);
}
.pp .pp-space-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 12px/1 var(--display);
  padding-bottom: 1px;
}
.pp .pp-label {
  padding: 10px 8px 4px;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
}
.pp .pp-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.pp .pp-list li.is-on {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-weight: 600;
}
.pp .pp-hash {
  width: 10px;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--line-strong);
  text-align: center;
}
.pp .is-on .pp-hash { color: var(--muted); }
.pp .pp-note {
  position: relative;
  width: 10px;
  height: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.pp .pp-note::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 3px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.pp .pp-dot {
  width: 8px;
  height: 8px;
  margin: 0 1px;
  border-radius: 2px;
}
.pp .pp-dot-person { background: var(--s-pink); }
.pp .pp-dot-agent { background: var(--s-mint); }
.pp .pp-tag {
  padding: 1px 5px 2px;
  border-radius: 4px;
  background: var(--s-mint-soft);
  color: #1f6b54;
  font: 500 10px/1.2 var(--mono);
}
.pp .pp-term {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 8px 2px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.pp .pp-prompt {
  font: 500 10px/1 var(--mono);
  color: var(--muted);
}

/* ---------- thread ---------- */
.pp .pp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pp .pp-chan {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 20px 10px;
  border-bottom: 1px solid var(--line);
}
.pp .pp-chan-name {
  display: inline-flex;
  gap: 4px;
  font: 600 14px/1.3 var(--font);
  color: var(--ink);
}
.pp .pp-chan-name .pp-hash { color: var(--muted); }
.pp .pp-chan-topic {
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pp .pp-thread {
  flex: 1;
  padding: 4px 20px 10px;
}
.pp .pp-day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp .pp-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.pp .pp-msg {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  padding-top: 11px;
}
.pp .pp-msg-cont { padding-top: 4px; }
.pp .pp-av {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 7px;
  font: 700 12px/1 var(--display);
  color: var(--ink);
}
.pp .pp-msg[data-who="person"] .pp-av { background: var(--s-pink-soft); box-shadow: inset 0 0 0 1px var(--s-pink); }
.pp .pp-msg[data-who="agent"] .pp-av { background: var(--s-mint-soft); box-shadow: inset 0 0 0 1px var(--s-mint); }
.pp .pp-msg[data-who="you"] .pp-av { background: var(--tint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pp .pp-msg-cont .pp-av { visibility: hidden; height: 0; }
.pp .pp-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.35;
}
.pp .pp-meta b { font-weight: 600; color: var(--ink); }
.pp .pp-time { font-size: 11px; color: var(--muted); }
.pp .pp-text {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pp .pp-prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 440px;
  margin-top: 7px;
  padding: 7px 8px 7px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--s-mint);
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink);
}
.pp .pp-prop-what { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; }
.pp .pp-prop-k {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp .pp-prop-state {
  flex: none;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 11px/1.3 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.pp .pp-prop-state.is-done {
  background: var(--ok-soft);
  box-shadow: none;
  color: #1f6b54;
}

/* ---------- composer: the signup ---------- */
.pp .pp-composer { padding: 6px 20px 12px; }
.pp .pp-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-btn, 10px);
  background: var(--field);
  cursor: text;
  transition: box-shadow 150ms ease-out;
}
.pp .pp-field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.pp .pp-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 7px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: 400 15px/1.2 var(--font);
  color: var(--ink);
  caret-color: var(--accent-text);
}
.pp .pp-field input::placeholder { color: var(--muted); opacity: .75; }
/* A resting caret, so the field reads as "type here" before it has focus. */
.pp .pp-caret {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 2px;
  height: 20px;
  margin-top: -10px;
  background: var(--accent-text);
  pointer-events: none;
  animation: pp-blink 1.05s steps(1, end) infinite;
}
.pp .pp-field input:focus ~ .pp-caret,
.pp .pp-field input:not(:placeholder-shown) ~ .pp-caret { display: none; }
@keyframes pp-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.pp .pp-send {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 42px;
  margin: 0;
  padding: 0 15px 0 17px;
  border: 1px solid var(--accent);
  border-radius: calc(var(--r-btn, 10px) - 3px);
  background: var(--accent);
  box-shadow: none;
  color: var(--accent-ink);
  font: 600 15px/1 var(--font);
  transform: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.pp .pp-send:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: none;
  transform: none;
}
.pp .pp-send:active { transform: none; box-shadow: none; }
.pp .pp-send:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.pp .pp-hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.pp .pp-hint b { font-weight: 600; color: var(--ink); }
.pp .pp-hint-key { font: 500 11px/1.5 var(--mono); white-space: nowrap; }

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

/* ---------- narrower ---------- */
@media (max-width: 760px) {
  .pp .pp-body { grid-template-columns: minmax(0, 1fr); }
  .pp .pp-side { display: none; }

  .pp .pp-chan,
.pp .pp-thread { padding-left: 14px; padding-right: 14px; }
  .pp .pp-composer { padding: 6px 12px 12px; }
  .pp .pp-chan-topic { display: none; }
  .pp .pp-field input { font-size: 16px; }
  .pp .pp-hint-key { display: none; }
}
@media (max-width: 520px) {
  .pp .pp-field { padding-left: 13px; }
  .pp .pp-caret { left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp .pp-caret { animation: none; }
  .pp .pp-field,
.pp .pp-send { transition: none; }
}

/* =====================================================================
   Additions for this page
   ===================================================================== */

/* ---------- terminal figure: the follow-up message under the recap ---------- */
/* It is always in the layout (only faded out), so the panel never changes height. */
.tf .tf-follow { transition: opacity .28s ease; }
.tf .tf-follow.tf-hide { visibility: visible; opacity: 0; }
.tf .tf-who-tag {
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--s-mint-soft);
  color: #1f6b54;
  font: 500 10px/1.4 var(--mono);
}
.tf .tf-at { padding: 1px 3px; margin-right: -1px; border-radius: 4px; background: var(--s-pink-soft); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .tf .tf-follow { transition: none; }
}

/* ---------- workspace window: the side panel with real tabs ---------- */
.ps .ps-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line);
  background: var(--paper);
}
.ps .ps-tabs {
  display: flex;
  align-items: stretch;
  gap: 18px;
  flex: none;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.ps .ps-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: 500 12px/1 var(--font);
  white-space: nowrap;
}
.ps button.ps-tab { cursor: pointer; transition: color .15s ease; }
.ps button.ps-tab:hover { color: var(--ink); }
.ps button.ps-tab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; border-radius: 4px; }
.ps .ps-tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ps .ps-tab-soon { margin-left: auto; color: color-mix(in srgb, var(--muted) 72%, var(--paper)); }
.ps .ps-tab-soon i {
  padding: 1px 5px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  font: 400 10px/1.4 var(--mono);
  font-style: normal;
  color: var(--muted);
}
.ps .ps-term { flex: 1 1 auto; }

.ps .ps-notes { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 0 16px 16px; user-select: text; }
.ps .ps-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  font-size: 12px;
  color: var(--muted);
}
.ps .ps-notes-head b { font-weight: 600; color: var(--ink); }
.ps .ps-notes-new { font: 400 11px/1 var(--mono); }
.ps .ps-note { padding: 12px 0 13px; border-top: 1px solid var(--line); }
.ps .ps-note-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ps .ps-note-title { font-weight: 600; font-size: 13px; line-height: 18px; color: var(--ink); }
.ps .ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font: 500 10px/1 var(--mono);
  white-space: nowrap;
}
.ps .ps-badge svg { width: 9px; height: 9px; }
.ps .ps-badge-private { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.ps .ps-badge-pub { background: var(--ok-soft); color: #1f6b54; }
.ps .ps-notes .ps-note-text { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: #4a413b; }
.ps .ps-notes .ps-note-meta { margin-top: 7px; font: 400 10.5px/1.5 var(--mono); color: var(--muted); }
.ps .ps-notes .ps-notes-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 400 10.5px/1.5 var(--mono);
  color: var(--muted);
}

/* Narrower than three columns: the side panel drops under the thread. */
@media (max-width: 1060px) {
  .ps .ps-app { grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
  .ps .ps-side { grid-row: 1 / span 2; }
  .ps .ps-panel { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); }
  .ps .ps-notes .ps-notes-foot { margin-top: 0; }
}
@media (max-width: 760px) {
  .ps .ps-app { grid-template-columns: minmax(0, 1fr); }
  .ps .ps-panel { grid-column: 1; }
  .ps .ps-tabs { padding: 0 14px; }
  .ps .ps-notes { padding: 0 14px 14px; }
}

/* ---------- join window ---------- */
.pp .pp-error { margin: 8px 2px 0; font: 500 13px/1.45 var(--font); color: var(--err); }
.pp .pp-field input[disabled] { color: var(--muted); }
.pp form[data-joined] .pp-field { border-color: var(--line-strong); background: var(--tint); cursor: default; }
.pp form[data-joined] .pp-caret { display: none; }
.pp form[data-joined] .pp-hint-key { display: none; }
.pp .pp-send[disabled],
.pp .pp-send[disabled]:hover { opacity: .5; background: var(--accent); border-color: var(--accent); cursor: default; }
@media (max-width: 520px) {
  .pp .pp-prop { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- feedback pass 1 ---------- */

/* Top-bar "Get early access" lands on the hero's email row: a short nudge
   so the eye finds the field the cursor is now in. */
@keyframes wl-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.wl-row.nudge { animation: wl-nudge .42s ease-out; }
@media (prefers-reduced-motion: reduce) { .wl-row.nudge { animation: none; } }

/* The agent's answer in fig. 3: the line itself, quoted, before its sources. */
.tw .tw-msg p.tw-quote {
  margin: 6px 0 8px;
  padding: 6px 12px;
  border-left: 2px solid var(--accent-text);
  background: var(--tint);
  font-weight: 600;
}

/* The optional questions, opened under the hero's email row: the same card
   as under the join window, drawn compactly and without its frame. */
.signup-slot:empty { display: none; }
.signup.signup--inline { width: min(600px, 100%); margin-top: 18px; scroll-margin-top: 120px; }
.signup.signup--inline .card {
  max-width: none;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tint);
  box-shadow: none;
}
.signup.signup--inline #saved-title { display: none; }
html[data-style="suit"] .signup.signup--inline .card .lede { margin: 0; max-width: none; font-size: 14px; line-height: 1.45; color: var(--ink); font-weight: 600; }
.signup.signup--inline .lede-more { display: none; }
.signup.signup--inline .preview-flag { margin-top: 8px; padding: 2px 8px; font-size: 11px; }
.signup.signup--inline .q {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
}
.signup.signup--inline .q[hidden] { display: none; }
.signup.signup--inline .q-count { display: none; }
.signup.signup--inline .q h3,
.signup.signup--inline .q h3 + .chips,
.signup.signup--inline .q .text-in { grid-column: 1 / -1; }
.signup.signup--inline .q h3 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.signup.signup--inline .q-label { margin: 0; font-size: 12px; }
.signup.signup--inline .q .chips,
.signup.signup--inline .q h3 + .chips { margin-top: 0; gap: 6px; }
.signup.signup--inline .chip span { padding: 4px 10px; font-size: 13px; background: var(--paper); }
.signup.signup--inline .q .text-in { margin-top: 2px; padding: 7px 10px; font-size: 13px; width: 100%; }
.signup.signup--inline .q-nav { margin-top: 14px; gap: 14px; }
.signup.signup--inline .q-nav .cta,
.signup.signup--inline .q-nav .btn { padding: 8px 16px; font-size: 14px; }
.signup.signup--inline .done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; text-align: left; }
.signup.signup--inline .done[hidden] { display: none; }
.signup.signup--inline .done .big { display: none; }
.signup.signup--inline .done h3 { margin: 0; font-size: 16px; }
.signup.signup--inline .done p { margin: 0; max-width: none; font-size: 14px; }
@media (max-width: 520px) {
  .signup.signup--inline .q { grid-template-columns: 1fr; gap: 6px; }
  .signup.signup--inline .q-label { margin-top: 4px; }
}

/* ---------- fig. 3, second pass: the thread plays as a sequence ---------- */
.tw [data-tw-step] { transition: opacity .35s ease, transform .35s ease; }
.tw [data-tw-step].tw-wait { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .tw [data-tw-step] { transition: none; } }

/* where the answer came from: each row opens in the sidebar */
.tw .tw-srcs { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tw .tw-srcs li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.tw .tw-src { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tw .tw-src b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tw .tw-src i { font-style: normal; font-size: 12px; color: var(--muted); }
.tw .tw-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.tw .tw-open svg,
.tw .tw-lock svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* what the agent proposes, and the one person who can say yes */
.tw .tw-rec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  margin-top: 10px;
  padding: 10px 12px 11px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  transition: border-color .25s ease, background-color .25s ease;
}
.tw .tw-rec-row {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 7px;
}
.tw .tw-btn {
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.tw .tw-lock,
.tw .tw-approved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 11px/1.6 var(--mono);
  color: var(--muted);
}
.tw .tw-rec[data-state="waiting"] .tw-approved,
.tw .tw-rec[data-state="approved"] .tw-btn,
.tw .tw-rec[data-state="approved"] .tw-lock { visibility: hidden; }
.tw .tw-rec[data-state="approved"] { border-style: solid; border-color: var(--line); background: var(--tint); }

@media (max-width: 520px) {
  .tw .tw-srcs li { grid-template-columns: 54px minmax(0, 1fr); row-gap: 2px; }
  .tw .tw-open { grid-column: 2; }
  .tw .tw-rec { grid-template-columns: minmax(0, 1fr); }
  .tw .tw-rec-row { grid-column: 1; }
}
.tw .tw-rec-row { min-height: 27px; }

/* fig. 3, left half: "Today" sits top-left with the count top-right, and the
   tiles keep their own height instead of stretching to match the thread, so
   a taller right side does not pull the top and bottom tiles apart. */
.tw .tw-today .tw-label { flex-direction: row; justify-content: space-between; margin-right: 0; }
@media (min-width: 981px) {
  .tw .tw-scatter { flex: 0 0 auto; height: 436px; margin-top: auto; margin-bottom: auto; }
}
/* "With Duzzin" lines up with the thread under it, as "Today" does with its tiles. */
.tw .tw-with .tw-label { margin-left: 0; }

/* =====================================================================
   fig. 2: a week of sessions, and what they left behind
   ===================================================================== */
/* A ledger of terminal sessions on the left; on the right, the sidebar and
   decisions they produced. Every generated item is always in the layout
   (only faded out while it waits), so the figure never changes height. */

.sc {
  text-align: left;
  color: var(--ink);
  font-family: var(--font);
}
.sc p,
.sc ul,
.sc ol { margin: 0; padding: 0; list-style: none; }
.sc i,
.sc em { font-style: normal; }

.sc .sc-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.36fr);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(58, 36, 24, .10), 0 8px 20px rgba(58, 36, 24, .06);
  overflow: hidden;
}

/* the mono label row each column starts with */
.sc .sc-label {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sc .sc-label b { font-weight: 600; color: var(--ink); }

/* ---------- left: the ledger ---------- */
.sc .sc-led {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 22px 16px;
  border-right: 1px solid var(--line-strong);
}
.sc .sc-led .sc-label { justify-content: space-between; }
.sc .sc-led .sc-label span { font-weight: 400; letter-spacing: 0; text-transform: none; }

.sc .sc-sessions { margin: 0 -22px; border-top: 1px solid var(--line); }
.sc .sc-ses {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 13px 22px 14px;
  border-bottom: 1px solid var(--line);
  font: 400 12.5px/1.5 var(--mono);
  transition: background-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.sc .sc-day { color: var(--muted); }
.sc .sc-what { color: var(--ink); }
.sc .sc-meta,
.sc .sc-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 400 11px/1.5 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.sc .sc-meta { grid-column: 2; margin-top: 3px; }
/* the dotted leader between what changed and how long it took */
.sc .sc-meta i,
.sc .sc-sum i {
  flex: 1 1 auto;
  min-width: 14px;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 62%, var(--paper));
  transform: translateY(-3px);
}
.sc .sc-meta span:first-child { overflow: hidden; text-overflow: ellipsis; }
.sc .sc-sum { margin-top: auto; padding: 14px 0 0 42px; color: var(--ink); }

/* the session being read, and the ones not reached yet */
.sc .sc-ses.is-on { background: var(--tint); box-shadow: inset 2px 0 0 var(--ink); }
.sc .sc-ses.is-on .sc-day { color: var(--ink); font-weight: 500; }
.sc .sc-ses.is-ahead { opacity: .4; }

/* ---------- right: the workspace ---------- */
.sc .sc-ws {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-width: 0;
}
.sc .sc-side {
  padding: 12px 10px 16px;
  border-right: 1px solid var(--line);
  background: var(--tint);
}
.sc .sc-space { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 7px; font-weight: 600; font-size: 13px; }
.sc .sc-space-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 11px/1 var(--font);
}
.sc .sc-group { margin: 14px 0 4px; padding: 0 9px; font-size: 11px; font-weight: 500; color: var(--muted); }
.sc .sc-item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin-top: 2px;
  padding: 0 8px;
  border: 1px dashed transparent;
  border-radius: 6px;
  font-size: 13px;
  color: #4a413b;
  white-space: nowrap;
}
.sc .sc-hash { flex: none; width: 14px; color: var(--muted); text-align: center; }
.sc .sc-note {
  position: relative;
  flex: none;
  width: 10px;
  height: 12px;
  margin: 0 2px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper);
}
.sc .sc-note::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 3px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.sc .sc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* where an item came from: a mint mark, hollow until a person keeps it */
.sc .sc-from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font: 400 10.5px/1.6 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s ease;
}
.sc .sc-item .sc-from { margin-left: auto; }
.sc .sc-from i {
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--s-mint);
  border-radius: 2px;
  background: var(--s-mint);
  transition: background-color .3s ease;
}
.sc [data-state="proposed"] .sc-from i { background: transparent; }
.sc .is-live .sc-from { color: var(--ink); }

/* proposed, then kept */
.sc [data-sc-from] { transition: opacity .35s ease, transform .35s ease, border-color .3s ease, background-color .3s ease; }
.sc [data-sc-from].sc-wait { opacity: 0; transform: translateY(5px); }
.sc .sc-item[data-state="proposed"] { border-color: var(--line-strong); background: var(--paper); }

.sc .sc-pane { min-width: 0; padding: 0 20px 20px; }
.sc .sc-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: 0;
  text-transform: none;
}
.sc .sc-key i { width: 14px; height: 9px; border-radius: 3px; }
.sc .sc-key-p { border: 1px dashed var(--line-strong); }
.sc .sc-key-k { margin-left: 8px; border: 1px solid var(--line-strong); background: var(--tint); }

.sc .sc-decs { display: grid; gap: 8px; }
.sc .sc-dec {
  padding: 9px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tint);
}
.sc .sc-dec[data-state="proposed"] { border: 1px dashed var(--line-strong); background: var(--paper); }
.sc .sc-dec-what { font-weight: 600; font-size: 13.5px; line-height: 1.4; }
.sc .sc-dec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 22px;
  margin-top: 6px;
  font: 400 10.5px/1.6 var(--mono);
  color: var(--muted);
}
.sc .sc-prop,
.sc .sc-kept { display: inline-flex; align-items: center; white-space: nowrap; }
/* "Proposed by Claude" and "Kept by Kevin" are fig. 1's pills (.tf-tag). */
.sc .sc-prop .tf-tag-wait { display: inline-flex; }
.sc .sc-prop b {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 10px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 11.5px/1 var(--font);
}
.sc .sc-prop em { margin-left: 10px; font: 500 11.5px/1 var(--font); color: var(--muted); }
/* Both states share one grid cell and the one not showing is only made
   invisible, so a card is the same size proposed as kept. */
.sc .sc-state { display: inline-grid; }
.sc .sc-state > * { grid-area: 1 / 1; justify-self: start; }
.sc [data-state="proposed"] .sc-kept,
.sc [data-state="kept"] .sc-prop { visibility: hidden; }

/* ---------- stacked: the ledger above the workspace ---------- */
@media (max-width: 900px) {
  .sc .sc-frame { grid-template-columns: minmax(0, 1fr); }
  .sc .sc-led { border-right: 0; border-bottom: 1px solid var(--line-strong); }
}
@media (max-width: 600px) {
  .sc .sc-led { padding: 0 14px 14px; }
  .sc .sc-sessions { margin: 0 -14px; }
  .sc .sc-ses { padding: 12px 14px 13px; }
  .sc .sc-ws { grid-template-columns: minmax(0, 1fr); }
  .sc .sc-side { padding: 10px 6px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sc .sc-pane { padding: 0 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc .sc-ses,
  .sc [data-sc-from],
  .sc .sc-from,
  .sc .sc-from i { transition: none; }
}

/* Hero headline: two lines of setup in ink, then the pink turn on its own line. */
.top-h .top-h-b { color: inherit; }
.top-h .top-h-c { display: block; }

/* The shorter hero sub-line sets on two lines at desktop width. */
.top-sub { max-width: 720px; }

/* fig. 2 with real dates: "Oct 11" needs a wider first column than "Mon" did. */
.sc .sc-ses { grid-template-columns: 62px minmax(0, 1fr); }
.sc .sc-day { white-space: nowrap; }
.sc .sc-sum { padding-left: 62px; }

/* fig. 1: the session knows which message started it, so nobody has to say so. */
.tf .tf-term-from { margin-left: 8px; opacity: .55; }
.tf .tf-started {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font: 400 11px/1.5 var(--mono);
  color: var(--muted);
}
.tf .tf-started svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* fig. 4, the whole workspace: what is coming sits in the sidebar, greyed. */
.ps .ps-soon { color: var(--muted); opacity: .7; }
.ps .ps-soon i {
  margin-left: auto;
  padding: 0 5px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  font: 400 9.5px/1.6 var(--mono);
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- fig. 1 as a real session: a scrolling log, a little code, a ship-it ---------- */
/* The terminal takes its height from the channel beside it. Its log is anchored
   to the bottom and clipped at the top, so lines scroll away like a terminal. */
.tf .tf-term { display: flex; flex-direction: column; min-height: 0; }
.tf .tf-term-body { position: relative; flex: 1 1 auto; min-height: 360px; padding: 0; }
.tf .tf-log {
  position: absolute;
  inset: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.tf .tf-log > * { flex: 0 0 auto; }
.tf .tf-gone { display: none; }
.tf .tf-mt { margin-top: .85em; }
.tf .tf-diff {
  display: block;
  padding-left: 2ch;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  color: var(--tf-term-dim);
}
.tf .tf-diff.tf-add { color: var(--s-mint); }
.tf .tf-diff.tf-del { color: var(--s-pink); }
.tf .tf-running { margin-left: 8px; color: var(--accent-text); }
.tf .tf-running::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: tf-blink 1.05s steps(1, end) infinite;
}
.tf .tf-running.tf-off { display: none; }
/* Without the script the session is over, so nothing is "running". */
.tf:not(.tf-live) .tf-running { display: none; }

/* fig. 1: the terminal fills from the top, as a real one does. The whole
   session fits at desktop width; on narrower screens the script scrolls the
   newest line into view. No ligatures, so code reads as typed. */
.tf .tf-log { display: block; justify-content: normal; }
.tf .tf-term { font-variant-ligatures: none; }

/* A line that has not played yet is hidden whatever kind of line it is. (The
   code lines set their own display, which was overriding the plain rule.) */
.tf .tf-log > .tf-gone { display: none !important; }

/* fig. 1: the recap arrives whole, is confirmed, then folds down to the decision. */
.tf .tf-foot-end { display: inline-flex; align-items: center; gap: 12px; }
.tf .tf-more {
  display: none;
  align-items: center;
  gap: 4px;
  font: 400 11px/1 var(--mono);
  color: var(--muted);
}
.tf .tf-more svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tf .tf-card.tf-folded .tf-more { display: inline-flex; }
.tf .tf-row {
  max-height: 140px;
  overflow: hidden;
  transition: max-height .38s ease, opacity .24s ease, padding .38s ease, border-top-width .38s ease;
}
.tf .tf-card.tf-folded .tf-row:nth-child(n+2) {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .tf .tf-row { transition: none; } }

/* fig. 1: slightly tighter terminal, so the whole session, opening line
   included, is still on screen when it ends. */
.tf .tf-term-body { line-height: 1.56; }
.tf .tf-log { inset: 14px 18px 14px; }
.tf .tf-mt { margin-top: .7em; }

/* ---------- fig. 1, drawn the way an agent CLI actually prints ---------- */
/* tool calls as Name(argument), an indented result under them, a diff with
   tinted rows, and a working line while the agent is busy */
.tf .tf-tool .tf-dot { margin-top: .62em; }
.tf .tf-call { min-width: 0; overflow-wrap: anywhere; color: var(--tf-term-dim); }
.tf .tf-call b { font-weight: 600; color: var(--tf-term-ink); }
.tf .tf-res { padding-left: 2ch; color: var(--tf-term-dim); }
.tf .tf-elbow {
  flex: 0 0 auto;
  width: .7em;
  height: .62em;
  margin: .28em .9ch 0 .2ch;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-bottom-left-radius: 2px;
  opacity: .7;
}
.tf .tf-diff {
  display: block;
  margin-left: 4ch;
  padding: 0 1ch 0 0;
  color: var(--tf-term-ink);
}
.tf .tf-diff i { display: inline-block; width: 3ch; font-style: normal; text-align: center; opacity: .8; }
.tf .tf-diff.tf-add { color: var(--tf-term-ink); background: rgba(127, 224, 195, .16); }
.tf .tf-diff.tf-del { color: var(--tf-term-ink); background: rgba(229, 127, 147, .2); }
.tf .tf-diff.tf-mt { margin-top: 0; }
.tf .tf-work { color: var(--s-mustard); }
.tf .tf-star { flex: 0 0 auto; width: 2ch; animation: tf-blink 1.05s steps(1, end) infinite; }
/* room for the longer session */
.tf .tf-term-body { min-height: 380px; }
.tf .tf-chan-body { min-height: 410px; }

/* the recap eases in, then its lines fill */
.tf [data-tf-cardmsg] { transition: opacity .32s ease, transform .32s ease; }
.tf [data-tf-cardmsg].tf-hide { visibility: visible; opacity: 0; transform: translateY(8px); }

/* the pull request on the follow-up message: open, then merged */
.tf .tf-pr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 7px 0 0;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  font-size: 12.5px;
  line-height: 1.4;
}
.tf .tf-pr svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tf .tf-pr-id { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tf .tf-pr-name { min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tf .tf-pr-open,
.tf .tf-pr-merged {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font: 500 10.5px/1.6 var(--mono);
}
.tf .tf-pr-open { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.tf .tf-pr-merged { background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok); color: var(--ok); }
.tf .tf-pr[data-state="open"] .tf-pr-merged,
.tf .tf-pr[data-state="merged"] .tf-pr-open { display: none; }
@media (prefers-reduced-motion: reduce) { .tf [data-tf-cardmsg] { transition: none; } }

/* =====================================================================
   One hand: figs 2, 3 and 4 in fig. 1's frame, with fig. 1's parts
   ===================================================================== */
/* Each of those figures also carries the class "tf", so every rule above
   written as ".tf .tf-..." (the top bar and its control, avatars, the agent
   tag, pills, the recap card, the pull request chip, the terminal lines)
   draws the same part in all four. Nothing here changes fig. 1: every
   selector below is scoped to .sc, .tw or .ps. */

/* ---------- the frame: .tf-fig carries the border, radius and shadow ---------- */
.sc .sc-frame,
.tw .tw-split,
.ps .ps-win { border: 0; border-radius: 0; box-shadow: none; }
:is(.sc, .tw, .ps) .tf-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- fig. 2 ---------- */
.sc .sc-label { height: 38px; }
.sc .sc-kept { color: var(--ink); }

/* ---------- fig. 3: the thread ---------- */
.tw .tw-label { height: 38px; padding-top: 0; align-items: center; }
.tw .tw-thread { margin-top: 0; }
.tw .tw-crumb { align-items: center; padding: 0 0 10px; }
.tw .tw-crumb + .tw-msg,
.tw .tw-decision { margin-top: 16px; }
.tw .tw-approved,
.tw .tw-confirmed { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.tw .tw-at { font: 400 11px/1 var(--mono); color: var(--muted); }
/* The button and the lock keep their place when the approval replaces them
   (they are only made invisible), so the row is the same height in both
   states even where the lock wraps under the button on a phone. */
.tw .tw-rec-row { position: relative; }
.tw .tw-rec-row .tw-approved { position: absolute; left: 0; top: 0; height: 27px; }
/* the pull request sits under the decision, in the card's second column */
.tw .tw-decision .tf-pr { grid-column: 2; justify-self: start; margin-top: 8px; }
@media (max-width: 600px) {
  .tw .tw-decision .tf-pr,
  .tw .tw-state { grid-column: 1; }
}

/* ---------- fig. 4: the channel and the terminal are fig. 1's, finished ---------- */
.ps .ps-feed { display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 20px 16px; }
.ps .ps-day + .tf-msg { margin-top: 8px; }
.ps .ps-members .tf-av { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; box-shadow: 0 0 0 2px var(--paper); }
.ps .ps-members .tf-av + .tf-av { margin-left: -4px; }
.ps .ps-members .tf-av svg { width: 12px; height: 12px; }
.ps .ps-item .tf-who-tag { margin-right: 0; }

.ps .ps-term { background: var(--tf-term); color: var(--tf-term-ink); }
.ps .tf-term-bar { flex: none; padding: 0 16px; }
.ps .tf-term-from { margin-left: 0; opacity: 1; white-space: nowrap; }
.ps .tf-term-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ps .tf-term-path i { margin-left: 0; }
/* ligatures off after the font shorthand, which would otherwise reset them */
.ps .ps-term-body { padding: 14px 16px 16px; font: 400 12.5px/1.56 var(--mono); font-variant-ligatures: none; }
.ps .ps-term-foot { border-top-color: var(--tf-term-line); }
@media (max-width: 760px) {
  .ps .ps-feed { padding: 4px 14px 14px; }
  .ps .tf-term-bar,
  .ps .ps-term-body { padding-left: 14px; padding-right: 14px; }
}

/* The chain heading is the same size as the other section headings. (It was
   set larger, which read as inconsistent; the boxed nouns already give it
   more presence.) */
@media (min-width: 601px) { .chain-h { font-size: clamp(29px, 3.6vw, 46px); } }

/* signup: how many questions are left, at the end of the Next row */
.q-steps { margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* closing ask: no headline of its own, so it sits directly under the thesis line */
.sec.thesis + .sec.end { padding-top: clamp(28px, 4vw, 44px); }

/* fig. 1 on a phone: the terminal header keeps the tab on one line and shows
   the branch only, as fig. 4 does. The folder path is a bare text node. */
@media (max-width: 520px) {
  .tf .tf-term-tab { white-space: nowrap; }
  .tf .tf-term-path { font-size: 0; }
  .tf .tf-term-path i { font-size: 12px; }
}

/* ---------- phones: the figures keep cause and effect on one screen ---------- */
.ps .ps-sec { display: contents; }
@media (max-width: 760px) {
  /* fig. 4: the terminal is a short window on the end of the session */
  .ps .ps-term-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-height: 250px;
    overflow: hidden;
  }
  .ps .ps-term-body > * { flex: 0 0 auto; }
}
@media (max-width: 680px) {
  /* fig. 1: a shorter terminal that scrolls as it prints, so the channel
     under it is on screen while the session runs */
  .tf .tf-term-body { min-height: 290px; }
}
@media (max-width: 520px) {
  /* fig. 3: one line whether it is waiting or approved, so no space is held */
  .tw .tw-btn-more { display: none; }
}
@media (max-width: 760px) {
  /* lines scrolled off the top fade out instead of being cut mid-row */
  .ps .ps-term-body { -webkit-mask-image: linear-gradient(transparent 4px, #000 34px); mask-image: linear-gradient(transparent 4px, #000 34px); }
}

/* ---------- fig. 4 on a phone: the app as it would be on a phone ----------
   One screen at a time and a tab bar under it, not three panes stacked into
   a long scroll. The same markup; the tab bar picks which pane shows. */
.ps .ps-mnav { display: none; }
@media (max-width: 760px) {
  /* a grid with a zero-minimum column, so long unbroken lines cannot widen the page */
  .ps .ps-app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 560px; min-height: 0; }
  .ps .ps-app > .ps-side,
  .ps .ps-app > .ps-main,
  .ps .ps-app > .ps-panel { display: none; grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: hidden; border: 0; }
  .ps .ps-app[data-ps-view="browse"] > .ps-side { display: block; padding: 12px 12px 16px; }
  .ps .ps-app[data-ps-view="channel"] > .ps-main { display: flex; }
  .ps .ps-app[data-ps-view="terminal"] > .ps-panel,
  .ps .ps-app[data-ps-view="notes"] > .ps-panel { display: flex; }
  .ps .ps-app > [class] { animation: ps-view-in .22s ease both; }
  .ps .ps-app > .ps-mnav { animation: none; }

  /* the newest messages, as a chat scrolled to the bottom */
  .ps .ps-feed { min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 26px); mask-image: linear-gradient(transparent, #000 26px); }
  /* the tab bar replaces the side panel's own tabs */
  .ps .ps-tabs { display: none; }
  .ps .ps-app[data-ps-view="terminal"] .ps-term { display: flex !important; min-height: 0; }
  .ps .ps-app[data-ps-view="terminal"] .ps-notes { display: none !important; }
  .ps .ps-app[data-ps-view="notes"] .ps-notes { display: flex !important; min-height: 0; padding-top: 4px; }
  .ps .ps-app[data-ps-view="notes"] .ps-term { display: none !important; }
  .ps .ps-term-body { max-height: none; min-height: 0; }
  .ps .ps-side .ps-item { height: 34px; font-size: 14.5px; }
  .ps .ps-side .ps-group { font-size: 12px; }

  .ps .ps-mnav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-row: 2;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .ps .ps-mtab {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 9px 0 10px;
    border: 0;
    background: none;
    color: var(--muted);
    font: 500 10.5px/1 var(--font);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ps .ps-mtab svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ps .ps-mtab.is-on { color: var(--ink); font-weight: 600; }
  .ps .ps-mtab:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 8px; }
}
@keyframes ps-view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ps .ps-app > [class] { animation: none; } }
@media (max-width: 760px) {
  /* Browse lists what there is to open; people would run past the screen */
  .ps .ps-side .ps-sec-people { display: none; }
}