/* เครื่องมือ แบบทดสอบ checklist และหน้าโครงการ */
/* ---------- เครื่องมือ ---------- */
.tool {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(14px, 2.5vw, 26px);
  box-shadow: var(--shadow-2);
}
.tool-table input,
.tool-table select {
  min-width: 70px;
  padding: 6px 8px;
}
.tool-table td.text input {
  min-width: 170px;
}
.tool-table td,
.tool-table th {
  padding: 6px;
  vertical-align: middle;
}
.tool-table th.score,
.tool-table th.num {
  text-align: center;
}
.raci th input {
  min-width: 90px;
  font-weight: 600;
}
.raci td:first-child input {
  min-width: 200px;
}
/* คอลัมน์กิจกรรมค้างไว้ขณะเลื่อนตารางแนวนอน */
.raci td:first-child,
.raci th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
}
.raci thead th:first-child {
  background: var(--bg);
}
.empty-state {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--text-small);
}
/* ---------- รายการเครื่องมือจัดตามช่วง ---------- */
/* ช่วงเรียงต่อกันลงมาตามลำดับ เครื่องมือในแต่ละช่วงวางเป็นตารางด้านใน ไม่เหลือช่องว่างข้างกลุ่มสั้น */
.tool-groups {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-sm);
}
.tg-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
  font-size: var(--text-body);
}
.tool-group .num {
  flex-basis: 28px;
  height: 28px;
  font-size: var(--text-small);
}
.tool-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: var(--space-xl);
  border-top: 1px solid var(--line);
}
.tool-group li {
  border-bottom: 1px solid var(--line);
}
.tool-group a {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  text-decoration: none;
  color: var(--ink);
  border-radius: 8px;
  transition: background var(--duration-fast);
}
.tool-group a:hover {
  background: var(--paper);
}
.tool-group a b::after {
  content: " →";
  color: var(--blue);
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.tool-group a:hover b::after,
.tool-group a:focus-visible b::after {
  opacity: 1;
}
.tool-group span {
  font-size: var(--text-meta);
  color: var(--muted);
}
.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  font-size: 18px;
}
.tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.tool-output:empty {
  display: none;
}
.form-grid {
  display: grid;
  gap: 12px;
}
.form-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field {
  display: grid;
  gap: 4px;
  font-size: var(--text-small);
  font-weight: 600;
}
.field small {
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}
.field.wide {
  grid-column: 1 / -1;
}
.switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: var(--text-small);
  margin-bottom: 8px;
}
.switch input {
  width: 18px;
  height: 18px;
}
.rank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.rank li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.rank li.top {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.rank li.warn {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}
.rank li.muted b {
  color: var(--muted);
}
.rank-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  font-size: var(--text-small);
}
.rank-head span {
  color: var(--muted);
}
.rank small {
  font-size: var(--text-meta);
  color: var(--muted);
}
.bar {
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  margin: 6px 0 2px;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--blue);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rank li.top .bar i {
  background: var(--ok);
}
.rank li.warn .bar i {
  background: var(--warn);
}
.matrix {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16 / 10;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 8px 0 8px 30px;
}
.q {
  padding: 10px 12px;
  font-size: var(--text-small);
  border: 1px solid var(--line);
}
.q small {
  display: block;
  color: var(--muted);
  font-size: var(--text-meta);
}
.q1 {
  background: var(--ok-soft);
}
.q2 {
  background: var(--soft);
}
.q3 {
  background: var(--bg);
}
.q4 {
  background: var(--danger-soft);
}
.dot {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--text-meta);
  font-weight: 700;
  border: 3px solid var(--paper);
  box-sizing: content-box;
}
.axis-y,
.axis-x {
  position: absolute;
  font-size: var(--text-meta);
  color: var(--muted);
}
.axis-x {
  right: 10px;
  bottom: 4px;
}
.axis-y {
  left: -24px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
}
.fish {
  margin: 16px 0 4px;
  display: grid;
  gap: 0;
}
.fish-row {
  display: grid;
  grid-template-columns: repeat(var(--fish-cols, 3), minmax(0, 1fr)) 150px;
  gap: 10px;
}
/* ก้างปลาวาดด้วยพื้นหลังเส้นเดียว ไม่ใช้ border */
.bone {
  background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 0 / 3px 100%;
  padding: 4px 10px 4px 13px;
  transform: skewX(-14deg);
  margin-left: 18px;
}
.fish-row.bottom .bone {
  transform: skewX(14deg);
}
.bone > * {
  transform: skewX(14deg);
}
.fish-row.bottom .bone > * {
  transform: skewX(-14deg);
}
.bone b {
  display: block;
  color: var(--blue);
  font-size: var(--text-small);
}
.bone ul {
  margin: 0;
  padding-left: 16px;
  font-size: var(--text-meta);
}
.bone .empty {
  color: var(--muted);
  list-style: none;
}
.fish-spine {
  display: grid;
  grid-template-columns: 1fr 150px;
  align-items: center;
  gap: 0;
}
.fish-spine span {
  height: 4px;
  background: var(--ink);
  border-radius: 99px;
}
.fish-head {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-small);
  padding: 14px 26px 14px 16px;
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  line-height: 1.4;
}
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.checks span {
  font-size: var(--text-meta);
  border-radius: 99px;
  padding: 2px 10px;
  border: 1px solid var(--line);
}
.checks span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.checks .no {
  color: var(--muted);
  border-style: dashed;
}
.checks .ok {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}

