/* app/static/css/stream-styles.css
 *
 * Per-style STRUCTURAL cues. The unified visual system (typography,
 * color, spacing) is defined in _tokens.css and consumed by
 * message-styles.css. The rules here only adjust LAYOUT in
 * style-specific ways: italic ledes, verdict callouts, centered
 * titles, collapsed-headings, narrative indents.
 *
 * Aesthetic (font/color/size) is identical across all six styles.
 * Only structure differs.
 *
 * Phase 2 of the streaming text polish project. Replaces the previous
 * six-aesthetic-override implementation.
 *
 * Spec: docs/superpowers/specs/2026-05-02-streaming-text-polish-design.md
 */


/* ============================================================
 * CHAT — friendly text-message style.
 * Structural cue: no headings rendered (charter forbids them).
 * Tight reading width. Compact paragraphs.
 * ============================================================ */
[data-style="chat"] .text-message h1,
[data-style="chat"] .text-message h2,
[data-style="chat"] .text-message h3,
[data-style="chat"] .text-message h4 {
    font-size: 1em !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: inline !important;
}
[data-style="chat"] .text-message p {
    margin-bottom: 0.6rem !important;
}
[data-style="chat"] .text-message ul,
[data-style="chat"] .text-message ol {
    margin: 0.4rem 0 !important;
    padding-left: 1.3rem !important;
}


/* ============================================================
 * COMPARISON — verdict-callout first paragraph + accent table header.
 * Structural cue: bold first paragraph reads as the verdict.
 * ============================================================ */
[data-style="comparison"] .text-message > p:first-of-type,
[data-style="comparison"] .text-message .stream-block.block-paragraph:first-of-type p {
    background: var(--gold-soft);
    border-left: 3px solid var(--gold-line);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 18px !important;
    font-size: 1.02em;
}
[data-style="comparison"] .text-message thead th {
    color: var(--gold-2) !important;
    border-bottom: 1px solid var(--gold-line) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    font-weight: 700;
}


/* ============================================================
 * EDITORIAL — italic lede + small-caps section markers.
 * Structural cue: first paragraph is the magazine lede.
 * ============================================================ */
[data-style="editorial"] .text-message > p:first-of-type,
[data-style="editorial"] .text-message .stream-block.block-paragraph:first-of-type p {
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.65;
    border-left: 2px solid var(--gold-line);
    padding-left: 16px;
    margin-bottom: 1.4em !important;
}
[data-style="editorial"] .text-message h2 {
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700 !important;
    color: var(--paper-3) !important;
    margin-top: 2.2rem !important;
    margin-bottom: 0.8rem !important;
}


/* ============================================================
 * CREATIVE — narrative typography. Centered italic titles.
 * Structural cue: prose with indented paragraphs, calligraphic divider.
 * ============================================================ */
[data-style="creative"] .text-message h1,
[data-style="creative"] .text-message h2 {
    font-style: italic;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0.02em;
    margin: 1.6em 0 1.2em !important;
}
[data-style="creative"] .text-message em {
    color: var(--paper-1) !important;
}
[data-style="creative"] .text-message hr {
    border: none !important;
    text-align: center;
    margin: 2em 0 !important;
    height: 1em;
    overflow: visible;
}
[data-style="creative"] .text-message hr::after {
    content: '· · ·';
    letter-spacing: 0.7em;
    color: var(--paper-3);
    font-size: 1rem;
}
[data-style="creative"] .text-message p {
    text-indent: 1.4em;
}
[data-style="creative"] .text-message p:first-of-type,
[data-style="creative"] .text-message h1 + p,
[data-style="creative"] .text-message h2 + p,
[data-style="creative"] .text-message hr + p {
    text-indent: 0;
}


/* MODERN_BLOG and TECHNICAL: no per-style structural overrides needed.
 * Their structural signatures (lists with bullets, "Bottom line:" callout,
 * code-first answers, ### sub-headings) come from the model's markdown
 * output. The unified visual system renders that markdown beautifully —
 * no extra CSS required per style. */