/* CSS เฉพาะของ pplan — ต่อยอดจาก template.css เท่านั้น
   ห้ามประกาศ token สีหรือระยะห่างใหม่ ใช้ตัวแปรจาก template เสมอ (C:\dev\CLAUDE.md ข้อ 8) */

/* ---------- ข้อความยืนยันมุมบน ---------- */
#flash-host {
  position: fixed; top: var(--s3); left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: var(--s2);
  width: min(420px, calc(100vw - var(--s4)));
}
#flash-host .flash { box-shadow: var(--shadow); transition: opacity .3s; }

/* ---------- แถบความคืบหน้า ---------- */
.progress { height: 6px; background: var(--tint); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .25s; }

/* ---------- ขั้นตอนของแบบสอบถาม ---------- */
.steps { display: flex; gap: var(--s1); flex-wrap: wrap; }
.steps button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 4px var(--s3); font-size: 12px; font-weight: 600; min-height: 30px;
}
.steps button:hover { border-color: var(--ink-faint); }
.steps button[aria-current="step"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps button.done { border-color: var(--ok); color: var(--ok); }
.steps button[aria-current="step"].done { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ---------- คำถาม ---------- */
.qlist { display: flex; flex-direction: column; gap: var(--s4); }
.q { display: flex; flex-direction: column; gap: var(--s2); }
.q > .qhead { display: flex; gap: var(--s2); align-items: baseline; }
.q .qnum {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.q label.qlabel { font-weight: 600; font-size: 14px; color: var(--ink); }
.q .req { color: var(--danger); font-weight: 700; }
.q .hint { font-size: 12px; color: var(--ink-soft); padding-left: 30px; }
.q .qbody { padding-left: 30px; display: flex; flex-direction: column; gap: var(--s2); }
.q textarea.input { min-height: 76px; resize: vertical; line-height: 1.6; }
.q textarea.input.tall { min-height: 120px; }

.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r);
  padding: var(--s2) var(--s3); font-size: 13px; cursor: pointer; min-height: 36px;
}
.choice:hover { border-color: var(--ink-faint); background: var(--tint); }
.choice input { accent-color: var(--brand); width: 16px; height: 16px; }
.choice.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.saved-dot { font-size: 12px; color: var(--ok); font-weight: 600; }

/* ---------- ผลลัพธ์ ---------- */
.doc { font-size: 14px; line-height: 1.75; display: flex; flex-direction: column; gap: var(--s3); }
.doc h2 { font-size: 17px; }
.doc h3 { font-size: 15px; color: var(--brand); border-bottom: 1px solid var(--line); padding-bottom: var(--s1); }
.doc h4 { font-size: 14px; }
.doc ul, .doc ol { margin: 0; padding-left: var(--s5); display: flex; flex-direction: column; gap: 2px; }
.doc blockquote {
  margin: 0; padding: var(--s2) var(--s3); background: var(--warn-soft);
  border-left: 3px solid var(--warn); border-radius: 0 var(--r) var(--r) 0; font-size: 13px;
}
.doc code { background: var(--tint); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.doc pre.code, pre.raw {
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); overflow-x: auto; font-size: 12px; line-height: 1.6; margin: 0;
}
pre.raw { white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow-y: auto; }
.doc table.data { min-width: 0; }

.tabs { display: flex; gap: var(--s1); }
.tabs button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 3px var(--s3); font-size: 12px; font-weight: 600; min-height: 28px;
}
.tabs button[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

/* ---------- ฟอร์มเปิดโปรเจกต์ใหม่ ---------- */
/* ใช้ฟอร์มจริงแทน prompt() เพราะบนมือถือ prompt ซ้อนกันหลายอันใช้ยาก และบางเบราว์เซอร์ปิดไว้ */
.newbox { display: flex; flex-direction: column; gap: var(--s3); }
.newbox .row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.newbox .row .btn { flex-shrink: 0; }

/* ---------- จอแคบ (มือถือ) ---------- */
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .q .hint, .q .qbody { padding-left: 0; }
  .page-head .actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .page-head .actions .btn { flex: 1 1 auto; }

  /* iOS ซูมหน้าจอเองเมื่อช่องกรอกเล็กกว่า 16px — ขยายเฉพาะบนมือถือเพื่อไม่ให้จอกระโดดตอนพิมพ์
     (ขนาดบนคอมยังเป็น 14px ตาม template กลาง) */
  .input, .select, textarea.input { font-size: 16px; }

  /* ตารางกลายเป็นการ์ด — ตารางกว้าง ๆ เลื่อนซ้ายขวาบนมือถือใช้ยากมาก */
  table.data.cards { min-width: 0; }
  table.data.cards thead { display: none; }
  table.data.cards tbody tr {
    display: block; border: 1px solid var(--line); border-radius: var(--r);
    padding: var(--s3); margin-bottom: var(--s2); background: var(--card);
  }
  table.data.cards td {
    display: flex; gap: var(--s3); align-items: flex-start;
    border: 0; padding: var(--s1) 0; text-align: left !important;
  }
  table.data.cards td::before {
    content: attr(data-label); flex: 0 0 88px;
    font-size: 11px; font-weight: 700; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: .04em; padding-top: 3px;
  }
  table.data.cards td[data-label=""]::before { display: none; }
  table.data.cards td.acts { flex-wrap: wrap; gap: var(--s2); padding-top: var(--s2); }
  table.data.cards td.acts .btn { flex: 1 1 auto; text-align: center; justify-content: center; }

  /* แถบเดินหน้า-ถอยหลังของแบบสอบถาม ติดขอบล่างไว้ให้นิ้วโป้งกดถึง */
  .paging.sticky {
    position: sticky; bottom: 0; background: var(--card);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .06);
    padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
    z-index: 5;
  }
  .paging.sticky .btn { flex: 1; }
  .paging.sticky .pages { margin-left: var(--s2); flex: 1; }
  .paging.sticky .pages .btn { width: 100%; }

  .tabs { flex-wrap: wrap; }
  .card-head { flex-wrap: wrap; gap: var(--s2); }
  .card-head .spacer { display: none; }
  .doc pre.code, pre.raw { font-size: 11px; }
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .app-nav { display: none; }        /* โลโก้กดกลับหน้าแรกได้อยู่แล้ว */
}