/* tl-guide.css：首页「说说你的情况」对话框组件（A 档：预设问题库匹配）
   只用 ui.css 的令牌（--bg --card --text --sub --mute --accent --line …），浅色、深色、夜金跟着站点主题走。
   所有类名以 tlg- 开头，可以放进首页首屏、落地页侧栏、课末卡，不影响宿主页面。
   变体：.tlg--hero（首屏大框）、.tlg--panel（页面中段一块）、.tlg--compact（落地页侧栏，按钮少、卡片窄） */

.tlg{--tlg-r:var(--r-lg,16px);--tlg-pad:20px;position:relative;min-width:0;max-width:100%;color:var(--text);font-family:var(--font);text-align:left}
.tlg *{box-sizing:border-box}
.tlg a{color:inherit}
.tlg .ui-ic{width:16px;height:16px;flex:none;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 输入框 */
.tlg-box{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:var(--tlg-r);box-shadow:var(--shadow);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.tlg-box:focus-within{border-color:var(--accent-line);box-shadow:var(--shadow-sel)}
.tlg-ask{display:flex;align-items:flex-end;gap:10px;padding:14px 14px 14px 18px}
.tlg-ask textarea{flex:1;min-height:28px;max-height:160px;resize:none;border:0;outline:0;background:transparent;color:var(--text);font:400 17px/1.6 var(--font);padding:4px 0}
.tlg-ask textarea::placeholder{color:var(--mute)}
.ui .tlg-ask textarea:focus-visible{outline:none}   /* 外框 .tlg-box:focus-within 已经亮边，组件库的通用焦点圈在框里再画一圈就重了 */
.tlg-send{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 16px;border:0;border-radius:var(--r-md,10px);background:var(--fill);color:var(--on-fill);font:600 var(--fs-ui,15px)/1 var(--font);cursor:pointer;box-shadow:inset 0 0 0 1px var(--fill-edge)}
.tlg-send:hover{background:var(--fill-hover)}
.tlg-send:disabled{opacity:.45;cursor:default}
.tlg-send .ui-ic{width:17px;height:17px}
.tlg-hint{display:flex;align-items:center;gap:8px;padding:0 18px 12px;color:var(--mute);font-size:var(--fs-small,13px)}
.tlg-hint b{font-weight:400;color:var(--sub)}

/* 边打字边出预览（门面 P-04 U-11）：输入框下面滑出这条路线的前 3 节；外框用 grid 行高 0fr→1fr 撑开，卡片从左到右错开 60ms 上浮淡入。
   时长、缓动只用动效令牌（--dur-3、--ease），「减少动态效果」时令牌归零、卡片不做动画，直接出现 */
.tlg-pv{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows var(--dur-3) var(--ease),margin-top var(--dur-3) var(--ease),opacity var(--dur-2)}
.tlg-pv.on{grid-template-rows:1fr;margin-top:12px;opacity:1}
.tlg-pv-in{min-height:0;overflow:hidden}
.tlg-pv-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;color:var(--sub);font-size:var(--fs-small,13px);font-weight:600}
.tlg-pv-t em{margin-left:8px;font-style:normal;font-weight:400;color:var(--free,var(--ok))}
.tlg-pv-go{display:none;align-items:center;gap:4px;min-height:32px;padding:0 2px;border:0;background:none;color:var(--accent);font:600 var(--fs-small,13px)/1 var(--font);cursor:pointer;white-space:nowrap}
.tlg-pv-go:hover{color:var(--accent-deep)}
.tlg-pv-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.tlg-pv-l a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;height:100%;min-height:56px;padding:8px 12px;border:1px solid var(--line2);border-radius:var(--r-md,10px);background:var(--card);text-decoration:none;transition:border-color var(--dur-1),background var(--dur-1)}
.tlg-pv-l a:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.tlg-pv-l li:first-child .tlg-n{background:var(--fill);color:var(--on-fill)}
.tlg-pv-l .tlg-st b{font-size:var(--fs-aux,14px);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlg-pv-l .tlg-st small{margin-top:1px;font-size:var(--fs-tiny,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlg-pv-x{margin:0;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r-md,10px);background:var(--card);color:var(--sub);font-size:var(--fs-aux,14px);line-height:1.6}
@media (prefers-reduced-motion:no-preference){
  .tlg-pv-l li{animation:tlg-in var(--dur-3) var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
}
@keyframes tlg-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 常见问题按钮 */
.tlg-chips-wrap{margin-top:14px}
.tlg-chips-t{margin:0 0 8px;color:var(--sub);font-size:var(--fs-small,13px)}
.tlg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tlg-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--line2);border-radius:var(--r-pill,999px);background:var(--card);color:var(--text);font:400 var(--fs-aux,14px)/1.3 var(--font);cursor:pointer;text-align:left;transition:border-color var(--dur-1),background var(--dur-1)}
.tlg-chip:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.tlg-chip[aria-pressed="true"]{border-color:var(--accent-line);background:var(--accent-soft2);color:var(--accent-deep)}
.tlg-chip--more{color:var(--accent);border-style:dashed}
.tlg-more{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r,16px);background:var(--bg2)}
.tlg-more[hidden]{display:none}
.tlg-more h4{margin:12px 0 8px;font-size:var(--fs-small,13px);font-weight:600;letter-spacing:var(--ls-kicker);color:var(--sub)}
.tlg-more h4:first-child{margin-top:0}
.tlg-more .tlg-chip{min-height:36px;padding:6px 12px;font-size:var(--fs-aux,14px)}

