/* ==========================================================================
   ovec_cert — ระบบออกแบบ  "ราชการเข้าถึงง่าย" (แบบที่ 01)
   หลักการ: คอนทราสต์สูง ตัวอักษรใหญ่ ขอบเขตชัด ไม่มีลูกเล่นที่ไม่จำเป็น
   ทุกค่าสีผ่าน WCAG AA ขึ้นไปเมื่อวางบนพื้นที่กำหนดไว้
   ========================================================================== */

/* ---------- ฟอนต์ ---------- */
@font-face{
  font-family:'PK Maehongson';
  src:url('../fonts/pk-maehongson-regular.woff2') format('woff2'),
      url('../fonts/pk-maehongson-regular.woff')  format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'PK Maehongson';
  src:url('../fonts/pk-maehongson-medium.woff2') format('woff2'),
      url('../fonts/pk-maehongson-medium.woff')  format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'PK Maehongson';
  src:url('../fonts/pk-maehongson-bold.woff2') format('woff2'),
      url('../fonts/pk-maehongson-bold.woff')  format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'PK Maehongson';
  src:url('../fonts/pk-maehongson-italic.woff2') format('woff2'),
      url('../fonts/pk-maehongson-italic.woff')  format('woff');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- โทเคน ---------- */
:root{
  --bg:#EEF2F6;
  --surface:#FFFFFF;
  --surface-2:#F1F5F9;
  --surface-3:#E7EDF3;

  --ink:#0B1220;
  --muted:#41525F;
  --faint:#6B7C89;

  --line:#C9D5DF;
  --line-strong:#7C93A5;

  --accent:#0B4F8A;
  --accent-dark:#083A66;
  --accent-soft:#E3EDF6;
  --on-accent:#FFFFFF;

  --head-bg:#0B2A45;
  --head-ink:#FFFFFF;

  --focus:#F2A93B;

  --ok:#1D6B3E;      --ok-bg:#E4F2E9;   --ok-line:#9CC7AE;
  --warn:#8A5300;    --warn-bg:#FBEEDA; --warn-line:#D9B274;
  --crit:#9E1C13;    --crit-bg:#FBE6E4; --crit-line:#DDA39D;
  --brass:#7A5A1E;   --brass-bg:#F6EEDC; --brass-line:#D9C7A4;

  --radius:8px;
  --radius-sm:7px;

  /* ระยะห่างเป็นทวีคูณของ 4 ทั้งระบบ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* กติกาขนาดตัวอักษร: เนื้อหาหลัก 17px  ข้อความรอง 15-16px
     เล็กที่สุดที่ยอมให้ใช้คือ 14px (ป้ายสถานะ/หัวตาราง) ห้ามต่ำกว่านี้
     ผู้ใช้จริงคือครูและนักศึกษาหลายพันคน อ่านจากมือถือกลางงานอบรม */
  --font:'PK Maehongson', 'Sarabun', system-ui, -apple-system, sans-serif;
  --font-mono:ui-monospace, 'Sarabun', 'Courier New', monospace;

  color-scheme:light;
}

/* ---------- พื้นฐาน ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 var(--s2); line-height:1.3; font-weight:700; text-wrap:balance}
p{margin:0 0 var(--s3)}
a{color:var(--accent); text-underline-offset:3px}
a:hover{color:var(--accent-dark)}
img{max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}

/* โฟกัสคีย์บอร์ดต้องเห็นชัดมาก — ห้ามลบทิ้ง */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:3px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--on-accent); padding:var(--s3) var(--s4);
  border-radius:0 0 var(--radius) 0; font-weight:600;
}
.skip:focus{left:0}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- โครงหน้า ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--s4)}

.site-head{background:var(--head-bg); color:var(--head-ink)}
.site-head .wrap{display:flex; align-items:center; gap:var(--s3); padding-top:var(--s3); padding-bottom:var(--s3)}
.site-head .crest{
  width:44px; height:44px; flex:none; border-radius:var(--radius);
  display:grid; place-items:center; font-size:20px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
}
.site-head h1{margin:0; font-size:19px; font-weight:700; letter-spacing:.01em}
.site-head .org{margin:0; font-size:14px; opacity:.85}
.site-head .to-admin{margin-left:auto}

