/* =========================================================================
   UNIQ · รายงานผลการประเมินความพึงพอใจ — Design System
   อ้างอิงระบบจริงจาก unique.co.th
     ฟอนต์  IBM Plex Sans Thai (Thin/Light/Regular/Medium/SemiBold/Bold)
     สี     พื้นขาว #FFFFFF · ตัวอักษร #000000 / #323333 / #555555
            แดงองค์กร #BD1F27 · แดงเข้ม #95191F

   สองโหมด — light เป็นค่าเริ่มต้น สลับด้วยสวิตช์มุมขวาบน (จำค่าไว้ใน localStorage)
   ตัวแปรเฉดกราฟตั้งชื่อตาม "ระดับการเน้น" ไม่ใช่ความสว่าง
     sq-1 / lk-2 = เน้นน้อยสุด (ใกล้สีพื้น)   sq-6 / lk-5 = เน้นมากสุด (ไกลสีพื้น)
   ทั้งสองโหมดจึงกลับทิศให้เองโดยที่โค้ดกราฟไม่ต้องรู้เรื่องธีม
   ทุกเฉดไล่จาก hue เดียวกับ #BD1F27 (OKLCH 26.5°) และผ่าน validate_palette.js
   ครบทั้งสองโหมด (monotone L · ΔL ≥ 0.06 · ปลายที่ใกล้พื้นสุด ≥ 2:1)
   ========================================================================= */

