/* "Every tool uses the same documents" as a tabbed showcase (9 Nov 2026,
   Jordan chose option A in mockups/workflow-alternatives.html). Five tools down
   the side, one stage on the right. Wired by assets/tool-tabs.js. */
.tt { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; margin-top: 2rem; text-align: left; }
.tt__list { display: grid; gap: 6px; align-content: start; }
.tt__item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 4px 14px; padding: 16px; border-radius: 16px; cursor: pointer; overflow: hidden; transition: background 260ms cubic-bezier(0.2, 0, 0, 1); }
.tt__item:hover { background: rgba(244, 244, 243, 0.6); }
.tt__item.is-on { background: rgb(244, 244, 243); }
.tt__ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(227, 227, 225); border-radius: 10px; background: #ffffff; box-sizing: border-box; }
.tt__ic svg { width: 18px; height: 18px; fill: none; stroke: rgb(10, 14, 28); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tt__item h3 { margin: 0 !important; font: 500 15px/1.3 "Inter", var(--font-heading), sans-serif !important; letter-spacing: 0 !important; color: rgb(10, 14, 28) !important; }
.tt__item h3 button { all: unset; cursor: pointer; }
.tt__item h3 button:focus-visible { outline: 2px solid #1979eb; outline-offset: 3px; border-radius: 4px; }
.tt__item p { margin: 0 !important; color: rgba(10, 14, 28, 0.6) !important; font-size: 13.5px !important; line-height: 1.45 !important; }
.tt__item a { color: #1979eb; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tt__item a::after { content: " \2192"; }
.tt__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt__prog { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: rgba(10, 14, 28, 0.06); opacity: 0; }
.tt__prog i { display: block; height: 100%; background: #1979eb; transform: scaleX(0); transform-origin: left; }
.tt.is-auto .tt__item.is-on .tt__prog { opacity: 1; }
.tt.is-auto .tt__item.is-on .tt__prog i { animation: tt-fill 6s linear forwards; }
@keyframes tt-fill { to { transform: scaleX(1); } }

.tt__stage { position: relative; min-height: 460px; display: grid; place-items: center; padding: 48px 40px 80px; border-radius: 24px; overflow: hidden; transition: background 500ms cubic-bezier(0.2, 0, 0, 1); }
.tt__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px; }
.tt__stage[data-t="bank"] { background: radial-gradient(70% 80% at 20% 10%, #ffd9b8, transparent), radial-gradient(60% 70% at 90% 90%, #f0a0b8, transparent), #f6c9a4; }
.tt__stage[data-t="media"] { background: radial-gradient(70% 80% at 20% 10%, #bfe0ff, transparent), radial-gradient(60% 70% at 90% 90%, #8f8cff, transparent), #5aa2f5; }
.tt__stage[data-t="create"] { background: radial-gradient(70% 80% at 20% 10%, #c9b6ff, transparent), radial-gradient(60% 70% at 90% 90%, #6aa8ff, transparent), #8f6ae8; }
.tt__stage[data-t="review"] { background: radial-gradient(70% 80% at 20% 10%, #ffc49a, transparent), radial-gradient(60% 70% at 90% 90%, #d8457a, transparent), #ef7a4a; }
.tt__stage[data-t="chat"] { background: radial-gradient(70% 80% at 20% 10%, #a8ecd2, transparent), radial-gradient(60% 70% at 90% 90%, #2f7fe0, transparent), #1aa07d; }

.tt__win { position: relative; z-index: 1; display: none; width: min(460px, 100%); border: 1px solid rgba(10, 14, 28, 0.08); border-radius: 14px; background: #ffffff; box-shadow: 0 2px 4px rgba(23, 24, 26, 0.04), 0 18px 40px rgba(23, 24, 26, 0.14); overflow: hidden; font-family: "Inter", var(--font-heading), sans-serif; }
.tt__win.is-on { display: block; }
.tt__bar { display: flex; align-items: center; gap: 4px; padding: 9px 12px; border-bottom: 1px solid #eeede9; background: #fafaf9; color: rgba(10, 14, 28, 0.6); font-size: 11px; font-weight: 500; }
.tt__bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9d9d6; }
.tt__bar span { margin-left: 6px; }
.tt__bar b { margin-left: auto; padding: 2px 8px; border-radius: 100px; color: #ffffff; font-size: 10px; font-weight: 600; }
.tt__body { display: grid; gap: 8px; padding: 14px; font-size: 13px; color: rgb(10, 14, 28); }
.tt__row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #f6f6f4; }
.tt__row--hit { background: #eaf3fe; color: #0f4e9a; }
.tt__row--ask { background: #ffffff; border: 1px solid #e3e3e1; }
.tt__row em { margin-left: auto; color: rgba(10, 14, 28, 0.5); font-size: 11px; font-style: normal; }
.tt__row kbd { margin-left: auto; padding: 1px 6px; border: 1px solid #e3e3e1; border-bottom-width: 2px; border-radius: 6px; background: #fafaf9; color: rgba(10, 14, 28, 0.55); font: 500 10px "Inter", sans-serif; }
.tt__meter { flex: 1; height: 6px; border-radius: 6px; background: #eeeeec; overflow: hidden; }
.tt__meter i { display: block; height: 100%; border-radius: 6px; }
.tt__pill { padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.tt__slide { padding: 8px 10px; border-left: 3px solid #7a4fe0; border-radius: 8px; background: #f7f4ff; }
.tt__slide b { display: block; color: #7a4fe0; font-size: 10.5px; font-weight: 600; }
.tt__slide--2 { border-color: #13a4c9; background: #effaff; } .tt__slide--2 b { color: #0e88a8; }
.tt__slide--3 { border-color: #e08a2c; background: #fff6ec; } .tt__slide--3 b { color: #b8691a; }
.tt__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tt__thumbs i, .tt__thumbs img { aspect-ratio: 4 / 3; border-radius: 8px; }
.tt__thumbs img { display: block; width: 100%; height: auto; object-fit: cover; }
.tt__alt { display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; background: #f6f6f4; }
.tt__alt b { color: rgba(10, 14, 28, 0.55); font-size: 10.5px; font-weight: 500; }
.tt__msg { max-width: 85%; margin: 0 !important; padding: 7px 10px; border-radius: 11px; font-size: 12.5px !important; line-height: 1.4 !important; }
.tt__msg--me { justify-self: end; border-bottom-right-radius: 3px; background: #1979eb; color: #ffffff !important; }
.tt__msg--bot { justify-self: start; border-bottom-left-radius: 3px; background: #f1f0ed; }
.tt__msg--bot small { display: block; margin-top: 4px; color: #13896a; font-size: 10.5px; font-weight: 600; }
.tt__shared { position: absolute; z-index: 1; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.88); color: rgb(10, 14, 28); font: 500 12px "Inter", sans-serif; }
.tt__chips { display: flex; }
.tt__chips i { display: grid; place-items: center; width: 22px; height: 26px; margin-right: -6px; border-radius: 4px; color: #ffffff; font: 700 7px "Inter", sans-serif; font-style: normal; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }

@keyframes tt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.cw-motion-off) .tt__win.is-on { animation: tt-rise 480ms cubic-bezier(0.22, 1, 0.36, 1); }
}
html.cw-motion-on .tt__win.is-on { animation: tt-rise 480ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (max-width: 900px) {
  .tt { grid-template-columns: 1fr; }
  .tt__stage { min-height: 380px; padding: 32px 20px 72px; }
}

/* Fine dots over the stage gradients (9 Nov 2026, Jordan). */
.tt__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, 0.55) 0.65px, transparent 0.8px) 0 0 / 5px 5px; }

/* Intro to showcase gap: the old diagram needed 128px for its sources pill (9 Nov 2026). */
.workflow__intro:has(+ .tt) { margin-bottom: 0 !important; }
.workflow__intro + .tt { margin-top: 40px; }

/* Phones and tablets (phone fixes item 17, 9 Nov 2026): tool-tabs.js moves the stage
   straight under the chosen tool, so the two are on screen together. */
@media (max-width: 900px) {
  .tt__list > .tt__stage { min-height: 320px; margin: 4px 0 12px; }
}