main{padding-bottom:var(--s10)}

.hero{text-align:center; padding:var(--s8) 0 var(--s2)}
.hero h2{font-size:28px; margin-bottom:var(--s2)}
.hero p{color:var(--muted); max-width:52ch; margin:0 auto; font-size:17px}

/* ---------- การ์ดค้นหา ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.searchcard{margin-top:var(--s6)}

.tabs{
  display:flex; gap:var(--s1); overflow-x:auto;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  padding:var(--s2); scrollbar-width:thin;
}
.tabs button{
  flex:none; border:1px solid transparent; background:transparent; color:var(--muted);
  padding:11px 16px; border-radius:var(--radius-sm); font-size:16px; cursor:pointer;
  min-height:44px;                      /* พื้นที่กดขั้นต่ำ */
}
.tabs button:hover{color:var(--ink); background:var(--surface-3)}
.tabs button[aria-selected="true"]{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700;
}

.searchbody{padding:var(--s5)}

.field{margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
label{display:block; font-size:16px; font-weight:600; margin-bottom:var(--s2)}
.help{font-size:15px; color:var(--muted); margin:var(--s2) 0 0}

.row{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end}
.row .grow{flex:1; min-width:220px}

input[type=text],input[type=search],input[type=tel],input[type=password],select,textarea{
  width:100%; min-height:48px;
  background:var(--surface); color:var(--ink);
  border:2px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:16px;    /* 16px กัน iOS ซูมเองตอนโฟกัส */
}
input::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:3px solid var(--focus); outline-offset:1px}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2341525F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; min-width:48px; padding:12px 22px;
  background:var(--accent); color:var(--on-accent);
  border:2px solid var(--accent); border-radius:var(--radius-sm);
  font-size:16px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:var(--on-accent)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.sm{min-height:40px; padding:8px 14px; font-size:15px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- ป้ายสถานะ ---------- */
.badge{display:inline-block; font-size:14px; font-weight:700; padding:3px 11px; border-radius:999px; border:1px solid}
.badge.ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.badge.warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.badge.crit{background:var(--crit-bg); color:var(--crit); border-color:var(--crit-line)}
.badge.mute{background:var(--surface-3); color:var(--muted); border-color:var(--line)}

.ctl{
  font-family:var(--font-mono); font-size:14px; padding:2px 8px; border-radius:5px;
  background:var(--brass-bg); color:var(--brass); border:1px solid var(--brass-line);
}

/* ---------- กล่องข้อความ ---------- */
.notice{
  display:flex; gap:var(--s3); align-items:flex-start;
  border:1px solid var(--line); border-left:6px solid var(--accent);
  background:var(--accent-soft); border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s3) var(--s4); margin:var(--s4) 0; font-size:16px;
}
.notice.ok{border-left-color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
.notice.warn{border-left-color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
.notice.crit{border-left-color:var(--crit); background:var(--crit-bg); border-color:var(--crit-line)}
.notice .ic{
  width:24px; height:24px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:700;
  background:var(--accent); color:var(--on-accent); margin-top:1px;
}
.notice.ok .ic{background:var(--ok)}
.notice.warn .ic{background:var(--warn)}
.notice.crit .ic{background:var(--crit)}
.notice b{display:block; margin-bottom:2px}
.notice p{margin:0; font-size:15px; color:var(--muted)}

/* ---------- ตัวยืนยันไม่ใช่บอท (Cloudflare Turnstile) ----------
   วิดเจ็ตวาดตัวเองใน iframe เราจึงจัดได้แค่กล่องที่ครอบมันอยู่
   กว้าง 300px คือขนาดมาตรฐานของวิดเจ็ต เผื่อไว้ให้ไม่ล้นจอเล็ก */
.turnstile-box{margin-top:var(--s4); min-height:65px; max-width:100%; overflow:hidden}

/* ==========================================================================
   กล่องแจ้งข้อมูลผิด (<dialog>)
   โครงสามส่วน หัว–เนื้อ–ท้าย: ส่วนเนื้อเลื่อนได้ ส่วนหัวกับปุ่มอยู่ที่เดิมเสมอ
   ผู้ใช้จึงเห็นปุ่ม "ส่งเรื่อง" ตลอด ไม่ต้องเลื่อนหาบนจอเตี้ย ๆ อย่างมือถือแนวนอน
   ใช้ของที่เบราว์เซอร์สมัยใหม่มีให้ (dialog · ::backdrop · dvh · @starting-style)
   โดยเขียนให้เบราว์เซอร์ที่ยังไม่รู้จักบางอย่างก็ยังใช้งานได้ครบ
   ========================================================================== */
#reportDlg{
  /* กว้างพอสำหรับข้อความไทยซึ่งยาวกว่าอังกฤษราวหนึ่งเท่าตัว แต่ไม่ล้นจอเล็ก */
  width:min(620px, calc(100vw - var(--s8)));
  max-width:100%;
  max-height:min(88vh, 760px);
  padding:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 24px 64px rgba(11,42,69,.22), 0 2px 8px rgba(11,42,69,.10);
  overflow:hidden;                       /* ให้มุมโค้งตัดส่วนหัว/ท้ายจริง ๆ */
}
@supports (height:100dvh){
  #reportDlg{max-height:min(88dvh, 760px)}   /* กันแถบที่อยู่ของมือถือบังปุ่ม */
}
#reportDlg::backdrop{
  background:rgba(11,34,56,.55);
  backdrop-filter:blur(2px);
}
#reportForm{
  display:flex; flex-direction:column;
  max-height:inherit;
  margin:0;
}

