/* ============================================================
   CoverSentry — Inline Generation Workspace (Option A)
   ============================================================

   Drop-in CSS for the post-scan cover-letter generation UI that
   lives inside #results-section-section on the index page,
   directly under the existing cs-r2 scan-result card.

   HOW TO USE
   ----------
   1. <link rel="stylesheet" href="generate-inline.css"> AFTER
      results-v2.css. This file reuses cs-r2 tokens where
      possible and ships its own .cs-gen-* namespace so nothing
      else on the page is touched.
   2. Root element is <section class="cs-gen-inline">. Render it
      immediately after the .cs-r2 verdict card.
   3. The letter card uses a single data attribute on its root
      to switch between visual states:
         <article class="cs-letter" data-state="waiting">     (initial)
         <article class="cs-letter" data-state="generating">  (API in flight)
         <article class="cs-letter" data-state="ready">       (letter + analysis)
      The mini-analysis row (.cs-letter-analysis) is hidden by
      data-state in CSS, so JS only needs to toggle the
      attribute + populate text content.
   4. The letter's own analysis result lives inside .cs-letter
      as .cs-letter-analysis. Tone the mini-analysis by setting
      data-state="human|watch|flagged" on the SAME element:
         <div class="cs-letter-analysis" data-state="human">…
      That drives both the dot color, the verdict color, and
      the active meter segment.

   DEPENDENCIES
   ------------
   Requires the CoverSentry design-token CSS (colors_and_type.css)
   and results-v2.css to be loaded above this one. Falls back
   gracefully if missing.

   ANATOMY
   -------
   .cs-gen-inline                     (cream wrapper, the workspace card)
     .cs-gen-inline__head             (title row + credit pill)
     .cs-gen-inline__grid             (5fr / 7fr two-column box)
       .cs-gen-inline__inputs         (left column)
         .cs-gen-section × 2          (Résumé + Job)
           .cs-gen-section__label
           .cs-tabs                   (Upload/Paste, URL/Paste)
           .cs-tab-panel × 2
       .cs-gen-inline__output         (right column, cream-2)
         .cs-letter                   (mac-chrome letter card)
           .cs-letter__chrome
           .cs-letter-analysis        (mini result strip — ready only)
           .cs-letter__body           (waiting/generating/ready content)
     .cs-runbar                       (dark privacy + CTA bar)
     .cs-gen-inline__foot             (full-writer link)
   ============================================================ */

