/*
 * โทนสีชุดเดียวกับหน้าลงทะเบียน (public-register.css)
 * ของเดิมเป็นเขียวสว่าง + เทาอมน้ำเงิน (#1F2937 / #6B7280) ซึ่งคนละโทนกับหน้าลงทะเบียน
 * ที่ใช้เขียวเข้มและเทาอมเขียว พอกดจากหน้ากิจกรรมไปหน้าลงทะเบียนจึงรู้สึกเหมือนคนละเว็บ
 * แก้ที่ตัวแปรชุดนี้ที่เดียว โครงหน้าและเลย์เอาต์ทั้งหมดคงเดิม
 */
:root {
    --primary: #6BCB4D;
    --primary-hover: #55B23A;
    --primary-soft: #EDF5EA;
    --dark-green: #35522C;
    --background: #FFFFFF;
    --surface: #FFFFFF;
    --border: #DCE5D8;
    --text-primary: #1F2C20;
    --text-secondary: #5F7457;
    --text-muted: #8A9683;
    --shadow: 0 10px 24px rgba(40, 70, 36, .08);
    --radius-pill: 999px;

    /* เพิ่มตอนทำหน้าแบบประเมินติดตามสุขภาพ — ค่าที่เดิมกระจายเป็น hex ซ้ำหลายจุดในไฟล์นี้ */
    --surface-muted: #F7FAF7;
    --danger-text: #B91C1C;
    --danger-bg: #FFF5F5;
    --disabled-bg: #C7D0C7;
}

* { box-sizing: border-box; }

html { background: var(--background); }

/* ห้ามหน้าจอซูมเข้าเองตอนโฟกัสช่องกรอก — Safari บน iOS จะซูมทันทีถ้าตัวอักษรเล็กกว่า 16px
   แล้วไม่ซูมกลับให้เมื่อออกจากช่อง ผู้ใช้ต้องมาถ่างนิ้วย่อเอง
   ต้องครอบทุกชนิดของช่องกรอกฝั่งผู้เข้าร่วม ไม่ใช่เฉพาะหน้าใดหน้าหนึ่ง
   เพราะช่องเดียวที่ตกหล่นก็ทำให้ทั้งหน้าซูมได้ */
input:not([type='checkbox']):not([type='radio']),
select,
textarea { font-size: 16px; }

/* ข้อความตัวอย่างในช่องต้องเล็กกว่าค่าที่พิมพ์จริง — อ่านออกว่าเป็นคำอธิบาย ไม่ใช่ค่าที่กรอกไว้แล้ว
   ตัวช่องยังเป็น 16px ตามกฎด้านบน จึงไม่กระทบเรื่องซูม */
input::placeholder,
textarea::placeholder { font-size: 13px; opacity: 1; color: var(--text-muted); }

body {
    margin: 0;
    background: var(--background);
    color: var(--text-primary);
    font-family: 'Noto Sans Thai', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

/* flex column ทำให้ footer อยู่ท้ายจอเสมอเมื่อเนื้อหาสั้นกว่า viewport
   ส่วนเนื้อหายาวก็ยังเลื่อนตามปกติ — main ยืดกิน space ที่เหลือ */
.public-app {
    display: flex;
    flex-direction: column;
    width: min(100% - 32px, 420px);
    min-height: 100vh;
    margin: 0 auto;
}

.public-app > main { flex: 1 0 auto; }

.public-topbar {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

/* ไม่มีพื้นวงกลม — วางบนพื้นหน้าตรง ๆ */
.round-icon-button {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dark-green);
    text-decoration: none;
}

/* พื้นหน้าเป็นสีขาวแล้ว hover ที่เป็นขาวโปร่งจึงมองไม่เห็น ใช้เขียวจางแทน */
.round-icon-button:hover { background: var(--primary-soft); color: var(--primary-hover); }
.round-icon-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.round-icon-button svg { width: 18px; height: 18px; }

.public-logo-link { display: inline-flex; align-items: center; justify-content: center; }
.public-logo-link img { display: block; width: auto; height: 50px; object-fit: contain; }

/* ทุกหมวดหมู่ต้องพอดีความกว้างจอเสมอ — แต่ละปุ่ม flex แบ่งพื้นที่เท่ากัน
   ไม่ใช้ความกว้างตายตัว (ของเดิม 48px แต่ชื่อยาวอย่าง WORKSHOP/COMMUNITY ล้นออกนอกช่อง
   จนเบียดกันและดันแถวเกินขอบขวา) — ชื่อที่ยาวเกินช่องตัดด้วย ellipsis แทน */
.category-bar {
    display: flex;
    gap: 4px;
    padding: 4px 0 6px;
}

/* ไอคอนวงกลมด้านบน ชื่อหมวดอยู่ใต้ไอคอน */
.category-button {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 9.5px;
    line-height: 1.3;
    text-align: center;
    transition: color .15s;
}

/* ชื่อหมวดกินได้เต็มช่องของตัวเอง เกินกว่านั้นตัดด้วย ellipsis ไม่ล้นไปเบียดช่องข้าง */
.category-button > span:last-child {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-icon {
    display: flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--dark-green);
    transition: background .15s, color .15s;
}

.category-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* หมวดที่เลือก: วงกลมเขียวทึบ ไอคอนขาว ชื่อเป็นเขียวเข้มตัวหนา */
.category-button.is-active { color: var(--dark-green); font-weight: 600; }

.category-button.is-active .category-icon {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(107, 203, 77, .28);
}

.category-button:hover .category-icon { background: var(--primary); color: #fff; }
.category-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

.activity-section { margin-top: 8px; }

/* หัวข้อซ้าย ปุ่ม All ขวา อยู่บรรทัดเดียวกัน */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }

.section-heading { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }

.section-all {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
    padding: 4px 8px 4px 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.section-all:hover { background: var(--primary-soft); color: var(--primary-hover); }
.section-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- หน้าเกี่ยวกับเรา ----------
   เป็นหน้าอ่านล้วน จึงคุมความยาวบรรทัดและระยะห่างย่อหน้าให้อ่านต่อเนื่องสบาย
   ไม่มีกรอบหรือการ์ด ตามภาษาเดียวกับหน้าอื่นฝั่งผู้เข้าร่วม */
.about-page { padding: 6px 0 28px; }

/* โทนสีเฉพาะหน้าเกี่ยวกับเรา — ชุดสีจากแบบดีไซน์ (เขียวหม่นกว่าแบรนด์หลักเล็กน้อย)
   สโคปด้วย body class เพื่อไม่ให้กระทบหน้า "ติดต่อเรา" ที่ใช้ .about-page ร่วมกัน */
.is-about-page {
    --about-green: #5aa53a;
    --about-ink: #22301f;
    --about-muted: #6b7a68;
    --about-faint: #a9b8a4;
    --about-line: #eef2ec;
}

/* ฟอนต์ Anuphan เฉพาะหน้านี้ (โหลดผ่าน @push('head') ใน about.blade.php)
   ตัวบางน้ำหนัก 300 ของหัวเรื่องคือหัวใจของแบบ */
.is-about-page main {
    font-family: 'Anuphan', 'Noto Sans Thai', sans-serif;
    text-wrap: pretty;
}

.about-eyebrow {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: .24em;
    color: var(--about-green);
}

.about-title {
    margin: 20px 0 0;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--about-ink);
}

.about-title span { color: var(--about-green); }

/* สโคปด้วย .about-page เพื่อชนะ .about-page p ที่ประกาศถัดลงไป */
.about-page .about-lead {
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--about-muted);
}

/* ป้ายกำกับหัวข้อ — ตัวเล็กถ่างระยะ สีจางกว่า eyebrow */
.about-label {
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--about-faint);
}

/* ---------- รายการสิ่งที่เชื่อมโยง (เลขลำดับ + เส้นคั่น) ---------- */

.about-list { display: flex; flex-direction: column; margin-top: 36px; }

.about-list .about-label { padding-bottom: 12px; }

.about-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--about-line);
}

.about-row:last-of-type { border-bottom: 1px solid var(--about-line); }

.about-row-num { font-size: 12px; color: var(--about-faint); }
.about-row-name { font-size: 16px; color: var(--about-ink); white-space: nowrap; }
.about-row-desc { margin-left: auto; font-size: 13px; color: var(--about-muted); text-align: right; }

/* ---------- บล็อกป้ายกำกับ + ย่อหน้า ---------- */

.about-block { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; }

.about-page .about-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: var(--about-muted);
}

/* ---------- ปิดท้าย — เส้นคั่นบน + สองบรรทัดชิดซ้าย ---------- */

.about-closing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--about-line);
}

.about-closing-big { font-size: 16px; color: var(--about-ink); }
.about-closing-sub { font-size: 14px; color: var(--about-green); }

.about-page p {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.75;
    text-wrap: pretty;
}

.about-page strong { color: var(--text-primary); font-weight: 600; }

/* ---------- ช่องทางติดต่อ (ใช้ในหน้า "ติดต่อเรา") ---------- */

.about-contact { margin-top: 30px; }

.about-contact-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.about-contact-list { display: flex; flex-direction: column; }

.about-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: inherit;
    text-decoration: none;
}

.about-contact-icon {
    display: flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--dark-green);
}

.about-contact-icon svg { width: 17px; height: 17px; }

/* ข้อความบรรทัดเดียว ตัดขึ้นบรรทัดใหม่ได้ถ้ายาว (เช่นที่อยู่) */
.about-contact-text { min-width: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-primary); }

.about-contact-item:hover .about-contact-icon { background: var(--primary); color: #fff; }

/* หน้า "ติดต่อเรา" ไม่มีหัวหน้าแบบ about — ให้รายการติดต่อขึ้นชิดบนเลย */
.is-contact-page .about-contact { margin-top: 4px; }

/* ---------- หน้ารายการทั้งหมด (กดจากปุ่ม All) ---------- */

.list-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }

.list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 24px; }

/* การ์ดในหน้ารายการกว้างกว่าบนหน้าแรก (2 คอลัมน์แทน 3) จึงคืนขนาดรูปและตัวอักษรให้อ่านสบายขึ้น */
.list-grid .other-thumb { height: 108px; }
.list-grid .other-title { font-size: 12.5px; -webkit-line-clamp: 2; }
.list-grid .other-meta { font-size: 11.5px; }