/* ---------- ส่วนหัว ---------- */
.dlg-head{
  display:flex; align-items:flex-start; gap:var(--s4);
  padding:var(--s5) var(--s6);
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.dlg-head h3{margin:0; font-size:20px; line-height:1.35}
.dlg-sub{
  margin:var(--s1) 0 0; font-size:15px; color:var(--muted);
  font-family:var(--font-mono);
}
.dlg-x{
  flex:none; margin-inline-start:auto;
  display:grid; place-items:center;
  width:40px; height:40px; padding:0;
  background:transparent; color:var(--muted);
  border:1px solid transparent; border-radius:50%;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.dlg-x:hover{background:var(--surface-3); color:var(--ink)}
.dlg-x:focus-visible{outline:3px solid var(--focus); outline-offset:1px}

/* ---------- ส่วนเนื้อ ---------- */
.dlg-body{
  padding:var(--s6);
  overflow-y:auto;
  overscroll-behavior:contain;           /* เลื่อนจนสุดแล้วไม่ไปเลื่อนหน้าข้างหลังต่อ */
  flex:1 1 auto;
}
.dlg-lead{
  margin:0 0 var(--s6);
  font-size:15px; line-height:1.65; color:var(--muted);
  padding:var(--s3) var(--s4);
  background:var(--accent-soft);
  border-inline-start:3px solid var(--accent);
  border-radius:var(--radius-sm);
}
.dlg-body .fld{margin-bottom:var(--s6)}
.dlg-body .fld:last-of-type{margin-bottom:0}
.dlg-body label{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  margin-bottom:var(--s2);
}
.req,.opt{
  font-size:14px; font-weight:600; line-height:1.6;   /* 14px คือเล็กที่สุดที่กติกายอมให้ */
  padding:1px 8px; border-radius:999px; border:1px solid;
}
.req{color:var(--crit); background:var(--crit-bg); border-color:var(--crit-line)}
.opt{color:var(--muted); background:var(--surface-3); border-color:var(--line)}
.fld-hint{margin:var(--s2) 0 0; font-size:14px; line-height:1.55; color:var(--faint)}
#reportDlg textarea{min-height:120px; line-height:1.6; resize:vertical}
#reportMsg:not(:empty){margin-top:var(--s5)}
#reportMsg .loading{margin:0}            /* ระยะห่างมาจาก #reportMsg แล้ว ไม่ต้องซ้อนอีกชั้น */
#reportMsg .notice{margin:0}

/* ---------- ส่วนท้าย ---------- */
.dlg-foot{
  display:flex; justify-content:flex-end; gap:var(--s3);
  padding:var(--s4) var(--s6);
  border-top:1px solid var(--line);
  background:var(--surface-2);
}

/* ---------- ปรากฏตัว ---------- */
/* @starting-style ทำให้กล่องค่อย ๆ ขึ้นมาแทนที่จะกระโดดโผล่
   เบราว์เซอร์ที่ยังไม่รู้จักจะข้ามทั้งบล็อกไปเอง กล่องก็แค่โผล่มาเฉย ๆ ไม่มีอะไรเสีย */
@media (prefers-reduced-motion:no-preference){
  #reportDlg[open]{
    animation:dlg-in .18s ease-out;
  }
  @keyframes dlg-in{
    from{opacity:0; transform:translateY(10px) scale(.985)}
    to  {opacity:1; transform:none}
  }
}

/* ---------- จอเล็ก ---------- */
@media (max-width:640px){
  #reportDlg{
    /* บนมือถือให้เต็มความกว้างและดันไปชิดล่าง กดง่ายด้วยนิ้วโป้ง */
    width:100%;
    max-width:100%;
    max-height:92vh;
    margin:auto auto 0;
    border-radius:14px 14px 0 0;
    border-bottom:0;
  }
  @supports (height:100dvh){
    #reportDlg{max-height:92dvh}
  }
  .dlg-head,.dlg-foot{padding-inline:var(--s5)}
  .dlg-body{padding:var(--s5)}
  .dlg-foot{
    /* ปุ่มหลักอยู่ขวาบนจอใหญ่ แต่บนมือถือให้เต็มความกว้างทั้งคู่ กดพลาดยาก */
    flex-direction:column-reverse;
  }
  .dlg-foot .btn{width:100%}
}

