/* ===========================================================================
   SolutionsSales -- 画面イメージ (FRAGMENT:mock), part 2:
   content of panels 1-3 and 5 (パイプライン / AIエージェント / メール作成 / ワークフロー),
   their one-time motion, and small screens. Part 1: sales-mock.css.
   Motion only under html.sa-motion; start states hidden only while the demo
   has not been seen (.sa-seen, sales-motion.js latch).
   =========================================================================== */

/* ---- パイプライン: stage strip + table ----------------------------------- */
/* stages of the funnel as ONE continuous arrow bar: each stage is an arrow with a flat left edge, the next stage
   starts under its point (earlier stages sit on top), so there is no gap.
   A row that wraps on a phone starts flat (the overlap is clipped). */
.sa-mock-win .sa-mock-stages { --p: 24px; display: flex; flex-wrap: wrap; row-gap: 6px; margin: 0 0 18px; border-radius: 6px 0 0 6px; overflow: hidden; }
.sa-mock-st { flex: 1 1 auto; min-width: 0; z-index: calc(8 - var(--i)); display: flex; flex-direction: column; margin-left: calc(-1 * var(--p)); padding: 9px calc(var(--p) + 4px) 8px calc(var(--p) + 12px); clip-path: polygon(0 0, calc(100% - var(--p)) 0, 100% 50%, calc(100% - var(--p)) 100%, 0 100%); }
.sa-mock-st:first-child { margin-left: 0; padding-left: 14px; }
.sa-mock-st b { font-size: 19px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sa-mock-st span { font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.sa-mock-tw { overflow-x: auto; }
.sa-mock-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.sa-mock-tbl th { padding: 8px 10px; border-bottom: 1px solid var(--sa-hair); background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; white-space: nowrap; }
.sa-mock-tbl td { height: 52px; padding: 6px 10px; border-bottom: 1px solid var(--mk-row); color: var(--ink); vertical-align: middle; }
.sa-mock-tbl th:first-child, .sa-mock-tbl td:first-child { padding-left: 12px; }
.sa-mock-cn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.sa-mock-nx { display: inline-flex; white-space: nowrap; }
.sa-mock-tbl .sa-mock-btn--row { min-height: 32px; padding: 3px 10px; font-size: 13px; }
.sa-mock-tbl .sa-mock-btn--row::before { inset: -7px -2px; }
.sa-mock-row--new td { background: var(--surface); }
.sa-mock-win .sa-mock-fn { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* ---- AIの提案: suggestion rows ------------------------------------------ */
.sa-mock-win .sa-mock-sugs { display: grid; gap: 12px; }
.sa-mock-sug { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 8px 24px; align-items: start; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); }
.sa-mock-sug-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sa-mock-sug-h b { font-size: 14px; color: var(--navy); }
.sa-mock-sug-sc { flex-basis: 100%; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sa-mock-sug-b > p:first-child { font-size: 13.5px; line-height: 1.85; color: var(--ink); }
.sa-mock-win .sa-mock-sug-f { position: relative; display: flex; margin-top: 12px; }

/* ---- メール作成: draft list + letter ------------------------------------- */
.sa-mock-mail { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.sa-mock-drafts { display: grid; gap: 8px; }
.sa-mock-draft { appearance: none; position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 8px 12px; border: 1px solid var(--sa-acc); border-radius: 8px; background: var(--white); box-shadow: 0 2px 0 var(--mk-edge); font: inherit; text-align: left; color: var(--navy); cursor: pointer; transition: transform var(--dur-3) var(--ease-out); }
.sa-mock-draft-t { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; line-height: 1.45; }
.sa-mock-draft small { font-size: 13px; font-weight: 400; color: var(--muted); }
.sa-mock-draft[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--sa-acc); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .sa-mock-draft[aria-pressed="false"]:not(:disabled):hover { transform: translateY(-1px); background: var(--sa-tint); }
}
.sa-mock-letter { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); }
.sa-mock-win .sa-mock-lh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--sa-hair); }
.sa-mock-meta { display: grid; gap: 2px; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--sa-hair); }
.sa-mock-meta div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.7; }
.sa-mock-meta dt { font-weight: 700; color: var(--muted); }
.sa-mock-meta dd { margin: 0; font-weight: 700; color: var(--navy); }
.sa-mock-tb { position: relative; }
.sa-mock-txt { display: grid; gap: 10px; min-height: 212px; padding: 16px; font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.sa-mock-txt[contenteditable="true"] { outline: 2px dashed var(--sa-acc); outline-offset: -6px; cursor: text; }
.sa-mock-txt[contenteditable="true"]:focus-visible { outline: 2px solid var(--navy); }
.sa-mock-win .sa-mock-gen { position: absolute; inset: 16px 16px auto; display: grid; gap: 12px; opacity: 0; pointer-events: none; }
.sa-mock-gen p { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sa-acc-ink); }
.sa-mock-gen i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sa-mock-gen b { display: block; height: 10px; border-radius: 5px; background: var(--sa-tint); }
.sa-mock-gen b:nth-of-type(1) { width: 34%; } .sa-mock-gen b:nth-of-type(2) { width: 92%; } .sa-mock-gen b:nth-of-type(3) { width: 78%; } .sa-mock-gen b:nth-of-type(4) { width: 58%; }
.sa-mock-blank { display: inline-block; margin: 2px 0; padding: 0 10px; border: 1px dashed var(--muted); border-radius: 4px; font-size: 13px; line-height: 22px; color: var(--muted); white-space: nowrap; }   /* date slot 担当者 fills in */
.sa-mock-letter.is-gen .sa-mock-gen { opacity: 1; }
.sa-mock-letter.is-gen .sa-mock-ln { opacity: 0; }
.sa-mock-rv { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--sa-hair); border-radius: 0 0 10px 10px; background: var(--surface); }
.sa-mock-rv-l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--navy); }
.sa-mock-rv-l .sa-mock-me { margin-left: 0; }
.sa-mock-win .sa-mock-acts { display: flex; gap: 8px; }
.sa-mock-letter.is-sent [data-state] { color: var(--st-nur); }   /* 4.75:1 on --sa-flat */
.sa-mock-letter.is-sent [data-state]::before { content: ""; width: 9px; height: 5px; margin: -3px 1px 0 0; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* ---- ワークフロー: flow with one branch ---------------------------------- */
.sa-mock-sim { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-mock-sim-l { font-size: 13px; font-weight: 700; color: var(--muted); }
.sa-mock-win .sa-mock-flow { --ln: #B7C2CE; --gap: 26px; display: flex; flex-direction: column; align-items: center; max-width: 600px; margin: 8px auto 0; }
.sa-mock-step, .sa-mock-split { position: relative; display: flex; justify-content: center; width: 100%; padding-top: var(--gap); }
.sa-mock-step:first-child { padding-top: 0; }
.sa-mock-step::before, .sa-mock-split::before, .sa-mock-step::after, .sa-mock-split::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: var(--gap); margin-left: -1px; background: var(--ln); }
.sa-mock-step::after, .sa-mock-split::after { background: var(--sa-acc); transform: scaleY(0); transform-origin: top; transition: transform 0.26s var(--ease-out); }
.sa-mock-step:first-child::before, .sa-mock-step:first-child::after { display: none; }
.sa-mock-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 210px; padding: 10px 18px 12px; border: 1px solid var(--sa-rule); border-radius: 10px; background: var(--white); text-align: center; }
.sa-mock-node::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--sa-acc), 0 6px 16px rgba(128, 84, 150, 0.18); opacity: 0; transition: opacity 0.26s var(--ease-out); pointer-events: none; }
.sa-mock-node b { font-size: 14px; line-height: 1.6; color: var(--navy); }
.sa-mock-node small { font-size: 13px; line-height: 1.7; color: var(--muted); }
.sa-mock-nk { padding: 0 9px; border-radius: 999px; background: var(--sa-flat); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--muted); }
.sa-mock-br { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; width: 100%; }
.sa-mock-br > li { position: relative; display: flex; align-items: flex-start; justify-content: center; padding-top: 36px; }
.sa-mock-br > li::before, .sa-mock-br > li::after { content: ""; position: absolute; top: 0; width: calc(50% + 13px); height: 36px; border: 0 solid var(--ln); border-top-width: 2px; box-sizing: border-box; }
.sa-mock-br > li::after { border-color: var(--sa-acc); opacity: 0; transition: opacity 0.26s var(--ease-out); }
.sa-mock-br > [data-b="yes"]::before, .sa-mock-br > [data-b="yes"]::after { left: calc(50% - 1px); border-left-width: 2px; }
.sa-mock-br > [data-b="no"]::before, .sa-mock-br > [data-b="no"]::after { right: calc(50% - 1px); border-right-width: 2px; }
.sa-mock-br .sa-mock-node { width: 100%; max-width: 250px; min-width: 0; }
.sa-mock-bk { position: absolute; top: 18px; left: 50%; z-index: 1; transform: translate(-50%, -50%); padding: 0 8px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--navy); white-space: nowrap; }
/* path on: steps light one after another (--o), then the chosen branch */
.sa-mock-flow[data-path] .sa-mock-step .sa-mock-node::after { opacity: 1; transition-delay: calc(var(--o) * 260ms); }
.sa-mock-flow[data-path] .sa-mock-step::after, .sa-mock-flow[data-path] .sa-mock-split::after { transform: scaleY(1); transition-delay: calc(var(--o) * 260ms - 130ms); }
.sa-mock-flow[data-path="yes"] [data-b="yes"]::after, .sa-mock-flow[data-path="no"] [data-b="no"]::after { opacity: 1; transition-delay: 900ms; }
.sa-mock-flow[data-path="yes"] [data-b="yes"] .sa-mock-node::after, .sa-mock-flow[data-path="no"] [data-b="no"] .sa-mock-node::after { opacity: 1; transition-delay: 1100ms; }
.sa-mock-flow[data-path="yes"] [data-b="no"] .sa-mock-node, .sa-mock-flow[data-path="no"] [data-b="yes"] .sa-mock-node { border-style: dashed; }

