/* =====================================================================
 * rail.css — สารบัญบทริมจอ · แถบความคืบหน้า · ป้าย CTA ท้ายบท · การ์ด "รู้หรือไม่"
 *
 * ทุกสีอ้างผ่านตัวแปรใน tokens.css เท่านั้น ไม่มีค่าสีดิบในไฟล์นี้
 * ทุก animation อยู่ใต้ @media (prefers-reduced-motion: no-preference)
 * ===================================================================== */

/* ───────────────────────── ① แถบความคืบหน้า ─────────────────────────
   วางใต้แถบเมนูที่ตรึงอยู่ จึงต้องใช้ --nav-h ที่ mountChrome รายงานไว้
   สูงแค่ 3px เพราะหน้าที่ของมันคือ "บอกใบ้" ไม่ใช่แย่งสายตาจากเนื้อหา */

/* home-rail.js วางแถบนี้ไว้ "ใน" .mast__nav ที่ตรึงอยู่ ไม่ใช่ลอยทับใต้มัน
   ถ้าลอยทับ มันจะบังบรรทัดบนสุดของเนื้อหาไปตลอดทั้งหน้า
   .mast__nav มี position: sticky อยู่แล้ว จึงเป็นกรอบอ้างอิงของ absolute นี้ได้เลย */
.rbar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  pointer-events: none;
  background: color-mix(in oklab, var(--color-rule) 40%, transparent);
}

.rbar i {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-accent) 55%, transparent),
    var(--color-accent));
}

/* ───────────────────────── ② สารบัญบท ─────────────────────────
 *
 * สารบัญเป็นชิ้นลอย จึงห้ามทับคอลัมน์เนื้อหาแม้แต่พิกเซลเดียว
 *
 * คอลัมน์เนื้อหากว้าง 78rem (1248px) และจัดกลางจอ ช่องว่างที่เหลือข้างละ
 * (100vw − 1248px) / 2 ต้องกว้างพอวางสารบัญ (ราว 47px) บวกระยะห่างจากขอบจอ
 * จึงเริ่มมีที่พอที่ราว 1,344px ขึ้นไป — ต่ำกว่านั้นไม่แสดงสารบัญเลย
 * ดีกว่าแสดงแล้วไปทับตัวหนังสือ ส่วนความคืบหน้ายังอ่านได้จากแถบในแถบเมนู
 */

.rail { display: none; }

@media (min-width: 84rem) {
  .rail {
    position: fixed;
    /* ชิดขอบจอ เหลือระยะหายใจนิดเดียว แล้วขยับเข้าหาคอลัมน์เนื้อหาเมื่อจอกว้างขึ้น
       แต่ไม่เกินขอบซ้ายของเนื้อหา — clamp ด้วย min() กันไว้อีกชั้น */
    inset-inline-start: min(
      calc((100vw - var(--wrap)) / 2 - 3.5rem),
      2rem
    );
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: var(--z-sticky);

    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-2xs);

    border-radius: var(--radius-lg);
    /* พื้นโปร่งแสง เพราะสารบัญต้องอ่านออกทั้งบนพื้นกระดาษสว่างและบนฉากมืด */
    background: color-mix(in oklab, var(--color-paper) 72%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-hair);
  }

  .rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .rail__it {
    display: grid;
    grid-template-columns: 1.25rem auto;
    align-items: center;
    justify-items: center;
    gap: var(--space-2xs);

    /* เป้ากดสูง 44px เต็มตามเกณฑ์ ไม่ใช่แค่ขนาดของจุด */
    min-block-size: 2.75rem;
    padding-inline: var(--space-2xs);
    border-radius: var(--radius-md);

    text-decoration: none;
    color: var(--color-neutral);
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }

  .rail__n { font-variant-numeric: tabular-nums; opacity: 0.75; }

  .rail__dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    border: var(--rule-hair) solid var(--color-rule);
    background: transparent;
  }

  .rail__it:hover { color: var(--color-ink); background: var(--color-paper-2); }
  .rail__it:hover .rail__dot { border-color: var(--color-accent); }

  .rail__it[aria-current="true"] { color: var(--color-accent); }
  .rail__it[aria-current="true"] .rail__n { opacity: 1; font-weight: 600; }
  .rail__it[aria-current="true"] .rail__dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    scale: 1.35;
  }
}