/* ---------- ยืนยันเลข 4 ตัวท้ายก่อนได้ลิงก์ (ช่องค้นหาโหมด verify) ---------- */
.vf{flex:1 1 260px; min-width:0}
.vf label{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
.vf-row{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap}
.vf-in{
  width:110px; flex:none; text-align:center; letter-spacing:.35em; font-weight:700;
  font-size:17px; padding:9px 10px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--ink);
}
.vf-in:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.vf-msg{margin:6px 0 0; font-size:14px; color:var(--crit); min-height:1.2em}
.vf-note{font-size:14px; color:var(--muted); flex:1 1 240px}

/* ---------- ตาราง ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:16px; min-width:560px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
th{
  font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  background:var(--surface-3); font-weight:700; white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#F8FAFC}
td.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.mono{font-family:var(--font-mono); font-size:15px}
.masked{font-family:var(--font-mono); font-size:15px; letter-spacing:.02em}

/* ---------- ท้ายหน้า ---------- */
.site-foot{
  border-top:1px solid var(--line); background:var(--surface);
  padding:var(--s5) 0; margin-top:var(--s10); font-size:15px; color:var(--muted);
}
.site-foot .wrap{display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center}

/* ---------- จอเล็ก ---------- */
@media (max-width:640px){
  .hero{padding-top:var(--s5)}
  .hero h2{font-size:24px}
  .searchbody{padding:var(--s4)}
  .site-head h1{font-size:17px}
  .site-head .org{font-size:14px}
  .site-head .to-admin{display:none}
  .row{gap:var(--s3)}
  .row > div{width:100%}          /* ให้ปุ่มค้นหาเต็มความกว้างบนมือถือ */
  .row .grow{min-width:100%}
  .row .btn{width:100%}
  .col-province{min-width:100%}
}

/* ==========================================================================
   คลาสช่วย — มีไว้แทน inline style
   นโยบาย CSP ของระบบตั้งไว้ที่ style-src 'self' ซึ่งบล็อก style="..."
   ทั้งหมด การเขียนสไตล์ในไฟล์นี้จึงไม่ใช่แค่ความเป็นระเบียบ แต่จำเป็น
   ========================================================================== */
