/* ============================================================
   kongboon.org — public information page
   Component styles translated from the Kongbun Phra Aphat
   design system bundle (_ds_bundle.js). Tokens come from
   assets/ds/styles.css — do not redefine them here.

   No ornament. No donation UI. No member data.
   ============================================================ */

/* ---------- Layout ---------- */
.wrap{max-width:900px;margin:0 auto;padding:0 var(--space-5)}
.section{padding:var(--section-y) 0}
.section--card{background:var(--surface-card);border-top:var(--border-w) solid var(--border-hairline);border-bottom:var(--border-w) solid var(--border-hairline)}
.section--sunken{background:var(--surface-sunken);border-bottom:var(--border-w) solid var(--border-hairline)}
[id]{scroll-margin-top:88px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,246,238,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:var(--border-w) solid var(--border-hairline);
}
.site-header .wrap{min-height:64px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font:var(--weight-medium) var(--size-caption)/1 var(--font-body)}
.site-nav a{color:var(--text-muted);text-decoration:none;border-bottom:none}
.site-nav a:hover{color:var(--text-brand)}
.site-nav a.is-emphasis{color:var(--text-brand);font-weight:var(--weight-semibold)}

/* ---------- Wordmark (components/brand/Wordmark.jsx) ---------- */
.wordmark{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;border-bottom:none}
.wordmark__name{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--text-heading)}
.wordmark__sub{font-family:var(--font-body);font-weight:400;font-size:10px;line-height:1.4;color:var(--text-muted);margin-top:6px}
.wordmark--inverse .wordmark__name{color:var(--paper-1);font-size:18px}
.wordmark--inverse .wordmark__sub{color:var(--ink-4)}

/* ---------- Icon (components/core/Icon.jsx) ----------
   Lucide static SVG, tinted with a CSS mask so it inherits currentColor.
   Never hand-roll an SVG and never substitute an emoji or Unicode glyph. */
.i{
  display:inline-block;flex:none;width:20px;height:20px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.i-12{width:12px;height:12px} .i-13{width:13px;height:13px}
.i-16{width:16px;height:16px} .i-17{width:17px;height:17px}
.i-18{width:18px;height:18px} .i-19{width:19px;height:19px}

/* ---------- Button (components/core/Button.jsx) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h-md);padding:0 var(--space-5);
  border-radius:var(--radius-sm);
  font:var(--weight-semibold) var(--size-body-sm)/1 var(--font-body);
  cursor:pointer;text-decoration:none;border:var(--border-w) solid transparent;
  transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard);
}
.btn:active{transform:translateY(1px)}
.btn--sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--size-caption)}
.btn--lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--size-body)}
.btn--full{display:flex;width:100%}
.btn--primary{background:var(--surface-brand);color:var(--text-on-brand);border-color:var(--saffron-3);box-shadow:var(--shadow-1)}
.btn--primary:hover{background:var(--saffron-4);border-color:var(--saffron-4);color:var(--text-on-brand)}
.btn--secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--paper-2);border-color:var(--border-strong);color:var(--text-body)}

/* ---------- Badge (components/core/Badge.jsx) ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:3px var(--space-2);border-radius:var(--radius-xs);
  font:var(--weight-semibold) var(--size-micro)/1.3 var(--font-body);
  letter-spacing:var(--ls-caption);border:var(--border-w) solid;
}
.badge--neutral{color:var(--text-muted);background:var(--paper-2);border-color:var(--border-hairline)}
.badge--verified{color:var(--status-verified-fg);background:var(--status-verified-bg);border-color:var(--celadon-1)}
.badge--pending{color:var(--status-pending-fg);background:var(--status-pending-bg);border-color:var(--saffron-1)}
.badge--flagged{color:var(--status-flagged-fg);background:var(--status-flagged-bg);border-color:#E8C9C2}
.badge--info{color:var(--status-info-fg);background:var(--status-info-bg);border-color:#C6D8E5}
.badge-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ---------- Card (components/core/Card.jsx) ---------- */
.card{
  border-radius:var(--radius-lg);padding:var(--space-5);overflow:hidden;
  background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);
  box-shadow:var(--shadow-1);
}
.card--sunken{background:var(--surface-sunken)}
.card--lg{padding:var(--space-6)}

