/* Shared styling for sample appeal letters. Designed to look like a real
   printed letter on screen, and to print cleanly via Cmd+P / Ctrl+P. */

:root {
  --navy: #1d3461;
  --gold: #c89636;
  --ink: #1a2238;
  --ink-soft: #4a5876;
  --ink-dim: #7c8aa3;
  --line: #d8dee8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #ecf0f5;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--ink);
  padding: 24px 16px;
  line-height: 1.55;
}

.sheet {
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  padding: 56px 64px;
  box-shadow: 0 4px 24px rgba(14,29,58,0.12);
  border: 1px solid var(--line);
  position: relative;
}

/* ── LETTERHEAD ─────────────────────────────────────────────────────── */
.letterhead { text-align: center; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid var(--gold); }
.letterhead svg { width: 56px; height: 56px; margin-bottom: 6px; }
.letterhead .brand { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 3px; color: var(--navy); }
.letterhead .tag { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; font-style: italic; }

/* ── LETTER BODY ────────────────────────────────────────────────────── */
.date { margin-bottom: 24px; font-size: 14px; }
.addr-block { margin-bottom: 22px; font-size: 14px; line-height: 1.45; }
.addr-block .line { display: block; }
.re { font-weight: 700; margin-bottom: 18px; font-size: 14px; }
.salutation { margin-bottom: 14px; font-size: 14px; }
p.body { font-size: 14px; line-height: 1.65; margin-bottom: 12px; text-align: justify; }
p.body strong { color: var(--ink); }
.cite { font-style: italic; color: var(--ink-soft); }

.signature-block { margin-top: 30px; font-size: 14px; line-height: 1.55; }
.signature-block .sig-line { border-bottom: 1px solid var(--ink); width: 280px; margin: 32px 0 6px; }
.signature-block .sig-meta { color: var(--ink-soft); font-size: 13px; }

/* ── PLACEHOLDER STYLING ────────────────────────────────────────────── */
/* Bracketed fields like [VETERAN NAME] get tinted so it's obvious they're
   placeholders the AI fills in with the vet's specific data. */
.ph { background: #fef6dc; padding: 1px 5px; border-radius: 3px; font-family: 'Helvetica Neue', monospace; font-size: 12.5px; color: #7a5510; }

/* ── DISCLAIMER FOOTER ──────────────────────────────────────────────── */
.disclaimer { margin-top: 40px; padding-top: 18px; border-top: 1px dashed var(--line); font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; line-height: 1.5; color: var(--ink-dim); text-align: center; }
.disclaimer strong { color: var(--ink-soft); }

/* ── SAMPLE BANNER (above the sheet) ────────────────────────────────── */
.sample-banner {
  max-width: 750px; margin: 0 auto 14px; padding: 12px 16px;
  background: var(--navy); color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
  border-radius: 6px; text-align: center; line-height: 1.5;
}
.sample-banner strong { color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 4px; }
.sample-banner .back { display: inline-block; margin-top: 8px; color: #fff; text-decoration: underline; font-size: 12px; }

/* ── PRINT ──────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; padding: 0; }
  .sheet { box-shadow: none; border: none; padding: 0.75in 0.85in; max-width: none; }
  .sample-banner { display: none; }
  .ph { background: transparent; color: var(--ink); padding: 0; }
}