.cs-gen-inline {
    /* ---- Tokens (fall back to literals if site tokens missing) ---- */
    --gen-cream:        var(--gp-cream,        #f7f4ec);
    --gen-cream-2:      var(--gp-cream-2,      #faf8f2);
    --gen-cream-3:                             #f5eed9;
    --gen-ink:          var(--gp-ink-dark,     #1e1b16);
    --gen-ink-mute:     var(--gp-ink-mute,     #5b5440);
    --gen-ink-faint:    var(--gp-ink-faint,    #8a7f6b);
    --gen-line:         var(--gp-line,         rgba(30, 27, 22, .12));
    --gen-field-border: var(--gp-field-border, rgba(30, 27, 22, .15));
    --gen-accent:       var(--cs-primary,      #00d1b2);
    --gen-accent-dark:  var(--cs-primary-dark, #00a389);
    --gen-flag:                                #b45454;
    --gen-watch:                               #d08a4a;
    --gen-font-body:    var(--cs-font-body,    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    --gen-font-mono:    var(--cs-font-mono,    'SF Mono', 'Consolas', 'Courier New', Courier, monospace);

    display: block;
    margin-top: 28px;
    background: var(--gen-cream);
    border: 1px solid var(--gen-line);
    border-radius: 14px;
    padding: 22px;
    font-family: var(--gen-font-body);
    color: var(--gen-ink);
}

/* ============================================================
   Connector (the dashed chip linking scan card → workspace).
   Place this ABOVE .cs-gen-inline as a sibling, NOT inside.
   <div class="cs-gen-connector"><span>NEXT · WRITE A LETTER THAT PASSES</span></div>
   ============================================================ */
.cs-gen-connector {
    position: relative;
    text-align: center;
    margin: 16px 0 4px;
}
.cs-gen-connector::before,
.cs-gen-connector::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 2px;
    height: 24px;
    background: repeating-linear-gradient(
        to bottom,
        var(--gp-line, #e2e8f0) 0 4px,
        transparent 4px 8px
    );
}
.cs-gen-connector > span {
    display: inline-block;
    position: relative;
    margin: -10px 0;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid var(--gp-line, #e2e8f0);
    border-radius: 999px;
    font: 500 10px/1 var(--gen-font-mono, monospace);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gen-ink-faint, #8a7f6b);
    z-index: 1;
}

/* ============================================================
   Header row — "02 Write one that passes" + free-credit pill
   ============================================================ */
.cs-gen-inline__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.cs-gen-inline__label {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.cs-gen-inline__num {
    font-family: var(--gen-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--gen-ink-faint);
    letter-spacing: .08em;
}
.cs-gen-inline__title {
    margin: 0;
    padding: 3px 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--gen-ink);
    letter-spacing: -.01em;
    background: var(--gen-cream-3);
    border-radius: 8px;
}
.cs-gen-inline__hint {
    font-size: 12px;
    color: var(--gen-ink-faint);
}

/* Free credit pill */
.cs-credit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px 5px 8px;
    background: #fff;
    border: 1px solid var(--gen-line);
    border-radius: 999px;
    font: 500 11px/1 var(--gen-font-body);
    color: var(--gen-ink-mute);
    flex-shrink: 0;
}
.cs-credit__count {
    background: var(--gen-accent);
    color: #0d0b08;
    font: 700 10px/1 var(--gen-font-mono);
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 999px;
}
.cs-credit__sub { color: var(--gen-ink-faint); }
.cs-credit[data-count="0"] .cs-credit__count {
    background: #efe7d5;
    color: var(--gen-ink-mute);
}

/* ============================================================
   Workspace grid — 5fr inputs / 7fr letter
   ============================================================ */
.cs-gen-inline__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--gen-line);
    border-radius: 12px;
    overflow: hidden;
}
.cs-gen-inline__inputs {
    padding: 20px 22px;
    border-right: 1px solid var(--gen-line);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.cs-gen-inline__output {
    padding: 20px;
    background: var(--gen-cream-2);
    display: flex;
    flex-direction: column;
    min-height: 540px;
}

/* Section heading inside inputs ("01 Your résumé", "02 The job") */
.cs-gen-section__label {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
}
.cs-gen-section__num {
    font-family: var(--gen-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--gen-ink-faint);
    letter-spacing: .08em;
}
.cs-gen-section__title {
    margin: 0;
    padding: 2px 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--gen-ink);
    letter-spacing: -.01em;
    background: var(--gen-cream-3);
    border-radius: 6px;
}
.cs-gen-section__hint {
    font-size: 11px;
    color: var(--gen-ink-faint);
}

/* ============================================================
   Tabs (Upload / Paste, URL / Paste)
   ============================================================ */
.cs-tabs {
    display: flex;
    border-bottom: 1px solid var(--gen-field-border);
    gap: 0;
}
.cs-tab {
    flex: 1;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font: 500 13px/1 var(--gen-font-body);
    color: var(--gen-ink-faint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .15s, border-color .15s, background .15s;
    margin-bottom: -1px;
}
.cs-tab:hover { color: var(--gen-ink); }
.cs-tab.is-active {
    color: var(--gen-accent);
    border-bottom-color: var(--gen-accent);
}
.cs-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

.cs-tab-panel { display: none; padding-top: 14px; }
.cs-tab-panel.is-active { display: block; }

/* ============================================================
   Fields (textarea, input)
   ============================================================ */
.cs-field {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--gen-field-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: 400 13px/1.5 var(--gen-font-body);
    color: var(--gen-ink);
    outline: none;
    transition: border-color .15s;
    resize: none;
    box-sizing: border-box;
}
.cs-field::placeholder { color: var(--gen-ink-faint); }
.cs-field:focus { border-color: var(--gen-ink); }
.cs-field--textarea { min-height: 110px; line-height: 1.5; }

/* ---------- Upload row ---------- */
.cs-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cs-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #fdfaf5;
    color: var(--gen-ink);
    border: 1px solid var(--gen-field-border);
    border-radius: 8px;
    font: 500 12.5px/1 var(--gen-font-body);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cs-upload-btn:hover {
    border-color: var(--gen-ink);
    background: var(--gen-cream-3);
}
.cs-upload-btn input[type="file"] { display: none; }
.cs-upload-btn svg { width: 12px; height: 12px; }
.cs-file-slot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: #fdfaf5;
    border: 1px dashed var(--gen-field-border);
    border-radius: 8px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 12.5px;
    color: var(--gen-ink-mute);
}
.cs-file-slot svg {
    color: var(--gen-ink-faint);
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.cs-file-slot__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cs-file-slot.is-filled { border-style: solid; color: var(--gen-accent-dark); }

.cs-help {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--gen-ink-faint);
}
.cs-help--success { color: var(--gen-accent-dark); }
.cs-help--error   { color: var(--gen-flag); }
.cs-help a { color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- URL pill ---------- */
.cs-url {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--gen-field-border);
    border-radius: 8px;
    overflow: hidden;
}
.cs-url:focus-within { border-color: var(--gen-ink); }
.cs-url__prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font: 600 10px/1 var(--gen-font-mono);
    letter-spacing: .1em;
    color: var(--gen-ink-faint);
    background: var(--gen-cream-2);
    border-right: 1px solid var(--gen-field-border);
}
.cs-url input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 9px 12px;
    font: 400 13px/1 var(--gen-font-body);
    color: var(--gen-ink);
    min-width: 0;
}
.cs-url input::placeholder { color: var(--gen-ink-faint); }

/* ============================================================
   Letter card (right column)
   ============================================================ */
.cs-letter {
    background: #fff;
    border: 1px solid var(--gen-line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    box-shadow: 0 2px 6px rgba(30, 27, 22, .04);
}

.cs-letter__chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gen-cream-2);
    border-bottom: 1px solid var(--gen-line);
    flex-wrap: wrap;
}
.cs-dots {
    display: inline-flex;
    gap: 5px;
    flex-shrink: 0;
}
.cs-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #e2e8f0;
}
.cs-dots i:nth-child(1) { background: #ff5f57; }
.cs-dots i:nth-child(2) { background: #febc2e; }
.cs-dots i:nth-child(3) { background: #28c840; }
.cs-letter__filename {
    font: 400 11.5px/1 var(--gen-font-mono);
    color: var(--gen-ink-faint);
    letter-spacing: .04em;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cs-letter__actions {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
}
.cs-docbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    color: var(--gen-ink);
    border: 1px solid var(--gen-field-border);
    border-radius: 6px;
    font: 500 11.5px/1.2 var(--gen-font-body);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.cs-docbtn:hover:not(:disabled) {
    background: var(--gen-cream-3);
    border-color: rgba(30, 27, 22, .35);
}
.cs-docbtn:disabled { opacity: .45; cursor: not-allowed; }
.cs-docbtn svg { width: 11px; height: 11px; }

/* ---------- Letter body (waiting / generating / ready) ---------- */
.cs-letter__body {
    background: #fff;
    font: 400 13px/1.5 var(--gen-font-body);
    color: var(--gen-ink);
    padding: 18px 22px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
}
.cs-letter__body p { margin: 0 0 10px; }
.cs-letter__body p:last-child { margin-bottom: 0; }

/* WAITING state: faint ruled-paper background + centered pill ----------- */
.cs-letter[data-state="waiting"] .cs-letter__body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    background:
        repeating-linear-gradient(to bottom, transparent 0 22px, rgba(30, 27, 22, .04) 22px 23px),
        #fff;
}
.cs-letter[data-state="waiting"] .cs-letter__ready,
.cs-letter[data-state="waiting"] .cs-letter__generating,
.cs-letter[data-state="generating"] .cs-letter__waiting,
.cs-letter[data-state="generating"] .cs-letter__ready,
.cs-letter[data-state="ready"] .cs-letter__waiting,
.cs-letter[data-state="ready"] .cs-letter__generating { display: none; }

.cs-waiting-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(30, 27, 22, .04);
    border: 1px dashed var(--gen-field-border);
    border-radius: 999px;
    font: 500 11.5px/1 var(--gen-font-mono);
    letter-spacing: .06em;
    color: var(--gen-ink-faint);
    text-transform: uppercase;
}
.cs-waiting-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gen-ink-faint);
}
.cs-waiting-copy {
    font-size: 12px;
    color: var(--gen-ink-faint);
    max-width: 280px;
    line-height: 1.5;
}
.cs-waiting-copy em { font-style: italic; color: var(--gen-ink); }

/* GENERATING state ----------------------------------------------------- */
.cs-letter__generating { display: flex; flex-direction: column; gap: 12px; }
.cs-generating-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 11px/1 var(--gen-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gen-ink-mute);
    margin-bottom: 4px;
}
.cs-generating-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gen-accent);
    animation: cs-gen-pulse 1.4s ease-in-out infinite;
}
.cs-generating-status em {
    font-style: normal;
    font-weight: 600;
    color: var(--gen-ink);
}
.cs-generating-status__note {
    margin-left: 6px;
    font-style: italic;
    color: var(--gen-ink-faint);
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--gen-font-body);
    font-weight: 400;
}
@keyframes cs-gen-pulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* skeleton lines for the streaming letter */
.cs-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-skeleton i {
    display: block;
    height: 9px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(30, 27, 22, .06)  0%,
        rgba(30, 27, 22, .12) 50%,
        rgba(30, 27, 22, .06) 100%
    );
    background-size: 200% 100%;
    animation: cs-skel-shimmer 1.6s linear infinite;
}
@keyframes cs-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   Mini analysis result (top of letter, visible when ready)
   ------------------------------------------------------------
   Mirrors the cs-r2 verdict header in miniature: state-tinted
   strip with dot, label, segmented meter, and big percentage.
   Same data-state vocabulary as cs-r2 (human/watch/flagged).
   ============================================================ */