/* ── ปุ่มเปิด/ปิดการเลื่อนทีละบท ──
 *
 * แยกออกมาจากสารบัญ เพราะสารบัญขึ้นเฉพาะจอกว้าง ส่วนโหมดเลื่อนทีละบททำงาน
 * ตั้งแต่ 60rem ขึ้นไป ถ้าปุ่มอยู่ในสารบัญ คนใช้จอ 1280 จะปิดโหมดนี้ไม่ได้เลย
 *
 * มุมล่างซ้ายเป็นมุมที่ไม่มีเนื้อหาอยู่แล้วในทุก section ของหน้านี้
 */
.railSnap {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: var(--z-sticky);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  /* ปกติเป็นวงกลม 44px เท่าเป้ากดขั้นต่ำพอดี จึงไม่ยื่นไปถึงคอลัมน์เนื้อหา
     (เนื้อหาเริ่มที่ราว 88px บนจอ 1440) ป้ายกางออกเฉพาะตอนชี้หรือโฟกัสเข้ามา
     ซึ่งเป็นจังหวะที่ผู้ใช้ตั้งใจดูปุ่มนี้อยู่แล้ว และกางที่ขอบล่างสุดของจอ */
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  justify-content: center;
  padding-inline: var(--space-xs);

  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-paper) 82%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-whisper);

  color: var(--color-neutral);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  cursor: pointer;
}

.railSnap[hidden] { display: none; }
.railSnap:hover { color: var(--color-ink); border-color: var(--color-rule); }

.railSnap__lb {
  max-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
}

.railSnap:hover .railSnap__lb,
.railSnap:focus-visible .railSnap__lb {
  max-inline-size: 8rem;
  opacity: 1;
}

/* ไอคอนสามขีด — ขีดกลางยาวกว่าเมื่อโหมดเปิด สื่อว่า "หยุดทีละช่อง" */
.railSnap__ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.railSnap__ico i {
  display: block;
  block-size: var(--rule-bold);
  inline-size: 0.75rem;
  border-radius: var(--radius-xs);
  background: currentColor;
  opacity: 0.4;
}

.railSnap[aria-pressed="true"] {
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
  background: color-mix(in oklab, var(--color-accent-tint) 88%, transparent);
}
.railSnap[aria-pressed="true"] .railSnap__ico i:nth-child(2) { inline-size: 1.15rem; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .rbar i { transition: inline-size 140ms linear; }
  .rail__it,
  .railSnap { transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
  .railSnap__lb {
    transition: max-inline-size var(--dur-long) var(--ease-out),
                opacity var(--dur-short) var(--ease-out);
  }
  .rail__dot {
    transition: background var(--dur-short) var(--ease-out),
                border-color var(--dur-short) var(--ease-out),
                scale var(--dur-short) var(--ease-out);
  }
}

/* หัวบทที่รับโฟกัสด้วยสคริปต์ (tabindex="-1") ต้องไม่โผล่กรอบโฟกัสตอนคลิกด้วยเมาส์
   แต่ยังต้องเห็นชัดเมื่อมาถึงด้วยแป้นพิมพ์ */
#main section h1:focus:not(:focus-visible),
#main section h2:focus:not(:focus-visible) { outline: none; }

/* เผื่อที่ให้แถบเมนูที่ตรึงอยู่ ตอนกระโดดมาที่บทด้วยลิงก์ #id ของเบราว์เซอร์เอง */
#main > section { scroll-margin-block-start: calc(var(--nav-h, 0px) + 0.5rem); }

/* ───────────────────────── ③ ป้ายทางไปต่อท้ายบท ─────────────────────────
   ท้ายแต่ละบทมีลิงก์เดียว พาไปยังหน้าที่เจาะข้อมูลของบทนั้นได้จริง */

.chapCta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-soft);
}

.chapCta__lk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  min-block-size: 2.75rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);

  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.chapCta__lk:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}

.chapCta__lk svg { inline-size: 1.1em; block-size: 1.1em; }

/* บทที่พื้นหลังเป็นฉากมืด ต้องกลับสีเส้นและตัวอักษร ไม่งั้นจะจมหายไปกับฉาก */
.lstage .chapCta,
.lprov .chapCta { border-block-start-color: color-mix(in oklab, var(--dm-ink) 22%, transparent); }

.lstage .chapCta__lk,
.lprov .chapCta__lk {
  color: var(--dm-accent);
  border-color: color-mix(in oklab, var(--dm-ink) 30%, transparent);
}

