/* ============================================================
   Cover letters — editor shell + paper layouts
   ============================================================ */
.cover-screen { height: calc(100vh - 69px); display: flex; flex-direction: column; }
.cover-screen .b-form, .cover-screen .b-preview { min-width: 0; }
@media (max-width: 900px) { .cover-screen { height: auto; } }
.cover-screen .preview-scroll { background:
  radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--acc) 8%, var(--bg-0)), var(--bg-0)); }

/* ---- paper base (768px wide, ~Letter ratio) ---- */
.cover {
  width: 768px; min-height: 994px; box-sizing: border-box;
  background: #ffffff; color: #1d1d22;
  font-family: "Manrope", system-ui, sans-serif; font-size: 14.5px; line-height: 1.72;
  padding: 66px 74px; display: flex; flex-direction: column;
  --pa: #1f3a5f; --pa2: #5a7a9c;
}
.cover-bold, .cover-modern { padding: 0; }

.cl-name { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
.cl-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #5b5b63; margin-top: 6px; }
.cl-contacts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; color: #56565e; }
.cl-contact { display: inline-flex; align-items: center; gap: 6px; }
.cl-contact svg { color: var(--pa); opacity: 0.85; }

/* ---- letter body (shared) ---- */
.cl-body { flex: 1; display: flex; flex-direction: column; }
.cl-meta { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.cl-date { font-size: 13px; color: #6a6a72; }
.cl-to { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: #3a3a42; text-align: right; }
.cl-to-n { font-weight: 700; color: #1d1d22; }
.cl-to-co { font-weight: 600; }
.cl-re { font-weight: 800; font-size: 14px; color: #1d1d22; margin-bottom: 20px; }
.cl-greeting { margin-bottom: 16px; }
.cl-paras p { margin-bottom: 15px; text-wrap: pretty; }
.cl-sign { margin-top: 14px; }
.cl-closing { margin-bottom: 30px; }
.cl-signoff { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 19px; color: var(--pa); }

/* ---- classic (centered serif letterhead) ---- */
.cl-head-classic { text-align: center; padding-bottom: 22px; border-bottom: 2.5px solid var(--pa); margin-bottom: 32px; }
.cl-head-classic .cl-name { font-size: 36px; color: var(--pa); }
.cl-head-classic .cl-contacts { justify-content: center; }

/* ---- minimal ---- */
.cl-head-min { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  padding-bottom: 16px; border-bottom: 1px solid #e4e4e8; margin-bottom: 30px; }
.cl-head-min .cl-name { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.02em; color: #15151a; }
.cl-head-min .cl-contacts { margin-top: 0; }
.cover-minimal .cl-signoff { font-family: "Manrope", sans-serif; font-weight: 800; }
.cover-minimal .cl-re { color: var(--pa); }

/* ---- bold (color-blocked header band) ---- */
.cl-head-bold .cl-band { background: linear-gradient(120deg, var(--pa), var(--pa2)); color: #fff; padding: 52px 74px 44px; }
.cl-head-bold .cl-name { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.02em; }
.cl-head-bold .cl-title { color: rgba(255,255,255,0.9); }
.cl-head-bold .cl-contacts { color: rgba(255,255,255,0.92); }
.cl-head-bold .cl-contact svg { color: #fff; opacity: 0.9; }
.cover-bold .cl-body { padding: 38px 74px 64px; }
.cover-bold .cl-re { color: var(--pa); }
.cover-bold .cl-signoff { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 18px; }

/* ---- executive (monogram + rule) ---- */
.cl-head-exec { display: flex; align-items: center; gap: 18px; padding-bottom: 22px;
  border-bottom: 1px solid #e2ddd4; margin-bottom: 30px; }
.cl-mono { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pa); color: #fff; font-family: "Fraunces", serif; font-weight: 600; font-size: 24px; }
.cl-exec-txt { display: flex; flex-direction: column; }
.cl-head-exec .cl-name { font-size: 28px; color: var(--pa); }
.cl-exec-c { margin-left: auto; text-align: right; }
.cl-exec-c .cl-contacts { margin-top: 0; flex-direction: column; gap: 5px; align-items: flex-end; }
.cover-executive { background: #faf9f6; }
.cover-executive .cl-re { color: var(--pa2); }
.cover-executive .cl-signoff { color: var(--pa2); }

/* ---- creative (two-tone display name) ---- */
.cl-head-creative { margin-bottom: 30px; }
.cl-head-creative .cl-name { font-size: 44px; }
.cl-head-creative .cl-n1 { color: var(--pa); }
.cl-head-creative .cl-n2 { color: var(--pa2); }
.cover-creative .cl-re { color: var(--pa); }

/* ---- modern (accent rail) ---- */
.cl-cols { display: grid; grid-template-columns: 236px 1fr; width: 100%; min-height: 994px; }
.cl-rail { background: linear-gradient(160deg, var(--pa), var(--pa2)); color: #fff; padding: 60px 30px; }
.cl-rail .cl-name { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.02em; }
.cl-rail .cl-title { color: rgba(255,255,255,0.88); }
.cl-rail-c { margin-top: 26px; }
.cl-rail-c .cl-contacts { flex-direction: column; gap: 12px; color: rgba(255,255,255,0.95); font-size: 13px; }
.cl-rail-c .cl-contact svg { color: #fff; opacity: 0.85; }
.cl-main { padding: 64px 56px; }
.cover-modern .cl-re { color: var(--pa); }

/* ---- serif / sans voice — inherited from the résumé template ---- */
.cover.cover-serif .cl-name { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.cover.cover-serif .cl-signoff { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.cover.cover-sans .cl-name { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.cover.cover-sans .cl-signoff { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; }

/* ---- dark — mirrors dark résumé templates (e.g. Onyx) ---- */
.cover-dark { background: #141829; color: #c3c8d6; }
.cl-head-dark { padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.13); margin-bottom: 30px; }
.cl-head-dark .cl-name { font-size: 36px; color: #fff; }
.cover-dark .cl-title { color: #9aa1b8; }
.cover-dark .cl-contacts { color: #9298ad; }
.cover-dark .cl-contact svg { color: var(--pa); opacity: 1; }
.cover-dark .cl-date { color: #8b91a6; }
.cover-dark .cl-to { color: #b7bccb; }
.cover-dark .cl-to-n { color: #fff; }
.cover-dark .cl-re { color: var(--pa); }
.cover-dark .cl-greeting, .cover-dark .cl-paras p, .cover-dark .cl-closing { color: #c3c8d6; }
.cover-dark .cl-signoff { color: #fff; }

/* ---- mono — mirrors developer / terminal templates ---- */
.cover-mono { font-family: "Space Mono", ui-monospace, monospace; font-size: 13px; }
.cl-head-mono { border-bottom: 1px dashed #c9c9cf; padding-bottom: 18px; margin-bottom: 28px; }
.cl-mono-tag { font-family: "Space Mono", monospace; font-size: 12px; color: var(--pa); margin-bottom: 10px; }
.cover-mono .cl-name { font-family: "Space Mono", monospace; font-weight: 700; font-size: 26px; letter-spacing: -0.01em; color: #18181b; }
.cover-mono .cl-contacts { font-family: "Space Mono", monospace; font-size: 11.5px; }
.cover-mono .cl-re { font-weight: 700; }
.cover-mono .cl-re::before { content: "# "; color: var(--pa); }
.cover-mono .cl-paras p { line-height: 1.75; }
.cover-mono .cl-signoff { font-family: "Space Mono", monospace; font-weight: 700; font-size: 18px; color: var(--pa); }

/* clickable bento card on the landing page */
.b-clickable { cursor: pointer; text-align: left; }
.b-clickable:hover { transform: translateY(-4px); }

/* ---- cover letter appended as the document's final page (builder preview) ---- */
.cover-page { position: relative; width: 768px; margin-top: 26px; border-radius: 3px; overflow: hidden;
  box-shadow: 0 30px 80px -28px rgba(0,0,0,0.45), 0 2px 8px -2px rgba(0,0,0,0.18); }
.cover-page-tag { position: absolute; top: 14px; right: 14px; z-index: 5; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: rgba(20,20,28,0.55); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 999px; }