:root, :root[data-theme="light"] {
  /* --- surfaces --- */
  --plane:        #ffffff;
  --surface:      #fafafa;
  --surface-2:    #f0efee;
  --surface-3:    #e5e3e1;

  /* --- ink (contrast บนพื้นขาว) ---
     ink 21.0:1 · ink-2 12.2:1 · ink-3 7.5:1 · ink-4 4.7:1 */
  --ink:          #000000;
  --ink-2:        #323333;
  --ink-3:        #555555;
  --ink-4:        #767676;

  /* --- brand --- */
  --brand:        #bd1f27;   /* บล็อกสีแบรนด์ที่มีตัวอักษรขาวทับ (คงที่ทั้งสองโหมด) */
  --accent:       #bd1f27;   /* มาร์กกราฟ + เส้นเน้น (7.5:1 บนพื้นขาว) */
  --accent-dim:   #95191f;
  --accent-text:  #95191f;   /* แดงที่ใช้เป็นตัวอักษรได้ (9.9:1) */

  /* --- ordinal: Likert (lk-5 = เน้นมากสุด) --- */
  --lk-5: #9b1f1f;  --lk-4: #c72e2d;  --lk-3: #e15a52;  --lk-2: #ee897f;

  /* --- ordinal: sequential 6 ระดับ (sq-1 = เน้นน้อยสุด) --- */
  --sq-1: #ec9e96;  --sq-2: #e67a71;  --sq-3: #dd534b;
  --sq-4: #c9302e;  --sq-5: #ac1119;  --sq-6: #831a1a;

  /* --- chrome --- */
  --hair:         rgba(0, 0, 0, 0.13);
  --hair-strong:  rgba(0, 0, 0, 0.30);
  --grid:         rgba(0, 0, 0, 0.07);
  --track:        rgba(0, 0, 0, 0.075);
  --hover:        rgba(0, 0, 0, 0.04);
  --bar-bg:       rgba(255, 255, 255, 0.92);
  --hero-grid:    rgba(0, 0, 0, 0.045);
  --glow:         rgba(189, 31, 39, 0.10);
  --invert-bg:    #000000;   /* tooltip · ปุ่มที่เลือกอยู่ */
  --invert-fg:    #ffffff;
  --shadow:       rgba(0, 0, 0, 0.24);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --plane:        #100d0c;
  --surface:      #1a1614;
  --surface-2:    #241f1c;
  --surface-3:    #2e2723;

  /* ink 18.7:1 · ink-2 13.4:1 · ink-3 8.2:1 · ink-4 4.6:1 บนพื้น #100d0c */
  --ink:          #fbf9f6;
  --ink-2:        #ded7ce;
  --ink-3:        #b0a79c;
  --ink-4:        #857c73;

  --brand:        #bd1f27;
  --accent:       #e24943;   /* 5.3:1 บนพื้นเข้ม */
  --accent-dim:   #b7191e;
  --accent-text:  #f0a9a1;   /* 7.9:1 */

  /* กลับทิศ: เน้นมากสุด = สว่างสุด */
  --lk-5: #f58076;  --lk-4: #e14e47;  --lk-3: #bc2727;  --lk-2: #822f2b;
  --sq-1: #822f2b;  --sq-2: #b7191e;  --sq-3: #d23936;
  --sq-4: #e25f57;  --sq-5: #ea867c;  --sq-6: #f0a9a1;

  --hair:         rgba(251, 249, 246, 0.12);
  --hair-strong:  rgba(251, 249, 246, 0.26);
  --grid:         rgba(251, 249, 246, 0.08);
  --track:        rgba(251, 249, 246, 0.10);
  --hover:        rgba(251, 249, 246, 0.05);
  --bar-bg:       rgba(16, 13, 12, 0.90);
  --hero-grid:    rgba(251, 249, 246, 0.055);
  --glow:         rgba(226, 73, 67, 0.20);
  --invert-bg:    #2e2723;
  --invert-fg:    #fbf9f6;
  --shadow:       rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

:root {
  --font: "IBM Plex Sans Thai", "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Noto Sans Thai", system-ui, sans-serif;
  --maxw: 1360px;
  --gut: clamp(18px, 3.2vw, 42px);
  --sec-pad: clamp(50px, 5.6vh, 80px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tint: 0.4s var(--ease);   /* จังหวะเปลี่ยนสีตอนสลับธีม */
}

/* ========================= base ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--tint), color var(--tint);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.24; letter-spacing: -0.008em; }
p { margin: 0; }
a { color: inherit; }
svg { display: block; }
b, strong { font-weight: 600; }
::selection { background: var(--brand); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ========================= theme switch ========================= */
.themeswitch {
  position: fixed; top: 13px; right: var(--gut); z-index: 960;
  width: 64px; height: 34px; padding: 3px;
  display: flex; align-items: center;
  border: 1px solid var(--hair); border-radius: 100px;
  background: var(--surface-2); cursor: pointer;
  transition: background-color var(--tint), border-color var(--tint);
  -webkit-tap-highlight-color: transparent;
}
.themeswitch:hover { border-color: var(--hair-strong); }
.themeswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.themeswitch__knob {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.45, 1.55, 0.5, 1), background-color var(--tint);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .themeswitch__knob { transform: translateX(30px); }

.themeswitch__icon { width: 17px; height: 17px; overflow: visible; }
.ts-sun, .ts-moon {
  transform-box: view-box; transform-origin: 12px 12px;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.ts-sun > circle { fill: currentColor; }
.ts-beams { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.ts-moon { fill: currentColor; opacity: 0; transform: rotate(-72deg) scale(0.25); }
:root[data-theme="dark"] .ts-sun { opacity: 0; transform: rotate(72deg) scale(0.25); }
:root[data-theme="dark"] .ts-moon { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .themeswitch__knob, .ts-sun, .ts-moon { transition: none; }
}
/* เว้นที่ให้สวิตช์ ไม่ให้ทับข้อความในแถบบน */
.topbar { padding-right: calc(var(--gut) + 78px); }

/* ========================= scroll progress ========================= */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: transparent; z-index: 9999; pointer-events: none;
}
.progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transform-origin: left;
}

/* ========================= top bar =========================
   นี่คือ site header ของ pakorn.in.th จึงแสดงตลอดตั้งแต่บนสุด
   ช่วงอยู่บน hero พื้นหลังโปร่ง พอเลื่อนลงจึงมีพื้นหลัง + เส้นคั่น        */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 10px; padding-left: var(--gut);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.topbar.on {
  background: var(--bar-bg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--hair);
}
.topbar .mark { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.topbar .meta { font-size: 14.5px; color: var(--ink-3); letter-spacing: 0.02em; white-space: nowrap; }

/* โลโก้ผู้จัดทำ — สลับไฟล์ตามธีม (สองไฟล์ขนาดเท่ากันเป๊ะ) */
.brand { display: block; flex: none; line-height: 0; border-radius: 3px; }
.brand__logo { height: 38px; width: auto; }
.brand__logo--dark { display: none; }
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.mark__sep { width: 1px; height: 32px; background: var(--hair); flex: none; }
.mark__title { min-width: 0; }
.mark__title b, .mark__title span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mark__title b { font-weight: 600; font-size: 15.5px; letter-spacing: 0.005em; }
.mark__title span { font-size: 13.5px; color: var(--ink-3); letter-spacing: 0.01em; }

@media (max-width: 1080px) { .topbar .meta { display: none; } }
@media (max-width: 780px) {
  .mark__sep, .mark__title { display: none; }
  .brand__logo { height: 34px; }
}

/* UNIQ monogram — ใช้ระบุ "ลูกค้าของรายงาน" ในส่วน hero */
.monogram {
  width: 36px; height: 36px; flex: none; border-radius: 3px;
  background: var(--brand);
  display: grid; place-items: center;
  font-weight: 600; font-size: 17px; line-height: 1; color: #fff;
}
.monogram.lg { width: 56px; height: 56px; font-size: 26px; border-radius: 4px; }

/* ========================= section nav rail ========================= */
.rail {
  position: fixed; right: max(14px, 1.2vw); top: 50%; transform: translateY(-50%);
  z-index: 880; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.rail.on { opacity: 1; pointer-events: auto; }
.rail button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px;
  justify-content: flex-end; padding: 5px 0;
}
.rail button i {
  display: block; width: 22px; height: 2px; background: var(--hair-strong);
  border-radius: 2px; transition: all 0.3s var(--ease);
}
.rail button span {
  font-size: 13.5px; letter-spacing: 0.01em; color: var(--ink-3);
  opacity: 0; transform: translateX(6px); transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.rail:hover button span { opacity: 1; transform: none; }
.rail button:hover i, .rail button[aria-current="true"] i { width: 34px; background: var(--accent); }
.rail button[aria-current="true"] span { opacity: 1; transform: none; color: var(--ink); }
/* ป้ายชื่อส่วนจะทับเนื้อหาถ้าจอไม่กว้างพอ — โชว์เฉพาะขีดจนกว่าจะมีที่ว่างจริง */
@media (max-width: 1620px) { .rail button span { display: none; } }
@media (max-width: 1200px) { .rail { display: none; } }

/* ========================= hero =========================
   พื้นเดียวกับทั้งหน้า ไม่มีบล็อกสีตัดกัน — เว็บบริษัทใช้บล็อกดำก็จริง
   แต่ดำของเขามีภาพโครงการรองอยู่เสมอ พื้นทึบเปล่า ๆ จึงลอยหลุด
   ที่นี่ใช้เส้นแดงองค์กรเป็นตัวเน้นแทนการเปลี่ยนพื้น                        */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: 74svh; padding: 112px 0 72px; overflow: hidden;
  border-bottom: 1px solid var(--hair);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(118% 90% at 78% 28%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(118% 90% at 78% 28%, #000 0%, transparent 72%);
}
.hero__glow {
  position: absolute; width: 54vw; height: 54vw; max-width: 760px; max-height: 760px;
  right: -10vw; top: -14vw; pointer-events: none;
  background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
  filter: blur(24px);
}
.hero .wrap { position: relative; }

/* two-column hero on wide screens — fills the right half instead of leaving it empty */
.hero__cols { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); column-gap: clamp(28px, 4vw, 60px); align-items: center; }
.hero__side { border-left: 1px solid var(--hair); padding-left: clamp(24px, 3vw, 46px); }
@media (max-width: 1020px) {
  .hero__cols { grid-template-columns: 1fr; row-gap: 30px; }
  .hero__side { border-left: none; border-top: 1px solid var(--hair); padding-left: 0; padding-top: 26px; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--accent); flex: none; }

.hero h1 {
  margin: 22px 0 0; color: var(--ink);
  font-size: clamp(38px, 5.4vw, 74px);
  font-weight: 600; letter-spacing: -0.024em; line-height: 1.1; max-width: 16ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__sub {
  margin-top: 20px; max-width: 45ch; color: var(--ink-2);
  font-size: clamp(18px, 1.45vw, 22px); line-height: 1.62; font-weight: 400;
}
.hero__co { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero__co div { min-width: 0; }
.hero__co b { display: block; font-weight: 600; font-size: 19px; letter-spacing: -0.004em; line-height: 1.35; color: var(--ink); }
.hero__co span { font-size: 16px; letter-spacing: 0.02em; color: var(--ink-3); }

.hero__figure {
  position: relative; padding-top: 24px;
  display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 26px); flex-wrap: wrap;
}
.hero__figure::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 68px; height: 3px; background: var(--accent);
}
.bignum {
  font-size: clamp(76px, 10.5vw, 136px); font-weight: 300; line-height: 0.84;
  letter-spacing: -0.046em; color: var(--ink);
  font-variant-numeric: proportional-nums;
}
.bignum sup {
  font-size: 0.26em; font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink-3); vertical-align: super; margin-left: 4px;
}
.hero__figcap { padding-bottom: 10px; }
.hero__figcap b { display: block; font-size: 18.5px; font-weight: 600; color: var(--ink); }
.hero__figcap span { font-size: 16px; color: var(--ink-3); line-height: 1.5; }

.hero__pills { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }
.pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--hair); border-radius: 100px;
  font-size: 16px; color: var(--ink-2); background: var(--surface);
  transition: background-color var(--tint), border-color var(--tint), color var(--tint);
}
.pill b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.scrollcue {
  position: absolute; left: var(--gut); bottom: 18px;
  font-size: 14px; letter-spacing: 0.04em; color: var(--ink-4);
  display: flex; align-items: center; gap: 10px;
}
.scrollcue i {
  width: 1px; height: 24px; background: linear-gradient(var(--accent), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: 0.25; transform: scaleY(0.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 1020px) { .scrollcue { display: none; } }

/* ========================= sections ========================= */
/* :not(.hero) สำคัญ — hero มี id="top" ด้วย ถ้าไม่กันไว้ padding ของ hero
   จะโดนกฎนี้ทับ (มาทีหลังในไฟล์) และเส้นคั่นจะซ้อนกับ border-bottom ของ hero */
section[id]:not(.hero) { padding-block: var(--sec-pad); position: relative; scroll-margin-top: 84px; }
section[id]:not(.hero) + section[id] { border-top: 1px solid var(--hair); }

.sechead { margin-bottom: clamp(24px, 2.6vw, 36px); }
.sechead__no {
  display: block; margin-bottom: 11px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.045em; color: var(--accent-text);
}
.sechead h2 { font-size: clamp(29px, 3.2vw, 46px); letter-spacing: -0.022em; max-width: 26ch; }
.sechead p { margin-top: 14px; max-width: 76ch; color: var(--ink-2); font-weight: 400; font-size: clamp(17px, 1.3vw, 20.5px); line-height: 1.6; }
.sechead p b { color: var(--ink); }

.lede { color: var(--ink-2); font-weight: 400; }
.muted { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* ========================= cards ========================= */
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 4px; padding: clamp(18px, 1.9vw, 26px);
  position: relative;
  transition: background-color var(--tint), border-color var(--tint);
}
.card--flush { padding: 0; overflow: hidden; }
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1180px) { .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g2, .g4, .g5 { grid-template-columns: 1fr; } }

/* stat tile */
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat__label { font-size: 16.5px; color: var(--ink-3); letter-spacing: 0.005em; }
.stat__value {
  font-size: clamp(38px, 3.5vw, 54px); font-weight: 300; line-height: 1.04;
  letter-spacing: -0.032em; color: var(--ink);
}
.stat__value small { font-size: 0.4em; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-left: 3px; }
.stat__note { font-size: 15.5px; color: var(--ink-3); margin-top: 1px; line-height: 1.5; }

/* finding card */
.finding { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.finding__tag {
  align-self: flex-start; font-size: 14px; font-weight: 600; letter-spacing: 0.035em;
  padding: 4px 12px; border-radius: 2px;
}
.finding__tag[data-t="win"] { color: #fff; background: var(--brand); }
.finding__tag[data-t="fix"] { color: var(--ink); background: var(--surface-3); }
.finding h3 { font-size: clamp(21px, 1.9vw, 25px); letter-spacing: -0.016em; }
.finding p { font-size: 17px; color: var(--ink-2); font-weight: 400; line-height: 1.62; }
.finding__ev {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--hair);
  font-size: 15px; color: var(--ink-3); letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ========================= charts ========================= */
.chart { position: relative; }
.chart__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.chart__head h3 { font-size: 21.5px; letter-spacing: -0.012em; }
.chart__head p { font-size: 16px; color: var(--ink-3); margin-top: 5px; max-width: 68ch; line-height: 1.5; }

.segbtns {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 4px;
  transition: background-color var(--tint), border-color var(--tint);
}
.segbtns button {
  all: unset; cursor: pointer; padding: 8px 16px; border-radius: 2px;
  font-size: 16px; color: var(--ink-3); white-space: nowrap;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.segbtns button:hover { color: var(--ink); }
.segbtns button[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); }
.segbtns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* legend */
.legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.legend div { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); }
.legend i { width: 13px; height: 13px; border-radius: 2px; flex: none; transition: background-color var(--tint); }

/* --- generic bar rows --- */
.bars { display: flex; flex-direction: column; }
.barrow {
  display: grid; grid-template-columns: minmax(0, var(--lw, 300px)) 1fr auto;
  align-items: center; gap: 18px;
  padding: 10px 12px; margin-inline: -12px; border-radius: 3px;
  transition: background-color 0.2s var(--ease);
}
.barrow:hover, .barrow.hot { background: var(--hover); }
.barrow__lbl { font-size: 17px; color: var(--ink-2); line-height: 1.4; min-width: 0; }
.barrow__lbl b { color: var(--ink); font-weight: 400; }
.barrow__lbl em {
  display: block; font-style: normal; font-size: 14px; letter-spacing: 0.015em;
  color: var(--ink-3); margin-top: 2px;
}
.barrow__track {
  height: 15px; background: var(--track); border-radius: 2px;
  position: relative; overflow: hidden; transition: background-color var(--tint);
}
.barrow__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 0 4px 4px 0; background: var(--accent);
  transition: width 1s var(--ease), background-color var(--tint);
}
.barrow__val {
  font-size: 18.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: right; letter-spacing: -0.01em; color: var(--ink);
}
.barrow__val small { font-size: 14.5px; color: var(--ink-3); font-weight: 400; margin-left: 3px; }
@media (max-width: 820px) {
  .barrow { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .barrow__track { grid-column: 1 / -1; }
}

/* reference line inside a bar band */
.refline {
  position: absolute; top: -4px; bottom: -4px; width: 1px;
  background: var(--hair-strong); pointer-events: none;
}

/* --- dot plot: for tight value ranges where bar length can't discriminate.
       Position encodes value, so a non-zero axis is legitimate here
       (a truncated *bar* axis would not be). --- */
.dotgroup { display: flex; flex-direction: column; }
.dotaxis {
  display: grid; grid-template-columns: minmax(0, var(--lw, 300px)) 1fr auto;
  gap: 18px; align-items: center; padding: 0 12px; margin-inline: -12px;
}
.dotaxis__plot { position: relative; height: 24px; }
.dotaxis .barrow__val { min-width: 74px; }
.dotaxis__tick {
  position: absolute; top: 5px; transform: translateX(-50%);
  font-size: 14px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dotaxis__reflab {
  position: absolute; top: 3px; transform: translateX(-50%);
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-2); white-space: nowrap;
}
.dotrow {
  display: grid; grid-template-columns: minmax(0, var(--lw, 300px)) 1fr auto;
  gap: 18px; align-items: center;
  padding: 11px 12px; margin-inline: -12px; border-radius: 3px;
  transition: background-color 0.2s var(--ease);
}
.dotrow:hover, .dotrow.hot { background: var(--hover); }
.dotrow__plot { position: relative; height: 18px; }
.dotrow__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--track); }
.dotrow__grid { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--grid); }
.dotrow__ref { position: absolute; top: -5px; bottom: -5px; width: 1px; background: var(--hair-strong); }
.dotrow__dot {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.55s var(--ease), background-color var(--tint), box-shadow var(--tint);
}
.dotrow.grown .dotrow__dot { transform: translate(-50%, -50%) scale(1); }
@media (max-width: 820px) {
  .dotrow { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .dotrow__plot { grid-column: 1 / -1; }
  .dotaxis { grid-template-columns: 1fr; }
  .dotaxis .barrow__lbl, .dotaxis .barrow__val { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dotrow__dot { transition: none; transform: translate(-50%,-50%) scale(1); } }

/* --- 100% stacked (Likert) --- */
.stack { display: flex; height: 15px; border-radius: 2px; overflow: hidden; gap: 0; }
.stack > i {
  display: block; height: 100%; flex: 0 0 auto; width: 0;
  box-shadow: 2px 0 0 0 var(--surface);
  transition: width 1s var(--ease), background-color var(--tint), box-shadow var(--tint);
}
.stack > i:last-child { box-shadow: none; }

/* --- meters (pillars) --- */
.meter { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meter__name { font-size: 19px; font-weight: 600; }
.meter__pct { font-size: 15.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meter__val { font-size: clamp(40px, 3.8vw, 54px); font-weight: 300; letter-spacing: -0.038em; line-height: 1; }
.meter__val small { font-size: 0.34em; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.meter__track { height: 5px; background: var(--track); border-radius: 3px; overflow: hidden; transition: background-color var(--tint); }
.meter__fill { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 1.1s var(--ease), background-color var(--tint); }
.meter__note { font-size: 15.5px; color: var(--ink-3); line-height: 1.5; }

/* --- quotes --- */
.quotes { columns: 3; column-gap: 12px; }
@media (max-width: 1180px) { .quotes { columns: 2; } }
@media (max-width: 760px) { .quotes { columns: 1; } }
.quote {
  break-inside: avoid; margin-bottom: 12px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 4px;
  border-left: 3px solid var(--surface-3);
  transition: background-color var(--tint), border-color var(--tint);
}
.quote[data-tone="pos"] { border-left-color: var(--accent); }
.quote p { font-size: 18px; line-height: 1.6; color: var(--ink); font-weight: 400; }
.quote p::before { content: "“"; color: var(--accent); font-size: 1.4em; line-height: 0; vertical-align: -0.1em; margin-right: 2px; }
.quote footer { margin-top: 13px; font-size: 15px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.quote footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: none; }
.quote__tone {
  display: inline-block; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.035em;
  color: var(--ink-3); border: 1px solid var(--hair); border-radius: 2px; padding: 3px 10px;
}
.quote[data-tone="pos"] .quote__tone { color: #fff; background: var(--brand); border-color: var(--brand); }

/* --- action / roadmap --- */
.action {
  display: grid; grid-template-columns: auto 1fr; gap: 0 22px;
  padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--hair);
}
.action:last-child { border-bottom: 1px solid var(--hair); }
.action__no {
  font-size: 17px; font-weight: 600; color: var(--accent-text);
  letter-spacing: 0.03em; padding-top: 7px; grid-row: 1 / span 3;
  font-variant-numeric: tabular-nums;
}
.action h3 { font-size: clamp(23px, 2.2vw, 30px); letter-spacing: -0.018em; }
.action__why { margin-top: 11px; color: var(--ink-2); font-weight: 400; font-size: 18.5px; max-width: 84ch; line-height: 1.62; }
.action__why b { color: var(--ink); }
.action__ev { margin-top: 15px; display: flex; gap: 9px; flex-wrap: wrap; }
.chip {
  font-size: 15.5px; letter-spacing: 0.01em;
  padding: 6px 13px; border-radius: 2px; border: 1px solid var(--hair);
  color: var(--ink-2); background: var(--surface); white-space: nowrap;
  transition: background-color var(--tint), border-color var(--tint), color var(--tint);
}
.chip b { color: var(--accent-text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .action { grid-template-columns: 1fr; gap: 8px; } .action__no { grid-row: auto; padding-top: 0; } }

/* --- theme cards (next topics) --- */
.theme { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.theme__n { font-size: 42px; font-weight: 300; letter-spacing: -0.038em; line-height: 1; }
.theme__n small { font-size: 0.34em; color: var(--ink-3); letter-spacing: 0; font-weight: 400; }
.theme h3 { font-size: 19px; letter-spacing: -0.012em; min-height: 2.4em; }
.theme p { font-size: 15.5px; color: var(--ink-3); line-height: 1.52; margin-top: -2px; }
.theme__bar { height: 3px; background: var(--track); border-radius: 2px; overflow: hidden; transition: background-color var(--tint); }
.theme__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1s var(--ease), background-color var(--tint); }

/* --- table --- */
.tablewrap {
  overflow-x: auto; border: 1px solid var(--hair); border-radius: 4px;
  background: var(--plane); transition: background-color var(--tint), border-color var(--tint);
}
table { width: 100%; border-collapse: collapse; font-size: 16.5px; min-width: 860px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--hair); transition: border-color var(--tint); }
thead th {
  font-size: 14.5px; letter-spacing: 0.02em; color: var(--ink); font-weight: 600;
  background: var(--surface-2); border-bottom: 2px solid var(--accent);
  position: sticky; top: 0; z-index: 1;
  transition: background-color var(--tint), color var(--tint);
}
tbody td { color: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num b { font-weight: 600; color: var(--ink); }
.tag {
  font-size: 14px; letter-spacing: 0.01em; color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 2px; padding: 3px 10px; white-space: nowrap;
}

/* ========================= tooltip ========================= */
.tip {
  position: fixed; z-index: 9990; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%) translateY(-10px);
  background: var(--invert-bg); color: var(--invert-fg);
  border-radius: 4px; padding: 13px 16px; min-width: 190px; max-width: 350px;
  box-shadow: 0 12px 34px var(--shadow);
  transition: opacity 0.14s var(--ease);
}
.tip.on { opacity: 1; }
.tip b { display: block; font-size: 16.5px; font-weight: 600; margin-bottom: 9px; line-height: 1.4; color: var(--invert-fg); }
.tip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; font-size: 15.5px; }
.tip dt { color: color-mix(in srgb, var(--invert-fg) 66%, transparent); display: flex; align-items: center; gap: 7px; }
.tip dt i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.tip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--invert-fg); }

/* ========================= footer ========================= */
footer.site {
  padding: 44px 0 52px; background: var(--surface-2);
  border-top: 3px solid var(--accent);
  transition: background-color var(--tint), border-color var(--tint);
}
footer.site p { font-size: 16px; color: var(--ink-3); max-width: 62ch; line-height: 1.6; }
footer.site .sig { font-size: 15px; letter-spacing: 0.03em; color: var(--ink-4); }

/* เครดิตผู้จัดทำ — สลับไฟล์โลโก้ตามธีม (สองไฟล์ขนาดเท่ากันเป๊ะ ไม่ทำให้เลย์เอาต์ขยับ) */
.credit { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.credit__label { font-size: 15px; letter-spacing: 0.03em; color: var(--ink-4); }
.credit__logo { width: 172px; height: auto; }
.credit__logo--dark { display: none; }
:root[data-theme="dark"] .credit__logo--light { display: none; }
:root[data-theme="dark"] .credit__logo--dark { display: block; }
.credit__url {
  font-size: 15.5px; color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid var(--hair); padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.credit__url:hover { color: var(--accent-text); border-bottom-color: currentColor; }
@media (max-width: 760px) { .credit { align-items: flex-start; } }

/* ========================= reveal ========================= */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: 0.06s; }
.rv[data-d="2"] { transition-delay: 0.12s; }
.rv[data-d="3"] { transition-delay: 0.18s; }
.rv[data-d="4"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .barrow__fill, .meter__fill, .stack > i, .theme__bar i { transition: none; }
  .scrollcue i { animation: none; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ========================= print — บังคับโทนสว่างเสมอ ========================= */
@media print {
  :root, :root[data-theme="dark"] {
    --plane: #fff; --surface: #fff; --surface-2: #fafafa; --surface-3: #eee;
    --ink: #000; --ink-2: #1f1f1f; --ink-3: #454545; --ink-4: #6b6b6b;
    --accent: #bd1f27; --accent-text: #95191f; --accent-dim: #95191f;
    --lk-5: #9b1f1f; --lk-4: #c72e2d; --lk-3: #e15a52; --lk-2: #ee897f;
    --sq-1: #ec9e96; --sq-2: #e67a71; --sq-3: #dd534b;
    --sq-4: #c9302e; --sq-5: #ac1119; --sq-6: #831a1a;
    --hair: #d5d5d5; --hair-strong: #aaa; --track: #ececec; --grid: #eee;
    --sec-pad: 20px;
  }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .hero__glow, .hero__grid, .rail, .topbar, .progress, .scrollcue, .tip, .themeswitch { display: none !important; }
  thead th { border-bottom: 2px solid #000; }
  .rv { opacity: 1 !important; transform: none !important; }
  section[id] { break-inside: avoid; }
  .hero { min-height: auto; padding: 0 0 18px; }
  .hero__cols { grid-template-columns: 1fr; row-gap: 20px; }
  .hero__side { border-left: none; border-top: 1px solid #d5d5d5; padding-left: 0; padding-top: 18px; }
  .credit__logo--light, .brand__logo--light { display: block !important; }
  .credit__logo--dark, .brand__logo--dark { display: none !important; }
  .card, .quote, .tablewrap { border-color: #d5d5d5; box-shadow: none; }
  a[href]::after { content: ""; }
}