/* =========================================================
   Cluster C — AI generators (Standout free tools)
   Standalone sheet loaded AFTER tools.css on the four Cluster C pages, so
   these rules are isolated from the large merged file and always parse
   cleanly. Token-only except the letter "paper" preview, which intentionally
   forces a light document surface to match the existing .resume-paper viewer
   and the downloaded PDF.
   ========================================================= */

/* Pin the two-column hero to the top so the marketing column doesn't
   vertically re-center beside a tall live tool panel. */
.hero--top { align-items: start; }

/* Honor the hidden attribute on tool fields. The base .tool-field rule sets
   display:flex, which (as author CSS) beats the UA [hidden]{display:none};
   this restores "hidden means hidden" for the custom-domain field. */
.tool-field[hidden] { display: none; }

/* Action row (Copy / Download / Copy link) — always wraps, never overlaps. */
.tool-shell .tool-output-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

/* ---------- Letter / email document preview (counter-offer, follow-up) ------
   Renders the generated letter the way it appears in the PDF download: a white
   "paper" document with serif type and preserved line breaks. Mirrors
   .resume-paper so the two document previews look like one system. */
.cc-letter {
  white-space: pre-wrap;        /* preserve the model's line breaks + spacing */
  overflow-wrap: break-word;
  background: #ffffff;
  color: #171717;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.75;
  padding: 26px 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-md);
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.12);
}

/* ---------- Performance review — copyable comment cards ---------- */
.cc-cards { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.cc-card {
  display: flex; align-items: flex-start; gap: var(--s-3);
  width: 100%; box-sizing: border-box;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.cc-card__text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text); }
.cc-card__copy { flex: none; align-self: flex-start; }

/* ---------- Professional email — address pattern list ----------
   Email grows to fill the row; the Copy button is pinned right with a fixed
   gap, so the two never crowd each other regardless of address length. */
.cc-patterns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: var(--s-4); }
.cc-pattern {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; box-sizing: border-box;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.cc-pattern__email {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cc-pattern__copy { flex: none; }
.cc-pattern__reason { flex: 1 1 100%; margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.cc-pattern--warn {
  flex-wrap: wrap;
  border-color: color-mix(in oklab, var(--text-warn) 35%, transparent);
  border-left: 3px solid var(--text-warn);
  background: color-mix(in oklab, var(--text-warn) 8%, transparent);
}
.cc-pattern--warn .cc-pattern__email { flex: 0 1 auto; color: var(--text-muted); text-decoration: line-through; }

/* ---------- Shared bits ---------- */
.cc-avoid-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  margin: var(--s-5) 0 var(--s-3);
}
.tool-empty { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.tool-timing { margin: 8px 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }

/* ---------- Mobile: 44px minimum tap targets ----------
   On touch widths the small action buttons (Copy / Copy all / Download /
   Copy link, per-card Copy, and the in-tool product CTA) must clear the 44px
   accessibility minimum. Scoped to the tool shell + result cards so base
   desktop sizing is untouched. */
@media (max-width: 640px) {
  .tool-shell .btn-sm,
  .tool-shell [data-tool-copy],
  .tool-shell [data-tool-download],
  .tool-shell [data-tool-share],
  .cc-card__copy,
  .cc-pattern__copy,
  .tool-shell [data-track-cta] {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}