/* ---------- Alert (components/feedback/Alert.jsx) ---------- */
.alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:var(--border-w) solid}
.alert__icon{margin-top:2px}
.alert__title{font:var(--weight-semibold) var(--size-body-sm)/1.4 var(--font-body);margin-bottom:2px}
.alert__body{font:var(--weight-regular) var(--size-caption)/1.6 var(--font-body);color:var(--text-body)}
.alert--info{background:var(--status-info-bg);border-color:#C6D8E5}
.alert--info .alert__icon,.alert--info .alert__title{color:var(--status-info-fg)}
.alert--verified{background:var(--status-verified-bg);border-color:var(--celadon-1)}
.alert--verified .alert__icon,.alert--verified .alert__title{color:var(--status-verified-fg)}

/* ---------- StatBlock (components/patterns/StatBlock.jsx) ---------- */
.stat{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.stat__label{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--weight-semibold) var(--size-micro)/1.2 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.stat__value{display:flex;align-items:baseline;gap:var(--space-2)}
.stat__num{
  font-family:var(--font-mono);font-weight:500;font-size:var(--size-display-3);
  line-height:1.05;letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums;color:var(--text-heading);
}
.stat__unit{font:var(--weight-regular) var(--size-caption)/1 var(--font-body);color:var(--text-muted)}
.stat__note{font:var(--text-caption-role);color:var(--text-muted)}

/* ---------- ProgressMeter (components/feedback/ProgressMeter.jsx) ---------- */
.meter{display:flex;flex-direction:column;gap:var(--space-2)}
.meter__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.meter__label{font:var(--weight-medium) var(--size-caption)/1.4 var(--font-body);color:var(--text-muted)}
.meter__vals{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--size-caption);color:var(--text-body)}
.meter__vals b{font-weight:600;color:var(--text-heading)}
.meter__vals span{color:var(--text-faint)}
.meter__track{height:9px;border-radius:var(--radius-pill);background:var(--paper-3);overflow:hidden;box-shadow:var(--shadow-inset-sunken)}
.meter__fill{height:100%;border-radius:var(--radius-pill);background:var(--saffron-3);transition:width var(--dur-reveal) var(--ease-out-soft)}
.meter__fill--verified{background:var(--celadon-3)}

/* ---------- LedgerRow (components/patterns/LedgerRow.jsx) ---------- */
.ledger{min-width:620px}
.ledger-row{
  display:grid;grid-template-columns:96px 1fr 132px 128px;gap:var(--space-4);align-items:center;
  padding:var(--space-4);border-bottom:var(--rule-w) solid var(--border-hairline);
}
.ledger-row__date{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted);font-variant-numeric:tabular-nums}
.ledger-row__main{min-width:0}
.ledger-row__desc{display:block;font:var(--weight-medium) var(--size-body-sm)/1.45 var(--font-body);color:var(--text-body)}
.ledger-row__meta{display:flex;gap:var(--space-2);align-items:center;font:var(--text-caption-role);color:var(--text-muted)}
.ledger-row__ref{font-family:var(--font-mono);color:var(--text-faint)}
.ledger-row__amt{
  text-align:right;font-family:var(--font-mono);font-weight:500;font-size:var(--size-body-sm);
  font-variant-numeric:tabular-nums;color:var(--text-heading);
}
.ledger-row__amt--in{color:var(--celadon-3)}
.ledger-row__status{justify-self:start}

/* ---------- Report table ---------- */
.table{margin-top:var(--space-7);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-card);overflow-x:auto}
.table__row{display:grid;grid-template-columns:92px 1fr 1fr 84px 1fr;gap:var(--space-3);padding:13px var(--space-5);border-bottom:var(--border-w) solid var(--border-hairline);min-width:620px}
.table__row--head{padding:var(--space-3) var(--space-5);background:var(--surface-sunken)}
.table__row--total{padding:15px var(--space-5);background:var(--surface-sunken);border-bottom:0}
.table__row>*{font-size:var(--size-caption)}
.table__row>*+*{text-align:right}
.table__row--head .eyebrow+.eyebrow{text-align:right}
.table__in{color:var(--celadon-3)}
.table__out{color:var(--text-heading)}
.table__claims{color:var(--text-muted)}
.table__total-label{font:var(--weight-semibold) var(--size-caption)/1.3 var(--font-body);color:var(--text-heading)}
.table__row--total .amount{font-size:var(--size-body-sm)}

/* ---------- Content helpers ---------- */
.eyebrow-block{display:block;color:var(--text-muted)}
.lede{max-width:var(--measure-prose);color:var(--text-body)}
.note-micro{font-size:var(--size-micro);color:var(--text-muted)}
.grid{display:grid}
.grid--auto-250{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-5)}
.grid--auto-280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-7);align-items:start}
.grid--auto-170{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px}
.grid--auto-240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.stack-14{display:grid;gap:14px}

/* Numbered step list */
.step{display:grid;grid-template-columns:56px 1fr;gap:var(--space-5);align-items:start;padding:28px 0;border-top:var(--border-w) solid var(--border-hairline)}
.step__no{font-size:var(--size-display-3);color:var(--saffron-3)}
.step__title{font:var(--weight-semibold) var(--size-body)/1.4 var(--font-display);color:var(--text-heading)}
.step__desc{margin:10px 0 0;max-width:62ch;font-size:var(--size-body-sm);color:var(--text-body)}

/* FAQ */
.faq{max-width:var(--container-reading)}
.faq__item{padding:26px 0;border-top:var(--border-w) solid var(--border-hairline)}
.faq__q{font:var(--weight-semibold) var(--size-body)/1.45 var(--font-display);color:var(--text-heading)}
.faq__a{margin:10px 0 0;font-size:var(--size-body-sm);color:var(--text-body)}