.lstage .chapCta__lk:hover,
.lprov .chapCta__lk:hover {
  background: color-mix(in oklab, var(--dm-ink) 12%, transparent);
  border-color: var(--dm-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .chapCta__lk {
    transition: background var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out),
                translate var(--dur-micro) var(--ease-out);
  }
  .chapCta__lk:hover { translate: 2px 0; }
}

/* ───────────────────────── ④ การ์ด "รู้หรือไม่" ─────────────────────────
   แทรกคั่นระหว่างบท · ตัวเลขในการ์ดคำนวณจากข้อมูลจริงเสมอ ไม่ใช่ข้อความที่พิมพ์ตายไว้ */

.didyou {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);

  max-inline-size: var(--wrap-narrow);
  margin-block: var(--space-2xl);
  margin-inline: auto;
  padding: var(--space-lg);

  border-inline-start: var(--rule-bold) solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-accent-tint);
}

.didyou__ico {
  flex: none;
  color: var(--color-accent-deep);
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.didyou__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.didyou__tx {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.didyou__tx b {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-deep);
}

/* ───────────────────────── ⑤ ปุ่มคัดลอกลิงก์สถิติ ───────────────────────── */

.shareBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);

  /* เป้ากด 44×44 เต็ม แม้ไอคอนจะเล็ก */
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0 var(--space-xs);

  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-neutral);
  cursor: pointer;
  font-size: var(--text-3xs);
}

.shareBtn svg { inline-size: 1rem; block-size: 1rem; }
.shareBtn:hover { color: var(--color-accent); border-color: var(--color-rule); }
.shareBtn[data-done="1"] { color: var(--color-accent); }

/* ───────────────────────── ⑦ บทเต็มจอเมื่อเปิดโหมดเลื่อนทีละบท ─────────────────────────
 *
 * บทที่เตี้ยกว่าหนึ่งหน้าจอ (เช่น "5 จังหวัดแรก" สูงราว 630px) จะทำให้การเลื่อนทีละบท
 * ดูเหมือนหยุดกลางคัน — ยืดให้เต็มจอแล้วจัดเนื้อหาไว้กลางกรอบ การเลื่อนหนึ่งครั้ง
 * จึงได้ "หนึ่งหน้าเต็ม" จริงตามที่ตั้งใจ
 *
 * ผูกไว้กับ [data-snap="on"] เท่านั้น — ปิดโหมดเมื่อไร ความสูงกลับเป็นแบบเดิมทันที
 * ใช้ grid + align-content แทน flex เพราะลูกยังเรียงเป็นบล็อกตามปกติ และ .wrap
 * ที่จัดกึ่งกลางด้วย margin-inline:auto ยังทำงานเหมือนเดิม
 */
@media (min-width: 64rem) {
  :root[data-snap="on"] #main > section {
    min-block-size: calc(100svh - var(--nav-h, 0px));
    display: grid;
    align-content: center;
  }

  /* ฉากหัวเรื่องคุมตำแหน่งของตัวเองอยู่แล้ว ห้ามเข้าไปทับด้วย grid
   *
   * ความสูงต้องหักหัวกระดาษออกด้วย ไม่ใช่หักแค่แถบเมนู — หัวกระดาษ (ราว 170px)
   * อยู่เหนือฉากหัวเรื่องและกินโควตาของหน้าจอแรกไปแล้ว ถ้าไม่หัก ฉากหัวเรื่องจะสูง
   * เกินที่เหลือไป 170px พอดี ทำให้ต้องหมุนล้อสองครั้งกว่าจะพ้นบทแรก
   * home-rail.js เป็นผู้รายงานค่า --mast-h ให้ พร้อมอัปเดตเมื่อหัวกระดาษเปลี่ยนความสูง
   */
  /* ขอบล่างต้องกว้างพอให้แถบทุ่งยืนได้เต็มความสูงของมัน
   * โหมดนี้ยืดหัวเรื่องให้เต็มจอ ที่ว่างใต้การ์ด KPI จึงเหลือแค่เศษของจอ บางจอไม่กี่พิกเซล
   * แถบทุ่งห้ามล้ำขึ้นไปทับการ์ด (home.js · capFieldHeight) มันจึงถูกย่อลงตามที่ว่างนั้น
   * จนต้นข้าวเล็กเกือบมองไม่เห็น — เว้นที่ไว้ให้ตั้งแต่ต้นแทนการปล่อยให้ไปเบียดกันทีหลัง
   * บวกเผื่อระยะที่ capFieldHeight หักไว้กันปลายใบแตะขอบการ์ด
   */
  :root[data-snap="on"] #main > section.lhero {
    display: block;
    min-block-size: calc(100svh - var(--nav-h, 0px) - var(--mast-h, 0px));
    padding-block: var(--space-lg) max(var(--space-md), calc(var(--lh-field-h) + 0.5rem));
  }

  /* บีบระยะแนวตั้งลงเมื่อเปิดโหมดนี้
   *
   * ระยะเดิม (padding 86px บน-ล่าง · การ์ด "รู้หรือไม่" เว้น 64px บน-ล่าง) ออกแบบมา
   * สำหรับการเลื่อนอ่านต่อเนื่อง ซึ่งช่องว่างมาก ๆ ช่วยแยกบทให้ชัด
   * แต่ในโหมดที่หนึ่งจอ = หนึ่งหน้า ช่องว่างพวกนั้นกลายเป็นพื้นที่เปล่าที่กินโควตาจอไปเฉย ๆ
   * บีบแล้วเนื้อหาต่อจอเพิ่มขึ้นราว 250px ต่อบท บทส่วนใหญ่จึงจบใน "หนึ่งจอเดียว" จริง
   */
  :root[data-snap="on"] #main > section.sec,
  :root[data-snap="on"] #main > section.lstage { padding-block: var(--space-lg); }
  :root[data-snap="on"] .sec__head { margin-block-end: var(--space-md); }
  :root[data-snap="on"] .sec__head p { margin-block-start: var(--space-2xs); }
  :root[data-snap="on"] .didyou { margin-block: var(--space-md); padding: var(--space-md); }
  :root[data-snap="on"] .chapCta { margin-block-start: var(--space-md); padding-block-start: var(--space-xs); }
  :root[data-snap="on"] .lstage__head { margin-block-end: var(--space-md); }
}