.btn.on-dark{color:#fff; border-color:rgba(255,255,255,.5)}
.btn.on-dark:hover{background:rgba(255,255,255,.14); color:#fff}

.col-province{min-width:220px}
.mt-6{margin-top:var(--s6)}
.pad-5{padding:var(--s5)}
.flush{border:0}
.col-label{width:200px}

/* ==========================================================================
   ผลการค้นหา — สองชั้น: รายชื่อคน → กางใบของคนนั้น
   ตัวเล็กที่สุดในบล็อกนี้คือ 14px ตามกติกาด้านบน ห้ามต่ำกว่านี้
   ========================================================================== */

/* ---------- ปุ่มสลับวิธีระบุสังกัด ---------- */
.segmented{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius);
           overflow:hidden; margin-bottom:var(--s4)}
.seg{appearance:none; border:0; background:var(--surface); color:var(--muted);
     font:inherit; font-size:15px; padding:10px 16px; min-height:44px; cursor:pointer}
.seg + .seg{border-left:1px solid var(--line)}
.seg:hover{background:var(--surface-2); color:var(--ink)}
.seg.on{background:var(--accent); color:var(--on-accent); font-weight:500}

/* ---------- สถานะการค้น ---------- */
.loading,.found{margin:var(--s4) 0 0; font-size:16px; color:var(--muted)}
.found{font-weight:500; color:var(--ink)}

/* ---------- หัวผลลัพธ์ ---------- */
.resulthead{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
            padding:var(--s2) 0 var(--s4); border-bottom:1px solid var(--line);
            margin-bottom:var(--s5)}
.resulthead h3{margin:0; font-size:21px; font-weight:700}
.resulthead .sub{font-size:15px; color:var(--muted)}
.resulthead .back{margin-left:auto}

/* ---------- แถบตัวกรอง ----------
   ทุกตัวยิงไปถามเซิร์ฟเวอร์ ไม่ได้กรองในเบราว์เซอร์
   เพราะเบราว์เซอร์ถือข้อมูลแค่หน้าเดียว กรองเองจะได้ผลจากเฉพาะ 20 คนที่เห็นอยู่ */
.filterbar{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center;
           background:var(--surface-2); border:1px solid var(--line);
           border-radius:var(--radius); padding:var(--s3) var(--s4); margin-bottom:var(--s5)}
.filterbar .grow{flex:1 1 220px; min-width:0}
.filterbar .grow input{width:100%}
.filterbar input,.filterbar select{font-size:16px; padding:9px 12px; min-height:44px}
.filterbar select{padding-right:38px}
.filterbar .cnt{font-size:14px; color:var(--muted); white-space:nowrap;
                font-variant-numeric:tabular-nums; margin-left:auto}

/* ---------- ชั้นที่ 1: คน ---------- */
.plist{display:flex; flex-direction:column; gap:var(--s3)}
/* ระหว่างรอผลหน้าถัดไป หรี่ของเดิมไว้ ไม่ล้างทิ้ง — จอจะได้ไม่กระพริบเป็นช่องว่าง */
#searchResult.busy .plist{opacity:.45}

.prow{border:1px solid var(--line); border-radius:var(--radius);
      background:var(--surface); overflow:hidden}
.prow.open{border-color:var(--line-strong)}

.prow-head{display:grid; grid-template-columns:44px minmax(0,1fr) auto 14px;
           gap:var(--s3); align-items:center; width:100%; text-align:left;
           border:0; background:transparent; font:inherit; color:inherit;
           padding:var(--s3) var(--s4); min-height:56px; cursor:pointer}
.prow-head:hover{background:var(--surface-3)}
.prow.open .prow-head{background:var(--accent-soft)}
.prow-head:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}

/* วงกลมตัวย่อ — ช่วยกวาดตาหาชื่อตัวเองในรายการยาว ๆ ได้เร็วกว่าอ่านทีละบรรทัด */
.av{width:44px; height:44px; border-radius:50%; flex:none;
    background:var(--surface-3); color:var(--muted);
    display:grid; place-items:center; font-weight:700; font-size:16px}
.prow.open .av{background:var(--accent); color:var(--on-accent)}

.prow-head .who{min-width:0}
.prow-head .nm{display:block; font-size:17px; font-weight:600; line-height:1.4}
.prow-head .sb{display:block; font-size:14px; color:var(--muted); margin-top:2px;
               overflow-wrap:anywhere}
.prow-head .ct{font-size:15px; color:var(--muted); white-space:nowrap;
               font-variant-numeric:tabular-nums}