.promo-carousel, .other-carousel {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.promo-carousel { height: 210px; border-radius: 16px; background: var(--primary-soft); box-shadow: var(--shadow); }
.event-carousel { height: 150px; }
.promo-track, .other-track { display: flex; height: 100%; transition: transform .23s ease-out; }
.promo-track.is-dragging, .other-track.is-dragging { transition: none; }

.promo-slide {
    position: relative;
    display: block;
    min-width: 100%;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.promo-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-slide::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, rgba(0,0,0,.73), rgba(0,0,0,.42) 52%, rgba(0,0,0,.05)); }
/* สไลด์อีเวนท์ใช้ม่านขาวเพื่อให้ตัวอักษรสีเข้มอ่านออก แต่ของเดิมทึบเกือบทึบ (.94 ยาวถึง 52%)
   ภาพเลยซีดและเนื้อหาดูจมไปกับพื้น — ลดความทึบและให้จางเร็วขึ้น
   แล้วชดเชยความอ่านง่ายด้วยเงาขาวบาง ๆ ใต้ตัวอักษรแทน */
.promo-slide.is-event { color: var(--text-primary); }

.promo-slide.is-event::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .34) 46%, rgba(255, 255, 255, 0) 78%);
}

.promo-slide.is-event .promo-title,
.promo-slide.is-event .promo-meta {
    text-shadow: 0 1px 3px rgba(255, 255, 255, .85);
}

.promo-slide.is-event .promo-title { font-weight: 700; }
.promo-content { position: absolute; z-index: 1; inset: 12px 14px; display: flex; flex-direction: column; }
/* ป้ายหมวดหมู่บนรูป — โปร่งแสงให้เห็นภาพด้านหลัง
   ใช้ blur ช่วยให้ตัวอักษรขาวยังอ่านออกแม้รูปด้านหลังจะสว่างหรือลายเยอะ */
/* ป้ายหมวดหมู่ชิดขวาของรูป — ฝั่งซ้ายเป็นที่ของชื่อกิจกรรมและข้อมูลวันเวลา
   วางไว้ฝั่งเดียวกันแล้วสายตาต้องกวาดสลับไปมา */
