/* Cover letter generator page. Builds on app.css (topbar, .card, .field, .btn, inputs). */
.cl-layout { max-width: 920px; margin: 0 auto; padding: 12px; }

select {
  width: 100%; min-height: 44px; padding: 0 10px; font: inherit; font-size: 16px;
  border: 1px solid #c4cbd3; border-radius: 6px; background: #fff; color: inherit;
}
select:focus { outline: 2px solid #0b57d0; outline-offset: -1px; border-color: #0b57d0; }
textarea.cl-jd { min-height: 40vh; field-sizing: fixed; }

.btn-primary { background: #0b57d0; border-color: #0b57d0; color: #fff; font-weight: 600; }
.btn-primary:active { background: #0842a0; }
.btn-primary:disabled { opacity: 0.5; }
.cl-generate { width: 100%; }

.cl-hint { color: #b42318; font-size: 14px; margin: 0 0 8px; }
.cl-status {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 12px 0 2px; color: #57606a; font-size: 15px;
}
.cl-status[hidden], .cl-error[hidden], .cl-result[hidden], .cl-hint[hidden] { display: none; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #c4cbd3; border-top-color: #0b57d0;
  animation: cl-spin 0.8s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-error {
  margin-top: 10px; padding: 10px; border-radius: 8px;
  background: #ffebe9; border: 1px solid #ffcecb; color: #b42318;
}
.cl-error p { margin: 0 0 8px; }

.cl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-actions .btn { flex: 1 1 0; padding: 0 8px; white-space: nowrap; }
.cl-tip { font-size: 13px; color: #57606a; margin: 8px 2px; }

/* The sheet itself (.paper.page > .resume, header .r-name/.r-contact) comes from resume.css, and print
   from print.css, so the letter matches the resume exactly. Only letter-specific rules live here. */
.cl-result .paper-fit { margin: 0 auto; overflow: hidden; }
.l-date { margin: 10pt 0 8pt; }
.l-body { outline: none; }
.l-body p { margin: 0 0 8pt; white-space: pre-wrap; }
.l-body p:last-child { margin-bottom: 0; }
.l-body:focus { box-shadow: 0 0 0 2px #0b57d0; border-radius: 2px; }

@media print {
  .cl-form, .cl-actions, .cl-tip { display: none !important; }
  .cl-layout, .cl-result { display: block !important; max-width: none; margin: 0; padding: 0; }
  .paper { break-after: auto !important; page-break-after: auto !important; } /* one sheet, no trailing blank page */
  .l-body:focus { box-shadow: none; }
}