/**
 * Cover Letter Builder (#757) — dedicated Career companion styles.
 * Deep navy / graphite, off-white paper, restrained champagne-gold.
 * Companion to Premium Offshore CV. Does not edit shared tokens.
 */

#view-cover-letter-builder.mh-stage3-cover-letter {
  --mh-cl-navy: #101828;
  --mh-cl-gold: #b89440;
  --mh-cl-paper: #ffffff;
  --mh-cl-champagne: #e8dfc8;
  --mh-cl-ink: #1a1d22;
  --mh-cl-graphite: #2b3038;
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  scroll-margin-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

#view-cover-letter-builder .mh-page-header {
  margin-bottom: 6px;
}

#view-cover-letter-builder .mh-cl-steps {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

#view-cover-letter-builder .mh-cl-step {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mh-gold, var(--mh-cl-gold)) 28%, var(--mh-border-subtle, #d8d0c2));
  background: var(--mh-surface-elevated, #f7f4ee);
  color: var(--mh-text-secondary, #6b717a);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

#view-cover-letter-builder .mh-cl-step.is-current {
  color: var(--mh-cl-champagne);
  border-color: var(--mh-cl-navy);
  background: var(--mh-cl-navy);
}

#view-cover-letter-builder .mh-cl-storage,
#view-cover-letter-builder .mh-cl-status {
  margin: 0 0 12px;
}

#view-cover-letter-builder .mh-cl-error {
  margin: 0 0 12px;
  color: #8a2a2a;
}

#view-cover-letter-builder .mh-cl-panel,
#view-cover-letter-builder .mh-cl-workspace {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

#view-cover-letter-builder .mh-cl-panel[hidden],
#view-cover-letter-builder .mh-cl-workspace[hidden] {
  display: none !important;
}

#view-cover-letter-builder .mh-cl-workspace--preview {
  gap: 10px;
}

#view-cover-letter-builder .mh-cl-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

#view-cover-letter-builder .mh-cl-nav .mh-cl-cta {
  flex: 1 1 160px;
  margin-top: 0;
}

#view-cover-letter-builder[data-cl-workspace="preview"] .mh-page-header__subtitle,
#view-cover-letter-builder[data-cl-workspace="preview"] .mh-cl-status:not([data-state="error"]),
#view-cover-letter-builder[data-cl-workspace="brief"] .mh-page-header__subtitle,
#view-cover-letter-builder[data-cl-workspace="brief"] .mh-cl-status:not([data-state="error"]),
#view-cover-letter-builder[data-cl-workspace="review"] .mh-page-header__subtitle,
#view-cover-letter-builder[data-cl-workspace="review"] .mh-cl-status:not([data-state="error"]) {
  display: none;
}

#view-cover-letter-builder .filter-row {
  margin: 0 0 6px;
}

#view-cover-letter-builder .mh-cl-brief-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 6px;
}

#view-cover-letter-builder .mh-input,
#view-cover-letter-builder .mh-select,
#view-cover-letter-builder input,
#view-cover-letter-builder select {
  min-height: 40px;
}

#view-cover-letter-builder #cl-vacancy-text,
#view-cover-letter-builder #cl-body-edit {
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

#view-cover-letter-builder #cl-vacancy-text {
  min-height: 44px;
  height: 44px;
  resize: vertical;
}

#view-cover-letter-builder .mh-cl-card {
  background: color-mix(in srgb, var(--mh-cl-paper) 88%, #fff);
  border: 1px solid color-mix(in srgb, var(--mh-cl-gold) 22%, #d8d0c2);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}

#view-cover-letter-builder .mh-cl-kicker {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mh-cl-gold);
}

#view-cover-letter-builder .mh-cl-card-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--mh-cl-navy);
}

#view-cover-letter-builder .mh-cl-card-copy {
  margin: 0 0 14px;
}

#view-cover-letter-builder .mh-cl-cta {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

#view-cover-letter-builder .mh-cl-review-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
}

#view-cover-letter-builder .mh-cl-review-row {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--mh-cl-gold) 18%, #e6e0d4);
}

#view-cover-letter-builder .mh-cl-review-row dt {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-text-secondary, #6b717a);
}

#view-cover-letter-builder .mh-cl-review-row dd {
  margin: 0;
  color: var(--mh-cl-navy);
  font-weight: 600;
}

#view-cover-letter-builder .mh-cl-actions,
#view-cover-letter-builder .mh-cl-actions__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#view-cover-letter-builder .mh-cl-actions .mh-button,
#view-cover-letter-builder .mh-cl-actions__secondary .mh-button {
  flex: 1 1 96px;
  min-height: 44px;
}

