/* ชิ้นส่วนร่วมของหน้าทักษาแบบใหม่ (สเปก Phase5-F5-1ข: /home + /ask) — เด็กและคนอายุ 60+ ใช้ได้โดยไม่ต้องสอน: ปุ่มใหญ่ ไอคอนชัด คำน้อย
   สีจากตัวแปรธีมของ style.css เท่านั้น (ธีม ก ข ค เปลี่ยนตามเอง) · ฟอนต์ var(--font) · ตัวหนังสือหลัก 19–21px · ไม่มี style ในแท็ก (CSP)
   ปุ่ม/การ์ดสูง ≥ 56px (ปุ่มเล็ก ≥ 48) · มุม 14–20px · เส้น 1.5px สีเน้นจาง 70% (55% ได้ไม่ถึง 3:1 บนพื้นครีมของธีม ข) · focus 3px · ไม่มีเงานูน
   ธีม ข: ส่วนบน (.intro) เป็นแถบกรมท่า → ปุ่ม ไอคอน เส้น บนแถบใช้สีของแถบ (--title ทอง · --band-ink)
   · กรอบโฟกัสบนแถบใช้ --band-ink (--focus น้ำเงินบนกรมท่าได้แค่ 1.7:1 · ทองกลืนกับขอบทองของกลุ่มปุ่มภาษา) */
.tk-page{--tk-line:color-mix(in srgb, var(--accent) 70%, transparent);font-size:19px;line-height:1.5}
.tk-page :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tk-ico{display:block;flex:none;width:24px;height:24px;stroke-width:2;color:var(--accent)}

/* ---------- ส่วนบน: ชื่อหน้า · ปุ่มหน้าตา · ปุ่มภาษา ---------- */
/* แถวบนไม่พอ (จอ 320px · ฟอนต์กว้าง) → ปุ่มขวาลงบรรทัดใหม่ชิดขวา ไม่ล้นจอ · จอแคบกว่า 360px ปุ่มภาษาแคบลง (ยังกว้าง ≥ 44px) */
.tk-top-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.tk-top .tk-title{margin:0;min-width:0;font-size:34px;line-height:1.15;font-weight:700;color:var(--title);overflow-wrap:anywhere}
.tk-tools{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.tk-top .look-btn{justify-content:center;min-width:48px;min-height:48px;padding:0;background:var(--sheet);border:1.5px solid var(--tk-line);border-radius:14px}
.tk-top .look-btn .tk-ico{width:26px;height:26px}
.tk-lang{display:flex;gap:4px;padding:3px;background:var(--sheet);border:1.5px solid var(--tk-line);border-radius:16px}
.tk-lang-btn{min-width:52px;min-height:48px;padding:0 8px;border:0;border-radius:12px;background:transparent;color:var(--ink);
  font-size:18px;font-weight:700;line-height:1;cursor:pointer;touch-action:manipulation}
.tk-lang-btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);cursor:default}
.tk-lang-btn[aria-pressed="false"]:active{background:color-mix(in srgb, var(--accent) 16%, transparent)}
html[data-theme="b"] .tk-top .tk-ico{color:var(--title)}
html[data-theme="b"] .tk-top .look-btn,html[data-theme="b"] .tk-top .tk-lang,html[data-theme="b"] .tk-top .tk-btn{background:transparent;border-color:var(--title);color:var(--band-ink)}
html[data-theme="b"] .tk-top .tk-lang-btn{color:var(--band-ink)}
html[data-theme="b"] .tk-top .tk-lang-btn[aria-pressed="true"]{background:var(--on-accent);color:var(--accent)}
html[data-theme="b"] .tk-top :focus-visible{outline-color:var(--band-ink)}
@media (max-width:359px){ .tk-top-row{gap:8px} .tk-tools{gap:6px} .tk-lang-btn{min-width:46px;padding:0 6px} }

/* ---------- ปุ่ม การ์ด ป้าย ---------- */
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 18px;border:1.5px solid var(--tk-line);border-radius:16px;
  background:var(--sheet);color:var(--ink);font-size:20px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tk-btn.is-small{min-height:48px;padding:0 14px;font-size:19px}
.tk-btn:hover{border-color:var(--accent)}
.tk-btn:active{background:color-mix(in srgb, var(--accent) 12%, var(--sheet))}
.tk-btn.is-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.tk-btn.is-primary .tk-ico{color:var(--on-accent)}
.tk-btn.is-primary:active{background:color-mix(in srgb, var(--accent) 82%, var(--ink))}
.tk-btn:disabled{opacity:.55;cursor:default}
.tk-tile{display:flex;text-decoration:none;color:var(--ink);background:var(--sheet);border:1.5px solid var(--tk-line);border-radius:20px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tk-tile:hover{border-color:var(--accent)}
.tk-tile:active{background:color-mix(in srgb, var(--accent) 12%, var(--sheet))}
.tk-badge{position:absolute;top:7px;right:7px;padding:0 7px;border:1.5px solid var(--accent);border-radius:999px;color:var(--legend);font-size:14px;font-weight:700;line-height:1.45}
.tk-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 12px;border-radius:999px;background:var(--rule-soft);color:var(--ink);font-size:16px;font-weight:600;line-height:1.5}
.tk-fail{margin:16px 0;padding:14px 16px;border:1.5px solid var(--red);border-radius:16px;color:var(--ink);background:var(--sheet)}

@media (prefers-reduced-motion:reduce){ .tk-btn,.tk-tile{transition:none} }