/* ============================================================
   ธาตุทอง GPAS | skin.css ธีม B (มติ Q1) ซ้อนทับ theme.css ทุกหน้าเว็บ
   ซ้อนทับ assets/theme.css ไม่ประกาศ :root ใหม่ ไม่เปลี่ยนสีขั้น GPAS และฟอนต์
   ลายประจำธีม เส้นหนาสามขนาด แถบบาร์โค้ดเป็นเส้นคั่น สติกเกอร์สีทองกำกับข้อความเตือน
   ============================================================ */
body.skin-label { background: #f3eee4; background-image: none; }
.skin-label .eyebrow::before, .skin-label .blk-head .num::before { width: 14px; height: 14px; border-radius: 0; }
/* หัวข้อของส่วน เส้นหนาใต้หัวข้อแบบหัวแผง */
.skin-label .blk-head { border-bottom: 10px solid var(--ink); padding-bottom: 10px; align-self: stretch; width: 100%; }
.skin-label .blk-head h2 { font-weight: 700; }
/* การ์ดคือแผงข้อมูล มุมฉาก พื้นขาว เส้นหนาบนสุด */
.skin-label .card { background: #fff; border-radius: 0; box-shadow: none; border: 2.5px solid var(--ink); }
.skin-label .card h3 { border-bottom: 5px solid var(--ink); padding-bottom: 6px; margin-bottom: 4px; }
.skin-label .steps-ol > li { background: #fff; border-radius: 0; border: 0; border-bottom: 1.5px solid var(--ink); padding-top: 14px; padding-bottom: 14px; }
.skin-label .steps-ol > li::before { border-radius: 0; }
.skin-label .steps-ol { gap: 0; border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
/* ตารางแบบแถวแผง */
.skin-label table { background: #fff; border-top: 8px solid var(--ink); border-bottom: 5px solid var(--ink); }
.skin-label th, .skin-label td { border: 0; border-bottom: 1.5px solid var(--ink); }
.skin-label th { background: #fff; border-bottom: 4px solid var(--ink); }
.skin-label td:first-child { font-family: var(--f-mono); font-weight: 600; white-space: nowrap; }
/* แถบบาร์โค้ดคั่นส่วน */
.skin-label .divider { height: 34px; margin: var(--sp-4) auto; max-width: 1088px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 13px, transparent 13px 15px, var(--ink) 15px 16px, transparent 16px 21px);
  -webkit-mask: linear-gradient(90deg, #000 0 220px, transparent 220px); mask: linear-gradient(90deg, #000 0 220px, transparent 220px); }
/* ส่วนหัว แผงข้อมูลของวัน */
.lbl-hero { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; margin-top: var(--sp-4); }
.lbl-panel { background: #fff; border: 2.5px solid var(--ink); padding: 12px 16px 14px; max-width: 520px; }
.lbl-panel h3 { font-size: 1.6rem; font-weight: 700; margin: 0; padding-bottom: 4px; border-bottom: 10px solid var(--ink); }
.lbl-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1.5px solid var(--ink); line-height: var(--lh-ui); }
.lbl-row b { font-family: var(--f-head); }
.lbl-row.thick { border-bottom-width: 5px; }
.lbl-panel .ingr { font-size: var(--t-sm); margin: 8px 0 0; line-height: var(--lh-body); }
.lbl-panel .ingr b { font-family: var(--f-head); }
.skin-label .prompt { border-radius: 0; border-width: 2.5px; }
.skin-label .prompt-head { background: #fff; border-bottom: 5px solid var(--ink); }
.skin-label .chip { border-radius: 0; background: #fff; }
.skin-label .btn { border-radius: 0; }
.skin-label .note { border-radius: 0; }

/* ---------- ส่วนเพิ่มของหน้าจริง ---------- */
.hero-title .h1-main { display: block; }
.hero-title .h1-sub { display: block; font-size: var(--t-md); font-weight: 600; color: var(--ink-2); margin-top: var(--sp-2); line-height: var(--lh-head); }
.byline { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.sticker { display: inline-block; background: var(--a2); color: var(--ink); font-weight: 700; font-size: var(--t-xs); line-height: var(--lh-ui); padding: 3px 10px; border: 2px solid var(--ink); }
.disclaimer { border: 2.5px solid var(--ink); border-left: 10px solid var(--a2); background: #fff; padding: 10px 14px; font-size: var(--t-sm); }
.disclaimer strong { font-family: var(--f-head); }
.decide-box { border: 2.5px solid var(--ink); background: #fff; padding: 12px 16px; }
.decide-box h3 { border-bottom: 5px solid var(--ink); padding-bottom: 4px; margin-bottom: var(--sp-2); }
.decide-box ol { margin: 0; padding-left: var(--ind); }
.decide-box li + li { margin-top: .3em; }
.waiting { color: var(--muted); font-size: var(--t-sm); }
/* ใบงาน */
.ws { background: #fff; border: 2.5px solid var(--ink); padding: 16px 18px; }
.ws h3 { border-bottom: 5px solid var(--ink); padding-bottom: 4px; }
.ws fieldset { border: 0; border-top: 1.5px solid var(--ink); margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; min-width: 0; }
.ws legend { font-family: var(--f-head); font-weight: 600; padding: 0 6px 0 0; }
.ws .stop { border: 1.5px solid var(--line); padding: 10px 12px; margin-top: var(--sp-2); }
.ws .stop h4 { margin: 0 0 6px; }
.ws .chk { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ws .chk label { display: inline-flex; gap: 8px; align-items: center; min-height: var(--tap); }
.ws .chk input { width: 22px; height: 22px; accent-color: var(--g-d); }
.ws-grid { overflow-x: auto; }
.ws-grid table { min-width: 720px; }
.ws-grid td textarea { min-height: 84px; border-radius: 0; }
.ws-grid td { padding: 6px; }
.ws-grid th:first-child, .ws-grid td:first-child { width: 7em; }
.ws-actions { margin-top: var(--sp-3); }
.example-tbl td { font-size: var(--t-sm); }
.spk-gate { margin-top: var(--sp-2); }
.spk-gate input { max-width: 240px; }
@media print {
  body.skin-label { background: #fff; }
  .noprint, .skip, .spk-gate, .divider { display: none !important; }
  .ws { border: 0; padding: 0; }
  .ws-grid table { min-width: 0; }
  textarea, input[type=text], input[type=url] { border: 1px solid #555 !important; }
  .ws textarea { min-height: 70px; }
  section.blk { margin: 10px 0; }
  .ws, .ws fieldset, .ws .stop { break-inside: avoid; }
}
.ws .fields > label.f.wide { grid-column: span 2; }
.ws .fields.one { grid-template-columns: 1fr; }
.ws .fields.one > label.f.wide { grid-column: auto; }
@media (max-width: 560px) { .ws .fields > label.f.wide { grid-column: auto; } }
.skin-label tbody th { border-bottom: 1.5px solid var(--ink); }
.skin-label .big-link, .skin-label .agenda li, .skin-label details.acc, .skin-label .checklist label, .skin-label .note, .skin-label .warn, .skin-label .guard, .skin-label .prompt { border-radius: 0; }
.skin-label .big-link { box-shadow: none; }
.skin-label .big-link:hover { transform: none; box-shadow: inset 0 -6px 0 var(--a2); }
.skin-label .big-link[aria-disabled="true"] { border-style: dashed; }
.skin-label .btn[aria-disabled="true"] { opacity: 1; color: var(--muted); border-color: var(--line); background: transparent; }
/* ---------- Blueprint บทเรียน Edpuzzle (4 ต.ค. 2569) ---------- */
.bp-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.bp-list { display: grid; gap: var(--sp-3); }
.bp { background: #fff; border: 2.5px solid var(--ink); padding: 12px 16px 14px; }
.bp.extra { border-style: dashed; }
.bp-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 5px solid var(--ink); padding-bottom: 8px; margin-bottom: var(--sp-2); }
.bp-t { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-md); }
.bp-lab { font-family: var(--f-head); font-weight: 600; font-size: var(--t-sm); margin: var(--sp-2) 0 2px; }
.bp-txt { display: flex; gap: var(--sp-2); align-items: flex-start; justify-content: space-between; border-bottom: 1.5px solid var(--line); padding: 6px 0; }
.bp-txt p { margin: 0; white-space: pre-line; }
.bp-txt .btn { flex: none; min-height: var(--tap); }
.bp-opt { border-left: 6px solid var(--line); padding-left: 10px; margin-top: 6px; }
.bp-opt.ok { border-left-color: var(--s); }
.bp-tag { font-size: var(--t-xs); font-weight: 700; }
.bp-ans { background: var(--paper); padding: 8px 10px; font-size: var(--t-sm); margin-top: var(--sp-2); }
.bp-done { display: inline-flex; gap: 8px; align-items: center; min-height: var(--tap); margin-top: var(--sp-2); }
.bp-done input { width: 22px; height: 22px; accent-color: var(--s-d); }
.bp-chk { border-left: 6px solid var(--out); padding: 6px 10px; background: var(--out-s); font-size: var(--t-sm); margin-top: var(--sp-2); }
/* ห้องสร้างสื่อ แชตบอต */
.flawed, .sp-out { white-space: pre-wrap; font-family: var(--f-body); font-size: var(--t-sm); background: #fff; border: 2.5px solid var(--ink); padding: 12px 14px; max-height: 420px; overflow: auto; margin: 0; }
.tests { list-style: none; padding: 0; margin: 0; border-top: 5px solid var(--ink); }
.tests .test { border-bottom: 1.5px solid var(--ink); padding: 8px 0; background: #fff; }
.test-m { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 8px; }
.test-m .btn { min-height: 36px; }
.test-p { display: flex; gap: 8px; align-items: flex-start; padding: 4px 8px 0; font-size: var(--t-sm); min-height: var(--tap); }
.test-p input { width: 22px; height: 22px; accent-color: var(--s-d); flex: none; margin-top: 2px; }
.score { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-md); }
.roles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.roles .role { text-align: left; background: #fff; border: 2px solid var(--ink); padding: 8px 10px; min-height: var(--tap); cursor: pointer; font: inherit; color: var(--ink); }
.roles .role b { display: block; font-family: var(--f-head); }
.roles .role span { font-size: var(--t-xs); color: var(--muted); }
.roles .role[aria-pressed="true"] { background: var(--ink); color: #fff; }
.roles .role[aria-pressed="true"] span { color: #fff; }
.roles .role:focus-visible { outline: 3px solid var(--a2); outline-offset: 2px; }
.peds { display: grid; gap: 6px; }
.peds label { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); min-height: var(--tap); }
.peds input { width: 22px; height: 22px; accent-color: var(--g-d); flex: none; margin-top: 2px; }
@media print { .bp { break-inside: avoid; } .bp-txt .btn, .test-m .btn { display: none; } }
#blueprint, .bp-list, .tests, #roleTable { width: 100%; min-width: 0; }
.bp, .bp-txt p, .test-m span { min-width: 0; overflow-wrap: anywhere; }

/* 4 ต.ค. 2569 มติ L7 หน้า Blueprint ซ่อนเนื้อหาจนกว่าครูยืนยันว่าเรียนบทเรียนสาธิตแล้ว (ไม่มี JavaScript ก็แสดงตามปกติไม่ได้ จึงซ่อนด้วยคลาสบน html) */
html:not(.bp-open) .bp-gate ~ * :is(.divider, .blk), html:not(.bp-open) .bp-gate ~ :is(.divider, .blk) { display: none; }
html.bp-open .bp-gate { display: none; }
.bp-gate { padding-block: 24px; }
/* หน้าต่อยอด ภาคผนวก ก รายละเอียด GPAS รายขั้น */
.gpas-steps { display: grid; gap: 20px; margin-top: 20px; }
.gpas-steps .card > * + * { margin-top: 10px; }
.gpas-steps ul { margin: 0; padding-inline-start: 1.2em; }
/* 4 ต.ค. 2569 ห้องเว็บแอป ผลตรวจลิงก์ */
.wa-note { display: block; font-size: .9em; margin-top: 4px; }
.wa-note.ok { color: var(--guard-deep, #0a6363); }
.wa-note.warn { color: #7a5700; }
.wa-note.bad { color: #9b1c30; font-weight: 600; }