/* Prompt (SIL OFL) self-hosted: the CSP allows fonts/styles from self only */
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prompt-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/prompt-500-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/prompt-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/prompt-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/prompt-700-thai.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/prompt-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --bg: #f7f7f7;
  --card: #ffffff;
  --border: #ebebeb;
  --primary: #ff385c;
  --primary-hover: #e31c5f;
  --primary-soft: #fff0f3;
  --text: #222222;
  --text-secondary: #717171;
  --muted: #b0b0b0;
  --error: #c13515;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}

button, [role="button"] { cursor: pointer; }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  * {
    box-sizing: border-box;
  }

  body {
    font-family: Prompt, "LINE Seed Sans TH", Sarabun, system-ui, sans-serif;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 16px 40px;
    background: #f4f4f5;
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
  }

h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--text);
}

h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--text);
}

.mast {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 14px;
}

.mast-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  mix-blend-mode: multiply;
}

.eyebrow {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  margin: 22px 0 10px;
}

.section-label::before {
  content: "";
  width: 3px;
  height: 16px;
  border-radius: 99px;
  background: var(--primary);
}

.icon-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.icon-card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 16px 12px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow);
}

.icon-card:hover {
  border-color: #ffd0d8;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.icon-card:active {
  transform: translateY(0);
}

.icon-card.selected {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.16);
}

.icon-frame {
  width: 108px;
  height: 108px;
  margin: 0 auto 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: #fff7f8;
}

.icon-card .icon-3d {
  width: 132px;
  height: 132px;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.icon-card .icon-label {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text);
}

.tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(255, 56, 92, 0.35);
}

fieldset.panel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 22px;
  padding: 18px 18px 16px;
  margin: 14px 0 0;
  box-shadow: var(--shadow);
}

legend {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0 0 10px;
  margin: 0 0 4px;
  width: 100%;
  border-bottom: 1px solid var(--border);
}

label {
  display: block;
  margin: 14px 0 0;
  font-weight: 500;
  font-size: 0.9rem;
}

.hint {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 400;
}

input,
select,
textarea {
  width: 100%;
  margin-top: 6px;
  padding: 13px 14px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.12);
}

textarea {
  resize: vertical;
  min-height: 76px;
}

input[readonly],
input.age {
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 600;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pair label {
  margin-top: 14px;
}

.name-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 10px;
  align-items: end;
}

.name-row label {
  margin-top: 14px;
}

button {
  font-family: inherit;
}

#addp,
#addw {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid #ffd0d8;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  margin: 12px 0 4px;
  min-height: 44px;
}

#addp:hover,
#addw:hover {
  background: #ffe4ea;
}

#gen,
#go {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 15px 28px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  width: 100%;
  min-height: 52px;
  box-shadow: 0 8px 18px rgba(255, 56, 92, 0.22);
}

#gen {
  margin-top: 0;
}

.submit-bar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  margin-top: 18px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

#gate {
  max-width: 400px;
  margin: 10vh auto 0;
  background: var(--card);
  border-radius: 28px;
  padding: 28px 28px 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
  text-align: center;
  border: 1px solid var(--border);
}

#gen:hover,
#go:hover {
  background: var(--primary-hover);
}

.note {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 12px 0 4px;
  box-shadow: var(--shadow);
}

.err {
  color: var(--error);
  font-size: 0.875rem;
  margin: 8px 0 0;
  min-height: 1.2em;
}

.ok {
  display: block;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}

#msg:empty {
  display: none;
}

[hidden] {
  display: none !important;
}

.lbl {
  margin: 16px 0 0;
  font-weight: 600;
}

.fine {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}




#gate .icon-frame {
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
  border-radius: 36px;
  background: #fff7f8;
}

#gate .icon-3d {
  width: 150px;
  height: 150px;
}

#gate input {
  text-align: center;
  letter-spacing: 0.28em;
  font-size: 18px;
  margin-top: 16px;
}

.gate-sub {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

#charges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

#charges .chip {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: #fff;
  font-weight: 500;
  line-height: 1.4;
}

#charges .chip input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--primary);
  flex: none;
}

#charges .chip.on {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.person,
.erow {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 12px 12px;
  margin-top: 10px;
  background: #fafafa;
}

.erow {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
}

.erow label,
.person label {
  margin-top: 8px;
}

.x {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
}

.x:hover {
  color: var(--error);
  border-color: #f3c7be;
}

#tot {
  display: block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-weight: 500;
}

#tot:empty {
  display: none;
}