.activity-badge {
    align-self: flex-end;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(107, 203, 77, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.promo-title { max-width: 82%; margin: auto 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.promo-meta { display: flex; align-items: center; gap: 4px; margin-top: 1px; font-size: 12px; }
.promo-meta svg { width: 12px; height: 12px; flex: 0 0 12px; stroke-width: 1.8; }
/* ราคาต้องเด่นกว่าบรรทัดวันเวลา — เป็นข้อมูลที่คนใช้ตัดสินใจก่อนกดเข้าไปดู
   ใช้เขียวแบรนด์ทึบสีเดียวกับปุ่ม "ลงทะเบียนเข้าร่วม" (var(--primary)) ให้เป็นภาษาเดียวกันทั้งเว็บ
   พื้นทึบแทน blur เพราะข้อความวางบนรูปที่สีไม่แน่นอน สีจางจะจมหายไปกับรูป */
.promo-price {
    align-self: flex-start;
    margin-top: 5px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
}

.promo-price svg { display: none; }

/* ปุ่ม "ลงทะเบียน" บนสไลด์ถูกถอดออกแล้ว — ทั้งสไลด์เป็นลิงก์ไปหน้ารายละเอียดอยู่แล้ว
   จึงไม่ต้องมีปุ่มซ้อนอีกชั้น สไตล์ .promo-cta ถูกลบตามไปด้วยไม่ให้เหลือโค้ดตาย */

.carousel-dots { display: flex; min-height: 13px; align-items: center; justify-content: center; gap: 6px; margin-top: 5px; }
.carousel-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--border); transition: width .15s, background .15s; }
.carousel-dot.is-active { width: 20px; background: var(--primary); }

.other-track { align-items: stretch; }
.other-page { display: grid; min-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.other-card { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: 0 4px 12px rgba(40, 70, 36, .06); }
.other-thumb { position: relative; height: 86px; overflow: hidden; }
.other-thumb img { width: 100%; height: 100%; object-fit: cover; }
.other-thumb .activity-badge { position: absolute; bottom: 6px; right: 6px; padding: 3px 8px; font-size: 11px; }
.other-body { padding: 8px; }
/* การ์ดแคบลง ชื่อจึงขึ้นได้สองบรรทัดแทนการตัดทิ้งตั้งแต่บรรทัดแรก */
.other-title { display: -webkit-box; overflow: hidden; margin: 0 0 4px; color: var(--text-primary); font-size: 11.5px; font-weight: 500; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.other-meta { display: flex; min-width: 0; align-items: center; gap: 4px; margin: 2px 0; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.other-meta span { overflow: hidden; text-overflow: ellipsis; }
.other-meta svg { width: 11px; height: 11px; flex: 0 0 11px; stroke-width: 1.8; }
.other-price { margin-top: 5px; color: var(--primary-hover); font-size: 13px; font-weight: 700; }

/* การ์ดข่าวสาร — ภาพ, ชื่อเรื่อง, คำอธิบายสั้น ๆ พอ ไม่มีวันเวลา/ราคาเหมือนกิจกรรม */
.other-desc { margin: 4px 0 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.page-state { padding: 54px 16px 24px; text-align: center; color: var(--text-secondary); }
.empty-icon { display: flex; width: 120px; height: 120px; align-items: center; justify-content: center; margin: 0 auto 14px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.empty-icon svg { width: 62px; height: 62px; stroke-width: 2; }
.empty-title { margin: 0; font-size: 14px; font-weight: 500; }
.recommendation-block { margin-top: 28px; text-align: left; }
.recommendation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.search-screen { position: fixed; z-index: 100; inset: 0; width: min(100%, 452px); margin: 0 auto; padding: 16px; overflow-y: auto; background: #fff; }
.search-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.search-input-wrap { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 3px 10px rgba(15,23,42,.08); }
/* สีเดียวกับไอคอนวงกลมในแถบบนหน้ากิจกรรม (.round-icon-button ใช้ --dark-green) ไม่ใช่สีเทาจาง */
.search-input-wrap svg { width: 17px; height: 17px; color: var(--dark-green); }
/* appearance: none ตัดหน้าตา searchfield ของ Safari ทิ้งทั้งชุด — ไม่งั้น iOS จะวาดกรอบมนของตัวเอง
   ซ้อนอยู่ในกรอบที่เราวาด กลายเป็นช่องซ้อนช่อง */
.search-input-wrap input {
    width: 100%;
    height: 44px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text-primary);
}

/* Safari วาดแว่นขยายกับปุ่มกากบาทของตัวเองให้ input[type=search] อัตโนมัติ
   ซ้อนกับไอคอนแว่นขยายที่เราวางไว้เอง กลายเป็นแว่นขยายสองอันติดกันบน iPhone
   ปิดของเบราว์เซอร์ทิ้ง เหลือไอคอนชุดเดียวที่คุมตำแหน่งและสีได้เอง */
.search-input-wrap input::-webkit-search-decoration,
.search-input-wrap input::-webkit-search-results-button,
.search-input-wrap input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ปุ่มกากบาทล้างคำค้นของ Safari — เก็บไว้ใช้งานได้ แต่ให้ขนาดคงที่ไม่ดันช่องพิมพ์ */
.search-input-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: none; }

/* ช่องค้นหาโฟกัสแล้วต้องเห็นว่ากำลังพิมพ์อยู่ตรงไหน — ของเดิมไม่มีสถานะโฟกัสเลย */
.search-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-result { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 10px; text-decoration: none; }
.search-result:hover { background: #F8FAF8; }
.search-result img { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 9px; object-fit: cover; background: var(--primary-soft); }
.search-result-body { min-width: 0; }
.search-result-title { overflow: hidden; margin: 0 0 2px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.search-result-date { margin: 0; color: var(--text-secondary); font-size: 12px; }

/* ไม่มีกรอบครอบข้อมูล — เนื้อหาไหลบนพื้นหน้าโดยตรงเหมือนหน้าลงทะเบียน
   เหลือความมนไว้ที่ตัวรูปปกอย่างเดียว เพราะเป็นรูป ไม่ใช่กรอบข้อมูล */
.detail-card { margin-top: 0; border: 0; border-radius: 0; background: transparent; }

.qr-unavailable { margin-top: 32px; padding: 48px 24px; text-align: center; }
.qr-unavailable h1 { margin: 0 0 12px; color: var(--text-primary); }
.qr-unavailable .detail-description { margin-inline: auto; max-width: 560px; }
.qr-unavailable-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.qr-unavailable-action:hover { background: var(--primary-hover); }
/* สัดส่วนภาพและความมนตาม handoff — เงาอ่อนใต้รูปยกภาพให้ลอยจากพื้นขาว */
.detail-hero { position: relative; aspect-ratio: 519/303; border-radius: 20px; overflow: hidden; background-position: center; background-size: cover; box-shadow: 0 6px 24px rgba(20, 66, 31, .12); }
.detail-hero.has-fallback { background: var(--primary-soft) url('../images/logo-farm.png') center/180px auto no-repeat; }
/* ---------- ส่วนหัวของหน้ารายละเอียด ----------
   ใช้ภาษาเดียวกับหัวหน้าจอลงทะเบียน: พื้นไล่สี + ปุ่ม "< กลับ" มุมซ้าย
   topbar ของ layout (เมนู/โลโก้/ค้นหา) ถูกซ่อน เพราะจะกลายเป็นแถบซ้อนกันสองชั้น
   และมีปุ่มย้อนกลับสองปุ่มที่ไปคนละที่ */
body.is-detail-page .public-topbar { display: none; }

/* พื้นหลังไล่สีชุดเดียวกันทุกหน้าฝั่งผู้เข้าร่วม — หน้าหลัก · รายละเอียด · ลงทะเบียน
   ทำให้การกดจากหน้าหนึ่งไปอีกหน้ารู้สึกเป็นเว็บเดียวกัน ไม่ใช่กระโดดข้ามธีม

   ต้องอยู่ที่ body ไม่ใช่ .public-app — เพราะ .public-app กว้างแค่คอลัมน์เนื้อหา (มีขอบซ้ายขวาข้างละ 16px)
   ถ้าไล่สีที่นั่น แถบเขียวจะมีขอบตัดตรงเป็นสี่เหลี่ยมลอยอยู่กลางจอ แทนที่จะเป็นพื้นหลังของทั้งหน้า
   และไล่ยาว 320px จบที่สีพื้นพอดี รอยต่อจึงมองไม่เห็น */
/* ไม่มีพื้นไล่สีเขียวแล้ว — ใช้พื้นเรียบเหมือนหน้าหลัก
   ส่วนหัวยังเป็นแถบ "‹ กลับ" เหมือนเดิม แค่ไม่มีพื้นสีรองอยู่ข้างหลัง */
body.is-detail-page { background-color: var(--background); }

/* หน้าหลักไม่ใช้พื้นไล่สีเขียว — ปล่อยเป็นพื้นเรียบ
   เพราะเนื้อหาส่วนบนเป็นชิปหมวดหมู่เขียวเข้มกับรูปกิจกรรมสีจัดอยู่แล้ว
   พื้นเขียวซ้อนเข้าไปอีกชั้นทำให้สีตีกันและรูปดูจมลงไปกับพื้น */
body.is-home-page { background-color: var(--background); }

/* grid 3 คอลัมน์ — ชื่อหน้าอยู่กึ่งกลางจอจริง ปุ่มกลับ/แชร์ประกบซ้ายขวา */
.detail-head {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 16px 0 12px;
}

.detail-head-title { font-size: 16px; font-weight: 600; color: var(--text-primary); text-align: center; }

.detail-share { justify-self: end; color: var(--text-primary); }

/* ป้ายยืนยันลอยใต้ปุ่มแชร์ — โผล่ตอนคัดลอกลิงก์สำเร็จ (เบราว์เซอร์ที่ไม่รองรับ Web Share API) แล้วหายเอง */
.detail-share-pill {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--dark-green);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow);
    animation: detail-share-pill-in .18s var(--ease-out, ease-out) both;
}

@keyframes detail-share-pill-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.detail-back {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.detail-back:hover { color: var(--primary-hover); }
.detail-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* badge บนหน้ารายละเอียด — พื้นทึบ #57ab45 (ต่างจาก badge โปร่งบนการ์ดหน้าแรก)
   ขนาดตัวอักษรเท่ากับ badge บนการ์ดหน้ากิจกรรม (12/600) ให้สเกลเดียวกันทั้งฝั่ง */
.detail-category-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    padding: 5px 14px;
    background: #57ab45;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}
.detail-body { padding: 18px 0 22px; }
/* สเกลอิงหน้ากิจกรรม — หัวข้อใหญ่สุดของฝั่งผู้เข้าร่วมคือ 18px เนื้อหา 13.5px */
.detail-body h1 { margin: 0 0 8px; font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--text-primary); }
.detail-meta { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; color: var(--text-secondary); font-size: 13.5px; }
.detail-meta svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; stroke-width: 1.8; color: var(--primary-hover); }
.detail-price { color: var(--text-secondary); }
.baht-icon { display: inline-flex; width: 17px; justify-content: center; color: var(--primary-hover); }
.detail-description { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
/* ไม่มีพื้นหลัง — วางเรียงต่อจากบรรทัดข้อมูลอื่นของกิจกรรม ใช้สีข้อความบอกความเร่งด่วนพอ */
.deadline-note { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: #b06a00; font-size: 13.5px; font-weight: 600; }
.deadline-note svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.8; }
/* ปุ่มหลัก — สี่เหลี่ยมขอบมน 14px เงาอ่อน ขนาดสัมพันธ์กับสเกลหน้ากิจกรรม */
/* ขนาดเดียวกับปุ่ม "เข้าสู่ระบบ" ของระบบประเมินสุขภาวะ (.tr-primary-button)
   ทั้งสอง flow อยู่ในแอปเดียวกัน ผู้ใช้สลับไปมาได้ ปุ่มหลักจึงต้องเป็นขนาดเดียวกันทั้งระบบ */
.registration-cta,
.registration-submit,
.registration-phone-row button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
/* ไม่มีเงา — ปุ่มอ้างอิงไม่มี และเงาทำให้ปุ่มดูใหญ่กว่าที่เป็นจริง */
.registration-cta { width: 100%; margin-top: 18px; }

/* โทนสีหน้ารายละเอียดตาม handoff — เขียวชุดเดียวกับ flow ลงทะเบียน (คนละเฉดกับเขียวการ์ดหน้าแรก) */
body.is-detail-page .detail-body h1 { color: #123c1c; }
body.is-detail-page .detail-description { color: #2c5e3a; }
body.is-detail-page .detail-meta { color: #1c4f2a; }
body.is-detail-page .detail-meta svg,
body.is-detail-page .baht-icon { color: #2c7a44; }
body.is-detail-page .registration-cta { background: #34c759; border-color: #34c759; }
body.is-detail-page .registration-cta:hover { background: #2bb14e; border-color: #2bb14e; }
.registration-cta:hover,
.registration-submit:hover,
.registration-phone-row button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* การ์ด check-in / แบบประเมิน / สถานะปิดรับ อยู่บนหน้าเดียวกัน จึงต้องไม่มีกรอบเหมือนกัน
   ใช้เส้นคั่นบางด้านบนแทนการครอบกล่อง ตามกติกาเดียวกับหน้าลงทะเบียน */
.registration-card { margin-top: 4px; padding: 20px 0 4px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.registration-card.is-closed { text-align: center; color: var(--text-secondary); }
.registration-card.is-closed h2 { margin: 0 0 6px; color: var(--text-primary); font-size: 16px; }
.registration-card.is-closed p { margin: 0; }
.registration-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.registration-heading.is-sub { margin: 24px 0 16px; padding-top: 20px; border-top: 1px solid var(--border); }
.registration-heading h2 { margin: 0; font-size: 16px; line-height: 1.4; }
.registration-heading p { margin: 2px 0 0; color: var(--text-secondary); font-size: 12px; }
.registration-step { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border: 1px solid var(--primary); border-radius: 50%; background: var(--primary-soft); color: var(--dark-green); font-weight: 600; }
.registration-field { margin-bottom: 15px; }
.registration-field label { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: 12px; font-weight: 500; }
.registration-field label span { color: #DC2626; }
.registration-field input,
.registration-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: var(--text-primary);
}
.registration-field input:focus,
.registration-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.registration-phone-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.registration-phone-row button { min-width: 92px; padding: 8px 14px; }
.registration-submit { width: 100%; margin-top: 16px; }
.registration-submit:disabled,
.registration-phone-row button:disabled { cursor: wait; opacity: .68; }
.registration-message { min-height: 20px; margin: 6px 0 0; color: var(--text-secondary); font-size: 12px; }
.registration-message.is-error { color: #B91C1C; }
.registration-message.is-success { color: var(--dark-green); }
.registration-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 6px; cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.registration-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--primary); }
.registration-consent b { color: #DC2626; }
.registration-success { padding: 20px 4px 4px; text-align: center; }
.registration-success-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 26px; }
.registration-success h2 { margin: 12px 0 4px; font-size: 18px; }
.registration-success p { margin: 0; color: var(--text-secondary); }
/* หน้าจอเช็กอินทีละขั้น — หนึ่งหน้าจอทำเรื่องเดียว ชื่อหัวข้อจึงใหญ่กว่าหัวการ์ดทั่วไป
   ไม่มีเลข "1" "2" นำหน้าแล้ว เพราะไม่ได้เห็นพร้อมกันจึงไม่มีอะไรให้เทียบลำดับ */
/* ไม่มีเส้นคั่นบนสุด — หน้านี้มีการ์ดใบเดียว เส้นจึงไม่ได้คั่นอะไรกับอะไร */
.checkin-card { margin-top: 0; padding-top: 4px; border-top: 0; }

.ck-title { margin: 0 0 6px; color: var(--text-primary); font-size: 20px; font-weight: 600; line-height: 1.35; }
.ck-sub { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }

/* ระยะช่องกรอก→ปุ่มให้กระชับ — ของเดิมเว้น 15+20+16px จนดูเหมือนคนละส่วนกัน
   ยังจองที่ให้ข้อความเตือนไว้ (min-height) เพื่อไม่ให้ปุ่มกระโดดตอนขึ้นข้อความ */
.ck-step .registration-field { margin-bottom: 0; }
.ck-step .registration-message { min-height: 18px; margin-top: 5px; }
.ck-step .registration-submit { margin-top: 6px; }

.ck-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.ck-back::before { content: '‹'; font-size: 17px; line-height: 1; }
.ck-back:hover { color: var(--dark-green); }

/* หน้าจอผลลัพธ์ — ไล่ความสำคัญจากชื่อกิจกรรมลงมาหาเวลา
   ชื่อผู้เช็กอินอยู่ใต้หัวข้อ เพราะสิ่งแรกที่ต้องรู้คือ "สำเร็จไหม" แล้วจึง "ของใคร" */
/* ต้องเจาะจงกว่า .registration-success p ที่ตั้ง margin: 0 ไว้ ไม่งั้นระยะห่างจะหายทั้งชุด */
.ck-done h2 { margin: 14px 0 0; font-size: 19px; }
/* คำต้อนรับเป็นตัวเด่น ชื่อกิจกรรมเป็นบรรทัดรอง — คนที่เพิ่งเช็กอินอ่านคำต้อนรับก่อน
   ชื่องานเขารู้อยู่แล้วว่ามางานไหน มีไว้ยืนยันว่าไม่ได้สแกนผิดงานเท่านั้น */
.registration-success .ck-done-welcome { margin: 14px 0 0; color: var(--dark-green); font-size: 17px; font-weight: 600; line-height: 1.4; }
.registration-success .ck-done-activity { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

/* สลิปยืนยัน — พื้นอ่อนไม่มีกรอบ แยกจากข้อความต้อนรับด้วยพื้นหลัง ไม่ใช่เส้นขอบ */
.ck-done-slip { margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--primary-soft); text-align: left; }
.ck-done-slip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ck-done-slip-row + .ck-done-slip-row { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(20, 83, 45, .1); }
.ck-done-slip dt { color: var(--text-secondary); font-size: 12.5px; }
.ck-done-slip dd { min-width: 0; margin: 0; color: var(--text-primary); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* การ์ดยืนยันชื่อก่อนกดเช็กอิน — ชื่อต้องเด่นที่สุดในหน้า เพราะเป็นสิ่งเดียวที่ต้องตรวจ
   ก่อนกดปุ่ม ถ้าไม่ใช่ชื่อตัวเองต้องเห็นได้ตั้งแต่ชำเลืองมอง */
.ck-confirm-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--primary-soft);
}

.ck-confirm-label { color: var(--text-secondary); font-size: 12.5px; }
.ck-confirm-name { color: var(--text-primary); font-size: 18px; font-weight: 600; line-height: 1.4; }

.checkin-name-list { display: grid; gap: 9px; }
.checkin-name-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
}
.checkin-name-row.is-done { border-color: var(--primary); background: var(--primary-soft); }
.checkin-name-row strong { min-width: 0; font-size: 13px; font-weight: 500; }
.checkin-person-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--dark-green); font-weight: 700; }
.checkin-name-row button { min-height: 38px; padding: 7px 12px; border: 1px solid var(--primary); border-radius: 9px; background: var(--primary); color: #fff; font-weight: 600; }
.checkin-name-row button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.checkin-name-row button:disabled { cursor: default; border-color: var(--border); background: #fff; color: var(--dark-green); }

/* ---------- กิจกรรมของฉัน (public/activities/my-activities + assets/js/public-my-activities.js) ----------
   ต่อยอดจากโครงหน้าเช็กอิน (.ck-*) — เพิ่มเฉพาะแท็บกับการ์ดรายการซึ่งของเดิมไม่มี
   ทุกค่าอ้างตัวแปรชุดเดียวกับหน้าอื่นฝั่งผู้เข้าร่วม ไม่มีสีใหม่

   หนึ่งการ์ดยาวสองถึงสามบรรทัด: ชื่องาน · วันเวลาสถานที่ · สถานะที่ยังค้างหรือทำไปแล้ว
   ไม่มีปุ่มบนการ์ด หน้านี้ทำหน้าที่เดียวคือให้ตรวจสอบ ไม่ใช่ให้ทำงานต่อ */

/* บรรทัดเดียวใต้ปุ่ม บอกว่าหน้านี้ปิดบังอะไรไว้ — ไม่ใช่กล่องคำเตือนเต็มใบ */
.ma-privacy { margin: 12px 0 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; text-align: center; }

/* แท็บ กำลังจะถึง / ที่ผ่านมา — สองชุดที่ไม่ต้องอ่านพร้อมกัน จึงตัดชุดที่ไม่ได้ดูออกจากจอไปเลย */
.ma-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.ma-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.4;
    cursor: pointer;
}
.ma-tab span {
    color: var(--text-secondary);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.ma-tab:hover { border-color: var(--primary); color: var(--dark-green); }
.ma-tab.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--dark-green); font-weight: 600; }
.ma-tab.is-on span { color: var(--dark-green); }
.ma-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ma-item { padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.ma-item + .ma-item { margin-top: 8px; }
/* ชื่อกิจกรรมยาวได้ไม่จำกัด — ตัดบรรทัดแทนการตัดท้าย เพราะเป็นตัวบอกว่ารายการนี้คืออะไร */
.ma-item-title { margin: 0; color: var(--text-primary); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
/* วัน เวลา รอบ สถานที่ รวมเป็นบรรทัดเดียว */
.ma-item-meta { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

.ma-item-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 7px 0 0; }
/* สิ่งเดียวที่ค้างอยู่และเจ้าตัวต้องจัดการ — โทนเตือน ไม่ใช่โทนผิดพลาด */
.ma-flag { padding: 2px 9px; border-radius: 999px; background: #FDF6E7; color: #96601A; font-size: 11px; font-weight: 600; }
/* สิ่งที่ทำไปแล้ว — เครื่องหมายถูกนำหน้า ไม่ใช่ป้ายสีเต็มใบ */
.ma-done { display: inline-flex; align-items: center; gap: 4px; color: var(--dark-green); font-size: 11.5px; }
.ma-done::before { content: '✓'; font-size: 11px; }

.ma-empty { margin: 0; padding: 12px 0 4px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; }


/* ---------- รายชื่อลงทะเบียน (public/activities/roster) ----------
   ปลายทางของปุ่มในการ์ดแจ้งเตือน LINE — ทีมงานเปิดจากมือถือ อ่านอย่างเดียว
   ใช้โครง .ck-* ของหน้าเช็กอินเป็นฐาน เพิ่มเฉพาะตารางรายชื่อซึ่งของเดิมไม่มี

   หนึ่งคน = หนึ่งแถว สี่คอลัมน์: ลำดับ · ชื่อ · เบอร์ · สถานะ
   คอลัมน์สถานะเว้นว่างได้เมื่อไม่มีอะไรค้าง — ช่องว่างอ่านเร็วกว่าคำว่า "ปกติ" ที่ซ้ำทุกแถว */
.rs-scroll { overflow-x: auto; margin: 0 0 4px; }
.rs-table { width: 100%; border-collapse: collapse; }
.rs-table th,
.rs-table td { padding: 10px 10px 10px 0; text-align: left; vertical-align: middle; }
.rs-table th {
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.rs-table td { border-bottom: 1px solid var(--border); font-size: 12.5px; }
.rs-table tr:hover td { background: var(--primary-soft); }

.rs-col-no { width: 26px; padding-right: 8px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* ชื่อคนไทยยาวได้ไม่จำกัด ให้กินที่ที่เหลือทั้งหมดแทนการตัดท้าย ตารางเลื่อนในกรอบตัวเองอยู่แล้ว */
.rs-name { min-width: 0; color: var(--text-primary); font-weight: 600; line-height: 1.45; }
.rs-phone { color: var(--dark-green); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.rs-phone:hover { color: var(--primary-hover); }

.rs-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* ค้างชำระ = สิ่งเดียวที่ต้องตามต่อ ใช้โทนเตือน ไม่ใช่โทนผิดพลาด */
.rs-badge.is-warn { background: #FDF6E7; color: #96601A; }
.rs-badge.is-ok { background: var(--primary-soft); color: var(--dark-green); }

.rs-empty { margin: 0; padding: 14px 0 4px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; }

.survey-section-title { margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--dark-green); font-size: 14px; }
.survey-question { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.survey-question legend { width: 100%; margin-bottom: 9px; color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: 1.5; }
.survey-question legend span { color: #DC2626; }
.survey-question textarea,
.survey-question select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; outline: none; background: #fff; color: var(--text-primary); resize: vertical; }
.survey-question textarea:focus,
.survey-question select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.survey-rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.survey-rating label { display: grid; min-width: 0; cursor: pointer; text-align: center; }
.survey-rating input { position: absolute; opacity: 0; pointer-events: none; }
.survey-rating span { display: flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-weight: 600; }
.survey-rating small { margin-top: 4px; color: var(--text-secondary); font-size: 9px; line-height: 1.25; }
.survey-rating input:checked + span { border-color: var(--primary); background: var(--primary); color: #fff; }
.survey-rating input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.survey-options { display: grid; gap: 7px; }
.survey-options label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.survey-options input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--primary); }
.survey-options.is-chips { display: flex; flex-wrap: wrap; }
.survey-options.is-chips label { position: relative; }
.survey-options.is-chips input { position: absolute; opacity: 0; }
.survey-options.is-chips span { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; }
.survey-options.is-chips input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--dark-green); }
.public-drawer-frame { position: fixed; z-index: 200; top: 0; left: 50%; width: 100%; max-width: 420px; height: 100vh; height: 100dvh; visibility: hidden; transform: translateX(-50%); pointer-events: none; transition: visibility 0s linear .3s; }
.public-drawer-frame.is-open { visibility: visible; transition-delay: 0s; }
.public-drawer-overlay { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .28s ease; }
.public-drawer-frame.is-open .public-drawer-overlay { opacity: 1; pointer-events: auto; }
.public-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 80%; max-width: 320px; padding: 16px 14px 12px; overflow-y: auto; background: #fff; box-shadow: 8px 0 24px rgba(31,41,55,.18); transform: translateX(-100%); pointer-events: none; transition: transform .28s ease; }
.public-drawer-frame.is-open .public-drawer { transform: translateX(0); pointer-events: auto; }
.public-drawer-close { position: absolute; top: 12px; right: 14px; display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--background); color: var(--text-secondary); }
.public-drawer-close:hover { background: var(--primary-soft); color: var(--dark-green); }
.public-drawer-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.public-drawer-close svg { width: 14px; height: 14px; }
.public-drawer-logo { display: block; margin: 2px 0 0 10px; height: 34px; width: auto; object-fit: contain; }
.public-menu-group-label { margin: 18px 0 4px; padding: 4px 10px 0; color: var(--text-secondary); font-size: 10.5px; letter-spacing: .06em; }
.public-menu-group { display: grid; gap: 6px; margin-top: 22px; }
/* เหลือไม่กี่รายการแล้ว จึงขยายให้กดง่ายและอ่านเป็นเมนูจริง ๆ (มีลูกศรบอกว่าไปหน้าอื่น) */
.public-menu-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; color: inherit; text-decoration: none; }
.public-menu-link:hover, .public-menu-link:focus-visible { background: var(--primary-soft); outline: none; }
.public-menu-icon { display: flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--dark-green); }
.public-menu-icon svg { width: 16px; height: 16px; }
.public-menu-link:hover .public-menu-icon { background: var(--primary); color: #fff; }
.public-menu-text { min-width: 0; flex: 1; color: var(--text-primary); font-size: 14px; font-weight: 500; }
.public-footer { padding: 20px 0 16px; color: var(--text-secondary); font-size: 12px; text-align: center; }

@media (max-width: 370px) {
    .public-app { width: min(100% - 20px, 420px); }
    .category-button { font-size: 9px; }
    .category-icon { width: 32px; height: 32px; }
    .detail-body { padding: 18px 0 22px; }
}

/* คอลัมน์เนื้อหายังคงกว้างแบบเดิมทุกขนาดจอ (ดีไซน์แบบแอปมือถือ) — จอกว้างแค่ไหน
   หมวดหมู่กิจกรรมก็ต้องพอดีแถวเดียวในความกว้างนี้เสมอ ไม่ล้นและไม่ต้องขยายทั้งหน้า */
@media (min-width: 640px) {
    .category-bar { justify-content: center; gap: 14px; }
    .category-button { flex: 0 1 64px; font-size: 11px; }
    .category-icon { width: 42px; height: 42px; }
    .category-icon svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   QR ทำแบบประเมินติดตามสุขภาพ — แยกเป็นหน้าจอละขั้นตอน
   ใช้คลาสร่วมกับหน้าลงทะเบียนกิจกรรม (registration-* · checkin-* · survey-*)
   ที่นี่มีเฉพาะส่วนที่หน้าอื่นไม่มี
   ========================================================================== */
.tr-card { padding: 20px 16px; }

/* ปุ่ม LINE ใช้สีแบรนด์ของ LINE ไม่ใช่สีเขียวของโครงการ ผู้ใช้จำปุ่มนี้จากสีเป็นหลัก */
.tr-line-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #06C755;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.tr-line-button:hover { background: #05b34c; }

.tr-or { position: relative; margin: 0 0 14px; text-align: center; }
.tr-or::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--border); content: ''; }
.tr-or span { position: relative; padding: 0 10px; background: var(--surface); color: var(--text-secondary); font-size: 12px; }

.tr-note { margin: 12px 0 0; color: var(--text-secondary); font-size: 12px; text-align: center; }

/* หน้าเชิญเชื่อม LINE ที่แอดมินส่งลิงก์ให้รายคน */
.tr-invite-lead { margin: 0 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
/* กล่องยืนยันตัวตนใช้สไตล์ชุดเดียวกับสลิปหน้าเช็กอิน (.ck-done-slip) ไม่ต้องมีสองชุดที่ต้องแก้ตามกัน */
.tr-invite-slip { margin-bottom: 16px; }
.tr-note a { color: var(--dark-green); }

.tr-banner { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
.tr-banner.is-success { border: 1px solid var(--primary); background: var(--primary-soft); color: var(--dark-green); }

/* แถวรอบ: เลขลำดับ / ชื่อรอบ + วันครบกำหนด / ปุ่มทำแบบประเมิน */
.tr-round-due { color: var(--text-secondary); font-size: 11.5px; font-weight: 400; }
.tr-round-due.is-over { color: #B91C1C; }

.tr-round-action {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.tr-round-action:hover { border-color: var(--primary-hover); background: var(--primary-hover); }

/* แถวเลือกชื่อ — ทั้งแถวกดได้ ไม่ใช่ต้องจิ้มวงกลมเล็ก ๆ */
.tr-choice { grid-template-columns: 18px minmax(0, 1fr); cursor: pointer; }
.tr-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.tr-choice-code { color: var(--text-secondary); font-size: 11.5px; font-weight: 400; }

.tr-signout { margin-top: 16px; text-align: center; }
.tr-link-button {
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.tr-link-button:hover { color: var(--dark-green); }

/* ==========================================================================
   หน้าทำแบบประเมิน — ทีละข้อ
   โครงและลำดับสายตาตาม design handoff (ออกแบบหน้าจอประเมินอาหารและสุขภาวะ)
   แต่ map ค่าสีเข้ากับตัวแปรของโปรเจกต์ ไม่ได้ hardcode ชุดสีของ handoff
   ตามที่ handoff เองระบุไว้ว่าถ้าปลายทางมี design system อยู่แล้วให้ map เข้าหาของเดิม
   ========================================================================== */
.tr-progress { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tr-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.tr-progress-round { min-width: 0; color: var(--text-primary); font-weight: 600; }
.tr-progress-count { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

.tr-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--border); }
.tr-progress-fill { display: block; height: 100%; border-radius: 99px; background: var(--primary); transition: width .3s ease; }

/* กล่องคำถาม — พื้นอ่อนแยกคำถามออกจากตัวเลือกอย่างชัดเจน */
.tr-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.tr-step[hidden] { display: none; }

.tr-question { margin-bottom: 14px; padding: 16px; border-radius: 14px; background: var(--surface-muted); }
.tr-question-section { display: block; margin-bottom: 7px; color: var(--dark-green); font-size: 11.5px; font-weight: 600; letter-spacing: .5px; }
.tr-question-text { display: block; width: 100%; padding: 0; color: var(--text-primary); font-size: 15.5px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.tr-question-hint { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 11.5px; }
.tr-required { color: #DC2626; }

/* ตัวเลือกเต็มความกว้าง กดได้ทั้งแถว — เป้าหมายการกดใหญ่พอสำหรับผู้สูงอายุ */
.tr-options { display: flex; flex-direction: column; gap: 9px; }

.tr-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 12px 15px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.tr-option:hover { border-color: var(--primary); }
.tr-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.tr-option-dot { position: relative; width: 19px; height: 19px; flex: 0 0 19px; border: 2px solid var(--border); border-radius: 50%; background: #fff; transition: border-color .15s ease, background .15s ease; }
.tr-option-dot.is-square { border-radius: 6px; }

.tr-option-label { min-width: 0; }

.tr-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.tr-option:has(input:checked) .tr-option-dot { border-color: var(--primary); background: var(--primary); }
.tr-option:has(input:checked) .tr-option-dot::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    content: '';
}
.tr-option:has(input:checked) .tr-option-dot.is-square::after { top: 2px; left: 4.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; border-radius: 0; background: none; transform: rotate(45deg); }

/* โฟกัสด้วยคีย์บอร์ดต้องเห็นได้ เพราะ input ตัวจริงถูกซ่อนไว้ */
.tr-option:has(input:focus-visible) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.tr-textarea,
.tr-input,
.tr-select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; outline: none; background: #fff; color: var(--text-primary); font-family: inherit; font-size: 14px; resize: vertical; }
.tr-textarea:focus,
.tr-input:focus,
.tr-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* ปุ่มหลักต้องกว้างกว่าปุ่มย้อนกลับชัดเจน — ทางเดินหลักคือเดินหน้า */
.tr-actions { display: flex; gap: 10px; margin-top: 18px; }

.tr-ghost-button { flex: 1; min-height: 46px; padding: 12px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; color: var(--text-secondary); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tr-ghost-button:hover { border-color: var(--primary); color: var(--dark-green); }

.tr-next { flex: 2; }

.tr-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.tr-primary-button:hover { background: var(--primary-hover); }
.tr-primary-button:disabled { background: var(--disabled-bg); cursor: default; }

.tr-error { margin-bottom: 14px; padding: 10px 13px; border-radius: 10px; background: var(--danger-bg); color: var(--danger-text); font-size: 12.5px; line-height: 1.5; }

/* หน้าสรุปหลังส่ง */
.tr-done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 4px 6px; text-align: center; }
.tr-done h2 { margin: 0; font-size: 18px; }
.tr-done p { margin: 0; max-width: 290px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; text-wrap: pretty; }

.tr-done-mark { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); }
.tr-done-mark i { width: 24px; height: 13px; margin-top: -6px; border-bottom: 4px solid var(--primary); border-left: 4px solid var(--primary); transform: rotate(-45deg); }

/* คำขอบคุณอยู่ติดหัวข้อ เป็นประโยคเดียวกัน ไม่ใช่ย่อหน้าใหม่ */
.tr-done-thanks { margin-top: -6px !important; color: var(--text-primary) !important; font-size: 14px !important; font-weight: 500; }

/* ใบยืนยันการส่ง — ป้ายกำกับซ้าย ค่าขวา อ่านเป็นคู่ได้ในบรรทัดเดียว */
.tr-done-receipt { width: 100%; max-width: 290px; margin: 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; text-align: left; }
.tr-done-receipt > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tr-done-receipt > div + div { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); }
.tr-done-receipt dt { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.tr-done-receipt dd { min-width: 0; margin: 0; color: var(--text-primary); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }


/* ==========================================================================
   หน้าจอฝั่งผู้เข้าร่วม — ยืนยันตัวตน / เลือกชื่อ / ลงทะเบียน / แดชบอร์ด / รอบ / กรอกแทน
   โครงและลำดับสายตาตาม design handoff · สีทั้งหมด map เข้าตัวแปรของโปรเจกต์
   ========================================================================== */
.tr-eyebrow { display: block; margin-bottom: 6px; color: var(--dark-green); font-size: 11px; font-weight: 600; letter-spacing: .6px; }
.tr-project-title { margin: 0 0 14px; color: var(--text-primary); font-size: 15.5px; font-weight: 700; line-height: 1.5; text-wrap: pretty; }
.tr-project-line { margin: 0 0 14px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; text-wrap: pretty; }

.tr-heading { margin: 0 0 4px; color: var(--text-primary); font-size: 17px; font-weight: 700; line-height: 1.5; }
.tr-subheading { margin: 0 0 14px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }

/* ==========================================================================
   หน้าแรกของแบบประเมินสุขภาวะ — ทางแยก "ทำครั้งแรก" / "เคยทำแล้ว"
   จัดกลางทั้งใบ เพราะทั้งหน้ามีคำถามเดียวกับปุ่มสองปุ่ม ไม่มีอะไรให้ไล่อ่านเป็นแถว
   ========================================================================== */
.tr-start { text-align: center; }

.tr-start-title { margin: 4px 0 0; color: var(--text-primary); font-size: 20px; font-weight: 600; line-height: 1.35; }

/* คำถามเป็นบรรทัดรอง ไม่ใช่หัวข้อซ้อนหัวข้อ — ตัวเน้นในหน้านี้มีได้อย่างเดียวคือปุ่ม */
.tr-start-question {
    margin: 6px 0 20px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    text-wrap: pretty;
}

.tr-start-actions { display: flex; flex-direction: column; gap: 10px; }



/* หมายเหตุขอบเขตข้อมูล ท้ายหน้าทำแบบประเมินรอบถัดไป */

/* ---------- กล่องความเชื่อมั่น ---------- */
.tr-trust { margin-bottom: 16px; padding: 15px 17px; border-radius: 14px; background: var(--surface-muted); }
.tr-trust-more { margin-top: 12px; }
.tr-trust-more summary { color: var(--dark-green); font-size: 12.5px; cursor: pointer; list-style: none; }
.tr-trust-more summary::-webkit-details-marker { display: none; }
.tr-trust-more[open] summary { margin-bottom: 10px; }
.tr-trust-more p { margin: 0 0 8px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; line-height: 1.65; text-wrap: pretty; }

/* ---------- ปุ่ม LINE / ปุ่มรอง ---------- */
.tr-line-mark { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50% 50% 50% 4px; background: #fff; }

.tr-secondary-button {
    /* ใช้กับทั้ง <button> และ <a> — <a> ไม่จัดกลางให้เอง ต้องบอกตรงนี้ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    padding: 12px;
    border: 1.5px solid var(--primary-soft);
    border-radius: 12px;
    background: #fff;
    color: var(--dark-green);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.tr-secondary-button:hover { border-color: var(--primary); background: var(--primary-soft); }

.tr-field-hint { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.tr-form-submit { margin-top: 16px; }

/* ---------- เลือกชื่อในเบอร์เดียวกัน ---------- */
.tr-people { display: flex; flex-direction: column; gap: 10px; }

.tr-person { border: 1.5px solid var(--border); border-radius: 14px; background: #fff; }
.tr-person[open] { border-color: var(--primary); background: var(--surface-muted); }
.tr-person summary { display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; list-style: none; }
.tr-person summary::-webkit-details-marker { display: none; }

.tr-person-avatar { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--dark-green); font-weight: 600; }
.tr-person-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; flex: 1; }
.tr-person-name { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.tr-person-meta { color: var(--text-muted); font-size: 11.5px; }

.tr-person-chevron { width: 7px; height: 7px; flex: none; border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); transform: rotate(45deg); transition: transform .2s ease; }
.tr-person[open] .tr-person-chevron { transform: rotate(225deg); }

.tr-person-confirm { display: flex; flex-direction: column; gap: 9px; padding: 0 14px 14px; }
.tr-person-confirm label { color: var(--text-primary); font-size: 12px; font-weight: 500; }

/* เดิมมี .tr-prefix-input สำหรับช่องกรอกตัวอักษรสั้น ๆ (16px เว้นวรรค 2px)
   ตอนนี้ช่องรหัสบุคคลเป็นช่องปกติเหมือนช่องอื่น จึงใช้ .registration-field input ชุดเดียวกันทั้งหมด
   ไม่งั้นช่องรหัสตัวใหญ่กว่าช่องเบอร์ที่อยู่ติดกันโดยไม่มีเหตุผล */

/* ---------- chip เลือกช่วงอายุ ---------- */
.tr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-chip { position: relative; }
.tr-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tr-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; border: 1.5px solid var(--border); border-radius: 99px; background: #fff; color: var(--text-secondary); font-size: 13.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.tr-chip:has(input:checked) span { border-color: var(--primary); background: var(--primary-soft); color: var(--dark-green); font-weight: 600; }
.tr-chip:has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------- แดชบอร์ด ---------- */
.tr-user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }

/* ปุ่มเปิดแผ่นเลือกบุคคล — เดิมเป็น <summary> ของ <details> */
.tr-user-trigger { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 12px; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.tr-user-trigger:hover { background: var(--surface-muted); }

.tr-user-avatar { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--dark-green); font-weight: 600; }
.tr-user-text { display: flex; min-width: 0; flex-direction: column; }
.tr-user-hello { color: var(--text-muted); font-size: 11.5px; }
.tr-user-name { overflow: hidden; color: var(--text-primary); font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tr-user-chevron { width: 7px; height: 7px; flex: none; border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); transform: rotate(45deg); transition: transform .2s ease; }

/* ==========================================================================
   แผ่นเลือกบุคคล — ลอยขึ้นจากขอบล่าง
   ตัวแทนครอบครัวสลับไปทำแบบประเมินของคนในบ้านได้จากที่นี่
   ========================================================================== */
.tr-sheet {
    /* ตัว <dialog> กินเต็มจอ ความกว้างจริงไปคุมที่ .tr-sheet-body
       เพื่อให้คิดจากความกว้างจอด้วยสูตรเดียวกับ .public-app เป๊ะ ขอบซ้ายขวาจะได้ตรงกัน
       (ถ้าให้ dialog กว้างเองแล้ว margin auto จัดกลาง จะปัดเศษคนละแบบแล้วเหลื่อมกัน 1px) */
    width: 100%;
    max-width: none;
    /* margin-top: auto ดันกล่องไปชิดขอบล่าง — <dialog> จัดกลางแนวตั้งให้เป็นค่าเริ่มต้น */
    margin: auto 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.tr-sheet::backdrop { background: rgba(17, 24, 39, .45); }

.tr-sheet[open] { animation: tr-sheet-in 260ms cubic-bezier(.22, 1, .36, 1) both; }

@keyframes tr-sheet-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.tr-sheet-body {
    display: flex;
    /* สูตรเดียวกับ .public-app — แก้ที่นั่นต้องแก้ที่นี่ตามกันเสมอ */
    width: min(100% - 32px, 420px);
    margin: 0 auto;
    flex-direction: column;
    gap: 10px;
    /* ขอบล่างไม่มนเพราะชนขอบจอพอดี · เผื่อ safe area ของ iPhone ที่มีแถบล่าง */
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    background: var(--surface);
}

/* ขีดจับด้านบน — บอกว่ากล่องนี้ปัดลงปิดได้ (ปิดจริงด้วยการกดนอกกล่องหรือ Esc) */
.tr-sheet-grip { width: 40px; height: 4px; margin: 2px auto 6px; border-radius: 99px; background: var(--border); }

.tr-sheet-title { margin: 0 0 4px; color: var(--text-primary); font-size: 16px; font-weight: 600; }

/* รายชื่อบนหน้าเลือกบุคคลตอนเข้าระบบ — ในแผ่นบนหน้าหลักใช้ gap ของ .tr-sheet-body อยู่แล้ว */
.tr-person-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }

/* หนึ่งคน = หนึ่งปุ่ม เต็มความกว้าง กดตรงไหนของแถวก็ได้ ไม่ใช่ต้องเล็งคำว่า "สลับ" */
.tr-person {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.tr-person:hover { border-color: var(--primary); background: var(--surface-muted); }
.tr-person.is-active { border-color: var(--primary); background: var(--primary-soft); }

.tr-person-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--dark-green);
}
.tr-person-avatar svg { width: 22px; height: 22px; }
.tr-person.is-active .tr-person-avatar { background: var(--primary); color: #fff; }

.tr-person-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.tr-person-name { color: var(--text-primary); font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-person-meta { color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }

.tr-person-check { width: 22px; height: 22px; flex: none; color: var(--primary); }
.tr-person-switch { flex: none; color: var(--dark-green); font-size: 13px; font-weight: 600; }

.tr-sheet-signout {
    width: 100%;
    padding: 12px;
    margin-top: 2px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--danger-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.tr-sheet-signout:hover { background: var(--danger-bg); }

.tr-user-chip { flex: none; padding: 6px 12px; border-radius: 99px; background: var(--surface-muted); color: var(--text-secondary); font-size: 11.5px; white-space: nowrap; }

/* การ์ดเดียวในหน้าที่ใช้สีเขียว — สิ่งที่ต้องทำตอนนี้ */
.tr-due-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 18px 20px; border-radius: 16px; background: var(--primary-soft); }
.tr-due-card.is-empty { background: var(--surface-muted); }
.tr-due-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: 11.5px; }
.tr-due-head a { color: var(--dark-green); font-size: 12px; }
.tr-due-name { margin: 0; color: var(--dark-green); font-size: 16px; font-weight: 600; }
.tr-due-meta { margin: 0 0 4px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }

.tr-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.tr-stats > div { padding: 14px 16px; border-radius: 14px; background: var(--surface-muted); }
.tr-stat-number { display: block; color: var(--text-primary); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
/* วันที่เต็มยาวกว่าตัวเลขล้วนมาก ใช้ขนาดเดียวกันแล้วล้นกล่องครึ่งจอ */
.tr-stat-number.is-date { font-size: 15px; letter-spacing: 0; }
.tr-stat-label { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12.5px; }

.tr-row-form { margin-bottom: 12px; }

/* ---------- ตั้งค่ารับแจ้งเตือน: หนึ่งช่องทางต่อหนึ่งแถว ---------- */
.tr-notify-title { margin: 20px 0 2px; color: var(--text-primary); font-size: 14.5px; font-weight: 600; }
.tr-notify-sub { margin: 0 0 10px; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }

.tr-channel-list { display: flex; flex-direction: column; gap: 8px; }

.tr-channel {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.tr-channel:hover { border-color: var(--primary); background: var(--surface-muted); }

/* ไอคอนช่องทาง — สี่เหลี่ยมมน ไม่ใช่วงกลม เพราะวงกลมในระบบนี้หมายถึง "คน"
   ใช้รูปเดียวกันสองความหมายแล้วผู้ใช้จะอ่านผิดว่าแถวนี้คือคนอีกคน */
.tr-channel-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.tr-channel-icon svg { width: 21px; height: 21px; }
/* สีแบรนด์ของ LINE ไม่ใช่สีเขียวของโครงการ — ชุดเดียวกับ .tr-line-outline ที่ใช้อยู่ในไฟล์นี้ */
.tr-channel-icon.is-line { background: #06C755; color: #fff; }


.tr-channel-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.tr-channel-name { color: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.tr-channel-meta { overflow: hidden; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }

/* เชื่อมบัญชีแล้วแต่ยังไม่ได้เพิ่มเพื่อน — วางต่อจากแถวสวิตช์ ไม่ใช่ลอยอยู่หัวหน้าจอ
   เพราะสิ่งที่ต้องแก้อยู่ที่แถวนั้น คนอ่านจะได้เชื่อมโยงได้เองว่าเกี่ยวกับสวิตช์ที่เพิ่งเห็น
   ใช้เส้นขอบสีแบรนด์ไม่ใช่สีแดง — ยังไม่เสร็จขั้นตอน ไม่ใช่ผิดพลาด */
.tr-friend-call {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--primary);
    border-radius: 14px;
    background: var(--primary-soft);
}
.tr-friend-text { margin: 0 0 10px; color: var(--dark-green); font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }

/* ---------- รายชื่อคนในบ้าน: หนึ่งแถวต่อหนึ่งคน (แสดงเมื่อมีมากกว่าหนึ่งคนเท่านั้น) ---------- */
.tr-notify-head { margin: 12px 0 6px; color: var(--text-muted); font-size: 11.5px; }

/* กล่องเดียว เส้นคั่นระหว่างแถว — ไม่ใช่การ์ดแยกใบต่อคน ซึ่งกินที่และดูเป็นคนละเรื่องกัน */
.tr-notify-list { overflow: hidden; border-radius: 14px; background: var(--surface-muted); }

.tr-notify-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 0;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.tr-notify-list > form + form .tr-notify-row { border-top: 1px solid var(--border); }
.tr-notify-row:hover:not([disabled]) { background: var(--surface); }

/* คนที่เชื่อม LINE เองแล้ว ตัวแทนกดปิดให้ไม่ได้ — ต้องดูออกว่ากดไม่ได้ ไม่ใช่กดแล้วเงียบ */
.tr-notify-row[disabled] { cursor: default; }

.tr-notify-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-notify-note { flex: none; color: var(--text-muted); font-size: 11.5px; }
.tr-toggle { display: flex; width: 46px; height: 27px; flex: none; align-items: center; padding: 3px; border-radius: 99px; background: var(--border); transition: background .2s ease; }
.tr-toggle i { width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.tr-toggle.is-on { background: var(--primary); }
.tr-toggle.is-on i { transform: translateX(19px); }

.tr-info-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 13px 16px; border-radius: 14px; background: var(--surface-muted); color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }
.tr-info-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.tr-info-label { color: var(--text-muted); font-size: 12.5px; }
.tr-info-value { color: var(--text-primary); font-size: 15px; font-weight: 600; }

.tr-outline-button { flex: none; padding: 8px 16px; border: 1.5px solid var(--primary-soft); border-radius: 10px; color: var(--dark-green); font-size: 13px; font-weight: 600; text-decoration: none; }
.tr-outline-button:hover { border-color: var(--primary); background: var(--primary-soft); }

/* ---------- รายการรอบ ---------- */
.tr-rounds { display: flex; flex-direction: column; gap: 10px; }

.tr-round { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; }
.tr-round.is-open { border-color: var(--primary); background: var(--surface-muted); }
.tr-round.is-locked .tr-round-name { color: var(--text-muted); }

.tr-round-icon { display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--surface-muted); color: var(--text-muted); font-weight: 600; }
.tr-round.is-open .tr-round-icon { background: var(--primary-soft); color: var(--dark-green); }
.tr-round.is-done .tr-round-icon { background: var(--primary); color: #fff; }

.tr-round-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.tr-round-name { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.tr-round-date { color: var(--text-muted); font-size: 12px; }

.tr-round-badge { flex: none; padding: 6px 12px; border-radius: 99px; background: var(--surface-muted); color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.tr-round-badge.is-done { background: var(--primary-soft); color: var(--dark-green); }

/* ---------- ป้ายกรอกแทน ---------- */
.tr-proxy-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 9px 13px; border-radius: 10px; background: #FFFBEB; color: #8A6D1F; font-size: 12px; line-height: 1.5; }
.tr-proxy-banner .tr-link-button { color: #8A6D1F; }

/* --------------------------------------------------------------------------
   ปรับให้กระชับขึ้น — บรรทัดชิดขึ้น ฟอนต์เล็กลง
   เขียนทับค่าด้านบนโดยตั้งใจ ไม่ไปแก้ของเดิมทีละจุด จะได้เห็นชัดว่าอะไรถูกบีบบ้าง
   ระวัง: ห้ามต่ำกว่า 12px กับข้อความที่ต้องอ่านจริง เพราะกลุ่มตัวอย่างมีผู้สูงอายุ
   -------------------------------------------------------------------------- */
/* การ์ดนี้ไม่มีพื้นหลังและไม่มีขอบ (ดู .detail-card) ระยะบนจึงเป็นที่ว่างเปล่า ๆ
   ที่ดันเนื้อหาลงไปจากหัวเว็บโดยไม่ได้คั่นอะไร — เหลือไว้พอไม่ให้ติดกันก็พอ */
.tr-card { padding: 6px 14px 18px; }

.tr-eyebrow { margin-bottom: 4px; font-size: 11px; }

.tr-project-title { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.tr-project-line { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }

.tr-heading { font-size: 16px; }
.tr-subheading { margin: 0 0 12px; font-size: 12px; line-height: 1.45; }

/* กล่องความเชื่อมั่น — พื้นเขียวอ่อนตามภาพ ไม่ใช่เทา */
.tr-trust { margin-bottom: 12px; padding: 12px 13px; border-radius: 12px; background: var(--primary-soft); }
.tr-trust-more { margin-top: 9px; }
.tr-trust-more summary { font-size: 12px; text-decoration: underline; }
.tr-trust-more[open] summary { margin-bottom: 8px; }
.tr-trust-more p { margin: 0 0 6px; padding-top: 8px; font-size: 11.5px; line-height: 1.55; }

/* ปุ่ม LINE — สูงพอกดง่ายแต่ไม่เทอะทะ */
.tr-line-button { min-height: 48px; margin-bottom: 10px; border-radius: 12px; font-size: 15.5px; }
.tr-line-mark { width: 19px; height: 19px; flex: 0 0 19px; }

.tr-or { margin: 18px 0 12px; }
.tr-or span { font-size: 12px; }

.tr-secondary-button { min-height: 44px; margin-top: 2px; font-size: 14.5px; }

/* ระยะระหว่างช่องกรอกกับคำอธิบายใต้ช่อง */
.tr-card .registration-field { margin-bottom: 10px; }
.tr-card .registration-field label { margin-bottom: 5px; font-size: 12.5px; }
.tr-card .registration-field input,
.tr-card .registration-field select { min-height: 44px; }

.tr-field-hint { margin-top: 4px; font-size: 11px; line-height: 1.4; }

.tr-note { margin: 10px 0 0; font-size: 12.5px; }
.tr-footnote { margin: 14px 0 0; color: var(--text-muted); font-size: 11.5px; text-align: center; }
.tr-footnote a { color: var(--text-secondary); }

.tr-form-submit { margin-top: 12px; }

/* ---------- หน้าอื่นกระชับตามกัน ---------- */
.tr-question { margin-bottom: 12px; padding: 13px 14px; border-radius: 12px; }
/* คำถามบางข้อยาวหลายบรรทัด ขนาดเดิมกินพื้นที่จนตัวเลือกตกจอ
   14.5/600 → 14/500 อ่านง่ายเท่าเดิมแต่เห็นคำถามกับคำตอบพร้อมกันได้ */
.tr-question-text { font-size: 14px; font-weight: 500; line-height: 1.55; }
.tr-option { min-height: 44px; padding: 11px 13px; font-size: 13.5px; }
.tr-actions { margin-top: 14px; }

.tr-people { gap: 8px; }
.tr-person summary { padding: 10px 12px; }
.tr-person-confirm { padding: 0 12px 12px; }

.tr-user-row { margin-bottom: 10px; }
.tr-due-card { margin-bottom: 10px; padding: 14px 16px; }
.tr-due-name { font-size: 15px; }
.tr-due-meta { font-size: 12px; }
.tr-stats { gap: 8px; margin-bottom: 10px; }
.tr-stats > div { padding: 12px 14px; }
.tr-stat-number { font-size: 20px; }
.tr-stat-label { font-size: 12px; }
.tr-info-row { padding: 11px 14px; font-size: 12px; }
.tr-channel { padding: 11px 13px; }
.tr-notify-row { padding: 10px 14px; }
.tr-row-form { margin-bottom: 10px; }

.tr-rounds { gap: 8px; }
.tr-round { padding: 12px 14px; }
.tr-round-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; }

/* --------------------------------------------------------------------------
   หน้าเข้าสู่ระบบ — เหลือเฉพาะสิ่งที่ต้องกด รายละเอียดโครงการซ่อนไว้ให้กดอ่านเอง
   -------------------------------------------------------------------------- */
.tr-login-title { margin: 0 0 12px; color: var(--text-primary); font-size: 17px; font-weight: 600; line-height: 1.4; }

.tr-about { margin-bottom: 14px; }
.tr-about summary { display: inline-flex; align-items: center; gap: 6px; color: var(--dark-green); font-size: 12.5px; cursor: pointer; list-style: none; }
.tr-about summary::-webkit-details-marker { display: none; }
.tr-about summary::after { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; content: ''; }
.tr-about[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }

.tr-about[open] summary { margin-bottom: 10px; }
.tr-about > *:not(summary) { padding: 0 2px; }

.tr-about-project { margin: 0 0 10px; color: var(--text-primary); font-size: 13.5px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.tr-about-note { margin: 8px 0 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.55; text-wrap: pretty; }

/* ไอคอน LINE จริง ไม่ใช่รูปทรงที่วาดด้วย CSS */
.tr-line-icon { width: 21px; height: 21px; flex: 0 0 21px; }

/* ปุ่มเข้าสู่ระบบด้วยเบอร์ — ขอบเขียว พื้นขาว */
.tr-secondary-button { border-color: var(--primary); color: var(--dark-green); }

/* --------------------------------------------------------------------------
   บังคับซ่อนเนื้อหาใน <details> ที่ยังไม่เปิด

   เบราว์เซอร์ซ่อนให้เองด้วยกฎ details:not([open]) > *:not(summary) { display:none }
   ที่มาจาก user-agent stylesheet — แต่กฎของเราที่ตั้ง display: flex เป็น author style
   ซึ่งชนะ user-agent เสมอ เนื้อหาเลยโผล่ตลอดเวลา ต้องเขียนทับกลับเองด้วยกฎที่เจาะจงกว่า
   -------------------------------------------------------------------------- */
.tr-about:not([open]) > *:not(summary) { display: none; }

/* ==========================================================================
   รอบที่สาม — คำชี้แจงบนแดชบอร์ด · ไทม์ไลน์รอบ · ปุ่มขนาดเดียวกันทั้งระบบ
   ========================================================================== */

/* ---------- คำชี้แจงการใช้ข้อมูล ---------- */
.tr-disclosure { margin-top: 9px; }
.tr-disclosure summary { color: var(--dark-green); font-size: 12px; text-decoration: underline; cursor: pointer; list-style: none; }
.tr-disclosure summary::-webkit-details-marker { display: none; }
.tr-disclosure .tr-disclosure-hide,
.tr-disclosure[open] .tr-disclosure-show { display: none; }
.tr-disclosure[open] .tr-disclosure-hide { display: inline; }
.tr-disclosure:not([open]) > *:not(summary) { display: none; }

.tr-disclosure-list { margin: 9px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.tr-disclosure-list li { color: var(--text-secondary); font-size: 11.5px; line-height: 1.55; text-wrap: pretty; }

.tr-toggle-note { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }

/* ---------- ไทม์ไลน์รอบแบบประเมิน ---------- */
.tr-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* บนหน้าหลักมีสวิตช์แจ้งเตือนต่อท้ายไทม์ไลน์ ต้องมีระยะคั่น ไม่ให้ดูเป็นรอบที่ห้า */
.tr-timeline + .tr-row-form { margin-top: 16px; }

.tr-tl { position: relative; display: flex; gap: 12px; padding: 0 0 18px 0; }
.tr-tl:last-child { padding-bottom: 0; }

/* เส้นเชื่อมระหว่างรอบ — วาดจากจุดวงกลมลงไปหารอบถัดไป */
.tr-tl::before { position: absolute; top: 28px; bottom: 0; left: 13px; width: 2px; background: var(--border); content: ''; }
.tr-tl:last-child::before { display: none; }
.tr-tl.is-done::before { background: var(--primary); }

.tr-tl-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}
.tr-tl.is-open .tr-tl-dot { border-color: var(--primary); color: var(--dark-green); }
.tr-tl.is-done .tr-tl-dot { border-color: var(--primary); background: var(--primary); color: #fff; }

.tr-tl-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; padding-top: 3px; }

.tr-tl-head { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.tr-tl-order { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.tr-tl.is-locked .tr-tl-order { color: var(--text-muted); }

.tr-tl-badge { padding: 2px 9px; border-radius: 99px; background: var(--surface-muted); color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.tr-tl-badge.is-open { background: transparent; color: var(--primary); font-weight: 600; }
.tr-tl-badge.is-done { background: var(--primary-soft); color: var(--dark-green); }

.tr-tl-name { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.tr-tl.is-locked .tr-tl-name { color: var(--text-muted); }
.tr-tl-date { margin: 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }

/* เต็มความกว้างของกล่องรอบ ไม่ใช่ชิดซ้ายตามความยาวข้อความ — เป็นงานหลักของหน้านี้ */
.tr-tl-action { align-self: stretch; margin-top: 10px; }

/* ==========================================================================
   ปุ่มทั้งระบบใช้ขนาดเดียวกัน — สูงเท่ากัน ฟอนต์เท่ากัน มุมเท่ากัน
   ปุ่มเต็มความกว้างสำหรับการกระทำหลัก · ปุ่มสั้นสำหรับการกระทำในแถว
   ========================================================================== */
.tr-primary-button,
.tr-secondary-button,
.tr-line-button,
.tr-ghost-button {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.tr-line-button { margin-bottom: 10px; box-shadow: none; }

.tr-tl-action,
.tr-round-action,
.tr-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.tr-tl-action,
.tr-round-action { border: 1px solid var(--primary); background: var(--primary); color: #fff; }
.tr-tl-action:hover,
.tr-round-action:hover { border-color: var(--primary-hover); background: var(--primary-hover); }

.tr-outline-button { border: 1px solid var(--primary); background: #fff; color: var(--dark-green); }

/* ปุ่มในไทม์ไลน์เป็นการกระทำหลักของหน้า ไม่ใช่ลิงก์ประกอบในแถว
   จึงใช้ขนาดชุดเดียวกับปุ่มเต็มความกว้างทั้งระบบ (เท่ากับ .tr-primary-button เป๊ะ)

   ต้องอยู่หลังกฎชุดปุ่มสั้นด้านบน เพราะ .tr-tl-action ยังอยู่ในรายชื่อนั้นเพื่อคง
   display/การจัดกลางไว้ — ทับเฉพาะขนาด ไม่ต้องเขียนคุณสมบัติซ้ำทั้งชุด */
.tr-tl-action { min-height: 44px; padding: 10px 16px; border-radius: 10px; font-size: 14px; }

/* --------------------------------------------------------------------------
   ลิงก์และตัวกดเปิดคำชี้แจง — ให้ดูเป็นตัวควบคุมที่ตั้งใจออกแบบ ไม่ใช่คำที่ขีดเส้นใต้ลอย ๆ
   ขีดเส้นใต้ทำให้ดูเหมือนลิงก์ในเอกสารเก่า ๆ ใช้น้ำหนักตัวอักษรกับลูกศรบอกแทน
   -------------------------------------------------------------------------- */
.tr-disclosure { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(53, 82, 44, .12); }

.tr-disclosure summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    color: var(--dark-green);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.tr-disclosure summary::after {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
    content: '';
}
.tr-disclosure[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.tr-disclosure summary:hover { color: var(--primary-hover); }

/* ลิงก์ท้ายฟอร์ม — เน้นด้วยน้ำหนักและสี ไม่ใช่เส้นใต้ */
.tr-note { color: var(--text-secondary); }
.tr-note a { color: var(--dark-green); font-weight: 600; text-decoration: none; }
.tr-note a:hover { color: var(--primary-hover); text-decoration: underline; }

.tr-due-head a { font-weight: 600; text-decoration: none; }
.tr-due-head a:hover { text-decoration: underline; }

.tr-link-button { text-decoration: none; font-weight: 600; }
.tr-link-button:hover { text-decoration: underline; }

/* แถบบอกสถานะระหว่างทาง — ใช้ตอนพากลับมายืนยันเบอร์เพื่อเชื่อม LINE และตอนเชื่อมสำเร็จ */
.tr-notice { margin-bottom: 12px; padding: 10px 13px; border-radius: 10px; background: var(--surface-muted); color: var(--text-secondary); font-size: 12px; line-height: 1.55; text-wrap: pretty; }
.tr-notice.is-success { border: 1px solid var(--primary); background: var(--primary-soft); color: var(--dark-green); }

/* --------------------------------------------------------------------------
   รอบสี่ — ตัวกดเปิดรายละเอียดโครงการเป็นสีเทา · ลิงก์ใต้ฟอร์มกลับไปแบบเดิม
   -------------------------------------------------------------------------- */

/* ตัวกดสีเทา ไม่แย่งความสนใจจากปุ่มเข้าสู่ระบบซึ่งเป็นสิ่งที่ต้องทำจริง */
.tr-about { margin-bottom: 14px; }
.tr-about summary { color: var(--text-secondary); font-size: 12.5px; font-weight: 400; }
.tr-about summary:hover { color: var(--text-primary); }
.tr-about[open] summary { margin-bottom: 10px; }

.tr-about .tr-disclosure-list { margin-top: 10px; }

/* ลิงก์ใต้ฟอร์มกลับไปใช้รูปแบบเดิม — ขีดเส้นใต้ตลอด */
.tr-note a { font-weight: 400; text-decoration: underline; }
.tr-note a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Popup กรอกเบอร์เพื่อเชื่อม LINE — เปิดอัตโนมัติเมื่อกลับมาจาก LINE
   ใช้ <dialog> ของเบราว์เซอร์ ไม่ต้องมีไลบรารีและปิดด้วย Esc ได้เอง
   -------------------------------------------------------------------------- */
.tr-dialog { width: min(360px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 12px 40px rgba(30, 60, 30, .22); }
.tr-dialog::backdrop { background: rgba(17, 24, 39, .45); }

.tr-dialog-body { padding: 20px 18px 18px; }
.tr-dialog-title { margin: 0 0 6px; color: var(--text-primary); font-size: 16px; font-weight: 600; }
.tr-dialog-text { margin: 0 0 14px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
/* เนื้อหาเอกสารความยินยอม — ยาวไม่จำกัด จึงต้องเลื่อนในกล่องเอง ไม่ใช่ดันกล่องยาวเกินจอ
   white-space: pre-wrap เพราะข้อความมาจากช่องพิมพ์ของแอดมิน ย่อหน้าที่เขาเคาะไว้ต้องคงอยู่ */
.tr-consent-doc {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding: 12px 13px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    overscroll-behavior: contain;
}

/* popup บอกรหัสบุคคลหลังลงทะเบียน — จัดกลางทั้งใบ เพราะมีสิ่งเดียวให้อ่านคือรหัส */
.tr-code-body { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tr-code-body .tr-dialog-title { margin: 4px 0 0; }
.tr-code-body .tr-dialog-text { margin: 0; }
.tr-code-body .tr-primary-button { margin-top: 12px; }

/* ตัวรหัสเป็นสิ่งเดียวที่ต้องจำจากหน้านี้ ให้ใหญ่พอที่อ่านครั้งเดียวแล้วจำได้ */
.tr-code-value {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
}

.tr-dialog-actions { display: flex; gap: 8px; margin-top: 12px; }
.tr-dialog-actions .tr-primary-button { flex: 2; }
.tr-dialog-actions .tr-ghost-button { flex: 1; }

/* --------------------------------------------------------------------------
   รอบห้า — ปุ่ม LINE เป็นทางเลือกรอง · ฟอนต์ของ select ให้ตรงกับทั้งระบบ
   -------------------------------------------------------------------------- */

/* ปุ่ม LINE แบบขอบ — ใช้เมื่อ LINE เป็นทางเลือกรอง (หน้าเข้าสู่ระบบ) หรือเป็นการชวนเชื่อม (แดชบอร์ด)
   คงสีแบรนด์ LINE ไว้ที่ไอคอนกับขอบ ผู้ใช้จำปุ่มนี้จากสีเป็นหลัก */
.tr-line-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1.5px solid #06C755;
    border-radius: 10px;
    background: #fff;
    color: #06A548;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.tr-line-outline:hover { background: #F2FBF5; }
.tr-line-outline .tr-line-icon { color: #06C755; }

.tr-hint-center { margin: 7px 0 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; text-align: center; text-wrap: pretty; }

/* select ของเบราว์เซอร์ใช้ฟอนต์ระบบปฏิบัติการ ไม่ใช่ฟอนต์ของหน้า
   ต้องบังคับ inherit ไม่งั้นช่องเพศกับพื้นที่จะเป็นคนละฟอนต์กับช่องอื่นทั้งหน้า */
.tr-card select,
.tr-card input,
.tr-card textarea,
.registration-field select,
.registration-field input { font-family: inherit; }

.tr-card select,
.registration-field select {
    font-size: 14px;
    color: var(--text-primary);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* ตัวเลือก placeholder ต้องดูจางกว่าค่าจริง จะได้รู้ว่ายังไม่ได้เลือก */
.tr-card select:has(option[value=""]:checked),
.registration-field select:has(option[value=""]:checked) { color: var(--text-muted); }

/* กล่องถามก่อนสลับบัญชี — ปุ่มสองปุ่มเรียงกัน "ใช้บัญชีเดิม" ต้องเด่นพอ ๆ กับ "สลับ"
   ไม่ใช่ทำให้ปุ่มสลับเด่นข้างเดียวจนคนกดตามโดยไม่ทันคิด */
.tr-switch { display: flex; flex-direction: column; gap: 10px; }
.tr-switch-text { margin: 0; line-height: 1.55; }
.tr-switch-actions { display: flex; gap: 8px; }
.tr-switch-actions > * { flex: 1; }

/* ---------------------------------------------------------------------------
   หน้าจอกำลังเข้าสู่ระบบด้วย LIFF — คลุมทับหน้าไว้ระหว่างตรวจตัวตน
   กันไม่ให้เห็นฟอร์มกรอกเบอร์แวบหนึ่งก่อนหน้าจะเด้งไปแดชบอร์ด
   --------------------------------------------------------------------------- */
.tr-liff-cover {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface, #fff);
}
.tr-liff-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tr-liff-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--border, #e3e8e1);
    border-top-color: var(--primary);
    animation: tr-liff-spin 0.8s linear infinite;
}
.tr-liff-text { margin: 0; color: var(--text-secondary, #5b6b57); font-size: 13.5px; }

@keyframes tr-liff-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tr-liff-spinner { animation: none; }
}