/* #how (v7) · S4 「打字讲你的策略，AI 帮你测。」 Dark ground, phone chat demo (.ds-chat). Every rule scoped to #how.
   Beats from sec-how.js on #how-demo[data-beat]: 0 reset · 1 typing · 2 testing · 3 result. No attribute = final state
   (no JS, reduced motion, or after the run). Everything hidden before it plays hangs on html.ds-motion. */

#how .ds-h2 > .l { display: block; }

/* ---------- the phone ---------- */
#how .how-chat { max-width: 440px; margin: 0 auto; border-radius: 28px; }
#how .ds-chat-bar { gap: var(--ds-s2); padding: var(--ds-s2) var(--ds-s2) var(--ds-s2) var(--ds-s4); min-height: 60px; }
#how .ds-chat-who b { font-size: 16px; }
#how .how-replay { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ds-mute-d); cursor: pointer; transition: background var(--ds-t1), color var(--ds-t1); }
#how .how-replay[hidden] { display: none; }
#how .how-replay svg { width: 20px; height: 20px; }
#how .how-replay:hover { background: var(--ds-ink-3); color: var(--ds-text-d); }
#how .how-replay:focus-visible { outline: 2px solid var(--ds-text-d); outline-offset: -2px; }
#how .ds-tag { margin-left: auto; }
#how .ds-chat-body { gap: var(--ds-s4); padding: var(--ds-s5) var(--ds-s4); }

/* ① the message */
#how .how-row--user { display: grid; justify-items: end; gap: var(--ds-s1); }
#how .how-b-user { max-width: 92%; box-sizing: border-box; }
#how .how-typed { white-space: pre-line; }
#how .how-typed .ds-nw { display: block; }               /* 3 lines, same breaks as the typed \n version */
#how .how-gloss { margin: 0; font: 400 var(--ds-fs-fine)/1.5 var(--ds-zh); color: var(--ds-mute-d); }
#how .ds-caret { display: none; }

/* ② the test run */
#how .how-b-run { width: 92%; max-width: none; padding: var(--ds-s4); }
#how .how-pl { margin: 0 0 var(--ds-s2); gap: var(--ds-s4); color: var(--ds-text-d2); }
#how .how-pl b { color: var(--ds-text-d); }
#how .how-pl-run { display: none; }
#how .how-meta { margin: var(--ds-s2) 0 0; font: 400 var(--ds-fs-fine)/1.5 var(--ds-zh); color: var(--ds-mute-d); }

/* ③ the verdict */
#how .how-b-res { width: 92%; max-width: none; padding: var(--ds-s4) var(--ds-s4) var(--ds-s5); --ds-ground: var(--ds-ink-3); }
#how .how-res-k { margin: 0 0 var(--ds-s4); font: 700 var(--ds-fs-fine)/1.4 var(--ds-zh); color: var(--ds-mute-d); }
#how .how-stamp { margin-left: var(--ds-s1); }
#how .how-why { margin: var(--ds-s5) 0 0; font: 700 var(--ds-fs-body)/1.5 var(--ds-zh); color: var(--ds-text-d); }

#how .how-fine { max-width: 440px; margin: var(--ds-s4) auto 0; text-align: center; }
#how .how-video { max-width: 440px; margin: var(--ds-s5) auto 0; }

/* ---------- CTA ---------- */
#how .ds-cta { max-width: 440px; margin: 0 auto; width: 100%; }          /* the split gap (40) sits above it */
#how .how-line { margin: 0 0 var(--ds-s2); text-align: center; font: 700 var(--ds-fs-body)/1.5 var(--ds-zh); color: var(--ds-text-d); }

/* ---------- beats (motion only) ---------- */
.ds-motion #how [data-beat] .how-b-run,
.ds-motion #how [data-beat] .how-b-res,
.ds-motion #how [data-beat] .how-gloss { opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity var(--ds-t2) var(--ds-ease), transform var(--ds-t2) var(--ds-ease), visibility 0s linear var(--ds-t2); }
.ds-motion #how [data-beat="2"] .how-b-run, .ds-motion #how [data-beat="3"] .how-b-run,
.ds-motion #how [data-beat="2"] .how-gloss, .ds-motion #how [data-beat="3"] .how-gloss,
.ds-motion #how [data-beat="3"] .how-b-res { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ds-motion #how [data-beat="0"] .ds-caret, .ds-motion #how [data-beat="1"] .ds-caret { display: inline-block; }
.ds-motion #how [data-beat="0"] .how-pl-run, .ds-motion #how [data-beat="1"] .how-pl-run, .ds-motion #how [data-beat="2"] .how-pl-run { display: inline; }
.ds-motion #how [data-beat="0"] .how-pl-done, .ds-motion #how [data-beat="1"] .how-pl-done, .ds-motion #how [data-beat="2"] .how-pl-done { display: none; }

@media (max-width: 360px) {
  #how .ds-chat-body { padding: var(--ds-s4) var(--ds-s2); }
  #how .how-b-user, #how .how-b-run, #how .how-b-res { max-width: 96%; width: auto; }
  #how .how-b-run, #how .how-b-res { width: 96%; }
}
@media (min-width: 960px) {
  /* head + action left, phone right (spans both rows) */
  #how .how-x { grid-template-columns: 5fr 7fr; grid-template-rows: auto auto; column-gap: var(--ds-s9); row-gap: 0; align-items: start; }
  #how .ds-split > .ds-head { position: static; grid-column: 1; grid-row: 1; align-self: end; }
  #how .how-main { grid-column: 2; grid-row: 1 / span 2; max-width: 520px; width: 100%; justify-self: end; }
  #how .how-cta { grid-column: 1; grid-row: 2; align-self: start; max-width: 400px; margin: var(--ds-s6) 0 0; justify-items: stretch; }
  #how .how-cta .btn { width: 100%; min-width: 0; }
  #how .how-line { text-align: left; }
  #how .how-chat, #how .how-fine, #how .how-video { max-width: none; }
  #how .ds-chat-body { padding: var(--ds-s6) var(--ds-s5); }
}

/* ---------- v9 mobile polish (12 Nov) ---------- */
#how .ds-tag { font-size: 13px; }
@media (max-width: 360px) {
  #how .ds-chat-body { padding: var(--ds-s4) var(--ds-s3); }   /* same inset left and right: the user bubble no longer hugs the frame */
  #how .ds-chat-bar { padding-left: var(--ds-s3); }
}