/* Section 05: one pinned scene, three days. Left: day track with a filling line and the current
   step caption. Right: one workspace window where messages arrive (top right), the agent proposes
   (bottom sheet, a cursor approves) and a single artifact evolves: brief v1 → deck v2 → deck v3.
   Driven by app-mechanism.js; every element has its own lane, so nothing overlaps readable text. */

.workflow-story { position: relative; height: 380svh; }
body[data-preview] main > .workflow-story { display: none; }

.mech__stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
  height: 100svh;
  min-height: 680px;
  padding: 96px var(--gutter, 72px) 40px;
}

/* ---------- Left: heading, day track, caption ---------- */
.mech__side { display: flex; flex-direction: column; gap: 36px; }
.mech__side .workflow-heading h2 { margin: 0 0 16px; font-size: clamp(40px, 3.9vw, 56px); }
.mech__side .workflow-heading p { margin: 0; }

.mech-days { position: relative; display: grid; gap: 22px; margin: 0; padding: 0 0 0 30px; list-style: none; }
.mech-days li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; color: rgba(13, 33, 48, .4); transition: color .4s ease; }
.mech-days li b { grid-row: 1 / 3; color: inherit; font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1; }
.mech-days li span:not(.mech-days__dot) { font-size: 15px; font-weight: 600; }
.mech-days li small { font-size: 13px; }
.mech-days li.is-active { color: var(--ink-strong, #0d2130); }
.mech-days li.is-done { color: rgba(13, 33, 48, .62); }
.mech-days__dot { position: absolute; z-index: 1; left: 0; width: 13px; height: 13px; margin-top: 4px; border: 2px solid rgba(13, 33, 48, .2); border-radius: 50%; background: #fff; transition: border-color .4s ease, background-color .4s ease, transform .4s var(--e-out); }
.mech-days li.is-done .mech-days__dot { border-color: #2b7fd0; background: #2b7fd0; }
.mech-days li.is-active .mech-days__dot { border-color: #2b7fd0; transform: scale(1.25); box-shadow: 0 0 0 5px rgba(43, 127, 208, .14); }
.mech-days__track { position: absolute; left: 6px; top: 10px; bottom: 26px; width: 2px; border-radius: 2px; background: rgba(13, 33, 48, .1); }
.mech-days__fill { position: absolute; inset: 0 0 auto; height: 0; border-radius: 2px; background: #2b7fd0; }

.mech-caption { display: flex; gap: 14px; align-items: baseline; min-height: 74px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(13, 33, 48, .1); color: var(--ink-strong, #0d2130); font-size: 17px; line-height: 1.4; }
.mech-caption [data-mech-count] { flex: none; color: #2b7fd0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Right: workspace window ---------- */
.mech-window {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(640px, calc(100svh - 150px));
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(4, 23, 43, .06), 0 30px 60px -18px rgba(24, 55, 80, .26), 0 12px 24px -12px rgba(24, 55, 80, .12);
  overflow: hidden;
}
.mech-window__bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 20px; border-bottom: 1px solid rgba(13, 33, 48, .07); }
.mech-window__title { display: inline-flex; align-items: center; gap: 8px; color: #0d2130; font-size: 14px; font-weight: 650; }
.mech-window__title svg { width: 18px; height: 18px; color: #2b7fd0; }
.mech-window__day { margin-left: auto; padding: 6px 12px; border-radius: 999px; color: #1c5a80; background: #E9F1FE; font-size: 12.5px; font-weight: 650; }
.mech-window__body { position: relative; flex: 1; min-height: 0; background: #FAFBFC; }

.mech-doc {
  position: absolute;
  inset: calc(24px + var(--push, 0px)) 24px var(--doc-bottom, 24px);
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  border: 1px solid rgba(13, 33, 48, .07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px -16px rgba(24, 55, 80, .2);
  will-change: transform, opacity;
}
.mech-doc > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mech-doc__type { display: inline-flex; align-items: center; gap: 8px; color: rgba(13, 33, 48, .6); font-size: 13px; font-weight: 600; }
.mech-doc__type svg { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 9px; color: #6F4E17; background: #F8F3DE; }
.mech-doc--deck .mech-doc__type svg { color: #1c5a80; background: #E9F1FE; }
.mech-badge { padding: 4px 10px; border-radius: 999px; color: rgba(13, 33, 48, .7); background: #F1F3F6; font-size: 12px; font-weight: 650; transition: background-color .4s ease, color .4s ease; }
.mech-badge.is-review { color: #2B552C; background: #E6F4EB; }
.mech-doc h3 { margin: 0 0 18px; color: #0d2130; font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; letter-spacing: -.015em; line-height: 1.15; }

.mech-brief { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mech-brief li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(13, 33, 48, .07); color: #1a2e3d; font-size: 15.5px; }
.mech-brief__label { color: rgba(13, 33, 48, .5); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.mech-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 16px; }
.mech-sources span { padding: 4px 10px; border: 1px solid rgba(13, 33, 48, .08); border-radius: 999px; color: rgba(13, 33, 48, .6); background: #FAFBFC; font-size: 12px; }
.mech-sources span:first-child { padding-left: 0; border: 0; background: none; color: rgba(13, 33, 48, .45); font-weight: 650; }

.mech-slides { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.mech-slide { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 16 / 10; padding: 8px; border: 1px solid rgba(13, 33, 48, .08); border-radius: 8px; background: #fff; transition: border-color .4s ease, box-shadow .4s ease, transform .4s var(--e-out); }
.mech-slide i { display: block; height: 3px; border-radius: 2px; background: rgba(13, 33, 48, .1); }
.mech-slide i:nth-child(2n) { width: 70%; }
.mech-slide b { position: absolute; top: 6px; left: 8px; color: #1c5a80; font-size: 11px; }
.mech-slide.is-lit { border-color: #2b7fd0; box-shadow: 0 0 0 3px rgba(43, 127, 208, .16); transform: translateY(-3px); }
.mech-slide.is-lit-amber { border-color: #d68c50; box-shadow: 0 0 0 3px rgba(214, 140, 80, .2); transform: translateY(-3px); }

.mech-changes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mech-changes li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid rgba(13, 33, 48, .07); border-radius: 12px; color: #1a2e3d; font-size: 14.5px; }
.mech-changes__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #1c5a80; background: #E9F1FE; font-size: 12px; font-weight: 700; }
.mech-changes li[data-change="date"] .mech-changes__n { color: #7A3A20; background: #FBEBE2; }
.mech-changes__src { color: rgba(13, 33, 48, .45); font-size: 12px; }
.mech-changes s { color: rgba(13, 33, 48, .45); }
.mech-changes b { color: #7A3A20; }
.mech-gate { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 12px; color: #2B552C; background: #E6F4EB; font-size: 13.5px; font-weight: 600; }
.mech-gate svg { flex: none; width: 18px; height: 18px; }

.mech-toast {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  gap: 12px;
  width: min(380px, 70%);
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 33, 48, .06), 0 20px 40px -12px rgba(24, 55, 80, .3);
  will-change: transform, opacity;
}
.mech-toast__body { display: grid; gap: 2px; color: #1a2e3d; font-size: 14px; line-height: 1.4; }
.mech-toast__body b { color: #0d2130; font-size: 13.5px; }
.mech-toast__body small { color: rgba(13, 33, 48, .5); font-size: 12px; }
.mech-avatar--anna { --tone-bg: #F2EDFC; --tone-ink: #4D2F87; flex: none; width: 34px; height: 34px; font-size: 11px; }
.mech-avatar--alex { --tone-bg: #E6F4EB; --tone-ink: #2B552C; flex: none; width: 34px; height: 34px; font-size: 11px; }

.mech-proposal {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 18px;
  border: 1px solid rgba(43, 127, 208, .25);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 48px -16px rgba(24, 55, 80, .35);
  will-change: transform, opacity;
}
.mech-proposal .aw-spark { flex: none; }
.mech-proposal__text { flex: 1; display: grid; gap: 2px; color: #0d2130; font-size: 15px; line-height: 1.4; }
.mech-proposal__text small { color: #2b7fd0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mech-approve { flex: none; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; color: #fff; background: #0d2130; font-size: 14px; font-weight: 650; transition: background-color .3s ease, transform .15s ease; }
.mech-approve__done { display: none; align-items: center; gap: 6px; }
.mech-approve__done svg { width: 16px; height: 16px; stroke-width: 2; }
.mech-approve.is-pressed { transform: scale(.94); }
.mech-approve.is-done { background: #2f8f4e; }
.mech-approve.is-done .mech-approve__idle { display: none; }
.mech-approve.is-done .mech-approve__done { display: inline-flex; }

.mech-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 22px; height: 22px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.mech-cursor svg { width: 22px; height: 22px; fill: #0d2130; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }

.mech-versions { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; border-top: 1px solid rgba(13, 33, 48, .07); color: rgba(13, 33, 48, .4); font-size: 13px; font-weight: 600; }
.mech-versions span { display: inline-flex; align-items: center; gap: 8px; transition: color .4s ease; }
.mech-versions span i { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; transition: background-color .4s ease; }
.mech-versions span.is-on { color: #1c5a80; }
.mech-versions span.is-on i { background: currentColor; }
.mech-versions b { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(13, 33, 48, .1); overflow: hidden; }
.mech-versions b::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--fill, 0)); background: #2b7fd0; }

@media (max-width: 900px) {
  .workflow-story { height: auto; }
  .mech__stage { position: relative; grid-template-columns: 1fr; height: auto; min-height: 0; padding: 88px 20px; }
  .mech-window { height: 620px; }
}

/* deck body: a large preview of the changed slide next to the change list */
.mech-deck-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mech-preview { display: grid; gap: 8px; }
.mech-preview__label { color: rgba(13, 33, 48, .5); font-size: 12px; font-weight: 650; }
.mech-preview__slide { display: grid; align-content: start; gap: 10px; aspect-ratio: 16 / 10; padding: 18px 20px; border: 1px solid rgba(13, 33, 48, .08); border-radius: 12px; background: linear-gradient(160deg, #fff, #F5F8FC); box-shadow: 0 10px 24px -14px rgba(24, 55, 80, .3); }
.mech-preview__slide b { color: #0d2130; font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.mech-preview__row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; color: #1a2e3d; font-size: 13.5px; }
.mech-preview__row i { color: rgba(13, 33, 48, .45); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mech-preview__date { display: inline-flex; align-items: baseline; gap: 8px; }
.mech-preview__date s { color: #1a2e3d; text-decoration-color: transparent; text-decoration-thickness: 2px; transition: color .4s ease, text-decoration-color .4s ease; }
.mech-preview__date em { padding: 2px 8px; border-radius: 6px; color: #7A3A20; background: #FBEBE2; font-size: 15px; font-style: normal; font-weight: 700; opacity: 0; transform: translateX(-6px); transition: opacity .45s ease .15s, transform .45s cubic-bezier(.19,1,.22,1) .15s; }
.mech-doc--deck.is-v3 .mech-preview__date s { color: rgba(13, 33, 48, .4); text-decoration-color: #d68c50; }
.mech-doc--deck.is-v3 .mech-preview__date em { opacity: 1; transform: none; }
.mech-doc--deck.is-v3 .mech-preview__slide { border-color: #d68c50; box-shadow: 0 0 0 3px rgba(214, 140, 80, .18), 0 10px 24px -14px rgba(24, 55, 80, .3); }
.mech-changes li { padding: 10px 12px; font-size: 14px; }
.mech-proposal { bottom: 18px; }
.mech-preview, .mech-preview__slide, .mech-changes { min-width: 0; }
@media (max-width: 900px) { .mech-deck-body { grid-template-columns: 1fr; } .mech-preview__slide { aspect-ratio: auto; } }

/* ---------- Feedback 21.10: entry and a step caption that reads as progress ---------- */
.mech__stage { perspective: 1600px; }
.mech-window { transform-origin: 50% 100%; will-change: transform, opacity; }
.mech-caption { display: grid; gap: 12px; min-height: 118px; padding: 18px 20px 20px; border: 1px solid rgba(13, 33, 48, .08); border-top: 1px solid rgba(13, 33, 48, .08); border-radius: 20px; background: rgba(255, 255, 255, .72); box-shadow: 0 14px 34px -18px rgba(24, 55, 80, .35); }
.mech-caption__top { display: flex; align-items: center; gap: 14px; }
.mech-caption__step { flex: none; color: #2b7fd0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mech-caption__step b { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
.mech-steps { display: flex; flex: 1; gap: 4px; }
.mech-steps i { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(13, 33, 48, .1); }
.mech-steps i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #2b7fd0; transform: scaleX(var(--seg, 0)); transform-origin: left; }
.mech-steps i.is-now::after { background: linear-gradient(90deg, #2b7fd0, #5aa9ef); }
.mech-caption p { margin: 0; color: var(--ink-strong, #0d2130); font-size: 19px; font-weight: 550; line-height: 1.38; letter-spacing: -.01em; }
.mech-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mech-word > span { display: inline-block; animation: mech-word .55s var(--e-power3, ease-out) both; animation-delay: var(--wd, 0ms); }
@keyframes mech-word { from { transform: translateY(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mech-word > span { animation: none; } }
.mech-eyebrow { margin: 0 0 14px !important; }
.mech__side .workflow-heading h2 { font-size: clamp(38px, 3.6vw, 52px); }
.mech__side .workflow-heading p:last-child { font-size: 16.5px !important; }
.mech-cta { align-self: flex-start; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .5s var(--e-power3), transform .5s var(--e-power3); }
.workflow-story.is-end .mech-cta { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) { .mech-cta { opacity: 1; transform: none; pointer-events: auto; } }
.mech__side .workflow-heading h2 { font-size: clamp(34px, 3vw, 44px) !important; text-wrap: balance; } .mech__side { gap: 28px !important; }
.mech__side .workflow-heading h2 { font-size: clamp(32px, 2.8vw, 42px) !important; }