/* ============================================================
   letter.css — the printed document itself.

   Loaded by the app for its live preview and by every generated
   letter in letters/, so a batch-rendered letter is byte-for-byte
   the same document the app previews.
   ============================================================ */

:root{
  /* The letter's voice. Change these two lines to restyle every document,
     in the app and in every generated PDF. */
  --serif:"Hoefler Text","Baskerville","Iowan Old Style","Charter",
          "Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans-doc:"Avenir Next","Optima","Inter","Segoe UI",system-ui,
             -apple-system,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(22,33,46,.06), 0 4px 14px rgba(22,33,46,.06);
}

/* A generated letter opened on its own, rather than inside the app. */
body.standalone{
  margin:0;background:#e8ecf1;
  display:flex;flex-direction:column;align-items:center;
  padding:26px 16px 60px;
}
body.standalone .page{margin:0}
body.standalone .doc-toolbar{
  width:8.5in;max-width:100%;display:flex;align-items:center;gap:10px;
  margin-bottom:12px;font:13px/1.4 var(--sans-doc);color:#4a5a6b;
}
body.standalone .doc-toolbar a,body.standalone .doc-toolbar button{
  font:inherit;font-weight:550;padding:5px 11px;border-radius:6px;cursor:pointer;
  border:1px solid #dbe2e9;background:#fff;color:#16212e;text-decoration:none;
}
body.standalone .doc-toolbar .spacer{flex:1 1 auto}
@media print{ body.standalone{padding:0;background:#fff;display:block} .doc-toolbar{display:none !important} }

/* ─────────── The document ─────────── */
.page{
  width:8.5in;min-height:11in;background:#fff;box-shadow:var(--shadow);
  padding:0.85in 0.9in;font-family:var(--serif);color:#101820;
  font-size:12pt;line-height:1.55;flex:0 0 auto;
  font-kerning:normal;font-variant-ligatures:common-ligatures;
  text-rendering:optimizeLegibility;
  /* Hoefler Text defaults to old-style figures. They are lovely in prose and
     wrong in a clinical document, where a dose, a member ID and a date all
     have to be read at a glance. Lining figures throughout; tabular in
     tables so columns of numbers align. */
  font-variant-numeric:lining-nums;
  transform-origin:top center;
}
.page-inner > *:first-child{margin-top:0}

/* Empty-preview placeholder. Screen only; a printed page never shows it.
   Colours are literal, not app tokens — letter.css also loads standalone
   inside each generated letter, where those tokens do not exist. */
.doc-blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:7.4in;color:#9AA0A8;font-family:var(--sans-doc);text-align:center;
}
.doc-blank svg{
  width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;opacity:.75;margin-bottom:8px;
}
.doc-blank p{margin:0;font-size:14px;font-weight:500;color:#7C828A}
.doc-blank span{font-size:12.5px}

/* Letterhead */
.lh{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
    border-bottom:1.5px solid #101820;padding-bottom:10px;margin-bottom:26px}
.lh-logo{max-height:0.72in;max-width:2.4in;object-fit:contain}
/* A lockup needs more room than a bare mark to stay legible. */
.lh-logo-wide{max-height:0.92in;max-width:2.9in}

.lh-left{display:flex;align-items:center;gap:12px}
/* A lockup reads as a unit; the physician's name belongs under it, not
   floating alongside at half height. */
.lh-left-stack{flex-direction:column;align-items:flex-start;gap:5px}
.lh-phys-solo{margin-top:0;padding-left:2px;font-size:10.5pt;color:#101820}
.lh-name{font-family:var(--sans-doc);font-size:15pt;font-weight:600;
          letter-spacing:.01em;line-height:1.2}
.lh-phys{font-family:var(--sans-doc);font-size:10pt;margin-top:3px;color:#33404d}
.lh-right{text-align:right;font-size:9.5pt;line-height:1.45;color:#33404d;white-space:pre-line;
           font-variant-numeric:lining-nums tabular-nums}

.doc-date{margin:0 0 20px}
.doc-addr{margin:0 0 20px;white-space:pre-line;line-height:1.4}
.doc-re{margin:0 0 18px}
.doc-re strong{font-weight:700}
.page p{margin:0 0 12px}
.page h2.doc-h{
  font-family:var(--sans-doc);font-size:9pt;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#33404d;margin:22px 0 7px;
  border-bottom:1px solid #c9d2da;padding-bottom:3px;
}
.page h3.doc-h3{font-size:11pt;font-weight:700;margin:14px 0 5px}
.page ul,.page ol{margin:0 0 12px;padding-left:1.3em}
.page li{margin-bottom:4px}
.doc-sign{margin-top:26px;page-break-inside:avoid;break-inside:avoid}
.doc-sign .sig-img{max-height:0.6in;display:block;margin-bottom:2px}
.doc-sign .sig-rule{border-bottom:1px solid #101820;width:2.8in;margin:30px 0 4px}
.doc-sign .sig-name{font-weight:700}
.doc-sign .sig-meta{font-size:10pt;color:#33404d}
.doc-enc{margin-top:16px;font-size:10pt;color:#33404d}
.doc-foot-note{
  margin-top:22px;padding-top:8px;border-top:1px solid #c9d2da;
  font-family:var(--sans-doc);font-size:8.5pt;color:#5a6773;line-height:1.4;
}

/* Structured (form-style) documents */
.doc-title{font-size:14pt;font-weight:700;text-align:center;margin:0 0 2px;letter-spacing:-.01em}
.doc-subtitle{font-size:10pt;text-align:center;color:#33404d;margin:0 0 4px}
.doc-rule{border:0;border-top:1.5px solid #101820;margin:10px 0 16px}
.kv{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:10.5pt;
     font-variant-numeric:lining-nums tabular-nums}
.kv td{padding:3px 8px 3px 0;vertical-align:top;border-bottom:1px solid #e3e8ed}
.kv td.k{width:1.9in;font-family:var(--sans-doc);font-size:9pt;font-weight:650;color:#33404d;
         text-transform:uppercase;letter-spacing:.03em;padding-top:5px}
.tbl{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:10pt;
      font-variant-numeric:lining-nums tabular-nums}
.tbl th{
  font-family:var(--sans-doc);font-size:8.5pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:#33404d;text-align:left;padding:4px 7px;
  border-bottom:1.5px solid #101820;background:#f4f6f9;
}
.tbl td{padding:5px 7px;vertical-align:top;border-bottom:1px solid #e3e8ed}
.tbl tr{page-break-inside:avoid;break-inside:avoid}
.box{border:1px solid #101820;padding:9px 11px;margin:0 0 14px;font-size:10.5pt}
.box.alert{border-width:1.5px;background:#fdf6f5}
.box .box-h{
  font-family:var(--sans-doc);font-size:8.5pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:#33404d;margin-bottom:4px;
}
.prose-block{white-space:pre-line}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.doc-stale{
  font-family:var(--sans-doc);font-size:9pt;text-align:center;padding:5px;margin:0 0 14px;
  border:1px solid #101820;font-weight:600;
}

/* A field deliberately shown but left empty: a line to write on. */
.ph-blank{
  display:inline-block;min-width:2.4in;max-width:100%;
  border-bottom:1px solid #6b7885;height:1.05em;vertical-align:bottom;
}

/* Unfilled placeholders */
.ph{
  background:#fff3d6;color:#8a5a00;border-bottom:1px dotted #c9a24d;
  border-radius:2px;padding:0 3px;font-family:var(--sans-doc);font-size:9.5pt;
}
.page.hide-ph .ph{background:transparent;border-bottom:1px solid #101820;color:transparent;
                  display:inline-block;min-width:1.4in}


@page{size:letter;margin:0.55in 0.6in}
@media print{
  html,body{background:#fff;height:auto;display:block}
  .no-print,.appbar,.rail,.editor,.preview-bar,.toast{display:none !important}
  .layout{display:block}
  .preview{display:block;background:#fff}
  .paper-scroll{display:block;padding:0;overflow:visible}
  .page{
    width:auto;min-height:0;box-shadow:none;padding:0;margin:0;
    font-size:11pt;
  }
  .tbl th{background:#f0f0f0 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ph{background:transparent;color:transparent;border-bottom:1px solid #101820;
      display:inline-block;min-width:1.4in}
  .doc-blank{display:none}
  a{color:inherit;text-decoration:none}

  /* Screen spacing is generous on purpose; on paper it is what pushes a
     borderline letter onto a second page and orphans the signature there.
     Tighten it for print only. */
  .page{font-size:11.5pt;line-height:1.5}
  .lh{margin-bottom:20px}
  .doc-date{margin-bottom:16px}
  .doc-addr{margin-bottom:16px}
  .page h2.doc-h{margin:15px 0 5px}
  .kv td{padding:2px 8px 2px 0}
  .tbl td{padding:3.5px 7px}
  .doc-sign{margin-top:12px}
  .doc-sign .sig-rule{margin-top:12px}
  .doc-sign .sig-img{max-height:0.46in}
  .kv td{padding:1.5px 8px 1.5px 0}
  .tbl td{padding:3px 7px}
  .box{padding:7px 11px;margin-bottom:12px}
  .page p{margin:0 0 10px}

  /* Keep the closing and the signature together. Without this the signature
     lands alone at the top of a page, which on a letter meant to be signed
     and submitted looks like a mistake. The cost is a shorter final page
     when they do not fit; that reads as an ordinary page break. */
  .doc-sign{page-break-before:avoid;break-before:avoid}
}