.cs-letter-analysis {
    --la-tone:      var(--gen-accent);
    --la-tone-soft: color-mix(in srgb, var(--gen-accent) 8%, transparent);

    display: none;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--la-tone-soft);
    border-bottom: 1px solid var(--gen-line);
    font-family: var(--gen-font-body);
}
.cs-letter[data-state="ready"] .cs-letter-analysis { display: flex; }

.cs-letter-analysis[data-state="human"],
.cs-letter-analysis[data-state="safe"] {
    --la-tone:      var(--gen-accent);
    --la-tone-soft: color-mix(in srgb, var(--gen-accent) 8%, transparent);
}
.cs-letter-analysis[data-state="watch"],
.cs-letter-analysis[data-state="mixed"] {
    --la-tone:      var(--gen-watch);
    --la-tone-soft: color-mix(in srgb, var(--gen-watch) 10%, transparent);
}
.cs-letter-analysis[data-state="flagged"],
.cs-letter-analysis[data-state="ai"] {
    --la-tone:      var(--gen-flag);
    --la-tone-soft: color-mix(in srgb, var(--gen-flag) 10%, transparent);
}

.cs-letter-analysis__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--la-tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--la-tone) 22%, transparent);
    flex-shrink: 0;
}
.cs-letter-analysis__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cs-letter-analysis__eyebrow {
    font: 500 9.5px/1 var(--gen-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gen-ink-mute);
}
.cs-letter-analysis__verdict {
    font: 700 13px/1 var(--gen-font-body);
    color: var(--gen-ink);
    letter-spacing: -.005em;
}
.cs-letter-analysis__meter {
    position: relative;
    flex: 1;
    min-width: 80px;
    max-width: 280px;
    height: 16px;
    display: flex;
    border: 1px solid var(--gen-line);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.cs-letter-analysis__seg {
    border-right: 1px solid var(--gen-line);
}
.cs-letter-analysis__seg:last-child { border-right: 0; }
.cs-letter-analysis__seg--safe  { flex: 5; }
.cs-letter-analysis__seg--watch { flex: 35; }
.cs-letter-analysis__seg--flag  { flex: 60; }
.cs-letter-analysis[data-state="human"]   .cs-letter-analysis__seg--safe,
.cs-letter-analysis[data-state="safe"]    .cs-letter-analysis__seg--safe,
.cs-letter-analysis[data-state="watch"]   .cs-letter-analysis__seg--watch,
.cs-letter-analysis[data-state="mixed"]   .cs-letter-analysis__seg--watch,
.cs-letter-analysis[data-state="flagged"] .cs-letter-analysis__seg--flag,
.cs-letter-analysis[data-state="ai"]      .cs-letter-analysis__seg--flag {
    background: var(--la-tone-soft);
}
/* meter marker — set `style="left: 1%"` to match pct */
.cs-letter-analysis__marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--gen-ink);
    transition: left .6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow:
        -1px 0 6px 0 color-mix(in srgb, var(--la-tone) 70%, transparent),
         1px 0 6px 0 color-mix(in srgb, var(--la-tone) 70%, transparent);
}
.cs-letter-analysis__pct {
    flex-shrink: 0;
    font: 700 20px/1 var(--gen-font-body);
    color: var(--la-tone);
    letter-spacing: -.02em;
}
.cs-letter-analysis__pct sup {
    font-size: 11px;
    font-weight: 700;
    opacity: .65;
    margin-left: 1px;
}
.cs-letter-analysis__rescan {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--gen-ink-mute);
    font: 500 11px/1 var(--gen-font-body);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, color .15s;
}
.cs-letter-analysis__rescan:hover {
    background: rgba(30, 27, 22, .06);
    color: var(--gen-ink);
}
.cs-letter-analysis__rescan svg { width: 11px; height: 11px; }