/* ---------- แบบทดสอบและ checklist ---------- */
.opt-radio input {
  width: auto;
  accent-color: var(--blue);
}
.result {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
  border-radius: 12px;
  padding: 14px 18px;
}
.result.good {
  background: var(--ok-soft);
  border-color: var(--ok);
}
.result b {
  font-size: 1.75rem;
}
.sort {
  display: grid;
  gap: 8px;
}
.sort-row {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: var(--text-small);
}
.sort-row.right {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.sort-row.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.score-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  position: sticky;
  top: calc(var(--top-h) + 10px);
  z-index: 5;
  box-shadow: var(--shadow-2);
}
.score-big b {
  font-size: 2.75rem;
  line-height: 1;
}
.score-big span {
  color: var(--muted);
}
.score-parts {
  display: grid;
  gap: 4px;
  font-size: var(--text-meta);
}
.score-parts > div {
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  gap: 10px;
  align-items: center;
}
.score-parts .bar {
  margin: 0;
}
.ck-group {
  margin-top: 40px;
}
/* กลุ่มเดียวเป็นพื้นผิวเดียว แต่ละข้อคั่นด้วยเส้น แทนกล่องทีละข้อ */
.ck-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.ck-group h2 small {
  color: var(--blue);
  font-size: var(--text-small);
}
.ck {
  display: flex;
  gap: 12px;
  align-items: baseline;
  min-height: 48px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.ck:last-child {
  border-bottom: 0;
}
.ck:hover {
  background: var(--soft);
}
.ck input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--ok);
}
.ck:has(input:checked) {
  background: var(--ok-soft);
}
/* เอกสารโครงการอ่านเป็นลำดับ 1→N จึงเป็นคอลัมน์เดียว */
.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: 1080px;
  margin-top: var(--space-lg);
}
/* การ์ดไม่ขยายตามแผนภาพกว้าง แผนภาพเลื่อนในการ์ดเอง และแผนภาพใหญ่ใช้เต็มแถว */
.project-grid > * {
  min-width: 0;
}
.project-card:has(.cf, .fish, .raci-table) {
  grid-column: 1 / -1;
}
.project-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  break-inside: avoid;
}
.project-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.project-head h2 {
  font-size: var(--text-lead);
}
.project-head a {
  font-size: var(--text-small);
}
.res {
  padding-left: 20px;
}
.res li {
  margin: var(--space-md) 0;
}


/* ---------- ระดับความลึก (อ้างอิง DESIGN.md: Elevation & Depth) ---------- */
/* ชั้น 1: พื้นผิวที่วางบนพื้นหลัง */
.card,
.path-card,
.phase-bar,
.steeep div,
.pdsa-step,
.hier .lv,
.mcq,
.sort-row,
.activity,
.table-wrap,
.case-card,
.share,
.quote {
  box-shadow: var(--shadow-1);
}
/* ชั้น 2: พื้นที่ทำงานหลักของหน้า */
.keys,
.project-card,
.formula {
  box-shadow: var(--shadow-2);
}
/* ตารางในเครื่องมือและการ์ดในกล่องที่ยกอยู่แล้ว ไม่ซ้อนเงา */
.tool .table-wrap,
.tool .rank li,
.project-card .table-wrap,
.keys .card {
  box-shadow: none;
}
/* ชั้น 3: สิ่งที่ยกขึ้นเมื่อโต้ตอบ และชั้นซ้อน */
.case-card,
.tool-group a,
.path-card {
  transition:
    transform var(--duration-lift) var(--ease-out),
    box-shadow var(--duration-lift) var(--ease-out),
    background var(--duration-fast);
}
.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}
.path-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.tool-group a:hover,
.tool-group a:focus-visible {
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.mcq:focus-within {
  box-shadow: var(--shadow-2);
}
#toast,
#zoom img {
  box-shadow: var(--shadow-3);
}
@media (max-width: 1100px) {
  body.side-open .shell > aside {
    box-shadow: var(--shadow-3);
  }
}