.prow-head .chev{width:10px; height:10px; flex:none; justify-self:end;
                 border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
                 transform:rotate(45deg); transition:transform .15s ease}
.prow.open .prow-head .chev{transform:rotate(-135deg)}

.prow-body{border-top:1px solid var(--line); background:var(--surface-2);
           padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
/* ต้องมีบรรทัดนี้ — display:flex ข้างบนเป็นสไตล์ของผู้เขียน ซึ่งชนะ [hidden]{display:none}
   ที่มาจากสไตล์ของเบราว์เซอร์เสมอ ถ้าไม่เขียนทับ แถวจะกางค้างอยู่ทั้งที่ JS สั่งปิดแล้ว
   ยังคงใช้ hidden เป็นตัวตัดสิน (ไม่ใช่คลาส .open) เพราะโปรแกรมอ่านหน้าจอเข้าใจ hidden */
.prow-body[hidden]{display:none}

/* ---------- ชั้นที่ 2: ใบเกียรติบัตร (แถวแนวนอน) ---------- */
.cert{display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:var(--s4);
      align-items:center; border:1px solid var(--line); border-radius:var(--radius);
      padding:var(--s4); background:var(--surface)}

/* ---------- รูปย่อของใบ ----------
   กล่องเป็นสี่เหลี่ยมจัตุรัสขนาดคงที่ เพราะใบมีทั้งแนวตั้งและแนวนอนปนกันในหน้าเดียว
   ถ้าใช้กล่องแนวนอน ใบแนวตั้งจะเหลือความกว้างนิดเดียวและดูไม่เป็นระเบียบ
   กล่องจัตุรัส + object-fit:contain ทำให้ "ด้านยาวสุด" ของทุกใบเท่ากันพอดี
   ทุกแถวจึงสูงเท่ากันหมด และไม่มีใบไหนถูกยืดหรือถูกครอบตัดทิ้ง

   ขนาด 88px ต้องตรงกับค่า THUMB ใน search.js ซึ่งใส่เป็น width/height ของ <img>
   เบราว์เซอร์จะได้กันพื้นที่ไว้ตั้งแต่แรก แถวไม่กระตุกตอนภาพโหลดเสร็จ */
.thumb{width:88px; height:88px; flex:none; border-radius:6px; position:relative;
       display:grid; place-items:center; overflow:hidden;
       background:var(--surface-2); border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:contain; display:block;
           border-radius:4px}

/* กรอบเปล่าวาดด้วย CSS — ใช้เมื่อกิจกรรมยังไม่ได้อัปโหลดพื้นหลัง
   ยังต้องมีอยู่ เพราะแอดมินสร้างกิจกรรมก่อนแล้วค่อยออกแบบใบทีหลังได้ */
.thumb.blank{border-color:var(--brass-line);
             background:linear-gradient(140deg,#FBF6E9,#F2E7CD)}
.thumb.blank::before{content:""; position:absolute; inset:14px 10px;
                     border:1px solid var(--brass-line)}
.thumb.blank::after{content:""; position:absolute; left:22px; right:22px; top:38px; height:2px;
                    background:var(--brass-line); opacity:.7;
                    box-shadow:0 8px 0 -0.5px var(--brass-line), 0 15px 0 -0.5px var(--brass-line)}

.cmeta{min-width:0}
.cmeta h4{margin:0; font-size:17px; line-height:1.45; font-weight:600;
          display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.cmeta .line{margin:var(--s2) 0 0; display:flex; flex-wrap:wrap; gap:4px var(--s3);
             font-size:15px; color:var(--ink); align-items:center}
.cmeta .line.dim{font-size:14px; color:var(--muted)}
.cmeta .line span{overflow-wrap:anywhere}
.ctl{font-family:var(--font-mono); font-size:14px; color:var(--brass);
     background:var(--brass-bg); border:1px solid var(--brass-line);
     padding:2px 9px; border-radius:5px; white-space:nowrap}

/* แถวปุ่มในใบ — เรียงลงเป็นคอลัมน์ ความกว้างเท่ากันเองเพราะยืดเต็มคอลัมน์
   (บนจอแคบ .cert ยุบเป็นคอลัมน์เดียว ปุ่มก็ยังเต็มความกว้างเหมือนเดิม) */
.cert-actions{display:flex; flex-direction:column; gap:var(--s2);
              min-width:158px; max-width:none}
.cert-actions .btn{width:100%; min-width:0; min-height:44px; padding:10px var(--s3);
                   font-size:15px; justify-content:flex-start}
.cert-actions .btn span{overflow:hidden; text-overflow:ellipsis}
.cert-actions.one{min-width:158px}
.cert-actions.vf-wrap{min-width:260px}

/* ไอคอนในปุ่ม — flex:none กันไม่ให้ถูกบีบแบนตอนช่องแคบ */
.bi{width:18px; height:18px; flex:none}

/* ป้ายสถานะหน้าต่างเวลา — สีบอกสถานะโดยไม่ต้องอ่านข้อความ
   แต่ข้อความก็เขียนครบเสมอ เผื่อคนตาบอดสีและโปรแกรมอ่านหน้าจอ */
.win{font-size:14px; padding:4px 10px; border-radius:999px; font-weight:400;
     border:1px solid transparent; white-space:nowrap}
.win.open{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
.win.closing_soon{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line)}
.win.not_open{color:var(--muted); background:var(--surface-2); border-color:var(--line)}
.win.closed{color:var(--crit); background:var(--crit-bg); border-color:var(--crit-line)}

/* ---------- แบ่งหน้า ---------- */
.pager{display:flex; gap:6px; align-items:center; justify-content:center;
       flex-wrap:wrap; margin-top:var(--s5)}
.pager .pg{border:1px solid var(--line-strong); background:var(--surface); color:var(--muted);
           padding:8px 14px; min-height:44px; border-radius:var(--radius-sm);
           font:inherit; font-size:15px; cursor:pointer; font-variant-numeric:tabular-nums}
.pager .pg:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
.pager .pg[aria-current="page"]{background:var(--accent); border-color:var(--accent);
                                color:var(--on-accent); font-weight:700}
.pager .pg:disabled{opacity:.4; cursor:not-allowed}
.pager .gap{color:var(--faint); padding:0 2px}
.pager .pi{font-size:14px; color:var(--faint); margin-left:var(--s3);
           font-variant-numeric:tabular-nums}

.empt{margin:var(--s5) 0; padding:var(--s5); text-align:center;
      color:var(--muted); font-size:16px;
      border:1px dashed var(--line-strong); border-radius:var(--radius)}

.btn.disabled{background:var(--surface-2); color:var(--faint);
              border-color:var(--line); cursor:not-allowed}
.btn.disabled:hover{background:var(--surface-2); color:var(--faint)}
.btn.more{margin-top:var(--s4)}

@media (max-width:600px){
  /* เขียนแยก column-gap/row-gap ไม่ใช้ gap ย่อแล้วมาทับด้วย row-gap
     เพราะ gap ย่อที่มี var() อยู่ข้างในจะถูกแทนค่าตอนคำนวณ ไม่ใช่ตอนอ่านไฟล์
     ผสมกันแล้วอ่านค่ากลับมาได้ค่าว่าง ทำให้ดีบักยากโดยไม่จำเป็น */
  .prow-head{grid-template-columns:40px minmax(0,1fr) auto;
             column-gap:var(--s3); row-gap:2px; padding:var(--s3)}
  .prow-head .av{width:40px; height:40px; font-size:15px}
  .prow-head .chev{display:none}          /* พื้นที่แคบ ใช้สีพื้นหลังบอกว่ากางอยู่แทน */
  .prow-body{padding:var(--s3)}

  /* ใบเกียรติบัตร: ยุบเหลือคอลัมน์เดียว รูปเล็กไปอยู่บนสุด */
  .cert{grid-template-columns:minmax(0,1fr); gap:var(--s3); padding:var(--s3)}
  .cert-actions{min-width:0}
  .cert-actions .btn{justify-content:center}

  .filterbar{padding:var(--s3)}
  .filterbar .cnt{margin-left:0}
  .resulthead h3{font-size:19px}
  .pager .pg{padding:8px 12px}
  .pager .pi{width:100%; text-align:center; margin-left:0}
}