/*
 * กล่องสรุปสเปคด้านขวา — โครงขึ้นตั้งแต่เปิดหน้า สลับข้างในตามสถานะ
 * (เจ้าของเลือก 21–22 ก.ย. 2569)
 *
 * ⚠⚠ ไฟล์ทับแยกต่างหาก — **ห้ามแก้ `configurator-compact.css`**
 *    ไฟล์นั้นเป็นของคนออกแบบ และตรวจ sha256 กับ `source-hashes.json` ที่เขาส่งมาทุกรอบ
 *    แก้ทับเมื่อไหร่ การตรวจว่างานเขาลงครบมั้ยจะใช้ไม่ได้อีกเลย
 *
 * ⚠ โหลดเป็นไฟล์สุดท้ายของหน้า configurator จึงทับตัวอื่นได้โดยไม่ต้องเพิ่มความเฉพาะเจาะจง
 */

/* ───────── แถบแนะนำหัวคอลัมน์ซ้าย ───────── */

/* ⚠⚠⚠ **แบนแนวนอน ห้ามให้สูงขึ้น** — มุมบนซ้ายคือที่ที่ปุ่มแรกควรอยู่
     ก้อนสูงจะดันปุ่ม «เลือกซีรีส์โปรไฟล์» ลงไป และบนมือถือที่สามคอลัมน์
     เรียงลงมาเป็นแถวเดียว ลูกค้าจะต้องเลื่อนผ่านรูปก่อนถึงจะเจอปุ่มแรก
   ⚠ ขนาดรูปมาจากที่นี่ ไม่ได้มาจากไฟล์รูป — ส่งไฟล์คนละขนาดมาแถบก็ยังสูงเท่าเดิม */
