/* ==========================================================================
   M16 ตั้งค่าระบบ (prefix .m16-) — SET-01 ตั้งค่าหลัก · SET-02 การเชื่อมต่อ
   Tokens only; layout primitives come from base/components.
   ========================================================================== */

/* ---------- shared ---------- */
.m16-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--rv-fs-small); background: var(--rv-neutral-100); padding: 1px 4px; border-radius: 3px; }
.m16-code--block { display: block; margin: 0; padding: var(--rv-space-3); max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--rv-divider); line-height: var(--rv-lh-small); }
.m16-kv .rv-kv__row { grid-template-columns: 120px minmax(0, 1fr); }
.m16-subhead { margin: 0; font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); font-weight: 600; }
.m16-statlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.m16-statlist > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rv-space-2); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rv-divider); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m16-statlist > li:last-child { border-bottom: 0; }
.m16-statlist > li > .rv-small { grid-column: 1 / -1; overflow-wrap: anywhere; }
.m16-bigstat { margin: 0 0 var(--rv-space-2); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); }
.m16-bigstat strong { font-size: var(--rv-fs-stat-sm); line-height: var(--rv-lh-stat-sm); font-weight: 500; color: var(--rv-text-primary); margin-right: var(--rv-space-1); }

/* ---------- SET-01 forms ---------- */
.m16-tabbody { min-width: 0; }
.m16-form { display: flex; flex-direction: column; gap: var(--rv-space-4); min-width: 0; }
.m16-reason { max-width: 520px; }
.m16-reason + .rv-form-actions { margin-top: 0; }
.m16-datesample { align-self: end; padding: var(--rv-space-2) var(--rv-space-3); border-radius: var(--rv-radius-control); background: var(--rv-surface-subtle); min-width: 0; overflow-wrap: anywhere; }
.m16-nolink { text-decoration: underline dotted; }

/* general: learner-site mini preview */
.m16-site { display: flex; flex-direction: column; gap: var(--rv-space-3); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-overlay); padding: var(--rv-space-3); background: var(--rv-surface); }
.m16-site__bar { display: flex; align-items: center; gap: var(--rv-space-3); padding-bottom: var(--rv-space-2); border-bottom: 1px solid var(--rv-divider); min-width: 0; }
.m16-site__logo { display: block; max-height: 32px; max-width: 120px; width: auto; height: auto; object-fit: contain; }
.m16-site__name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.m16-site__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rv-space-1); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m16-site__contact li { display: flex; align-items: flex-start; gap: var(--rv-space-2); min-width: 0; overflow-wrap: anywhere; }
.m16-site__contact svg { color: var(--rv-primary-700); margin-top: 2px; flex: 0 0 auto; }
.m16-site p { margin: 0; }

/* learning: lead-day chips */
.m16-days__chips { display: flex; flex-wrap: wrap; gap: var(--rv-space-2); min-height: 28px; align-items: center; }
.m16-days__chips .rv-chip { min-height: 28px; padding-right: var(--rv-space-2); }
.m16-days__add { display: flex; align-items: center; gap: var(--rv-space-2); max-width: 280px; }
.m16-days__add .rv-input { flex: 1 1 120px; }
.m16-days.is-invalid .m16-days__add .rv-input { border-color: var(--rv-danger); }

/* privacy: consent preview */
.m16-consent { display: flex; flex-direction: column; gap: var(--rv-space-3); min-width: 0; }
.m16-consent__ui { display: flex; flex-direction: column; gap: var(--rv-space-2); padding: var(--rv-space-3); border: 1px solid var(--rv-card-border); border-radius: var(--rv-radius-overlay); background: var(--rv-surface-subtle); }
.m16-consent__ui p { margin: 0; }
.m16-consent__notice { font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: var(--rv-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }

/* security: mock video frame + watermark */
.m16-wmfields .rv-field.is-disabled { opacity: .7; }
.m16-player {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--rv-radius-card); background: var(--rv-neutral-900); color: var(--rv-neutral-0); margin-bottom: var(--rv-space-3);
}
.m16-player__play { display: inline-flex; opacity: .9; }
.m16-player__tag { position: absolute; top: var(--rv-space-2); left: var(--rv-space-2); padding: 0 var(--rv-space-2); border-radius: var(--rv-radius-control); background: color-mix(in srgb, var(--rv-neutral-0) 16%, transparent); font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); }
.m16-player__wm { position: absolute; max-width: 90%; font-size: var(--rv-fs-small); line-height: var(--rv-lh-small); color: color-mix(in srgb, var(--rv-neutral-0) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; user-select: none; }
.m16-player__wm--a { left: 8%; top: 30%; transform: rotate(-12deg); }
.m16-player__wm--b { right: 6%; bottom: 22%; transform: rotate(-12deg); }
.m16-player__bar { position: absolute; left: var(--rv-space-3); right: var(--rv-space-3); bottom: var(--rv-space-2); height: 4px; border-radius: var(--rv-radius-pill); background: color-mix(in srgb, var(--rv-neutral-0) 25%, transparent); }
.m16-player__fill { display: block; width: 32%; height: 100%; border-radius: inherit; background: var(--rv-primary-500); }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .m16-reason { max-width: none; }
  .m16-days__add { max-width: none; }
  .m16-kv .rv-kv__row { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .m16-days__chips .rv-chip { min-height: var(--rv-touch); }
  .m16-days__chips .rv-chip__remove::before { content: ""; position: absolute; inset: -13px; }
}