/* ก้างปลาบนจอเล็ก: เรียงหมวดลงแนวตั้ง (อยู่ไฟล์เดียวกับกฎหลัก เพื่อให้ลำดับ cascade ถูก) */
@media (max-width: 760px) {
  /* กฎจอเล็กของส่วนที่นิยามในไฟล์นี้ ต้องอยู่ในไฟล์นี้ เพราะโหลดหลัง content.css */
  .form-grid.cols-2,
  .form-grid.cols-3,
  .sort-row,
  .score-card {
    grid-template-columns: 1fr;
  }
  .score-card {
    position: static;
    gap: var(--space-lg);
  }
  .score-parts > div {
    grid-template-columns: 110px minmax(0, 1fr) 36px;
  }
  .matrix {
    margin-left: 0;
  }
  .fish-row,
  .fish-spine {
    grid-template-columns: 1fr;
  }
  .fish-row .bone,
  .fish-row.bottom .bone,
  .bone > *,
  .fish-row.bottom .bone > * {
    transform: none;
    margin-left: 0;
  }
  .fish-spine span {
    display: none;
  }
  .fish-head {
    margin: 10px 0;
  }
}

/* ---------- แผนภาพปัจจัยที่ส่งผล (js/tools-rca.js) ---------- */
.cf-toolbar {
  position: sticky;
  top: calc(var(--top-h) + 8px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 20px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.cf-toolbar-end {
  display: inline-flex;
  gap: 8px;
}
.cf-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 32px 0 10px;
  font-size: var(--text-h3);
}
.cf-step small {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--muted);
}
.cf-out-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.cf-out-head .cf-step {
  margin-bottom: 0;
}
#cf-out {
  scroll-margin-top: calc(var(--top-h) + 72px);
}
#cf-title {
  scroll-margin-top: calc(var(--top-h) + 72px);
}
.cf-edit textarea {
  min-width: 190px;
  resize: vertical;
  line-height: 1.5;
}
.cf-edit td.cf-time {
  width: 96px;
}
.cf-edit td.cf-time input {
  min-width: 72px;
}
.cf-edit select {
  min-width: 170px;
}
.cf-links {
  display: grid;
  gap: 6px;
}
.cf-edit .cf-event-row td {
  background: var(--danger-soft);
}
@media (max-width: 760px) {
  /* ตารางกลายเป็นการ์ดทีละแถว ช่องกรอกเต็มความกว้าง */
  .cf-edit {
    overflow: visible;
    border: 0;
    background: none;
  }
  .cf-edit table,
  .cf-edit tbody,
  .cf-edit tr,
  .cf-edit td {
    display: block;
    width: auto;
  }
  .cf-edit thead {
    display: none;
  }
  .cf-edit tr {
    position: relative;
    margin: 0 0 12px;
    padding: 12px 56px 12px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-1);
  }
  .cf-edit td {
    padding: 4px 0;
    border: 0;
  }
  .cf-edit td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: var(--text-meta);
  }
  .cf-edit td.cf-time {
    width: auto;
  }
  .cf-edit .cf-event-row {
    background: var(--danger-soft);
  }
  .cf-edit .cf-event-row td {
    background: none;
  }
  .cf-edit input,
  .cf-edit select,
  .cf-edit textarea {
    width: 100%;
    min-width: 0;
  }
  .cf-edit td.cf-del {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0;
  }
  .cf-edit .icon-btn {
    width: 44px;
    height: 44px;
  }
  /* จอเล็ก: แถบเครื่องมือไม่ติดหัวจอ ปุ่มดูแผนภาพลอยอยู่ล่างขวาในระยะนิ้วโป้ง */
  .cf-toolbar {
    position: static;
  }
  #cf-out,
  #cf-title {
    scroll-margin-top: calc(var(--top-h) + 16px);
  }
  .cf-toolbar > [data-jump] {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    min-height: 48px;
    border-radius: 99px;
    padding: 10px 18px;
    background: var(--blue-solid);
    border-color: var(--blue-solid);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-3);
  }
  .tool:has(.cf-toolbar) {
    padding-bottom: 72px;
  }
}

