/* Tools > Research workspace — tabs + CRM panes.
 *
 * The existing Spark Research UI styles (.rs-*) are owned by research.css and
 * are NOT modified here. This file is additive only and uses the .rws- prefix
 * for all new selectors so it cannot collide with the legacy layer.
 */

.rws-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--border-color, #2a2f3a);
    margin: 18px 0 0 0;
    padding: 0 0 0 4px;
}
.rws-tab {
    background: transparent;
    color: var(--text-secondary, #aab0bc);
    border: 1px solid transparent;
    border-bottom: none;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.rws-tab:hover {
    color: var(--text-primary, #e8ecf3);
    background: var(--surface-hover, rgba(255,255,255,0.04));
}
.rws-tab-active {
    color: var(--text-primary, #e8ecf3);
    background: var(--surface, rgba(255,255,255,0.06));
    border-color: var(--border-color, #2a2f3a);
    border-bottom-color: var(--surface, rgba(255,255,255,0.06));
    position: relative;
    top: 1px;
}

.rws-selected-company {
    margin: 6px 0 14px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary, #aab0bc);
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    border-left: 3px solid var(--accent, #5aa9ff);
}

.rws-tabpane {
    padding: 16px 0 28px 0;
}

.rws-h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--text-primary, #e8ecf3);
}
.rws-sub-h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0;
    color: var(--text-primary, #e8ecf3);
}
.rws-hint {
    font-size: 12px;
    color: var(--text-secondary, #8a8f99);
    margin: 6px 0 12px;
}

.rws-form {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.rws-form-inline { display: inline-flex; align-items: end; gap: 10px; padding: 10px; }
.rws-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 10px 14px;
    margin-bottom: 10px;
}
.rws-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary, #aab0bc); }
.rws-field input, .rws-field select, .rws-field textarea {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-color, #2a2f3a);
    color: var(--text-primary, #e8ecf3);
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
    width: 100%;
}
.rws-field textarea { resize: vertical; }
.rws-field-wide { grid-column: span 2; }
.rws-field-full { grid-column: 1 / -1; }

.rws-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #2a2f3a);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary, #e8ecf3);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.rws-btn:hover { background: rgba(255,255,255,0.08); }
.rws-btn-primary {
    background: var(--accent, #5aa9ff);
    border-color: var(--accent, #5aa9ff);
    color: #0b1220;
}
.rws-btn-primary:hover { background: var(--accent-hover, #4f99e5); }
.rws-btn-ghost { background: transparent; }

.rws-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.rws-status {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    background: rgba(0,180,120,0.12);
    color: #4ad6a0;
}
.rws-status.rws-err {
    background: rgba(255,80,80,0.12);
    color: #ff8b8b;
}

.rws-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 8px;
}
.rws-table th, .rws-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #2a2f3a);
    text-align: left;
    vertical-align: top;
}
.rws-table thead th {
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary, #aab0bc);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rws-table tbody tr { cursor: pointer; }
.rws-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.rws-strong { font-weight: 600; }
.rws-empty { color: var(--text-secondary, #8a8f99); font-style: italic; }
.rws-citation { font-family: ui-monospace, SFMono-Regular, monospace; color: var(--accent, #5aa9ff); }
.rws-mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; }

.rws-status-queued { color: #aab0bc; }
.rws-status-running { color: #f0b85a; }
.rws-status-completed { color: #4ad6a0; }
.rws-status-failed { color: #ff8b8b; }

.rws-missing-out { margin: 12px 0; }
.rws-missing-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 14px;
    font-size: 12px;
}
.rws-missing-list li.rws-checked { color: #4ad6a0; }
.rws-missing-list li.rws-unchecked { color: var(--text-secondary, #aab0bc); }

details.rws-section > summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
    user-select: none;
}
details.rws-section > summary::-webkit-details-marker { display: none; }
details.rws-section > summary::before {
    content: "▸ ";
    color: var(--text-secondary, #8a8f99);
    margin-right: 4px;
}
details.rws-section[open] > summary::before { content: "▾ "; }

.rws-select {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-color, #2a2f3a);
    color: var(--text-primary, #e8ecf3);
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
}

.rws-artifact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px 0;
}
.rws-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color, #2a2f3a);
    color: var(--text-secondary, #aab0bc);
}
.rws-validation-valid    { color: #4ad6a0; }
.rws-validation-needs_review { color: #f0b85a; }
.rws-validation-invalid  { color: #ff8b8b; }
.rws-validation-unvalidated { color: var(--text-secondary, #aab0bc); }
.rws-approval-approved   { color: #4ad6a0; }
.rws-approval-pending    { color: var(--text-secondary, #aab0bc); }
.rws-approval-needs_revision { color: #f0b85a; }
.rws-approval-draft      { color: var(--text-secondary, #aab0bc); }
.rws-approval-needs_review { color: #f0b85a; }
.rws-approval-rejected   { color: #ff8b8b; }
.rws-approval-revised    { color: #5aa9ff; }
.rws-pill--stale {
    background: rgba(255, 139, 139, 0.12);
    border-color: rgba(255, 139, 139, 0.55);
    color: #ff8b8b;
}
.rws-pill--fresh {
    background: rgba(74, 214, 160, 0.10);
    border-color: rgba(74, 214, 160, 0.40);
    color: #4ad6a0;
}
.rws-col-select { width: 28px; text-align: center; }
.rws-row-superseded td { opacity: 0.55; }
.rws-row-superseded td.rws-col-select { opacity: 1; }

/* ------------------------------------------------------------------------- */
/* Connections (F3)                                                          */
/* ------------------------------------------------------------------------- */
.rws-connections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.rws-connection-card {
    border: 1px solid var(--border-color, #2a2f3a);
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 12px;
}
.rws-connection-card header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.rws-connection-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rws-connection-row {
    padding: 8px 0;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.rws-connection-row:first-child { border-top: 0; }
.rws-connection-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 4px;
}
.rws-connection-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rws-connection-chip {
    text-decoration: none;
    cursor: pointer;
}
.rws-connection-chip:hover {
    background: rgba(90,169,255,0.18);
    border-color: rgba(90,169,255,0.6);
}

/* ------------------------------------------------------------------------- */
/* Artifact diff modal (F4)                                                  */
/* ------------------------------------------------------------------------- */
.rws-diff-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
}
.rws-diff-modal[hidden] { display: none !important; }
.rws-diff-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
}
.rws-diff-modal-inner {
    position: relative;
    max-width: 1100px;
    margin: 4vh auto;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-color, #14171c);
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.rws-diff-modal-head,
.rws-diff-modal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #2a2f3a);
}
.rws-diff-modal-foot { border-top: 1px solid var(--border-color, #2a2f3a); border-bottom: 0; }
.rws-diff-foot-spacer { flex: 1; }
.rws-diff-modal-body {
    overflow-y: auto;
    padding: 12px 16px;
    flex: 1;
}
body.rws-modal-open { overflow: hidden; }

.rws-diff-group {
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.02);
}
.rws-diff-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.rws-diff-group-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary, #aab0bc);
}
.rws-diff-group-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.rws-diff-pane {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #2a2f3a);
    background: rgba(0,0,0,0.25);
}
.rws-diff-pane-old { border-left: 3px solid #ff8b8b; }
.rws-diff-pane-new { border-left: 3px solid #4ad6a0; }

.rws-diff-group.rws-diff-unchanged .rws-diff-pane { opacity: 0.7; }
.rws-diff-group.rws-diff-added    { border-color: rgba(74,214,160,0.55); }
.rws-diff-group.rws-diff-removed  { border-color: rgba(255,139,139,0.55); }
.rws-diff-group.rws-diff-changed  { border-color: rgba(90,169,255,0.55); }

.rws-diff-status-unchanged { color: var(--text-secondary, #aab0bc); }
.rws-diff-status-changed   { color: #5aa9ff; }
.rws-diff-status-added     { color: #4ad6a0; }
.rws-diff-status-removed   { color: #ff8b8b; }

@media (max-width: 800px) {
    .rws-diff-modal-inner { margin: 2vh; max-height: 96vh; }
    .rws-diff-group-body { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------------- */
/* Spark Research live progress strip                                        */
/* ------------------------------------------------------------------------- */

.rws-spark-progress {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(90, 169, 255, 0.05);
    border: 1px solid rgba(90, 169, 255, 0.35);
    font-size: 12px;
    line-height: 1.45;
    max-height: 240px;
    overflow-y: auto;
}
.rws-spark-progress.done   { border-color: rgba(74, 214, 160, 0.6); background: rgba(74, 214, 160, 0.06); }
.rws-spark-progress.failed { border-color: rgba(255, 139, 139, 0.6); background: rgba(255, 139, 139, 0.06); }

.rws-spark-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-secondary, #aab0bc);
}
.rws-spark-progress-label   { letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.rws-spark-progress-elapsed { color: var(--text-secondary, #aab0bc); font-variant-numeric: tabular-nums; }

.rws-spark-progress-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: spark;
}
.rws-spark-progress-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 4px 0;
    border-top: 1px dashed rgba(255,255,255,0.08);
    counter-increment: spark;
}
.rws-spark-progress-item:first-child { border-top: 0; }
.rws-spark-progress-item::before {
    content: counter(spark) ".";
    grid-row: 1 / span 2;
    color: var(--text-secondary, #aab0bc);
    font-variant-numeric: tabular-nums;
    padding-right: 6px;
}
.rws-spark-progress-stage  { font-weight: 600; color: var(--text-primary, #e6e8eb); }
.rws-spark-progress-detail { color: var(--text-secondary, #aab0bc); font-size: 11px; word-break: break-word; }

.rws-spark-progress-item.stage-failed       .rws-spark-progress-stage { color: #ff8b8b; }
.rws-spark-progress-item.stage-complete     .rws-spark-progress-stage { color: #4ad6a0; }
.rws-spark-progress-item.stage-search_error .rws-spark-progress-stage { color: #f0b85a; }
.rws-spark-progress-item.stage-synthesizing .rws-spark-progress-stage,
.rws-spark-progress-item.stage-ranking      .rws-spark-progress-stage { color: #5aa9ff; }

.rws-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 4px 0 18px 0;
}
.rws-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rws-stat-label { font-size: 11px; color: var(--text-secondary, #8a8f99); text-transform: uppercase; letter-spacing: 0.04em; }
.rws-stat-value { font-size: 20px; font-weight: 600; color: var(--text-primary, #e8ecf3); }
.rws-stat.rws-stat-bad .rws-stat-value { color: #ff8b8b; }

.rws-search {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-color, #2a2f3a);
    color: var(--text-primary, #e8ecf3);
    border-radius: 4px;
    padding: 6px 10px;
    font: inherit;
    min-width: 280px;
}

.rws-finding { margin: 2px 0; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; }
.rws-finding-blocker { color: #ff8b8b; }
.rws-finding-warning { color: #f0b85a; }
.rws-finding-info { color: var(--text-secondary, #aab0bc); }

.rws-crm-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.rws-pipeline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 16px 0;
}
.rws-pipeline-stage {
    flex: 1 1 120px;
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    background: rgba(255,255,255,0.02);
    transition: background-color 80ms;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rws-pipeline-stage:hover { background: rgba(255,255,255,0.06); }
.rws-pipeline-active {
    border-color: var(--accent, #5aa9ff);
    background: rgba(90, 169, 255, 0.10);
}
.rws-pipeline-label {
    font-size: 11px;
    color: var(--text-secondary, #aab0bc);
    text-transform: capitalize;
}
.rws-pipeline-count {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #e8ecf3);
}

.rws-prospect-detail {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 6px;
}

.rws-followup-open { color: #f0b85a; }
.rws-followup-completed { color: #4ad6a0; }
.rws-followup-cancelled { color: var(--text-secondary, #aab0bc); }

.rws-section { margin-bottom: 18px; }
.rws-health-out {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 8px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.rws-ticker-result {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    min-height: 1.6em;
}
.rws-err { color: #ff8b8b; }

.rws-artifact-view {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-color, #2a2f3a);
    border-radius: 6px;
}
.rws-artifact-md {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    color: var(--text-primary, #e8ecf3);
    margin: 0;
}

@media (max-width: 800px) {
    .rws-grid-3 { grid-template-columns: 1fr; }
    .rws-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .rws-tab { white-space: nowrap; }
}

/* ---------------------------------------------------------------------- *
 * Mobile breakpoint (phase 06).
 *
 * Below 720px width:
 *   - Tab bar becomes sticky + horizontally scrollable so all sections stay
 *     reachable without breaking the page layout.
 *   - Every .rws-table morphs into a stacked card list using ::before
 *     pseudo-elements that read each cell's ``data-label`` attribute. This
 *     keeps the underlying <table> markup and the desktop view intact.
 *   - Dashboard / pipeline / artifact-meta grids collapse to one column.
 *   - Toolbars wrap and stack so buttons stay tappable (>=44px high).
 *   - Long URLs and JSON blobs wrap inside their container instead of
 *     overflowing the viewport.
 * ---------------------------------------------------------------------- */
@media (max-width: 720px) {
    .rws-page, .rs-page { padding: 0 4px; }

    .rws-tabs {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--bg-primary, #0f1115);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .rws-tab {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }

    /* Stat / dashboard cards: one column on the smallest screens, two on a
     * comfortable phone. The grid `auto-fit` would already do this, but
     * force a clean single-column layout below 420px so labels never
     * truncate. */
    .rws-dashboard, .rws-crm-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .rws-stat { padding: 8px 10px; }
    .rws-stat-value { font-size: 16px; }

    /* Pipeline rail: stacked stages with visible counts. Click-to-filter
     * still works the same way as on desktop. */
    .rws-pipeline {
        flex-direction: column;
    }
    .rws-pipeline-stage {
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 12px;
        min-height: 44px;
    }
    .rws-pipeline-label {
        font-size: 13px;
        text-transform: capitalize;
        color: var(--text-primary, #e8ecf3);
    }
    .rws-pipeline-count {
        font-size: 14px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
    }

    /* Toolbars: wrap buttons; each button at minimum tap height. */
    .rws-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }
    .rws-btn {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 13px;
    }
    .rws-search, .rws-select {
        min-height: 44px;
        font-size: 16px; /* 16px prevents iOS Safari zoom-on-focus */
        width: 100%;
        min-width: 0;
    }
    .rws-form-inline {
        flex-wrap: wrap;
    }
    .rws-form-inline > * { width: 100%; }

    /* Forms: stack every field; ensure tap-friendly inputs. */
    .rws-grid-3 { grid-template-columns: 1fr; }
    .rws-field input, .rws-field select, .rws-field textarea {
        min-height: 44px;
        font-size: 16px;
    }
    .rws-field-wide, .rws-field-full { grid-column: auto; }

    /* ============ Responsive tables: <table> → card stack ============ */
    .rws-table {
        border: 0;
    }
    .rws-table thead {
        /* Visually hide but keep accessible for screen readers. */
        position: absolute;
        left: -10000px;
        width: 1px; height: 1px;
        overflow: hidden;
    }
    .rws-table, .rws-table tbody {
        display: block;
        width: 100%;
    }
    .rws-table tr {
        display: block;
        margin: 0 0 10px 0;
        padding: 10px 12px;
        border: 1px solid var(--border-color, #2a2f3a);
        border-radius: 6px;
        background: rgba(255,255,255,0.02);
    }
    .rws-table tbody tr:hover { background: rgba(255,255,255,0.03); }
    .rws-table td {
        display: block;
        padding: 4px 0;
        border: none;
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        font-size: 13px;
    }
    .rws-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary, #8a8f99);
        margin-bottom: 2px;
    }
    /* Cells without a data-label (e.g. action buttons) don't get a label. */
    .rws-table td:not([data-label])::before { content: none; }
    .rws-table td a { word-break: break-all; }

    /* Long monospace strings (audit details, JSON snippets) must wrap. */
    .rws-mono {
        white-space: pre-wrap;
        word-break: break-all;
    }

    /* Artifact viewer: full-width meta pills + scrollable markdown box. */
    .rws-artifact-meta { gap: 4px; }
    .rws-pill { font-size: 11px; padding: 4px 8px; }
    .rws-artifact-md {
        font-size: 12px;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: auto;
    }
    .rws-artifact-view, .rws-prospect-detail {
        padding: 10px 12px;
    }

    /* Missing-data checklist collapses to one column for narrow viewports. */
    .rws-missing-list {
        grid-template-columns: 1fr;
    }

    /* Health / SEC submissions output: ensure wrapping. */
    .rws-health-out, .rws-ticker-result {
        word-break: break-all;
    }

    /* Compliance findings: indent a touch so severity dots remain visible. */
    .rws-finding { font-size: 11px; }
}

@media (max-width: 420px) {
    /* Smallest phones: one column for everything. */
    .rws-dashboard, .rws-crm-cards { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
 * Legacy Spark Research UI (research.js / .rs-*) — stack on mobile.
 *
 * The existing layout is a 2-column grid (history aside + main). At narrow
 * widths the aside steals horizontal space and forces the question textarea
 * into a tiny column. Stack vertically below 720px while leaving the
 * desktop layout untouched.
 * ---------------------------------------------------------------------- */
@media (max-width: 720px) {
    .rs-layout {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }
    .rs-history {
        max-height: 220px;
        overflow-y: auto;
        order: 2;
    }
    .rs-main {
        order: 1;
    }
    .rs-controls {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .rs-toggles {
        flex-wrap: wrap;
        gap: 6px;
    }
    .rs-form textarea,
    .rs-form input,
    .rs-form select {
        font-size: 16px;
        min-height: 44px;
    }
    .rs-result-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
    .rs-sources-list,
    .rs-trail-list {
        padding-left: 18px;
    }
    /* Sticky run button so the user doesn't have to scroll past controls. */
    #rs-submit {
        position: sticky;
        bottom: 8px;
        z-index: 2;
    }
    .rs-page {
        padding-bottom: 60px;
    }
}