/* ═══════════════════════════════════════════════════════════════════════
   Cover Letter Builder (features/cover_letter/templates/cover_letter_builder.html)
   The layout, steps, sheet, toolbar and controls come from the shared
   builder frame (static/css/builder_frame.css). Only what is particular to
   the cover letter lives here: the job-description toggle, the tones, and
   the letter templates' own rules on the paper.
   ═══════════════════════════════════════════════════════════════════════ */

.clb-jd > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--bf-accent-text); min-height: 36px; display: flex; align-items: center; gap: 6px; }
.clb-jd[open] > summary { margin-bottom: 6px; }

/* ── Tone ── */
.clb-tones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.clb-tone {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; min-height: 84px;
  border: 1.5px solid var(--bf-line); border-radius: 14px; background: var(--bf-card); cursor: pointer;
  font: inherit; color: var(--bf-ink);
}
.clb-tone svg { width: 22px; height: 22px; color: var(--bf-accent-text); margin-bottom: 2px; }
.clb-tone-name { font-size: 15px; font-weight: 700; }
.clb-tone-desc { font-size: 13px; color: var(--bf-muted); }
.clb-tone:hover { border-color: var(--bf-accent-line); }
.clb-tone[aria-pressed="true"] { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.bf-busy .clb-tone, .bf-busy #clbTailorOpen { opacity: .6; pointer-events: none; }

/* ── The letter on the paper ── */
.bf-paper .cl-page, .bf-tpl-thumb .cl-page { font-weight: 400 !important; }
.bf-paper .cl-body-paragraph + .cl-body-paragraph { margin-top: calc(1em * var(--cl-section-spacing, 1)); }
.bf-paper .cl-editable:focus { outline: 1px dashed var(--bf-accent); }
.bf-clean .bf-paper .cl-editable { outline: none !important; background: none !important; }
.clb-tone:focus-visible { outline: 2px solid var(--bf-accent-text); outline-offset: 2px; }

/* ── Optional typed signature (audit/cover_letter_signature_plan.md) ──────
   Six free OFL fonts, unmodified (static/fonts/signature/README.md). The
   browser only downloads a font when text uses it. */
@font-face { font-family: "CFP Sig Formal";  src: url("../fonts/signature/GreatVibes-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "CFP Sig Elegant"; src: url("../fonts/signature/Allura-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "CFP Sig Brush";   src: url("../fonts/signature/AlexBrush-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "CFP Sig Light";   src: url("../fonts/signature/Sacramento-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "CFP Sig Classic"; src: url("../fonts/signature/DancingScript-Variable.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "CFP Sig Casual";  src: url("../fonts/signature/Caveat-Variable.ttf") format("truetype"); font-display: swap; }
.clb-sig { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bf-line); }
.clb-sig .bf-hint { margin: 2px 0 10px; }
.clb-sig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.clb-sig-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 66px; padding: 8px 12px; min-width: 0;
  border: 1px solid var(--bf-line); border-radius: 10px; background: var(--bf-card); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.clb-sig-opt:hover { border-color: var(--bf-accent-line); }
.clb-sig-opt[aria-pressed="true"] { border-color: var(--bf-accent); box-shadow: 0 0 0 2px var(--bf-accent-soft); }
.clb-sig-sample { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 25px; line-height: 1.25; color: #1b2f6b; }
.clb-sig-none { font-size: 14px; line-height: 2.2; color: var(--bf-muted); }
.clb-sig-name { font-size: 12px; font-weight: 700; color: var(--bf-muted); }
.clb-sig-ink { margin-top: 12px; }
.clb-sig-ink[hidden] { display: none; }