/* 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; } }