/* ───────────────────────── ⑧ ปิรามิดอายุที่กดได้ ─────────────────────────
 *
 * แถวของปิรามิดเปลี่ยนจาก <div> เป็น <button> เพื่อให้กดด้วยแป้นพิมพ์ได้และมี
 * aria-pressed ติดมาในตัว ปุ่มมีสไตล์เริ่มต้นของเบราว์เซอร์ติดมาด้วย จึงต้องล้างทิ้ง
 * ก่อน แล้วคืนโครง grid เดิมของ .pyrrow ให้ครบ
 */

.pyr .pyrrow {
  inline-size: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;

  /* เป้ากดตามเกณฑ์ 44px — เดิมสูงราว 30px จากความสูงของแท่งอย่างเดียว */
  min-block-size: 2.75rem;
  padding-inline: var(--space-2xs);
}

.pyr .pyrrow--u { background: color-mix(in oklab, var(--color-warn) 10%, var(--color-paper)); }

/* แถวที่ไม่ได้เลือก หรี่ลงแต่ยังอ่านออก — ไม่ใช้ opacity ต่ำจนตัวเลขหาย */
.pyr .pyrrow[data-dim="true"] { opacity: 0.42; }
.pyr .pyrrow[data-dim="true"]:hover,
.pyr .pyrrow[data-dim="true"]:focus-visible { opacity: 1; }

.pyr .pyrrow[aria-pressed="true"] {
  background: var(--color-accent-tint);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent);
}

.pyrclear {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  margin-block-start: var(--space-sm);
  padding-inline: var(--space-md);

  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  cursor: pointer;
}

.pyrclear:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (prefers-reduced-motion: no-preference) {
  .pyr .pyrrow {
    transition: opacity var(--dur-short) var(--ease-out),
                background var(--dur-micro) var(--ease-out),
                box-shadow var(--dur-micro) var(--ease-out);
  }
  /* ส่วนโค้งของโดนัทวิ่งไปค่าใหม่แทนที่จะกระโดด ตอนสลับช่วงอายุ */
  .donut__arc {
    transition: stroke-dasharray var(--dur-long) var(--ease-out),
                stroke-dashoffset var(--dur-long) var(--ease-out);
  }
}

.chapCta__note {
  flex: 1 1 14rem;
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

.shareBtn__lb { white-space: nowrap; }

/* ───────────────────────── ⑨ แผนที่จังหวัดที่ "เล่นได้" ─────────────────────────
 *
 * ต่อจาก .pmap__* ใน home.css — ส่วนที่เพิ่มเข้ามาคือแถบเครื่องมือเหนือแผนที่
 * (ค้นหา · จังหวัดของฉัน · โหมดเทียบ) และสถานะใหม่ของจังหวัดบนแผนที่
 */

.pmap__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-xs);
}