@media (max-width: 640px) {
  body {
    padding: 16px 12px 28px;
  }

  .pair,
  .name-row {
    grid-template-columns: 1fr;
  }

  .erow {
    grid-template-columns: 1fr 1fr auto;
  }

  .erow label:first-child {
    grid-column: 1 / -1;
  }

  .icon-frame {
    width: 88px;
    height: 88px;
    border-radius: 24px;
  }

  .icon-card .icon-3d {
    width: 108px;
    height: 108px;
  }

  .x {
    width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-card {
    transition: none;
  }
}

/* --- merge additions: elements generated by working app.js (keep v6 look) --- */
#charges label { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; font-weight: 500; line-height: 1.4; }
#charges label.on { border-color: var(--primary); background: var(--primary-soft); }
#charges input.cb { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--primary); flex: none; box-shadow: none; }
.wrow { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-top: 10px; background: #fafafa; }
.wrow select, .wrow input { margin-top: 0; }
.wrow select { flex: 0 0 170px; }
.wrow input { flex: 1; min-width: 0; }
.wrow button, .delp { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: var(--text-secondary); font-weight: 600; }
.wrow button:hover, .delp:hover { color: var(--error); border-color: #f3c7be; }
fieldset.person { padding: 12px 12px 14px; margin: 12px 0 0; }
fieldset.person legend { display: flex; align-items: center; gap: 6px; }
fieldset.person legend .delp { margin-left: auto; }
.delp { min-height: 36px; padding: 4px 12px; font-size: 0.85rem; }
.icon-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 640px) { .wrow { flex-direction: column; align-items: stretch; } .wrow select { flex: 1; width: 100%; } }
/* keep fieldset legends inside the rounded panels (default legend sits on the top border) */
fieldset.panel > legend, fieldset.person > legend { float: left; }
fieldset.panel > legend + *, fieldset.person > legend + * { clear: both; }

/* v7: ID document type toggle (v6 design) for the main arrestee and each co-arrestee */
.kind {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 4px 0 8px;
}

.kind button {
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 4px;
  font-size: 0.78rem;
  font-weight: 600;
  width: auto;
  margin: 0;
}

.kind button.on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* v8: nationality required for passport / no ID */
.hint.nat-warn { color: #c13515; }

/* v11 charge picker (ui-charges.js) */
#xcharges { margin-top: 14px; }
.xpick-head, .xgroup-title { font-weight: 600; margin: 4px 0 8px; }
.xsearch { width: 100%; margin-bottom: 10px; }
.xgroup { border: 1.5px solid var(--border); border-radius: 14px; background: #fff; margin-bottom: 8px; }
.xgroup > summary { padding: 12px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.xgroup > summary::-webkit-details-marker { display: none; }
.xgroup > summary::after { content: '▾'; color: var(--text-secondary); }
.xgroup[open] > summary::after { content: '▴'; }
.xcount { background: var(--primary); color: #fff; border-radius: 999px; padding: 0 9px; margin-left: auto; margin-right: 8px; font-size: inherit; }
.xitem { padding: 0 12px 10px; }
.xitem .xlab { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; font-weight: 500; line-height: 1.4; }
.xitem.on .xlab { border-color: var(--primary); background: var(--primary-soft); }
.xpick input.cb, .p-xwrap input.cb { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--primary); flex: none; box-shadow: none; }
.xfields { padding: 8px 4px 0 28px; }
.xpicks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.xquick, .xcadd, .p-behreset, #behReset { border: 1.5px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; }
.xquick:hover, .xcadd:hover, .p-behreset:hover, #behReset:hover { border-color: var(--primary); }
.xcustom { margin-top: 10px; }
.xcustom-row { display: flex; gap: 8px; }
.xcustom-row .xcin { flex: 1; min-width: 0; }
.xchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xchip { background: var(--primary-soft); border: 1.5px solid var(--primary); border-radius: 999px; padding: 4px 6px 4px 12px; }
.xchip-x { border: 0; background: transparent; color: var(--primary); font: inherit; padding: 0 6px; }
.p-xwrap { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.p-same { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.p-drug label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 6px; font-weight: 500; }
#behavior, .p-behavior { width: 100%; line-height: 1.6; }
#behReset, .p-behreset { margin-top: 8px; }
.doc-kind { margin-top: 10px; }
/* v13: original drug charges folded into the ยาเสพติด category */
.xgen { padding: 0 12px 10px; }
.xgen #charges { margin-top: 0; }
.xgen > label { display: block; margin-top: 10px; }
.xgen .p-drug label { margin-bottom: 8px; }
/* v15 ผู้พิมพ์ */
#typist { width: 100%; }
.tp-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.tp-item { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; }
.tp-item span { flex: 1; min-width: 0; }
.tp-item button, #addTypist, .tp-actions button { border: 1.5px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; }
.tp-form { margin-top: 10px; }
.tp-actions { display: flex; gap: 8px; margin-top: 8px; }
/* v17 photos */
.ph-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ph-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; }
.ph-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 64px; }
.ph-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ph-no { font-size: .85em; color: var(--muted, #717171); }
.ph-cap { width: 100%; }
.ph-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.ph-btns button { border: 1.5px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 6px 10px; font: inherit; min-width: 36px; }
.ph-btns button:disabled { opacity: .35; }
#arrestPhotos, #custodyPhotos { width: 100%; margin: 6px 0; }
.ph-item { flex-wrap: wrap; }
.ph-btns { flex: 1 0 100%; justify-content: flex-end; }
/* v18 ภาพ/ไฟล์ทะเบียนราษฎร์ */
.cr-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
#civregMain.cr-block { border-top: none; padding-top: 0; }
.cr-title { margin: 0; font-weight: 600; font-size: 0.9rem; }
.cr-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cr-btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); border: 1px solid #ffd0d8; font-weight: 600; cursor: pointer; }
.cr-btn:hover { background: #ffe4ea; }
.cr-btn:focus-within { box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.18); }