/* Certificates (js/certificates.js) — official Mizoram form as a background
   image with fillable fields overlaid at the exact blank positions. */

/* side-by-side layout */
.cert-layout { display: flex; gap: 16px; align-items: flex-start; }
.cert-settings { flex: 0 0 320px; box-sizing: border-box; align-self: flex-start; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.cert-stage { flex: 1; min-width: 0; overflow: auto; }
@media (max-width: 900px) { .cert-layout { flex-direction: column; } .cert-settings { flex: 1 1 auto; width: 100%; position: static; max-height: none; } }

/* left-panel fields */
.cf { display: block; margin: 0 0 9px; }
.cf-l { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.cf input { width: 100%; box-sizing: border-box; }
.seg { display: inline-flex; gap: 4px; background: var(--panel-2); padding: 3px; border-radius: 8px; }

/* overlay fields sitting on the printed dotted lines */
.cert-ov {
  border: 0; background: transparent; color: #111; text-align: center;
  font-family: "Bookman Old Style", Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: 2.5cqw; line-height: 1; padding: 0; margin: 0; outline: none;
  box-sizing: border-box; overflow: hidden; white-space: nowrap;
}
.cert-ov::placeholder { color: transparent; }
.cert-ov:hover { background: rgba(46,111,196,.10); border-radius: 3px; }
.cert-ov:focus { background: rgba(46,111,196,.16); border-radius: 3px; }

@media print { .cert-ov:hover, .cert-ov:focus { background: transparent; } }

/* reasons-for-leaving: tick options (left) + the ✓ on the form */
.cf-group { font-size: 11px; font-weight: 700; color: var(--ink); margin: 10px 0 5px; }
.cf-tick { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; cursor: pointer; }
.cf-tick input { width: auto; flex: 0 0 auto; margin: 0; }
.cf-tick .cf-tl { font-size: 12.5px; color: var(--ink); }
.cert-tick { border-radius: 3px; }
.cert-tick:hover { background: rgba(46,111,196,.12); box-shadow: inset 0 0 0 1px rgba(46,111,196,.35); }
@media print { .cert-tick:hover { background: transparent; box-shadow: none; } }