/* ============================================================
   Run-bar (dark privacy clause + CTA)
   Identical visual to .gp-v2-runbar on the generate page, so
   we re-skin it under our own selector to avoid coupling.
   ============================================================ */
.cs-runbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gen-ink);
    color: #f4efe2;
    border-radius: 12px;
    padding: 14px 16px 14px 20px;
    margin-top: 16px;
    box-shadow: 0 8px 24px rgba(30, 27, 22, .12);
}
.cs-runbar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gen-accent);
    box-shadow: 0 0 0 4px rgba(0, 209, 178, .18);
    flex-shrink: 0;
    animation: cs-runbar-pulse 1.8s ease-in-out infinite;
}
@keyframes cs-runbar-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 209, 178, .18); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 209, 178, .08); }
}
.cs-runbar__text {
    flex: 1;
    min-width: 0;
    font: 400 12.5px/1.5 var(--gen-font-body);
    color: #cfc7b5;
}
.cs-runbar__text em { font-style: italic; color: #f4efe2; }
.cs-runbar__text a {
    color: var(--gen-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cs-runbar__credit {
    flex-shrink: 0;
    font: 500 11px/1 var(--gen-font-mono);
    color: #a89c80;
    letter-spacing: .06em;
    margin-right: 2px;
}
.cs-runbar__cta {
    flex-shrink: 0;
    background: var(--gen-accent);
    color: #0d0b08;
    border: 0;
    border-radius: 10px;
    padding: 12px 20px;
    font: 700 14px/1 var(--gen-font-body);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter .15s, transform .15s;
    font-family: inherit;
}
.cs-runbar__cta:hover:not(:disabled) { filter: brightness(1.06); }
.cs-runbar__cta:disabled { opacity: .55; cursor: not-allowed; }
.cs-runbar__cta svg { width: 13px; height: 13px; }

/* ============================================================
   Footer link (out to /generate)
   ============================================================ */
.cs-gen-inline__foot {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--gen-ink-faint);
}
.cs-gen-inline__foot a {
    color: var(--gen-ink);
    text-decoration: underline;
    text-decoration-color: var(--gen-line);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s;
}
.cs-gen-inline__foot a:hover { text-decoration-color: var(--gen-ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    .cs-gen-inline__grid { grid-template-columns: 1fr; }
    .cs-gen-inline__inputs {
        border-right: 0;
        border-bottom: 1px solid var(--gen-line);
    }
    .cs-gen-inline__output { min-height: 480px; }
}

@media (max-width: 720px) {
    .cs-gen-inline { padding: 16px; margin-top: 20px; }
    .cs-gen-inline__head { gap: 10px; }
    .cs-gen-inline__title { font-size: 18px; }
    .cs-gen-inline__inputs { padding: 16px; gap: 18px; }
    .cs-gen-inline__output { padding: 16px; min-height: 420px; }
    .cs-letter__chrome { padding: 10px; gap: 8px; }
    .cs-letter__filename {
        flex-basis: 100%;
        order: 3;
    }
    .cs-letter__body { padding: 14px 16px; }

    .cs-letter-analysis { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .cs-letter-analysis__meter { display: none; }

    .cs-runbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .cs-runbar__credit { text-align: center; }
    .cs-runbar__cta { width: 100%; justify-content: center; }
}