/* 对话 */
.tlg-thread{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.tlg-thread:empty{display:none}
.tlg-me{align-self:flex-end;max-width:85%;padding:10px 14px;border-radius:var(--r,16px) var(--r,16px) var(--r-xs,6px) var(--r,16px);background:var(--accent-soft2);color:var(--text);font-size:var(--fs-ui,15px);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.tlg-typing{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:var(--fs-small,13px)}
.tlg-dots{display:inline-flex;gap:4px}
.tlg-dots i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:tlg-b 1s infinite ease-in-out}
.tlg-dots i:nth-child(2){animation-delay:.15s}.tlg-dots i:nth-child(3){animation-delay:.3s}
@keyframes tlg-b{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.tlg-dots i{animation:none}}

/* 回答卡 */
.tlg-ans{border:1px solid var(--line2);border-radius:var(--tlg-r);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.tlg-ans-hd{display:flex;gap:12px;align-items:flex-start;padding:var(--tlg-pad) var(--tlg-pad) 4px}
.tlg-ava{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent-soft) center/cover no-repeat;border:1px solid var(--accent-soft2)}
.tlg-say{margin:0;font-size:var(--fs-body,16px);line-height:1.75;color:var(--text)}
.tlg-say small{display:block;margin-bottom:2px;color:var(--accent);font-size:var(--fs-small,13px);font-weight:600;letter-spacing:var(--ls-kicker)}
.tlg-guard{display:flex;gap:10px;margin:12px var(--tlg-pad) 0;padding:12px 14px;border:1px solid var(--warn-line);border-radius:var(--r-md,10px);background:var(--warn-soft);color:var(--text);font-size:var(--fs-ui,15px);line-height:1.7}
.tlg-guard .ui-ic{color:var(--warn);width:18px;height:18px;margin-top:3px}
.tlg-sec{padding:14px var(--tlg-pad) 0}
.tlg-sec-t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;font-size:var(--fs-small,13px);font-weight:600;color:var(--sub);letter-spacing:var(--ls-kicker)}
.tlg-sec-t em{font-style:normal;font-weight:400;color:var(--free,var(--ok))}
.tlg-steps{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r,16px);overflow:hidden}
.tlg-steps li+li{border-top:1px solid var(--line)}
.tlg-steps a{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:12px 14px;text-decoration:none;transition:background var(--dur-1)}
.tlg-steps a:hover{background:var(--accent-soft)}
.tlg-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-sm,10px);background:var(--bg2);color:var(--sub);font:600 var(--fs-small,13px)/1 var(--font-mono)}
.tlg-steps li:first-child .tlg-n{background:var(--fill);color:var(--on-fill)}
.tlg-st b{display:block;font-weight:600;font-size:var(--fs-ui,15px);line-height:1.45}
.tlg-st small{display:block;margin-top:2px;color:var(--mute);font-size:var(--fs-small,13px)}
.tlg-go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:var(--fs-small,13px);font-weight:600;white-space:nowrap}
.tlg-extra{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:var(--fs-aux,14px)}
.tlg-extra a{display:inline-flex;align-items:center;gap:6px;color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:1px}
.tlg-extra a:hover{color:var(--accent);border-color:var(--accent-line)}
.tlg-extra .k{flex:none;color:var(--mute);font-size:var(--fs-tiny,12px)}

/* 第一步的三块：免费课节（上面的 .tlg-steps）、文章、心法；小标题同一种写法 */
.tlg-rd-t{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:var(--sub);font-size:var(--fs-small,13px);font-weight:600}
.tlg-rd-t .ui-ic{width:15px;height:15px;color:var(--accent)}
.tlg-reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}
.tlg-rd{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r,16px);background:var(--bg2)}
.tlg-rd ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tlg-rd a{display:block;color:var(--text);font-size:var(--fs-aux,14px);line-height:1.5;text-decoration:none}
.tlg-rd a:hover{color:var(--accent)}
.tlg-rd li{position:relative;padding-left:12px}
.tlg-rd li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--line3)}
.tlg-courses{display:grid;gap:8px}