/* ── ช่องค้นหา ── */

.pmap__find {
  position: relative;
  flex: 1 1 9rem;
  min-inline-size: 8rem;
}

.pmap__findLb {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--space-xs);
  display: flex;
  align-items: center;
  color: var(--color-neutral);
  pointer-events: none;
}

.pmap__findIco svg { inline-size: 1rem; block-size: 1rem; display: block; }

.pmap__findIn {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-inline: 2.25rem var(--space-xs);

  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.pmap__findIn::placeholder { color: var(--color-neutral); }
.pmap__findIn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* ── ปุ่มจังหวัดของฉัน · โหมดเทียบ ── */

.pmap__tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  min-block-size: 2.75rem;
  padding-inline: var(--space-sm);

  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  cursor: pointer;
}

.pmap__toolIco svg { inline-size: 1rem; block-size: 1rem; display: block; }
.pmap__toolLb { white-space: nowrap; max-inline-size: 7rem; overflow: hidden; text-overflow: ellipsis; }

.pmap__tool:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pmap__tool[aria-pressed="true"] {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}
.pmap__tool:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.pmap__note {
  margin-block: 0 var(--space-xs);
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

/* ── สถานะใหม่ของจังหวัดบนแผนที่ ──
 *
 * ทั้งสามสถานะสื่อด้วย "เส้นขอบ" ไม่ใช่สีพื้น เพราะสีพื้นกำลังบอกค่าอยู่แล้ว
 * ถ้าย้อมทับ ค่าที่แผนที่ตั้งใจบอกจะอ่านไม่ได้ทันที — กติกาเดียวกับ [data-on]
 */

/* กรอบโฟกัสของ <path> ใน SVG: บางเบราว์เซอร์วาด outline รอบ bounding box แทนรูปทรง
   จึงใช้ stroke คู่กับ outline เพื่อให้เห็นชัดแน่นอนทุกที่ */
.pmap__p:focus-visible {
  outline: none;
  stroke: var(--color-focus);
  stroke-width: 3;
  filter: brightness(1.14);
}

.pmap__p[data-mine="true"] {
  stroke: var(--color-warn);
  stroke-width: 2.6;
  stroke-dasharray: 5 3;
}

.pmap__p[data-cmp="true"] {
  stroke: var(--color-ink);
  stroke-width: 3;
  filter: brightness(1.1);
}

/* ── การ์ดเทียบสองจังหวัด ── */

.pmap__cmp {
  margin-block-start: var(--space-sm);
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

.pmap__cmp[hidden] { display: none; }

.pmap__cmpRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.pmap__cmpIt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline-start: var(--space-xs);
  border-inline-start: var(--rule-bold) solid var(--color-accent);
}

.pmap__cmpNm { font-size: var(--text-2xs); color: var(--color-muted); }
.pmap__cmpVl {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.pmap__cmpPc { font-family: var(--font-mono); font-size: var(--text-3xs); color: var(--color-neutral); }

.pmap__cmpNote {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-hair) solid var(--color-rule-soft);
  font-size: var(--text-2xs);
  color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .pmap__tool,
  .pmap__findIn { transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
}

/* จังหวัดที่ช่องค้นหากำลังชี้อยู่ — เส้นขอบสว่างขึ้นเพื่อให้หาเจอบนแผนที่ทั้งประเทศ
   ยังไม่ใช่โฟกัส เพราะผู้ใช้กำลังพิมพ์อยู่ในช่องค้นหา */
.pmap__p[data-found="true"] {
  stroke: var(--color-focus);
  stroke-width: 2.6;
  filter: brightness(1.2);
}

/* ทางเข้าโหมดเล่าเรื่องบนฉากหัวเรื่อง — เป็นลิงก์ข้อความ ไม่ใช่ปุ่ม
   จึงไม่ไปแย่งน้ำหนักของปุ่มหลักสองปุ่มที่ผู้ดูแลตั้งไว้ */
.storyLink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  min-block-size: 2.75rem;
  padding-inline: var(--space-sm);

  color: var(--dm-ink, var(--color-ink));
  font-size: var(--text-sm);
  text-decoration: none;
  border-block-end: var(--rule-hair) solid transparent;
}

.storyLink svg { inline-size: 0.9rem; block-size: 0.9rem; fill: currentColor; stroke: none; }
.storyLink:hover { border-block-end-color: currentColor; }