/* ---- パイプライン shows (first view, and each time its tab opens): the
   arrows flow in left to right, then the AI scores pop one by one ---------- */
@keyframes sa-mock-st-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes sa-mock-sc-in { from { opacity: 0; transform: scale(0.4); } }
html.sa-motion .sa-mock-demo.sa-seen .sa-mock-panel.is-active .sa-mock-st { animation: sa-mock-st-in 0.4s var(--ease-out) both; animation-delay: calc(260ms + var(--i) * 70ms); }
html.sa-motion .sa-mock-demo.sa-seen .sa-mock-panel.is-active .sa-mock-sc { animation: sa-mock-sc-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(800ms + var(--i) * 120ms); }
html.sa-motion .sa-mock-row.is-new { animation: sa-mock-pop 0.6s var(--ease-soft) both; }
@keyframes sa-mock-type { from { opacity: 0; transform: translateY(6px); } }
@keyframes sa-mock-blink { 50% { opacity: 0.25; } }
html.sa-motion .sa-mock-letter.is-type .sa-mock-ln { animation: sa-mock-type 0.5s var(--ease-out) both; animation-delay: calc(var(--l) * 260ms); }
html.sa-motion .sa-mock-letter.is-gen .sa-mock-gen i, html.sa-motion .sa-mock-letter.is-gen .sa-mock-gen b { animation: sa-mock-blink 0.9s ease-in-out infinite; }
.sa-mock-gen b:nth-of-type(2) { animation-delay: 0.12s !important; } .sa-mock-gen b:nth-of-type(3) { animation-delay: 0.24s !important; } .sa-mock-gen b:nth-of-type(4) { animation-delay: 0.36s !important; }
.sa-mock-gen i:nth-of-type(2) { animation-delay: 0.15s !important; }
.sa-mock-gen i:nth-of-type(3) { animation-delay: 0.3s !important; }
@media (prefers-reduced-motion: reduce) {
  .sa-mock *, .sa-mock *::before, .sa-mock *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 899px) {
  .sa-mock .sa-mock-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sa-mock .sa-mock-win .sa-mock-rail { display: none; }
  .sa-mock-sug, .sa-mock-mail { grid-template-columns: minmax(0, 1fr); }
  .sa-mock-drafts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .sa-mock .sa-mock-tabs { gap: 6px; }
  .sa-mock .sa-mock-tab { flex-direction: column; gap: 4px; min-height: 60px; padding: 8px 2px; font-size: 13px; }
  .sa-mock .sa-mock-panel { padding: 16px 14px 18px; }
  .sa-mock-opt, .sa-mock-tbl .sa-co { display: none; }
  .sa-mock-win .sa-mock-stages { --p: 18px; }
  .sa-mock-st { padding: 7px calc(var(--p) + 2px) 7px calc(var(--p) + 8px); }
  .sa-mock-st:first-child { padding-left: 10px; }
  .sa-mock-st b { font-size: 16px; }
  .sa-mock-tbl th, .sa-mock-tbl td { padding: 6px 7px; white-space: normal; }
  .sa-mock-nx, .sa-mock-tbl .sa-mock-btn--row { white-space: normal; text-align: left; }
  .sa-mock-draft { gap: 8px; padding: 8px 10px; }
  .sa-mock-draft .sa-co { display: none; }
  .sa-mock-sim-l { flex-basis: 100%; }
  .sa-mock-br { gap: 0 12px; }
  .sa-mock-br > li::before, .sa-mock-br > li::after { width: calc(50% + 7px); }
  .sa-mock-node { min-width: 0; width: 100%; padding: 9px 10px 11px; }
  .sa-mock-step .sa-mock-node { max-width: 260px; }
}
.sa-mock-draft[aria-pressed="true"] > .sa-mock-dot { display: none; }
.sa-mock-letter.is-edit [data-edit] { background: var(--sa-tint); }