.tlg-course{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r,16px);background:var(--bg2);text-decoration:none}
.tlg-course:hover{border-color:var(--line3)}
.tlg-course .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-sm,10px);background:var(--accent-soft);color:var(--accent)}
.tlg-course b{display:block;font-size:var(--fs-ui,15px)}
.tlg-course small{display:block;margin-top:2px;color:var(--sub);font-size:var(--fs-small,13px);line-height:1.5}
.tlg-course .go{margin-left:auto;color:var(--mute)}

.tlg-plan{display:grid;gap:10px;padding:14px;border:1px solid var(--accent-line);border-radius:var(--r,16px);background:linear-gradient(180deg,var(--accent-soft),transparent 70%)}
.tlg-plan-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.tlg-plan-top b{font-size:var(--fs-body,16px)}
.tlg-plan-top .sub{color:var(--sub);font-size:var(--fs-small,13px)}
.tlg-price{margin-left:auto;font:600 22px/1 var(--font-display);color:var(--accent-big);font-variant-numeric:tabular-nums}
.tlg-price small{margin-left:3px;font-size:var(--fs-small,13px);font-weight:400;color:var(--sub)}
.tlg-plan p{margin:0;color:var(--sub);font-size:var(--fs-aux,14px);line-height:1.7}
.tlg-plan .alt{padding-top:8px;border-top:1px dashed var(--line2)}
.tlg-plan .alt b{color:var(--text);font-weight:600}
.tlg-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tlg-tier{padding:12px;border:1px solid var(--line2);border-radius:var(--r-md,10px);background:var(--card);text-decoration:none}
.tlg-tier.on{border-color:var(--accent-line);box-shadow:var(--shadow-sel)}
.tlg-tier b{display:block;font-size:var(--fs-aux,14px)}
.tlg-tier .p{display:block;margin:6px 0 4px;font:600 20px/1 var(--font-display);color:var(--accent-big)}
.tlg-tier small{display:block;color:var(--sub);font-size:var(--fs-small,13px);line-height:1.5}

.tlg-acts{display:flex;flex-wrap:wrap;gap:10px;padding:16px var(--tlg-pad) 0}
.tlg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h-btn,48px);padding:0 18px;border:1px solid transparent;border-radius:var(--r-md,10px);font:600 var(--fs-ui,15px)/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background var(--dur-2),border-color var(--dur-2)}
.tlg-btn--fill{background:var(--fill);color:var(--on-fill)!important;box-shadow:inset 0 0 0 1px var(--fill-edge)}
.tlg-btn--fill:hover{background:var(--fill-hover)}
.tlg-btn--line{border-color:var(--accent-line);color:var(--accent)!important;background:transparent}
.tlg-btn--line:hover{background:var(--accent-soft)}
.tlg-btn--ghost{color:var(--sub)!important;padding:0 6px}
.tlg-also{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px var(--tlg-pad) 0;font-size:var(--fs-small,13px);color:var(--sub)}
.tlg-also .tlg-chip{min-height:34px;padding:5px 12px;font-size:var(--fs-small,13px)}
.tlg-foot{margin:16px 0 0;padding:12px var(--tlg-pad);border-top:1px solid var(--line);color:var(--mute);font-size:var(--fs-tiny,12px);line-height:1.6;background:var(--bg2)}

/* 变体 */
.tlg--hero .tlg-ask textarea{font-size:18px}
.tlg--compact{--tlg-pad:16px}
.tlg--compact .tlg-ask{padding:10px 10px 10px 14px}
.tlg--compact .tlg-ask textarea{font-size:var(--fs-body,16px)}
.tlg--compact .tlg-tiers{grid-template-columns:1fr}

@media (max-width:640px){
  .tlg{--tlg-pad:16px}
  .tlg-ask{padding:10px 10px 10px 14px}
  .tlg-ask textarea{font-size:var(--fs-body,16px)!important}
  .tlg-send span{display:none}
  .tlg-chips--scroll{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .tlg-chips--scroll::-webkit-scrollbar{display:none}
  .tlg-chips--scroll li{flex:none}
  .tlg-chips--scroll .tlg-chip{white-space:nowrap;scroll-snap-align:start}
  .tlg-pv-go{display:inline-flex;position:relative}   /* 手机上发送按钮只剩图标，「看完整路线」写在预览标题右边；::after 把命中区撑到 44 */
  .tlg-pv-go::after{content:"";position:absolute;left:-8px;right:-8px;top:-6px;bottom:-6px}
  .tlg-pv-l{grid-template-columns:minmax(0,1fr);gap:6px}
  .tlg-pv-l .tlg-st b{-webkit-line-clamp:1}
  .tlg-steps a{grid-template-columns:26px 1fr;padding:12px}
  .tlg-steps .tlg-go{display:none}
  .tlg-tiers{grid-template-columns:1fr}
  .tlg-price{margin-left:0}
  .tlg-acts .tlg-btn{flex:1 1 100%}
  .tlg-acts .tlg-btn--ghost{flex:0 0 auto}
}