/* Footer — full-bleed ink plate */
.site-footer{background:var(--ink-0);color:var(--paper-1)}
.site-footer .wrap{padding-top:var(--space-8);padding-bottom:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6);align-items:start}
.site-footer .eyebrow{color:rgba(250,246,238,.5)}
.site-footer a{color:rgba(250,246,238,.82);border-bottom:none;text-decoration:none}
.site-footer a:hover{color:var(--saffron-2)}
.foot-col{display:grid;gap:var(--space-2);font-size:var(--size-micro);color:rgba(250,246,238,.66)}
.foot-about{margin:18px 0 0;font-size:var(--size-micro);color:rgba(250,246,238,.66);max-width:40ch}

@media (max-width:720px){
  .wrap{padding:0 var(--space-4)}
  .section{padding:var(--space-8) 0}
  h1{font-size:var(--size-display-2)}
  h2{font-size:var(--size-display-3)}
  .step{grid-template-columns:40px 1fr;gap:var(--space-4)}
}

/* ---------- Image slots ----------
   The design system ships no imagery: DESIGN-SYSTEM.md § Backgrounds and imagery
   allows photography on the PUBLIC page only, and only if it is consented and
   documentary. No monk photography, no stock, no full-bleed, no gradient overlay.
   Each slot is a bounded figure on the paper ground — replace .imgslot with the
   .figure markup below once a real, cleared image exists. */
.imgslot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  width:100%;border-radius:var(--radius-lg);
  background:var(--surface-sunken);
  border:var(--border-w-strong) dashed var(--border-default);
  color:var(--text-muted);text-align:center;padding:var(--space-5);
}
.imgslot__icon{color:var(--text-faint)}
.imgslot__subject{font:var(--weight-semibold) var(--size-body-sm)/1.4 var(--font-body);color:var(--text-body);max-width:46ch}
.imgslot__spec{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--ls-mono);color:var(--text-muted)}
.imgslot__consent{font:var(--weight-regular) var(--size-micro)/1.5 var(--font-body);color:var(--text-faint);max-width:44ch}
.imgslot--16x9{aspect-ratio:16/9}
.imgslot--4x3{aspect-ratio:4/3}
.imgslot--3x1{aspect-ratio:3/1}

/* 🔴 ๒๔ ก.ย. ๒๕๖๙ — ซ่อนช่องภาพบน **หน้าจริง**
   ช่องเหล่านี้เป็น *ใบสั่งงานถึงมูลนิธิ* (ระบุหัวเรื่อง · อัตราส่วน · เงื่อนไขความยินยอม)
   ไม่ใช่เนื้อหาของหน้า — แต่มันเรนเดอร์เป็นตัวอักษรบน `https://kongboon.org` จริง
   ⇒ ⇒ ***คนนอกที่เปิดดูเห็นเว็บที่ยังสร้างไม่เสร็จ*** (เจอตอนตรวจว่าทำไม AWS
   ปฏิเสธคำขอ SES production access — รีวิวเวอร์เปิด WebsiteURL ที่เราให้ไป)

   🛑 **ไม่ลบ markup** — ใบสั่งงานยังต้องอยู่ให้ทีมอ่าน (`grep imgslot__subject`)
   ✅ **ถอดบรรทัดนี้ออกเมื่อมีภาพที่เคลียร์แล้ว** พร้อมเปลี่ยนไปใช้ `.figure` ข้างล่าง */
.imgslot{display:none}
/* กล่องห่อที่มีแต่ช่องภาพ ยังถือ `margin-top` อยู่แม้สูง 0 ⇒ เหลือช่องว่างเปล่า
   `:only-child` กันไม่ให้โดนกล่องที่มีของอื่นอยู่ด้วย (เช่น `.stack-14`) */
:where(div):has(> .imgslot:only-child){display:none}

/* Replacement markup once a cleared image exists:
   <figure class="figure figure--16x9">
     <img src="assets/img/<name>.jpg" alt="<คำบรรยายภาพเป็นภาษาไทย>" width="1600" height="900" loading="lazy" decoding="async">
     <figcaption>คำบรรยายภาพ · ได้รับความยินยอมเมื่อ <span class="amount">ว/ด/ป</span></figcaption>
   </figure> */
.figure{margin:0;width:100%}
.figure img{
  display:block;width:100%;height:auto;object-fit:cover;
  border-radius:var(--radius-lg);border:var(--border-w) solid var(--border-hairline);
  background:var(--surface-sunken);
}
.figure--16x9 img{aspect-ratio:16/9}
.figure--4x3 img{aspect-ratio:4/3}
.figure--3x1 img{aspect-ratio:3/1}
.figure figcaption{margin-top:var(--space-3);font:var(--text-caption-role);color:var(--text-muted)}