/* 🏭 ประเมินก่อนเสนอราคา — ใช้โทเคนสีของ site.css (สว่าง/มืดตามเว็บ) · แตะได้ ≥ 44px · ตัวอักษรมือถือ ≥ 16px */
.asw{max-width:760px;margin:0 auto;padding-block:20px 120px;display:grid;gap:16px}
.asw .as-load{color:var(--soft)}
.asw .kick{color:var(--accent);font-weight:600;font-size:.92rem}
.as-hero{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:14px;padding:24px;display:grid;gap:12px;box-shadow:var(--shadow)}
.as-hero h1{font-size:clamp(1.45rem,4vw,2rem);line-height:1.3;margin:0;color:var(--title);text-wrap:balance}
.as-hero p{margin:0;color:var(--soft)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ticks li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:8px}
.fine{font-size:.86rem;color:var(--faint)}
.as-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.as-top .cnt{font-size:.88rem;color:var(--soft);border:1px solid var(--line);border-radius:8px;padding:2px 10px}
.bar{height:6px;background:var(--band);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);border-radius:99px;transition:width .2s}
.as-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px}
.as-card h2{margin:0;font-size:1.3rem;color:var(--title)}
.as-card h3{margin:8px 0 0;font-size:1.05rem;color:var(--title)}
.as-card .sub,.as-card .hint{margin:0;color:var(--soft)}
.as-card .hint{font-size:.9rem}
.as-card.msg{border-left:3px solid var(--orange)}
.q{border:0;margin:0;padding:0;display:grid;gap:8px}
.q legend{font-weight:600;margin-bottom:6px;color:var(--title)}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;min-height:52px;width:100%;text-align:left;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer}
.opt .mk{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid var(--soft)}
.opt[data-m="1"] .mk{border-radius:6px}
.opt.on{border-color:var(--orange);background:var(--accent-soft)}
.opt.on .mk{border-color:var(--orange);background:var(--orange);box-shadow:inset 0 0 0 3px var(--paper)}
.opt:focus-visible,.btn:focus-visible,.lnk:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.opt.sm{min-height:44px;font-size:14px;padding:6px 10px;width:auto}
.num{display:grid;gap:4px;font-weight:500}
.num input,.num textarea{font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);color:var(--ink);width:100%}
.flag{display:flex;gap:10px;align-items:flex-start;min-height:44px}
.flag input,.form .c input{width:22px;height:22px;flex:0 0 22px;margin-top:2px}
.as-nav{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.as-nav.in{position:static;background:none;padding:4px 0 0}
.as-nav .btn{min-height:48px}
.route{border-left:4px solid var(--orange);background:var(--band);border-radius:10px;padding:14px 16px;display:grid;gap:6px}
.route.wait{border-left-color:var(--soft)}
.route b{font-size:1.05rem;color:var(--title)}
.route p{margin:0;color:var(--soft)}
.route .note{font-size:.93rem}
.pill{justify-self:start;font-size:.82rem;background:var(--hold-bg);color:var(--hold);border-radius:99px;padding:2px 10px;font-weight:600}
.prep{margin:0;padding-left:1.4em;display:grid;gap:8px}
.prep small{display:block;color:var(--soft)}
.drop{border:2px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--soft)}
.drop.over,.slot.over{border-color:var(--orange);background:var(--accent-soft)}
.slots{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.slot{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:6px}
.slot .sh{display:flex;justify-content:space-between;gap:8px;align-items:center}
.slot .st{font-size:.82rem;border-radius:99px;padding:1px 9px;background:var(--hold-bg);color:var(--hold);white-space:nowrap}
.slot.ok .st{background:var(--ok-bg);color:var(--ok)}
.slot small{color:var(--soft)}
.fl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fl li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.92rem}
.fl .fn{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.fl .fz{color:var(--faint);font-size:.85rem}
.mv{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.up{display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{min-height:44px;padding:8px 14px;font-size:15px}
.lnk{font:inherit;font-size:.92rem;background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px}
.lnk.del{color:var(--no)}
.err{color:var(--no);margin:0;min-height:1.2em}
.err.top{background:var(--no-bg);padding:10px 14px;border-radius:10px}
.big{margin:0;color:var(--soft)} .big b{font-size:2rem;color:var(--accent)}
.warn{background:var(--hold-bg);color:var(--hold);border-radius:10px;padding:10px 14px;margin:0}
.okm{background:var(--ok-bg);color:var(--ok);border-radius:10px;padding:10px 14px;margin:0}
.cpy{display:flex;gap:8px;flex-wrap:wrap}
.cpy input{flex:1 1 240px;min-width:0;font:inherit;font-size:15px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);color:var(--ink)}
.as-hero.done{border-top-color:var(--ok)}
@media (max-width:560px){.form .row{grid-template-columns:1fr}.as-card,.as-hero{padding:16px}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
/* ปุ่มแชตลอยทับปุ่ม "ถัดไป" บนมือถือ → ซ่อนในหน้าประเมิน (ปุ่ม LINE มีในหน้าสุดท้ายแล้ว) */
body:has(.asw) .float{display:none}
.as-nav.in{flex-wrap:wrap}
.as-nav.in .btn{flex:1 1 auto;white-space:nowrap;justify-content:center}
.asw>*{min-width:0}
.as-hero p,.as-card p{overflow-wrap:anywhere}
.route .src{font-size:.86rem;color:var(--soft);overflow-wrap:anywhere}
.route .src a{color:var(--accent)}

/* 🧩 การ์ดคำถาม · แผงทำไมเราถาม · สรุปคำตอบ — แบบ ChatGPT รอบ 2 (outputs/fdt-ux-design-2 · Q-single/Q-multi/Q-scale/Q-summary · 27 ต.ค. 69)
   ค่าตามสเปก CLAUDE-HANDOFF-TH.md · ข้อความเล็กในแบบ 10–11px ขยายเป็น 12px (กติกา owner) · โทเคนสีอยู่ใน site.css (.asw) */
.asw.wide{max-width:1160px;width:100%;display:block;color:var(--x-ink)}
.asw.wide>*+*{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.asw .crumb{font-size:12px;color:var(--x-soft);display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.asw .crumb a{color:inherit;text-decoration:none}.asw .crumb a:hover{text-decoration:underline}
.asw .eyebrow{color:var(--x-link);font-size:12px;font-weight:500;display:flex;gap:10px;align-items:center;margin-bottom:10px}
.asw .eyebrow::before{content:"";width:24px;height:2px;background:var(--orange)}
.asw .question-title{margin-bottom:25px}
.asw .question-title h1{font-size:36px;line-height:1.5;font-weight:600;letter-spacing:-.8px;color:var(--x-ink);margin:0}
.asw .lead{color:var(--x-soft);font-size:14px;line-height:1.8;margin:9px 0 0;max-width:720px}
.assessment-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.assessment-main{min-width:0}
.asw .progress{margin:5px 0 28px}
.progress-copy{display:flex;justify-content:space-between;gap:12px;color:var(--x-soft);font-size:12px;margin-bottom:10px}
.progress-copy b{font-weight:500;color:var(--x-ink)}
.asw .progress-track{height:6px;background:var(--x-line);border-radius:20px;overflow:hidden}
.asw .progress-track i{display:block;background:var(--orange);height:100%;border-radius:20px}
.qg{border:0;margin:0;padding:0;min-width:0}
.qg+.qg,.qg+.qx,.qx+.qg{margin-top:28px}
.qg-h{font-size:17px;font-weight:500;color:var(--x-ink);margin:0 0 14px;padding:0;line-height:1.6}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.option{position:relative;cursor:pointer;display:flex;align-items:center;gap:16px;min-height:130px;border:1px solid var(--x-line);border-radius:18px;background:var(--x-surface);color:var(--x-ink);padding:20px 38px 20px 20px;box-shadow:var(--x-shadow);min-width:0}
.option:hover{background:var(--x-band);border-color:var(--x-soft)}
.option.on{background:var(--x-sel);border:2px solid var(--orange);padding:19px 37px 19px 19px}
.option:has(input:focus-visible){outline:3px solid var(--x-ink);outline-offset:4px}
.option input{position:absolute;width:22px;height:22px;opacity:0;right:14px;top:16px;margin:0}
.choice-mark{position:absolute;right:14px;top:16px;width:20px;height:20px;border:1.5px solid var(--x-soft);border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--font);color:#062541}
.option.multi .choice-mark{border-radius:5px}
.option.on .choice-mark{background:var(--orange);border-color:var(--orange)}
.option.on .choice-mark::after{content:"✓"}
.option .icon{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.option-title{font-size:15px;font-weight:500;line-height:1.75;min-width:0;overflow-wrap:anywhere}
.scale-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.scale-options[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.scale-options .option{flex-direction:column;min-height:220px;justify-content:center;gap:18px;text-align:center;padding:32px 14px 20px}
.scale-options .option.on{padding:31px 13px 19px}
.scale-options .icon{width:90px;height:90px}
.scale-options .option-title{font-size:17px}
.scale-caption{display:flex;justify-content:space-between;margin-top:14px;color:var(--x-soft);font-size:12px}
.help-panel{margin-top:12px;padding:25px 22px;background:var(--x-band);border:1px solid var(--x-line);border-radius:20px;position:sticky;top:96px;color:var(--x-ink)}
.help-panel>img{width:72px;height:72px;object-fit:contain;margin-bottom:18px;display:block}
.help-panel h2{font-size:17px;font-weight:500;line-height:1.6;margin:0;color:var(--x-ink)}
.help-panel p{font-size:13px;line-height:1.8;color:var(--x-soft);margin:8px 0 0}
.help-panel .boundary{margin-top:24px;padding-top:18px;border-top:1px solid var(--x-line);font-size:12px;line-height:1.9}
.skip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px;font-size:12px;color:var(--x-soft)}
.skip button{font:inherit;font-size:12px;min-height:44px;border:0;padding:4px 8px;color:var(--x-link);text-decoration:underline;background:transparent;cursor:pointer}
.qx{display:grid;gap:14px}
.field-label,.qx .num{font-size:13px;font-weight:500;display:grid;gap:8px;color:var(--x-ink)}
.qx .num input{font:inherit;font-size:16px;border:1px solid var(--x-line);border-radius:12px;padding:10px 14px;background:var(--x-surface);color:var(--x-ink);width:100%;max-width:260px;min-height:48px}
.qx .flag{display:flex;gap:12px;align-items:center;min-height:56px;padding:12px 16px;border:1px solid var(--x-line);border-radius:16px;background:var(--x-surface);font-size:14px;cursor:pointer}
.qx .flag input{width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--orange)}
.qx textarea{font:inherit;font-size:16px;line-height:1.9;border:1px solid var(--x-line);border-radius:16px;padding:16px 18px;background:var(--x-surface);color:var(--x-ink);width:100%;min-height:104px;resize:vertical}
.asw .actions{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--x-line);padding-top:22px;margin-top:25px}
.actions .action-note{font-size:12px;color:var(--x-soft)}
.actions-right{display:flex;align-items:center;gap:16px}
.asw .primary{font:inherit;font-size:15px;background:var(--orange);color:#062541;border:1px solid var(--orange);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;border-radius:12px;padding:10px 22px;cursor:pointer}
.asw .primary:hover{background:#FFA13C}
.asw .ghost{font:inherit;font-size:15px;background:var(--x-surface);color:var(--x-ink);border:1px solid var(--x-line);border-radius:12px;padding:10px 20px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.asw .ghost:hover{background:var(--x-band)}
.asw .primary:focus-visible,.asw .ghost:focus-visible,.skip button:focus-visible,.edit-button:focus-visible{outline:3px solid var(--x-ink);outline-offset:4px}
.qfb{font-size:12px;color:var(--x-link);margin-top:12px;min-height:22px}
/* สรุปคำตอบ */
.summary-head{display:flex;gap:16px;align-items:center;padding:18px 22px;border:1px solid var(--x-line);border-radius:18px;background:var(--x-band);margin:24px 0}
.summary-head .icon{width:56px;height:56px;object-fit:contain;flex-shrink:0}
.summary-head h2{font-size:19px;font-weight:500;line-height:1.6;margin:0;color:var(--x-ink)}
.summary-head p{font-size:12px;color:var(--x-soft);margin:0}
.answer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.answer{display:flex;align-items:start;gap:12px;border:1px solid var(--x-line);border-radius:16px;padding:18px;background:var(--x-surface);min-width:0}
.answer .icon{width:48px;height:48px;object-fit:contain;background:var(--x-band);border-radius:10px;flex-shrink:0}
.answer-content{flex:1;min-width:0}
.answer-label{font-size:12px;color:var(--x-soft);margin:0 0 4px}
.answer-value{font-size:13px;font-weight:500;line-height:1.8;margin:0;overflow-wrap:anywhere}
.answer-value.none{color:var(--x-soft);font-weight:400}
.edit-button{font:inherit;min-height:44px;padding:3px 6px;border:0;background:transparent;color:var(--x-link);font-size:12px;cursor:pointer}
.summary-route{margin-top:22px;display:grid;gap:12px}
.summary-route h2{font-size:19px;font-weight:500;margin:0;color:var(--x-ink)}
.summary-next{margin-top:22px;padding:20px 24px;background:var(--x-next);border-radius:18px;color:#fff;display:flex;align-items:center;gap:16px}
.summary-next h2{font-size:19px;font-weight:500;line-height:1.6;margin:0;color:#fff}
.summary-next p{font-size:12px;color:#DEE7F0;margin:5px 0 0}
.summary-next .icon{width:64px;height:64px;object-fit:contain;background:#F3F6F9;border-radius:12px;flex-shrink:0}
.upload-page .question-title{margin-bottom:0}
.upload-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--x-line);padding-top:22px;margin-top:24px}
.upload-actions p{font-size:12px;color:var(--x-soft);margin:0}
@media (prefers-color-scheme:dark){.option .icon,.help-panel>img,.answer .icon,.summary-head .icon{background:#F3F6F9;border-radius:12px}}
@media (max-width:1250px) and (min-width:701px){.assessment-grid{gap:32px;grid-template-columns:minmax(0,1fr) 240px}
  .option{gap:12px;padding-left:14px}.option.on{padding-left:13px}.option .icon{width:54px;height:54px}.option-title{font-size:13px}
  .scale-options[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .asw .crumb{gap:8px;margin-bottom:20px}
  .asw .question-title h1{font-size:28px;letter-spacing:-.5px}
  .asw .lead{font-size:12px;line-height:1.95;margin-top:10px}
  .assessment-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .asw .progress{margin:0 0 25px}
  .asw .question-title{margin-bottom:21px}
  .options{gap:12px}
  .option{flex-direction:column;align-items:start;gap:9px;min-height:166px;padding:18px 12px 14px;border-radius:16px}
  .option.on{padding:17px 11px 13px}
  .option .icon{width:56px;height:56px}
  .option-title{font-size:13px;line-height:1.8}
  .choice-mark{right:12px;top:14px;width:19px;height:19px}
  .options.long{grid-template-columns:1fr}
  .options.long .option{flex-direction:row;align-items:center;gap:16px;min-height:98px;padding:16px 40px 16px 16px}
  .options.long .option.on{padding:15px 39px 15px 15px}
  .options.long .option-title{font-size:14px}
  .skip{gap:3px;margin-top:16px}
  .help-panel{order:2;position:static;margin:22px 0 0;padding:18px;width:100%;display:grid;grid-template-columns:42px 1fr;gap:6px 12px;border-radius:16px}
  .help-panel>img{grid-row:1/3;width:42px;height:42px;margin:0}
  .help-panel h2{font-size:14px}
  .help-panel p{font-size:12px;margin-top:0}
  .help-panel .boundary{grid-column:1/-1;margin-top:10px;padding-top:12px}
  .asw .actions,.upload-actions{position:sticky;bottom:0;z-index:5;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));margin-top:22px;background:var(--bg);box-shadow:0 -10px 20px var(--bg)}
  .asw .actions .ghost{font-size:13px;padding:10px 12px}
  .actions-right{flex:1;justify-content:end;gap:8px}
  .actions-right .primary{flex:1;font-size:13px;max-width:230px}
  .action-note,.upload-actions>div{display:none}
  .upload-actions .primary{flex:1;font-size:13px}
  .scale-options,.scale-options[data-n="4"]{grid-template-columns:1fr;gap:14px}
  .scale-options .option{flex-direction:row;min-height:112px;padding:16px;gap:20px;justify-content:start;text-align:left}
  .scale-options .option.on{padding:15px}
  .scale-options .icon{width:70px;height:70px}
  .summary-head{padding:15px;gap:12px;margin:20px 0}
  .summary-head .icon{width:48px;height:48px}
  .summary-head h2{font-size:17px}
  .answer-list{grid-template-columns:1fr;gap:12px}
  .answer{padding:15px;gap:11px}
  .answer-value{font-size:12px}
  .summary-next{padding:20px;align-items:start;gap:12px}
  .summary-next h2{font-size:17px}
  .summary-next .icon{width:48px;height:48px}
}
@media (prefers-reduced-motion:no-preference){.option{transition:background .16s ease,border-color .16s ease}}
.option-title small{display:block;font-size:12px;font-weight:400;color:var(--x-soft)}