:root {
  --ecr-black: #020202;
  --ecr-panel: #080808;
  --ecr-panel-2: #0d0d0d;
  --ecr-gold: #c9a84c;
  --ecr-gold-light: #f0d080;
  --ecr-gold-dark: #8b6914;
  --ecr-paper: #ffffff;
  --ecr-mist: #e5edf5;
  --ecr-ink: #061b31;
  --ecr-radius: 4px;
}

/* Blocks interaction on select-page.html/detail-page.html while
   js/letter-templates.js's async fetch is in flight — see app.js's
   clearTemplatesLoadingState(). A member fast-clicking before the letter
   library loads sees this banner instead of a silently-dead button. */
body.ecr-awaiting-templates { pointer-events: none; }
body.ecr-awaiting-templates::before {
  content: 'Loading letter library…';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--ecr-gold);
  color: var(--ecr-black);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
}
body.ecr-templates-load-failed::before {
  content: 'Could not load the letter library — check your connection and refresh.';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #dc5a5a;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
}

.ecr-placeholder-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--ecr-black);
  color: var(--ecr-paper);
  font-family: Inter, Arial, sans-serif;
}

.ecr-placeholder-card {
  width: min(680px, 100%);
  padding: 2rem;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: var(--ecr-radius);
  background: var(--ecr-panel);
  text-align: center;
}

.ecr-placeholder-card h1 {
  margin: 0 0 1rem;
  color: var(--ecr-gold-light);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
}

.ecr-placeholder-card p {
  margin: 0;
  color: #b8b8b8;
  line-height: 1.7;
}

.ecr-integration-placeholder {
  padding: 1rem;
  border: 1px dashed rgba(201, 168, 76, 0.55);
  border-radius: var(--ecr-radius);
  color: #d8c78f;
  background: rgba(201, 168, 76, 0.06);
  line-height: 1.5;
}

.ecr-validation-errors {
  display: none;
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid #a43f3f;
  border-left: 4px solid #a43f3f;
  border-radius: var(--ecr-radius);
  background: #fff4f4;
  color: #6f2020;
  font-size: 0.9rem;
  line-height: 1.55;
}

.ecr-validation-errors.is-visible {
  display: block;
}

/* A gentle, non-blocking nudge — not an error. Shown once per attempt when
   a member tries to move on without a note; a second click through
   proceeds without one, since "Sent To" alone is often enough. Recolored
   for a dark form context in my-letters.html's own <style>. */
.ecr-note-nudge {
  display: none;
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--ecr-radius);
  border: 1px solid rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.12);
  color: #6b5312;
  font-size: 12.5px;
  line-height: 1.55;
}

.ecr-note-nudge.is-visible {
  display: block;
}

.ecr-validation-errors ul {
  margin: 0.5rem 0 0 1.25rem;
}

.ecr-input[aria-invalid="true"],
.ecr-select[aria-invalid="true"],
.ecr-textarea[aria-invalid="true"] {
  border-color: #a43f3f;
  box-shadow: 0 0 0 2px rgba(164, 63, 63, 0.12);
}

.ecr-inline-preview {
  padding: 3rem 1.5rem 4rem;
  background: var(--mist, var(--ecr-mist));
}

.ecr-inline-preview[hidden] {
  display: none;
}

.ecr-inline-preview-inner {
  max-width: 780px;
  margin: 0 auto;
}

.ecr-preview-letter-label {
  margin: -1rem 0 1.25rem;
  color: #52677a;
  font: 0.82rem Inter, Arial, sans-serif;
}

/* A permanent, low-key reminder near the save action — the modal (see
   detail-page.html) carries the fuller explanation once, on a member's
   first save; this stays every time after that, so the reminder never
   fully disappears once the modal's been dismissed for good. */
.ecr-save-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 1rem;
  color: #52677a;
  font: 12px/1.5 Inter, Arial, sans-serif;
}

.ecr-save-tip-icon { font-size: 13px; }

.ecr-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.ecr-btn-outline {
  padding: 11px 22px;
  border: 1px solid #aab8c5;
  border-radius: var(--ecr-radius);
  background: transparent;
  color: var(--ink, var(--ecr-ink));
  cursor: pointer;
  font: 600 0.88rem Inter, Arial, sans-serif;
}

.ecr-btn-outline:hover,
.ecr-btn-outline:focus-visible {
  border-color: var(--gold, var(--ecr-gold));
  outline: none;
}

.ecr-preview-card {
  min-height: 400px;
  margin-bottom: 1.5rem;
  padding: 3rem 3.5rem;
  border: 1px solid #dce5ed;
  border-radius: var(--ecr-radius);
  background: var(--paper, var(--ecr-paper));
  box-shadow: 0 12px 40px rgba(6, 27, 49, 0.12);
  color: #1a1a1a;
  font: 14px/1.8 Georgia, "Times New Roman", serif;
}

.ecr-preview-card .letter-header {
  margin-bottom: 1.5rem;
}

.ecr-preview-card .letter-sender,
.ecr-preview-card .letter-recipient {
  margin-bottom: 1.25rem;
  font-size: 13px;
  line-height: 1.6;
}

.ecr-preview-card .letter-date,
.ecr-preview-card .letter-re {
  margin-bottom: 1.25rem;
  font-size: 13px;
}

.ecr-preview-card .letter-re {
  font-weight: 700;
}

.ecr-preview-card .letter-salutation {
  margin-bottom: 1rem;
}

.ecr-preview-card .letter-body p {
  margin-bottom: 0.85rem;
}

.ecr-preview-card .letter-closing {
  margin-top: 1.5rem;
  line-height: 2.5;
}

.ecr-preview-card .letter-divider {
  margin: 2rem 0 0.75rem;
  border: 0;
  border-top: 2px solid var(--gold, var(--ecr-gold));
}

.ecr-preview-card .letter-footer {
  color: #777;
  font: 10px Arial, sans-serif;
  text-align: center;
}

/* All 3 Bureaus mode: three full letters stacked in one preview/PDF. The
   label is on-screen only (hidden in print — see ecrBuildPrintHTML — since
   the letter header already names the recipient there). */
.ecr-preview-card .ecr-letter-multi-item { margin-bottom: 1.5rem; }
.ecr-preview-card .ecr-letter-multi-item:last-child { margin-bottom: 0; }
.ecr-preview-card .ecr-letter-multi-label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 3px 10px;
  border-radius: var(--ecr-radius);
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-dk, #8B6914);
  font: 600 11px/1.4 Inter, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ecr-preview-card .ecr-letter-multi-break {
  padding-top: 1.5rem;
  border-top: 2px dashed #dce5ed;
}

.ecr-disabled-action {
  opacity: 0.72;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .ecr-preview-card {
    padding: 1.5rem;
  }

  .ecr-inline-actions {
    flex-direction: column;
  }

  .ecr-inline-actions button {
    width: 100%;
  }
}