/* จอสัมผัสและจอไม่เกินแท็บเล็ต: ช่องกรอก 16px (iOS ไม่ซูมเข้า) และเป้ากด 44px */
@media (max-width: 1023px), (pointer: coarse) {
  .tool input,
  .tool select,
  .tool textarea {
    font-size: var(--text-body);
    min-height: 44px;
  }
  .tool .icon-btn {
    width: 44px;
    height: 44px;
  }
  .tool button,
  .tool .btn {
    min-height: 44px;
  }
}

/* หัวข้อผลลัพธ์ในเครื่องมือ: ระดับ h3 แต่ขนาดเท่าข้อความ */
.out-h {
  margin: 20px 0 10px;
  font-size: var(--text-body);
}

/* ผลลัพธ์ที่มาจากข้อความผู้ใช้: หดได้และตัดคำยาวแทนการดันจนล้นจอ */
.rank li,
.rank-head > *,
.flow-item,
.bone,
.fish-head,
.aim,
.cf-box {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* แบบทดสอบมีหลายข้อ ใช้เส้นขอบอย่างเดียว ไม่ยกทุกข้อขึ้นเป็นชั้น */
.quiz .mcq {
  box-shadow: none;
}

/* ---------- RCA: ขั้นพับได้ ตัวอย่าง และแถบเลิกทำ ---------- */
.cf-stepbox {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line);
}
.cf-stepbox > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  min-height: 48px;
  padding-top: var(--space-md);
  cursor: pointer;
  list-style: none;
}
.cf-stepbox > summary::-webkit-details-marker {
  display: none;
}
.cf-stepbox > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-3px) rotate(-45deg);
  transition: transform var(--duration-fast);
  align-self: center;
}
.cf-stepbox[open] > summary::before {
  transform: translateY(-3px) rotate(45deg);
}
.cf-stepbox .cf-step {
  margin: 0;
}
.cf-sum {
  font-size: var(--text-meta);
  color: var(--muted);
  background: var(--soft);
  border-radius: 99px;
  padding: 2px 10px;
}
.cf-hint {
  margin: var(--space-xs) 0 var(--space-sm);
  color: var(--muted);
  font-size: var(--text-small);
}
.cf-edit td[data-label="ชั้น"] select {
  min-width: 210px;
}
.cf-edit textarea {
  overflow: hidden;
}
#cf-out:focus {
  outline: none;
}
.cf-preview {
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.cf-preview > p {
  margin: 0 0 var(--space-sm);
  color: var(--muted);
  font-size: var(--text-small);
}
.cf-undo {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: min(560px, calc(100vw - 32px));
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-size: var(--text-small);
  box-shadow: var(--shadow-3);
}
.cf-undo[hidden] {
  display: none;
}
.cf-undo .linkish {
  color: var(--gold);
  font-weight: 600;
  padding: 0 10px;
}
.cf-undo .linkish:hover {
  color: #fff;
}
@media (max-width: 1023px), (pointer: coarse) {
  /* ปุ่มลอยอยู่ขวาล่าง แถบเลิกทำจึงยกขึ้นเหนือปุ่ม */
  .cf-undo {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- RCA: คำเตือนรายแถว เริ่มต้น และแถวปัจจัย ---------- */
.cf-flag {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  color: var(--warn);
  font-size: var(--text-meta);
  line-height: 1.5;
}
.cf-flag li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}
.cf-flag .ico {
  flex: none;
  margin-top: 3px;
}
.cf-sum-warn {
  color: var(--warn);
  font-weight: 600;
}
.cf-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) 20px;
  border-radius: var(--radius);
  background: var(--soft);
}
.cf-empty p {
  margin: 0;
  display: grid;
  gap: 2px;
}
.cf-empty span {
  color: var(--muted);
  font-size: var(--text-small);
}
.cf-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
}
.cf-preview-head p {
  margin: 0;
}
.cf-preview-head .tool-actions {
  margin: 0;
}
.cf-toolbar-end .danger {
  margin-left: var(--space-lg);
}
@media (min-width: 761px) {
  /* แถวปัจจัย: ข้อความเต็มบรรทัดบน ชั้นและลิงก์อยู่บรรทัดล่าง ปุ่มลบอยู่ขวา */
  .cf-factors thead {
    display: none;
  }
  .cf-factors tr {
    display: grid;
    grid-template-columns: minmax(170px, 200px) minmax(0, 1fr) 44px;
    grid-template-areas: "text text del" "lane links del";
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--line);
  }
  .cf-factors tr:last-child {
    border-bottom: 0;
  }
  .cf-factors td {
    padding: 0;
    border: 0;
  }
  .cf-factors .cf-ftext {
    grid-area: text;
  }
  .cf-factors .cf-lanecell {
    grid-area: lane;
  }
  .cf-factors .cf-links {
    grid-area: links;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .cf-factors .cf-del {
    grid-area: del;
    align-self: start;
  }
  .cf-factors textarea,
  .cf-factors select {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 760px) {
  /* เวลาและเหตุการณ์อยู่แถวเดียวกัน การ์ดสั้นลง */
  .cf-timeline tr {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-sm);
  }
  /* ปุ่มลอยเป็นไอคอนกลม บังเนื้อหาน้อยลง */
  .cf-toolbar > .cf-jump {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .cf-toolbar > .cf-jump span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- RCA: แถวเหตุการณ์ตรึง ปุ่มเลื่อน และลิงก์ที่ควรแก้ ---------- */
.cf-undo [hidden] {
  display: none !important;
}
.cf-move,
.cf-pin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.cf-move .icon-btn {
  width: 36px;
  height: 36px;
}
.cf-pin {
  color: var(--danger);
  font-size: var(--text-meta);
  font-weight: 600;
}
.cf-edit select.cf-bad {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}
#cf-preview {
  scroll-margin-top: calc(var(--top-h) + 80px);
}
.cf-empty[hidden] {
  display: none;
}
@media (max-width: 1023px), (pointer: coarse) {
  .cf-move .icon-btn {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 760px) {
  /* พื้นที่ใต้หน้าให้ปุ่มลอยไม่บังลิงก์สุดท้าย */
  main:has(.cf-jump) {
    padding-bottom: 96px;
  }
  #cf-preview {
    scroll-margin-top: calc(var(--top-h) + 16px);
  }
}

/* ---------- RCA: โหมดนำเสนอกับทีม (js/rca-present.js) ---------- */
/* ทั้งห้องดูจอเดียวกัน ตัวอักษรขยายตามจอ อ่านจากโปรเจกเตอร์ได้ และยังใช้บนมือถือได้ */
.cf-present {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: clamp(1rem, 0.85rem + 0.55vw, 1.4rem);
}
.cf-present[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.cf-present::backdrop {
  background: var(--scrim-strong);
}
html.pv-open {
  overflow: hidden;
}
.pv-head,
.pv-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) clamp(16px, 3vw, 40px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pv-nav {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: space-between;
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
}
.pv-title {
  flex: 1;
  margin: 0;
  font-size: 1.15em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}
.pv-title .cf-sev {
  font-size: 0.65em;
}
.pv-head button,
.pv-nav button {
  min-height: 48px;
  font-size: max(0.8em, 1rem);
}
.pv-body {
  overflow: auto;
  padding: clamp(16px, 3vw, 40px);
  outline: none;
}
.pv-body > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.pv-step {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 600;
}
.pv-cmp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
}
.pv-cmp > div {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) 20px;
  border-radius: var(--radius);
  border: 1px solid var(--warn-line);
  background: var(--warn-soft);
}
.pv-cmp > .pv-practice {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: var(--ok-soft);
}
.pv-cmp small {
  color: var(--muted);
  font-size: 0.7em;
  font-weight: 600;
}
.pv-cmp .pv-edit {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.4;
}
.pv-why {
  margin: var(--space-xl) auto var(--space-md);
  font-size: 1em;
}
.pv-why span {
  color: var(--muted);
  font-size: 0.75em;
  font-weight: 400;
  margin-left: var(--space-sm);
}
/* ลำดับสายเหตุ: แถวละหนึ่งชั้น ชั้นใกล้ผู้ป่วยอยู่บน ถามต่อขึ้นไปจนถึงองค์กร */
.pv-ladder {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.pv-lane {
  display: grid;
  grid-template-columns: minmax(120px, 13em) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.pv-lane:last-child {
  border-bottom: 0;
}
.pv-lane > b {
  font-size: 0.75em;
  color: var(--muted);
  padding-top: 0.6em;
}
.pv-lane.empty > b {
  opacity: 0.6;
}
.pv-lane ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.pv-none {
  color: var(--muted);
  padding-top: 0.35em;
}
.pv-factor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.pv-factor .pv-edit {
  flex: 1 1 16em;
}
.pv-factor.up {
  border: 2px dashed var(--warn);
}
.pv-factor.agreed {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.pv-edit {
  text-align: left;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px dashed transparent;
  background: transparent;
  font-size: 1em;
  line-height: 1.45;
  color: inherit;
  cursor: text;
}
.pv-edit:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.pv-ph {
  color: var(--muted);
  font-weight: 400;
}
.pv-input {
  width: 100%;
  min-height: 3.2em;
  font-size: 1em;
  line-height: 1.45;
}
.pv-agree {
  min-height: 44px;
  font-size: max(0.7em, 0.875rem);
  color: var(--muted);
  background: transparent;
}
.pv-agree .ico {
  opacity: 0.35;
}
.pv-agree[aria-pressed="true"] {
  color: var(--ok);
  border-color: var(--ok);
  background: var(--paper);
  font-weight: 600;
}
.pv-agree[aria-pressed="true"] .ico {
  opacity: 1;
}
.pv-add {
  display: grid;
  grid-template-columns: minmax(150px, 14em) minmax(0, 1fr) auto;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.pv-add select,
.pv-add input,
.pv-add button {
  min-height: 48px;
  font-size: max(0.8em, 1rem);
}
.pv-empty {
  padding: var(--space-xl);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.pv-sum-h {
  font-size: 1.2em;
  margin: 0 auto var(--space-lg);
}
.pv-sum-h span {
  color: var(--ok);
}
.pv-agreed {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.pv-agreed li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  padding: var(--space-lg) 20px;
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  background: var(--ok-soft);
}
.pv-agreed li > div:first-child {
  display: grid;
  gap: 2px;
  flex: 1 1 18em;
}
.pv-agreed small {
  color: var(--muted);
  font-size: 0.75em;
}
.pv-send {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.pv-send button {
  min-height: 44px;
  font-size: max(0.75em, 0.875rem);
}
.pv-dots {
  display: flex;
  gap: var(--space-xs);
}
.pv-dots button {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle, var(--line) 0 5px, transparent 6px);
}
.pv-dots button[aria-current="step"] {
  background: radial-gradient(circle, var(--blue-solid) 0 7px, transparent 8px);
}
.row-src {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-meta);
}
.cf-box.factor.agreed {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.cf-box.factor.agreed small {
  color: var(--ok);
}
@media (max-width: 760px) {
  .pv-cmp,
  .pv-lane,
  .pv-add {
    grid-template-columns: 1fr;
  }
  .pv-lane > b {
    padding-top: 0;
  }
  .pv-lane.empty {
    display: none;
  }
  .pv-nav button:not(.pv-dots button) {
    padding: 8px 12px;
  }
  .pv-dots button {
    width: 26px;
  }
  .pv-close {
    padding: 8px 10px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cf-present[open] .pv-body.pv-anim > * {
    animation: pv-in 220ms var(--ease-out);
  }
}
@keyframes pv-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.pv-send .pv-sent {
  color: var(--ok);
  border-color: var(--ok);
  background: var(--paper);
  opacity: 1;
}

/* แถบเลิกทำเลื่อนขึ้นจากขอบล่างเมื่อปรากฏ (ต่อเนื่องกับตำแหน่งที่มันอยู่) · ลดการเคลื่อนไหวแล้วเหลือแค่จางเข้า */
.cf-undo:not([hidden]) {
  animation: cf-undo-in 220ms var(--ease-out);
}
@keyframes cf-undo-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-undo:not([hidden]) {
    animation: cf-fade-in 160ms ease-out !important;
  }
}
@keyframes cf-fade-in {
  from {
    opacity: 0;
  }
}