#view-cover-letter-builder .mh-cl-edit {
  margin: 0;
}

#view-cover-letter-builder .mh-cl-privacy {
  margin: 0 0 8px;
  font-size: 0.78rem;
}

#view-cover-letter-builder .mh-cl-flags {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--mh-text-secondary, #6b717a);
}

#view-cover-letter-builder .mh-cl-preview-frame {
  background: var(--mh-cl-paper);
  border: 1px solid color-mix(in srgb, var(--mh-gold, var(--mh-cl-gold)) 28%, var(--mh-border-subtle, #d8d0c2));
  border-radius: 16px;
  padding: 0;
  overflow: visible;
  max-height: none;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

/* The letter itself: the Premium CV DNA on a plain white sheet (owner, 2026-10-11). */
#view-cover-letter-builder #cl-builder-preview .mh-cl-doc {
  --mh-cl-serif: "MH Display Serif", Georgia, "Times New Roman", serif;
  --mh-cl-sans: "MH Text", Manrope, "Segoe UI", Arial, sans-serif;
  color: var(--mh-cl-navy);
  background: var(--mh-cl-paper);
  font-family: var(--mh-cl-sans);
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px;
  border-radius: 16px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-banner {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mh-cl-ink);
  margin: 0 0 14px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--mh-cl-navy);
  border: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-identity {
  min-width: 0;
  flex: 1 1 auto;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-name {
  font-family: var(--mh-cl-serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0 0 4px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-rank {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-contacts {
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.7rem;
  color: var(--mh-cl-ink);
  max-width: 46%;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-contact {
  margin: 0 0 2px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-rule {
  height: 2px;
  background: var(--mh-cl-gold);
  margin: 12px 0 0;
  box-shadow: 0 5px 0 -4px var(--mh-cl-champagne);
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 16px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-recipient p {
  margin: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-recipient-name {
  font-weight: 600;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-date {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mh-cl-ink);
  white-space: nowrap;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-subject {
  font-family: var(--mh-cl-serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 12px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-body p,
#view-cover-letter-builder #cl-builder-preview .mh-cl-greeting,
#view-cover-letter-builder #cl-builder-preview .mh-cl-signoff {
  margin: 0 0 10px;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-closing {
  margin-top: 4px;
  padding: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-sign-rule {
  height: 28px;
  background: transparent;
  margin: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-signature {
  min-height: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-signature p {
  margin: 0;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-signature-name {
  font-family: var(--mh-cl-serif);
  font-weight: 600;
  font-size: 1rem;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-signature-line {
  font-size: 0.74rem;
  color: var(--mh-cl-ink);
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-letterfoot {
  margin-top: 26px;
  padding: 8px 0 0;
  border-top: 1px solid var(--mh-cl-champagne);
  background: transparent;
  color: var(--mh-cl-gold);
  font-family: var(--mh-cl-serif);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}

#view-cover-letter-builder #cl-builder-preview .mh-cl-letterfoot p {
  margin: 0;
}

html[data-theme="dark"] #view-cover-letter-builder .mh-cl-preview-frame {
  border-color: rgba(184, 148, 64, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] #view-cover-letter-builder .mh-cl-card {
  background: #1b1813;
  color: #f4f1ea;
}

html[data-theme="dark"] #view-cover-letter-builder .mh-cl-card-title,
html[data-theme="dark"] #view-cover-letter-builder .mh-cl-review-row dd {
  color: #f4f1ea;
}

html[data-theme="dark"] #view-cover-letter-builder .mh-cl-step.is-current {
  color: #f7f1e3;
}

@media (max-width: 390px) {
  #view-cover-letter-builder .mh-page-header {
    margin-bottom: 6px;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-name {
    font-size: 1.28rem;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-doc {
    padding: 16px 14px 12px;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-steps {
    margin-bottom: 10px;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-actions,
  #view-cover-letter-builder #cl-builder-preview .mh-cl-actions__secondary {
    display: flex;
    flex-wrap: wrap;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-step {
    font-size: 0.62rem;
    padding: 0 3px;
    min-height: 44px;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-card {
    padding: 12px;
  }

  #view-cover-letter-builder #cl-builder-preview .mh-cl-preview-frame {
    max-height: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-cover-letter-builder * {
    transition: none !important;
    animation: none !important;
  }
}

/* Source step: no CV yet */
#view-cover-letter-builder .mh-cl-empty {
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px dashed var(--mh-border-strong, #8b9099);
  border-radius: 14px;
}
#view-cover-letter-builder .mh-cl-empty[hidden] {
  display: none;
}
#view-cover-letter-builder .mh-cl-empty__title {
  margin: 0 0 4px;
  font-weight: 700;
}
#view-cover-letter-builder .mh-cl-empty__copy {
  margin: 0 0 12px;
}
#view-cover-letter-builder .mh-cl-field-help {
  display: block;
  margin-top: 6px;
  line-height: 1.45;
}

/* Brief: type and length stack in one column; a select never stretches to its neighbour's height */
#view-cover-letter-builder .mh-cl-brief-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
#view-cover-letter-builder .mh-cl-brief-split .filter-row {
  align-self: start;
  min-width: 0;
}
#view-cover-letter-builder .mh-cl-brief-split select {
  height: auto;
  min-height: 50px;
  width: 100%;
}

/* CL-03. Delete local draft used to sit in the download row, between Download PDF and Download
   Word, styled almost the same, and one tap wiped the letter. It has its own row now, sits at the
   end of it, and shows when it is waiting for the second tap. */
#view-cover-letter-builder .mh-cl-actions__destructive {
  justify-content: flex-end;
  margin-top: 4px;
}

#view-cover-letter-builder .mh-cl-danger {
  color: var(--mh-text-muted, #92979f);
}

#view-cover-letter-builder .mh-cl-danger.is-armed {
  color: #d8735f;
  border-color: #d8735f;
}

/* -- The Letter workspace (owner's pass, 2026-09-20) --------------------------
   The selectors carry the body's class and the view's two because the rules
   they outweigh - the approved sheet's .muted and its button heights - are
   written from a selector with an id in it. */
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-preview-frame {
  display: grid;
  min-height: 168px;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-builder-preview {
  display: grid;
  min-width: 0;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-builder-preview .mh-cl-preview-placeholder {
  margin: 0 !important;
  padding: 28px 22px !important;
  align-self: center;
  text-align: center;
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  color: var(--mh-cl-graphite, #2b3038) !important;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions,
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions__secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Two ids: saved-parity.css holds every .mh-button at its content width from a
   selector with an id inside one of its :not() clauses, and that outweighs the
   view's classes. */
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions .mh-button,
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions__secondary .mh-button {
  flex: none !important;
  width: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  min-width: 0;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-size: 0.84rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions .mh-cl-cta {
  grid-column: 1 / -1;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions__destructive {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions__destructive .mh-button {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* -- The Letter workspace, second look (owner's third pass, 2026-09-20) -------
   The sheet sits in a framed paper card, the editor reads as one with it, the
   primary action is the only strong button and the destructive one stands apart. */
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-workspace--preview {
  gap: 14px;
  padding: 14px 12px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--mh-surface, #1b2029) 88%, #000);
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle, #3a4250) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-preview-frame {
  min-height: 188px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mh-cl-gold, #c6a66a) 40%, #d8d0c2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-edit {
  display: grid;
  gap: 8px;
  margin: 0;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-edit > span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mh-text-secondary, #9aa4b2);
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-body-edit {
  min-height: 132px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mh-border-subtle, #3a4250) 90%, #fff) !important;
  background: color-mix(in srgb, var(--mh-surface-inset, #12161d) 92%, #000) !important;
  color: var(--mh-text, #e8edf3) !important;
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-body-edit:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ap-accent, #c6a66a) 70%, #fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent, #c6a66a) 28%, transparent);
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions,
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions__secondary {
  gap: 10px;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions .mh-cl-cta {
  height: 48px !important;
  min-height: 48px !important;
  font-size: 0.9rem !important;
  font-weight: 700;
  border-radius: 14px !important;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions__destructive {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--mh-border-subtle, #3a4250) 70%, transparent);
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions__destructive .mh-cl-danger {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  color: #f0a8a8 !important;
  border-color: rgba(240, 168, 168, 0.45) !important;
  background: transparent !important;
  font-size: 0.82rem !important;
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-privacy {
  margin: 4px 2px 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--mh-text-secondary, #9aa4b2);
}

/* Letter actions keep their whole label (audit 2026-10-11). The buttons were held to one
   44px line with the overflow hidden, so "Download Word (.docx)" lost its first and last
   letters at 320-375px and every label was cut at 200% text. The grid now drops to one
   column when a column would be narrower than 8rem (rem follows the reader's text size),
   and a label that still needs two lines gets them instead of being cut. */
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions,
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter .mh-cl-actions__secondary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions .mh-button,
html body.mj-app #view-cover-letter-builder.mh-stage3-cover-letter #cl-step-preview .mh-cl-actions__secondary .mh-button {
  height: auto !important;
  padding: 8px 12px !important;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}