/* Cover Letter Generator — page styles
 * Loaded by /cover-letter-generator.html
 *
 * Two-pane layout: form on the left, live letter preview on the right.
 * The .cl-preview node is what html2pdf / Word export read, so its
 * inner CSS is self-contained and print-friendly.
 */

/* Full-width: sidebar is intentionally hidden on this page. */
.page-wrap.page-full { grid-template-columns: 1fr; gap: 0; }
.page-wrap.page-full > main { padding-right: 0; }

.cl-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-top: 14px;
}
.cl-templates { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-tpl {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
}
.cl-tpl:hover { border-color: var(--brand); color: var(--brand); }
.cl-tpl.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }

.cl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-btn {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.cl-btn:hover { border-color: var(--brand); color: var(--brand); }
.cl-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.cl-btn.primary:hover { background: #16385A; color: #fff; }
.cl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1024px) { .cl-layout { grid-template-columns: 1fr; } }

/* ─── Form ─────────────────────────────────────────────────── */
.cl-form { display: flex; flex-direction: column; gap: 10px; }
.cl-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.cl-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
  position: relative;
}
.cl-section > summary::-webkit-details-marker { display: none; }
.cl-section > summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 20px;
  color: var(--ink-3);
  font-weight: 400;
}
.cl-section[open] > summary::after { content: '−'; }
.cl-section .cl-opt {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--ink-3); font-size: 11px; margin-left: 6px;
}
.cl-section > .cl-grid,
.cl-section > .cl-group,
.cl-section > .cl-presets,
.cl-section > .cl-field {
  margin: 0 16px 14px;
}

.cl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.cl-field { display: flex; flex-direction: column; gap: 4px; }
.cl-field.cl-wide { grid-column: span 2; }
.cl-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.cl-field span em { color: #B91C1C; font-style: normal; margin-left: 2px; }
.cl-field input[type=text],
.cl-field input[type=email],
.cl-field input[type=tel],
.cl-field input[type=url],
.cl-field input[type=date],
.cl-field select,
.cl-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
}
.cl-field textarea { resize: vertical; min-height: 60px; line-height: 1.45; font-family: inherit; }
.cl-field input:focus, .cl-field select:focus, .cl-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}

.cl-group { display: flex; flex-direction: column; gap: 6px; }
.cl-grp-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.cl-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-chip {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
}
.cl-chip:hover { border-color: var(--brand); color: var(--brand); }
.cl-chip.on   { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }

.cl-presets { display: flex; flex-direction: column; gap: 5px; }
.cl-preset {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cl-preset:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light, #E8F1FA); }
.cl-preset.on    { border-color: var(--brand); background: var(--brand-light, #E8F1FA); color: var(--ink); }
.cl-preset b     { color: var(--brand); font-weight: 700; margin-right: 6px; }

/* ─── Preview pane ─────────────────────────────────────────── */
.cl-preview-wrap {
  background: #E8ECF1;
  border-radius: var(--r-md);
  padding: 14px;
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow: auto;
}
@media (max-width: 1024px) { .cl-preview-wrap { position: static; max-height: none; } }
.cl-preview-note {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin: 8px 0 0;
}

/* The actual letter sheet — A4 ratio. Self-contained styling so html2pdf
 * + Word export render reliably without the global stylesheet. */
.cl-preview {
  background: #fff;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 22mm 22mm;
  min-height: 297mm;
  /* border-box keeps the padding *inside* the 297 mm min-height so
     the rendered element is exactly one A4 page tall — without this,
     22 mm + 297 mm + 22 mm = 341 mm and PDF/Word/Print produce a
     trailing blank page. */
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  font-family: Arial, Helvetica, sans-serif;
  color: #1A1A1A;
  font-size: 11pt;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cl-preview p   { margin: 0 0 11pt; }
.cl-preview a   { color: #1F4E79; text-decoration: none; }

/* Sender block */
.cl-from {
  margin-bottom: 22pt;
}
.cl-from-name {
  font-weight: 700;
  font-size: 13pt;
  margin-bottom: 2pt;
}
.cl-from-line {
  font-size: 10pt;
  color: #4B5563;
  line-height: 1.55;
}
.cl-from-line span + span::before { content: ' · '; color: #B6C0CC; margin: 0 4px; }

.cl-date    { margin-bottom: 16pt; font-size: 10.5pt; color: #4B5563; }

.cl-to      { margin-bottom: 16pt; }
.cl-to-line { font-size: 10.5pt; line-height: 1.5; }
.cl-to-line.bold { font-weight: 700; }

.cl-subject { font-weight: 700; margin: 0 0 14pt; font-size: 11pt; }

.cl-greeting { margin: 0 0 14pt; font-size: 11pt; }

.cl-signoff   { margin: 22pt 0 4pt; font-size: 11pt; }
.cl-signature { font-weight: 700; font-size: 11pt; }

/* ─── Modern template ──────────────────────────────────────── */
.cl-tpl-modern {
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 11.5pt;
}
.cl-tpl-modern .cl-from-name {
  color: #1F4E79;
  font-size: 18pt;
  letter-spacing: 0.3pt;
  border-bottom: 2pt solid #1F4E79;
  padding-bottom: 4pt;
  margin-bottom: 4pt;
}
.cl-tpl-modern .cl-subject { color: #1F4E79; }
.cl-tpl-modern a { color: #1F4E79; }

/* ─── Compact template ─────────────────────────────────────── */
.cl-tpl-compact {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 10.5pt;
  line-height: 1.4;
  padding: 18mm 18mm;
}
.cl-tpl-compact p { margin: 0 0 8pt; }
.cl-tpl-compact .cl-from { margin-bottom: 16pt; }
.cl-tpl-compact .cl-date { margin-bottom: 10pt; }
.cl-tpl-compact .cl-to   { margin-bottom: 10pt; }
.cl-tpl-compact .cl-subject  { margin-bottom: 10pt; }
.cl-tpl-compact .cl-greeting { margin-bottom: 10pt; }
.cl-tpl-compact .cl-signoff  { margin-top: 16pt; }

/* Print rules — hide the rest of the page when printing.
 * Used by the "Print" button as a fallback to PDF export. */
@media print {
  body * { visibility: hidden !important; }
  .cl-preview, .cl-preview * { visibility: visible !important; }
  .cl-preview {
    position: absolute;
    inset: 0;
    box-shadow: none;
    margin: 0;
    width: 100%;
    max-width: none;
    /* Let the printed sheet size to its content — no forced 297 mm,
       otherwise a short letter reserves a full page and the
       browser may add a trailing blank page. */
    min-height: auto;
  }
}