/* Container styling reused from resume builder vibe */
#cover-letter .cl-container { max-width: 900px; margin: 0 auto; padding: 16px; }
#cover-letter .cl-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; margin:16px 0; box-shadow:0 4px 14px rgba(16,72,121,.06); }
#cover-letter .cl-card > header { padding:16px 16px 8px; border-bottom:1px solid #eef2f7; }
#cover-letter .cl-card > header h2 { margin:0 0 .4rem; font-size:1.1rem; font-weight:700; }
#cover-letter .cl-card > header p { margin:0; font-size:.9rem; color:#6b7280; }
#cover-letter .cl-panel { padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
#cover-letter .cl-panel .full { grid-column:1/-1; }
#cover-letter label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.9rem; }
#cover-letter input, #cover-letter textarea { border:1px solid #e5e7eb; border-radius:10px; padding:.85rem .9rem; font:inherit; font-size:.9rem; background:#fff; }
#cover-letter textarea { resize:vertical; }

#cover-letter .ai-suggest { border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fffef8; margin-bottom:.5rem; grid-column:1/-1;}
#cover-letter .ai-actions { display:flex; gap:8px; }
#cover-letter .btn { border:1px solid #e5e7eb; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.85rem; }
#cover-letter .btn-primary { background:#104879; color:#fff; border:none; }

#cover-letter .cl-footer { display:flex; gap:10px; justify-content:flex-end; padding:8px 0; }
#cover-letter .cta-primary { background:#ffc957; color:#1f2a37; border:0; padding:.7rem 1rem; border-radius:10px; font-weight:700; }
#cover-letter .cta-secondary { background:#104879; color:#fff; border:0; padding:.7rem 1rem; border-radius:10px; font-weight:700; }

@media (max-width:680px){ #cover-letter .cl-panel{ grid-template-columns:1fr; } }

/* Printable doc */
.cl-doc { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111827; }
.cl-doc-header { margin:24px 0 16px; }
.cl-name { font-size:28px; font-weight:800; }
.cl-title { color:#374151; margin-top:2px; }
.cl-contact { color:#4b5563; margin-top:6px; }
.cl-doc-body pre { white-space:pre-wrap; line-height:1.6; font-family: inherit; }

/* Use the same tokens from resume-builder.css via #cover-letter scope */
#cover-letter .rb-card > header{
  display:flex;
  flex-direction:column;   /* stack H2 above P (your screenshot had them side-by-side) */
  align-items:flex-start;
}
#cover-letter .rb-card > header h2{
  margin:0 0 .4rem;
  font-size:1.1rem;
  font-weight:700;
}
#cover-letter .rb-card > header p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.35;
}
/* Ensure grid behaves like the builder */
#cover-letter .rb-grid{ display:grid; gap:.9rem; grid-template-columns:1fr 1fr; }
#cover-letter .rb-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ #cover-letter .rb-grid{ grid-template-columns:1fr; } }

/* Layout shell */
.rb-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1024px) {
  .rb-layout {
    grid-template-columns: 1fr 420px; /* left form, right preview */
    gap: 24px;
  }
}

/* Sticky preview card on desktop */
.rb-preview {
  position: relative;
}

@media (min-width: 1024px) {
  .rb-preview {
    position: sticky;
    top: 88px; /* below your fixed header */
    height: calc(100vh - 120px);
    overflow: hidden;
  }
  .rb-preview .rb-card,
  .rb-preview .rb-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

/* Preview iframe area */
.preview-wrap {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  flex: 1;
  min-height: 360px;
}

.preview-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Actions row */
.rb-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}