.profile-configurator .pc-guide { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.profile-configurator .pc-guide-mascot { flex: 0 0 auto; width: 64px; height: auto; }
.profile-configurator .pc-guide-text { margin: 0; min-width: 0; font-weight: 600; }

/* ───────── เลขลำดับบนหัวข้อช่องเลือก ───────── */

/* ⚠⚠ **เลขนี้เป็นชุดเดียวของทั้งหน้า** (เจ้าของเลือก 22 ก.ย. 2569)
     แถบมาสคอตข้างบนจึงไม่มีเลข · เอาเลขกลับไปใส่ที่นั่นเมื่อไหร่
     หน้าเดียวจะมีเลขสองชุดที่แปลคนละอย่าง
   ⚠ ดำบนเหลือง ไม่ใช่ขาวบนเหลือง — ตัวอักษรขาวบนพื้นเหลืองอ่านยากมาก
     คู่สีนี้ผ่านเกณฑ์ความต่างของแสงสำหรับตัวหนังสือขนาดเล็ก */
.profile-configurator .facet legend .step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 999px; background: var(--yellow, #ffd525); color: #000; font-size: 13px; font-weight: 700; vertical-align: middle; }

/* ───────── ก้อนรอเลือก ที่นั่งอยู่ในกล่องสรุป ───────── */

/* ⚠⚠ ไม่มี `grid-column` อีกแล้ว — ก้อนนี้อยู่ *ข้างใน* กล่องสรุป ไม่ได้นั่งในตารางของหน้าเอง
   ใส่กลับเข้าไปเมื่อไหร่ มันจะดีดออกไปนั่งช่องเดียวกับกล่องสรุปแล้วทับกัน */
.profile-configurator .pc-choices { min-width: 0; margin: 0 0 14px; }
.profile-configurator .pc-choices h3 { margin: 0 0 10px; font-size: 1rem; }
.profile-configurator .pc-choices > .hint { margin: 0 0 10px; }

/* ── รายชื่อรหัสที่ยังเหลือ ──
   ⚠⚠⚠ **กรอบสูงคงที่เลื่อนดูได้ คือสิ่งที่ทำให้รายการขึ้นตั้งแต่เปิดหน้าได้**
     (เจ้าของเลือก 22 ก.ย. 2569) · ทางที่ไม่เอาคือ "โชว์ไม่เกิน N รหัส"
     ซึ่งเป็นเลขที่ต้องตั้งเอง และของที่ถูกตัดออกจะหายเงียบโดยไม่มีอะไรบอก (กับดัก 8)

   ⚠⚠ `overscroll-behavior: contain` ขาดไม่ได้ — ไม่งั้นเลื่อนจนสุดรายการแล้ว
     ทั้งหน้าจะเลื่อนตามต่อทันที ซึ่งบนมือถืออ่านว่าหน้ากระโดดเอง */
.profile-configurator .pc-choice-list { margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }

/* หนึ่งบรรทัดต่อหนึ่งรหัส — ชื่อยาวได้ ราคาไม่หนีไปคนละบรรทัดกับชื่อ */
.profile-configurator .pc-choice-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 5px 0; border-top: 1px solid #e5e7eb; }
.profile-configurator .pc-choice-list li:first-child { border-top: 0; }

/* ⚠ ทั้งแถวต้องกดได้ ไม่ใช่กดได้เฉพาะตัวอักษรของลิงก์ — **จอสัมผัส**เป้ากดต้องสูงอย่างน้อย 44px
   ⚠ มติ 355 (เจ้าของสั่ง 29 ก.ย. 2569 «ลดระยะระหว่างบรรทัด») — เมาส์ชี้แม่นกว่านิ้ว จึงไม่ต้องสูง 44px
     ความสูง 44px เดิมคือที่มาของช่องว่างระหว่างชื่อรหัสกับบรรทัด «มีสินค้า» · จอสัมผัสยังได้ 44px เท่าเดิม */
.profile-configurator .pc-choice-list a { display: block; min-width: 0; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .profile-configurator .pc-choice-list a { min-height: 44px; } }
.profile-configurator .pc-choice-list a strong { margin-right: 6px; }

.profile-configurator .pc-choice-price { grid-column: 2; text-align: right; white-space: nowrap; font-weight: 650; }
.profile-configurator .pc-choice-price small { display: block; font-weight: 400; white-space: normal; }

.profile-configurator .pc-choice-list .stock { grid-column: 1 / -1; }
/* ⚠ ของหมดต้องอ่านออกด้วยตัวหนังสือด้วย ไม่ใช่บอกด้วยสีอย่างเดียว —
   ข้อความมาจากเซิร์ฟเวอร์อยู่แล้ว สีเป็นแค่ตัวช่วย */
.profile-configurator .pc-choice-list .stock.out { color: var(--danger, #b3261e); }

/* ───────── แถวสรุปสเปค ───────── */

/* ⚠ หัวข้อซ้าย ค่าขวา หนึ่งแถวต่อหนึ่งเรื่อง — ค่าที่ยังไม่รู้เป็นขีดสีจาง
   แต่ **หัวข้อไม่จาง** เพราะหัวข้อคือสิ่งที่บอกลูกค้าว่าจะถูกถามอะไรบ้าง */
.profile-configurator .pc-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0 0 14px; }
.profile-configurator .pc-spec dt { grid-column: 1; padding: 8px 12px 8px 0; border-top: 1px solid #e5e7eb; }
.profile-configurator .pc-spec dd { grid-column: 2; margin: 0; padding: 8px 0; border-top: 1px solid #e5e7eb; text-align: right; font-weight: 600; }
.profile-configurator .pc-spec dt:first-of-type, .profile-configurator .pc-spec dd:first-of-type { border-top: 0; }
.profile-configurator .pc-spec dd.pending { color: #9ca3af; font-weight: 400; }

/* ───────── กรอบรูปตอนที่ยังไม่ได้เลือกรุ่น ───────── */

/* ⚠⚠ **ต้องมีความสูงขั้นต่ำ ไม่งั้นกรอบยุบเหลือความสูงของข้อความบรรทัดเดียว**
     แล้วพอเลือกรุ่นเสร็จ รูปจริงจะดันกล่องขวาเลื่อนลงไปทั้งคอลัมน์ —
     ซึ่งเป็นอาการ "หน้าเปลี่ยนโครงไปเอง" ที่มติ 183 ข้อ (5) ตั้งใจกำจัด

   ⚠ 260px เป็นเลขที่เลือกจากความสูงของรูปสินค้าจริงในคลัง **ไม่ใช่กฎธุรกิจ**
     ปรับได้โดยไม่ต้องถามใคร ขอแค่ให้ใกล้เคียงกับรูปจริงพอที่หน้าจะไม่กระโดด */
.profile-configurator .pc-media-waiting { display: flex; align-items: center; justify-content: center; min-height: 260px; border-style: dashed; }
.profile-configurator .pc-media-waiting .hint { margin: 0; text-align: center; }

/* ───────── รูปเล็กบนปุ่มตัวเลือก ───────── */

/* ⚠⚠ ปุ่มที่มีรูปกับปุ่มที่ไม่มีรูป อยู่แถวเดียวกันได้ — จัดกึ่งกลางแนวตั้งไว้
   ⚠ ขนาดกล่องรูปมาจากที่นี่ ไม่ได้มาจากไฟล์รูป รูปคนละขนาดจึงไม่ทำให้ปุ่มสูงไม่เท่ากัน */
.profile-configurator .chip.has-image { display: inline-flex; align-items: center; gap: 8px; }
.profile-configurator .chip-image { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }

/* ───────── ปุ่มสองบรรทัด (ช่องซีรีส์) ───────── */

/* ⚠⚠ **บรรทัดบนตัวหนาสั่งจากที่นี่ ไม่ได้สั่งจาก HTML** (เจ้าของสั่ง 22 ก.ย. 2569)
     ตัวหนาเป็นเรื่องหน้าตา ต่างจาก ✓ ซึ่งเป็นสถานะและต้องอ่านออกแม้ CSS ไม่โหลด
     ใช้ `<strong>` ใน Blade เมื่อไหร่ "ปุ่มไหนหนา" จะกลายเป็นเงื่อนไขใน PHP อีกที่หนึ่ง
   ⚠ จับที่คลาส `has-note` ไม่ใช่จับที่ชื่อช่อง — วันที่ช่องอื่นมีคำอธิบายบ้าง
     มันจะได้หน้าตาเดียวกันเอง โดยไม่ต้องมาเติมชื่อช่องลงในไฟล์นี้ */
.profile-configurator .chip-text { display: block; min-width: 0; }
.profile-configurator .chip-main { display: block; }
.profile-configurator .chip.has-note .chip-main { font-weight: 700; }

/* ⚠⚠ `display: block` ขาดไม่ได้ — `<small>` เป็น inline โดยธรรมชาติ
     ไม่สั่งแล้วคำอธิบายจะไปต่อท้ายบรรทัดบน ซึ่งเป็นสิ่งที่มติข้อนี้สั่งให้เลิกทำพอดี */
.profile-configurator .chip-note { display: block; margin-top: 2px; font-weight: 400; }

/* ───────── ตัวอักษรกลางปุ่ม (มติ 228 · เจ้าของเลือก 25 ก.ย. 2569) ───────── */

/* ⚠⚠ ที่มา: วัดในเบราว์เซอร์ของเจ้าของได้ ที่ว่างเหนือตัวอักษร 12–14 px · ใต้ตัวอักษร 19 px
     สาเหตุสองชั้น — ฟอนต์ไทยกันที่ไว้ใต้เส้นฐานให้สระล่าง (ุ ู) แม้คำนั้นไม่มีสระล่าง
     และปุ่มเป็น inline-block ส่วนที่เหลือจาก `min-height: 44px` จึงไปกองข้างล่าง
   ✅ `text-box` ตัดที่ว่างเหนือยอดตัวพิมพ์ใหญ่กับใต้เส้นฐานทิ้ง แล้ว flex จัดกลาง
     **ใช้ตัววัดของฟอนต์ที่เบราว์เซอร์เลือกจริง ไม่ได้ตั้งเลขเผื่อฟอนต์ใดฟอนต์หนึ่ง**
     (ตั้งแต่มติ 229 เว็บเสิร์ฟ IBM Plex Sans Thai เอง แต่ระหว่างโหลดหรือโหลดไม่ขึ้นยังเป็น Tahoma)
   ⚠ Firefox ยังไม่รองรับ `text-box` — จะเห็นแบบเดิม ไม่พัง
   ⚠ สระบนและวรรณยุกต์ยื่นเข้าไปในช่องว่างของปุ่มได้ ซึ่งถูกแล้ว ไม่ถูกตัดทิ้ง
   ⚠ วัดจริงที่ `tests/browser/chip-balance.test.mjs` — ไฟล์ PHP ดูได้แค่ว่ากฎยังอยู่ */
.profile-configurator a.chip { display: inline-flex; align-items: center; }
.profile-configurator .chip-text { text-box: trim-both cap alphabetic; }

/* ───────── ลิงก์ล้างการเลือกทั้งหมด (มติ 228) ───────── */
/* ⚠⚠ อยู่บรรทัดเดียวกับหัวข้อขั้นแรก (เจ้าของสั่ง 25 ก.ย. 2569 · มติ 237)
   เดิมกินแถวของตัวเอง หัวข้อ «1 เลือก…» ถูกดันลง 52 px
   ✅ แถวนี้สูงศูนย์ แล้ววางลิงก์ทับมุมขวาของแถวหัวข้อ — **ไม่ได้ย้ายลิงก์เข้าไปใน `<legend>`**
     เพราะตัวอ่านหน้าจอจะอ่านชื่อขั้นแรกเป็น «เลือกซีรีส์ ล้างการเลือกทั้งหมด»
   ⚠ `top: -7px` = (สูงลิงก์ 44 − สูงหัวข้อ 30) ÷ 2 ให้กึ่งกลางตรงกัน · ความสูงยังคง 44 px
   ⚠ วัดจริงที่ `tests/browser/reset-link.test.mjs` — ไฟล์ PHP ดูได้แค่ว่ากฎยังอยู่ */
.profile-configurator .pc-reset-row { position: relative; z-index: 1; height: 0; margin: 0; }
.profile-configurator .pc-reset { position: absolute; top: -7px; right: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; text-decoration: underline; }

@media (max-width: 640px) {
    .profile-configurator .pc-guide-mascot { width: 64px; }
    .profile-configurator .pc-choice-list { max-height: 260px; }
    .profile-configurator .pc-choice-list li { grid-template-columns: minmax(0, 1fr); }
    .profile-configurator .pc-choice-price { grid-column: 1; text-align: left; }
}

/* ═════════ หน้าตาของกล่องสรุปสเปค (เจ้าของสั่ง 22 ก.ย. 2569 · สามข้อ) ═════════
   เส้นคั่นหัวข้อ · ปุ่มมีไอคอน · เลขราคาสีน้ำเงินทั้งสองจุด

   ⚠⚠ **สามข้อนี้ลงที่เปลือกใหม่เท่านั้น และไม่ใช่เพราะลืมเปลือกเก่า**
      `shop/layout.blade.php` ของเปลือกเก่า **ไม่โหลดไฟล์ CSS ของหน้านี้เลยสักไฟล์**
      กฎทุกข้อที่เขียนที่นี่จึงไม่เคยมีผลกับเปลือกเก่ามาตั้งแต่ต้น (ตรงกับมติ 180
      ที่ให้เปลือกใหม่ชนะแล้วลบเปลือกเก่าทิ้งวันที่ของใหม่ทำงานแทนได้ครบ)
      **ห้าม "แก้ให้เหมือนกัน" ด้วยการไปเติม `<link>` ให้เปลือกเก่า** */

/* ───────── เส้นคั่นใต้หัวข้อกล่อง ───────── */

/* ⚠ แถวสเปคมีเส้นคั่นของตัวเองอยู่แล้ว (`.pc-spec dt/dd { border-top }`)
     ที่ขาดคือเส้นใต้หัวข้อ ซึ่งทำให้ชื่อกล่องลอยติดกับรหัสสินค้า */
.profile-configurator .summary h2 { padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }

/* ───────── เลขราคาสีน้ำเงิน ───────── */

/* ⚠⚠⚠ **เฉดนี้คือเฉดเดียวกับ `--product-blue` ใน `catalog-color.css` (มติ 88)**
      ที่ต้องเขียนเลขสีซ้ำ เพราะสองไฟล์นี้ **ไม่เคยโหลดพร้อมกันบนหน้าเดียว**
      (ไฟล์นั้นโหลดเฉพาะหน้ารายการสินค้า ไฟล์นี้เฉพาะหน้าตัวช่วยออกแบบ)
      และมติ 88 ห้ามแตะ `tokens.css` ซึ่งเป็นที่เดียวที่จะเก็บเฉดร่วมได้
      ⚠ **เลขสีที่อยู่สองไฟล์ คือเลขที่วันหนึ่งจะไม่ตรงกัน** — จึงมีข้อสอบ
        `UiSummaryLookTest::test_เฉดน้ำเงินสองไฟล์ต้องเป็นเฉดเดียวกัน` อ่านทั้งสองไฟล์มาเทียบ
        แก้ที่เดียวเมื่อไหร่ **แดงทันที** · คำเตือนไม่ใช่กลไก ข้อสอบคือกลไก (กับดัก 66)

   ⚠⚠ **สีน้ำเงินทั้งสองจุด — เจ้าของยืนยัน 22 ก.ย. 2569**
      ทั้งคู่เป็นราคาและอยู่ต่อทั้งคู่ (เจ้าของเลือก "คงไว้ทั้งสองเหมือนเดิม")
      เลขใหญ่ = ราคาโปรไฟล์อย่างเดียว · `รวมทั้งหมด` = บวกอุปกรณ์เสริมแล้ว
      **สองเลขเท่ากันเฉพาะตอนไม่ได้ติ๊กอุปกรณ์เสริม ไม่ใช่ซ้ำกันเสมอ**
      ทำสีตัวเดียวเมื่อไหร่ อีกตัวจะดูสำคัญน้อยกว่าโดยที่ไม่มีใครสั่งไว้ */
.profile-configurator .summary { --product-blue: #1447c4; }
.profile-configurator .summary .price strong,
.profile-configurator .summary .grand strong { color: var(--product-blue); }

/* ───────── ปุ่มท้ายกล่องสรุป ───────── */

/* ⚠⚠ ปุ่มสองปุ่มนี้เป็น `<button>` จริงมาตั้งแต่มติ 180 **แต่ไม่มีกฎไหนจับมันเลย**
     จึงออกมาเป็นตัวหนังสือเปล่าที่ดูไม่ออกว่ากดได้ — ซึ่งเป็นรูปเดียวกับที่มติ 92
     เขียนไว้เองว่า "ปุ่มที่กดแล้วไม่ติดแบบเงียบ แย่กว่าไม่มีปุ่ม" แค่คราวนี้กดติด
     แต่ไม่มีใครรู้ว่ากดได้ **ปุ่มที่ไม่มีใครรู้ว่าเป็นปุ่ม กับปุ่มที่กดไม่ได้ เสียหายเท่ากัน** */
.profile-configurator .pc-actions { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb; }

/* ⚠ `min-height: 44px` คือขนาดเป้ากดขั้นต่ำที่ใช้ทั้งหน้านี้ **ห้ามลดลง**
   ⚠ `font: inherit` ขาดไม่ได้ — เบราว์เซอร์ตั้งฟอนต์ของ `<button>` เป็นฟอนต์ระบบ
     ไม่สั่งแล้วตัวหนังสือไทยบนปุ่มจะเป็นคนละแบบกับทั้งหน้า */
.profile-configurator .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; }

/* ⚠ ขนาดไอคอนมาจากที่นี่ ไม่ได้มาจาก `viewBox` — `flex: 0 0 auto` กันไอคอนถูกบีบ
     ตอนข้อความบนปุ่มยาวขึ้น (เช่นวันที่แปลเป็นอังกฤษ) */
.profile-configurator .pc-btn-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.profile-configurator .pc-btn-primary { background: var(--yellow, #ffd525); color: #000; }
.profile-configurator .pc-btn-ghost { background: #fff; border-color: #d1d5db; color: inherit; }

.profile-configurator .pc-btn:hover { filter: brightness(0.96); }

/* ⚠⚠ กรอบตอนโฟกัสขาดไม่ได้ — คนที่เดินด้วยปุ่ม Tab ต้องรู้ว่าตัวเองอยู่ปุ่มไหน
     ใช้ `:focus-visible` จึงไม่ขึ้นกรอบตอนกดด้วยเมาส์ */
.profile-configurator .pc-btn:focus-visible { outline: 2px solid var(--product-blue, #1447c4); outline-offset: 2px; }

/*
 * รูปย่อในรายการเลือกรุ่นของหน้าอะไหล่ (มติ 225) — «เลือกจากการ์ดรูป»
 * ⚠ กล่องว่างสูงเท่ารูปเสมอ รหัสที่ยังไม่มีรูปแถวจึงไม่เตี้ยกว่าเพื่อน
 * ⚠ รูปมาจาก `heroImagePath()` ที่ Controller · ไม่มีรูป = กล่องว่าง (CSS ไม่เลือกรูปเอง)
 */
.profile-configurator .pc-choice-list .pc-choice-thumb { display: inline-block; width: 48px; height: 48px; margin-right: 10px; vertical-align: middle; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.profile-configurator .pc-choice-list .pc-choice-thumb-empty { background: #f3f4f6; }

/* มติ 359 — ปุ่มสลับ «ชิ้นเดี่ยว / Kit set» ในกล่องสรุป + รายการของในชุด */
.profile-configurator .pc-order-mode { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #e5e7eb; }
.profile-configurator .pc-order-mode-label { margin: 0 0 4px; font-weight: 650; }
.profile-configurator .pc-order-mode .chip small { margin-left: 4px; color: #4b5563; }
.profile-configurator .pc-kit-contents-label { margin: 6px 0 2px; font-weight: 650; }
.profile-configurator .pc-kit-contents { margin: 0 0 8px; padding-left: 18px; }
.profile-configurator .pc-kit-contents li { margin: 2px 0; }

/* ───────── ปุ่มตัวเลือกเปลี่ยนสีทันทีที่กด (มติ 360 · เจ้าของเลือก 29 ก.ย. 2569 «ทาง ก.») ───────── */

/* ⚠⚠ ที่มา: กดปุ่มแล้วต้องรอเซิร์ฟเวอร์ประกอบหน้าใหม่ 0.2–0.4 วิ + TLS ~0.2 วิ
     ระหว่างนั้นหน้าไม่ขยับเลย ลูกค้าอ่านว่า «กดไม่ติด» แล้วกดซ้ำ
   ✅ ปุ่มที่ถูกกดเปลี่ยนเป็นเหลืองอ่อนทันที ค้างไว้จนหน้าใหม่มาแทน — **CSS ล้วน ไม่มีสคริปต์ (มติ 76)**
   ⚠ `:active` = ช่วงที่นิ้ว/เมาส์ยังกดอยู่ · `:focus:not(:focus-visible)` = หลังปล่อย
     เบราว์เซอร์ยังโฟกัสลิงก์ที่เพิ่งกดด้วยเมาส์/นิ้ว สีจึงค้างจนหน้าใหม่ขึ้น
   ⚠ **ห้ามใช้ `:focus` เปล่า** — คนที่เดินด้วยปุ่ม Tab จะเห็นทุกปุ่มที่ผ่านเป็นเหลืองอ่อน
     ดูเหมือนถูกเลือกไปแล้ว · คนกลุ่มนั้นมีกรอบ `:focus-visible` ของตัวเองอยู่แล้ว
   ⚠ เหลืองอ่อน ≠ เหลืองเข้มของ `.chip.on` (ถูกเลือกอยู่ + ✓) — สองสถานะต้องแยกด้วยตาได้
   ⚠ กด «ย้อนกลับ» แล้วเบราว์เซอร์คืนหน้าเดิมจากความจำ ปุ่มที่กดไว้อาจยังเหลืองอ่อน
     จนคลิกที่อื่น — รับได้ (แก้ได้ทางเดียวคือสคริปต์)
   ⚠ วัดจริงที่ `tests/browser/chip-pressed.test.mjs` */
.profile-configurator a.chip:active,
.profile-configurator a.chip:focus:not(:focus-visible) { background: var(--yellow-soft, #fff3b7); border-color: var(--yellow, #ffd525); color: var(--ink, #101318); }