/* ──────────────────────────────────────────────────────────────
   GWS Stock Insight Builder (v2) — power-user WYSIWYG editor.
   Loaded only on the GWS module page; class names prefixed with
   `gws-builder-` to keep this completely scoped.
   ────────────────────────────────────────────────────────────── */

.gws-builder-shell {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px 28px 32px;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1e293b;
    max-width: 100%;
}

/* ── Header ────────────────────────────────────────────────── */
.gws-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 2px solid #2C3E50;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.gws-builder-title h2 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #2C3E50;
    outline: none;
    min-width: 200px;
}
.gws-builder-title h2:focus {
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: -6px;
}
.gws-builder-subtitle {
    font-size: 0.85rem;
    color: #64748b;
}
.gws-builder-subtitle [contenteditable]:focus {
    background: #f1f5f9;
    border-radius: 4px;
    padding: 0 4px;
    outline: none;
}

.gws-builder-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.gws-builder-logo-frame {
    width: 120px;
    height: 80px;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    overflow: hidden;
    transition: border-color 0.12s, background 0.12s;
}
.gws-builder-logo-frame.is-drop-over {
    border: 2px dashed #3B7DDD;
    background: #dbeafe;
}
.gws-builder-logo-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gws-builder-logo-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.7rem;
}
.gws-builder-logo-empty i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.gws-builder-logo-actions {
    display: flex;
    gap: 4px;
}
.gws-builder-logo-actions button,
.gws-builder-iconbtn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gws-builder-logo-actions button:hover,
.gws-builder-iconbtn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* ── Section wrapper ──────────────────────────────────────── */
.gws-builder-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gws-builder-section {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    position: relative;
    transition: border-color 0.15s;
}
.gws-builder-section:hover {
    border-color: #cbd5e1;
}
.gws-builder-section.is-hidden {
    opacity: 0.5;
    background: #f8fafc;
}
.gws-builder-section.is-hidden .gws-builder-section-body {
    pointer-events: none;
}
.gws-builder-section.is-dragging {
    opacity: 0.4;
}
.gws-builder-section.is-drop-target {
    box-shadow: 0 0 0 3px rgba(59, 125, 221, 0.15);
}
/* Above/below drop indicator: a thick blue bar tells the user exactly which
   side the dragged section will land on. Without this it was unclear whether
   dragging downward would put the source above or below the drop target. */
.gws-builder-section.is-drop-above {
    box-shadow: inset 0 4px 0 0 #3B7DDD;
}
.gws-builder-section.is-drop-below {
    box-shadow: inset 0 -4px 0 0 #3B7DDD;
}
/* File-drop indicator: shown when the user is dragging an image file from
   the OS over a section. Drop attaches the image to that section's
   `images` list (renders inside it), or creates a standalone image
   section if dropped on the +Add bar. Visually distinct from section-
   reorder so the two intents don't get confused. */
.gws-builder-section.is-image-drop-target {
    border: 2px dashed #3B7DDD;
    background: #dbeafe;
}

/* Attached images — render INSIDE a section's body, below the main
   content. Used when the user adds an image via the per-section + image
   button or by drag-dropping onto the section. Each picture has a tiny
   × in the corner that removes it from the section. */
.gws-builder-attached-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}
.gws-builder-attached-image {
    margin: 0;
    position: relative;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 6px;
    cursor: grab;
}
.gws-builder-attached-image:active { cursor: grabbing; }
.gws-builder-attached-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
    pointer-events: none;  /* let dragstart originate on the figure, not the img */
}
.gws-builder-attached-image figcaption,
.gws-builder-image figcaption {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
    text-align: left;
}
/* Title — rendered above the image when sec/img.title is set.
   Mirrors the pubview styling so builder + preview + public match. */
.gws-builder-attached-image-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.3;
}
/* Image actions (resize/caption/move/delete) live in a right-click
   context menu AND a visible ⋮ kebab button in the figure corner. The
   button is the discoverable entry point; right-click is the power-
   user shortcut. Both route through attachImageContextMenu() in
   gws_insight_builder.js. */
.gws-builder-attached-image,
.gws-builder-image {
    position: relative;  /* anchor for the absolutely-positioned ⋮ button */
}
.gws-builder-img-menu-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    display: none;  /* revealed on figure hover */
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background 0.12s, color 0.12s;
    z-index: 2;
}
.gws-builder-attached-image:hover .gws-builder-img-menu-btn,
.gws-builder-image:hover .gws-builder-img-menu-btn,
.gws-builder-chart-wrap:hover .gws-builder-img-menu-btn,
.gws-builder-rev-col:hover .gws-builder-img-menu-btn,
.gws-builder-img-menu-btn:focus {
    display: inline-flex;
}
.gws-builder-img-menu-btn:hover {
    background: #fff;
    color: #0f172a;
    border-color: #cbd5e1;
}
.gws-builder-shell.is-preview .gws-builder-img-menu-btn {
    display: none !important;
}

/* Mobile: collapse to one image per row. Context menu remains usable
   via long-press on touch devices (browsers fire contextmenu). */
@media (max-width: 700px) {
    .gws-builder-attached-image,
    .gws-builder-image {
        width: 100% !important;
    }
    /* Always-visible kebab on mobile since hover doesn't exist. */
    .gws-builder-img-menu-btn {
        display: inline-flex;
    }
}

.gws-builder-section-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 6px 6px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}
.gws-builder-section-handle {
    cursor: grab;
    color: #94a3b8;
    padding: 2px 4px;
}
.gws-builder-section-handle:hover {
    color: #475569;
}
.gws-builder-section-kind {
    flex: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
}
.gws-builder-section-tools button,
.gws-builder-section-toolbtn {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    font-size: inherit;
}
.gws-builder-section-tools button:hover,
.gws-builder-section-toolbtn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.gws-builder-section-body {
    padding: 16px 20px 20px;
}

.gws-builder-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
}
.gws-builder-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.gws-builder-section-title[contenteditable]:focus {
    color: #475569;
}

/* ── Header strip (legacy — kept for layouts that still have it.
   Default layout drops header-strip since the manage shell already
   shows ticker + name above the builder body.) ── */
.gws-builder-headerstrip {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.gws-builder-headerstrip-name {
    margin: 0 0 6px;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.15;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.gws-builder-headerstrip-name [contenteditable] { outline: none; }
.gws-builder-headerstrip-sub {
    font-size: 0.82rem;
    color: #64748b;
    letter-spacing: 0.2px;
}
.gws-builder-headerstrip-item [contenteditable] { outline: none; }
.gws-builder-headerstrip-item [contenteditable]:focus,
.gws-builder-headerstrip-name [contenteditable]:focus {
    background: #f1f5f9;
    border-radius: 3px;
    padding: 0 4px;
}
.gws-builder-headerstrip-sep { color: #cbd5e1; margin: 0 2px; }

/* ── Fact strip (5–6 key numbers) ── */
.gws-builder-factstrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0;
    margin-bottom: 32px;
    padding: 4px 0 0;
}
.gws-builder-factstrip-cell {
    padding: 0 16px;
    border-left: 1px solid #f1f5f9;
}
.gws-builder-factstrip-cell:first-child {
    border-left: none;
    padding-left: 0;
}
.gws-builder-factstrip-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    margin-bottom: 6px;
}
.gws-builder-factstrip-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.1;
    font-feature-settings: 'tnum';
}
.gws-builder-factstrip-value [contenteditable] { outline: none; }
.gws-builder-factstrip-value [contenteditable]:focus {
    background: #f1f5f9;
    border-radius: 3px;
}

/* ── Ratings (compact horizontal badges, tier-tinted) ── */
.gws-builder-ratings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.gws-builder-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    background: #f1f5f9;
    color: #475569;
}
.gws-builder-rating-badge .agency {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}
.gws-builder-rating-badge .grade {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.88rem;
}
.gws-builder-rating-badge .grade [contenteditable] { outline: none; }
.gws-builder-rating-badge .grade [contenteditable]:focus {
    background: #fff;
    border-radius: 2px;
    padding: 0 3px;
}
.gws-builder-rating-badge .outlook-wrap {
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
}
.gws-builder-rating-badge select {
    /* Native dropdown chrome — reliable + discoverable. Earlier version
       used appearance:none + transparent bg which broke rendering on some
       browsers (options spilled as inline text next to the grade). */
    appearance: auto;
    -webkit-appearance: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.72rem;
    color: #475569;
    padding: 2px 6px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}
.gws-builder-rating-badge select:hover { border-color: #cbd5e1; }
.gws-builder-rating-badge select:focus { outline: 1px solid #3B7DDD; }
/* Plain-text preview node. In edit mode the select shows and this span
   is hidden; in preview mode we reverse. Earlier attempt at stripping
   select chrome in preview caused Chrome/Windows to render all the
   option labels inline as text ("—STABLEPOSITIVENEGATIVEDEVELOPING"). */
.gws-builder-rating-badge .outlook-preview {
    display: none;
    font-size: 0.72rem;
    color: #64748b;
    font-style: italic;
}
.gws-builder-shell.is-preview .gws-builder-rating-badge select {
    display: none;
}
.gws-builder-shell.is-preview .gws-builder-rating-badge .outlook-preview {
    display: inline;
}
.gws-builder-shell.is-preview .gws-builder-rating-badge .outlook-wrap {
    /* Drop the divider line when there's no outlook text to display. */
    border-left-width: 0;
    padding-left: 0;
}
.gws-builder-shell.is-preview .gws-builder-rating-badge .outlook-wrap:has(.outlook-preview:not(:empty)) {
    border-left-width: 1px;
    padding-left: 8px;
}
/* Tier tint */
.gws-builder-rating-badge.tier-aaa { background: #ecfdf5; }
.gws-builder-rating-badge.tier-aaa .grade { color: #047857; }
.gws-builder-rating-badge.tier-aa  { background: #f0fdf4; }
.gws-builder-rating-badge.tier-aa  .grade { color: #15803d; }
.gws-builder-rating-badge.tier-a   { background: #f7fee7; }
.gws-builder-rating-badge.tier-a   .grade { color: #4d7c0f; }
.gws-builder-rating-badge.tier-bbb { background: #fefce8; }
.gws-builder-rating-badge.tier-bbb .grade { color: #854d0e; }
.gws-builder-rating-badge.tier-bb  { background: #fef3c7; }
.gws-builder-rating-badge.tier-bb  .grade { color: #92400e; }
.gws-builder-rating-badge.tier-b   { background: #fee2e2; }
.gws-builder-rating-badge.tier-b   .grade { color: #b91c1c; }

/* ── Stat grid (technical info, 3 cols, no empty rows) ── */
.gws-builder-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 28px;
}
@media (max-width: 700px) {
    .gws-builder-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.gws-builder-stat-item {
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}
.gws-builder-stat-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 4px;
}
.gws-builder-stat-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
}
.gws-builder-stat-value [contenteditable] { outline: none; }
.gws-builder-stat-value [contenteditable]:focus {
    background: #f1f5f9;
    border-radius: 3px;
    padding: 0 3px;
}

/* ── Valuation rows (P/E vs Industry — typeset, not table) ── */
.gws-builder-val-rows {
    display: flex;
    flex-direction: column;
}
.gws-builder-val-row {
    display: grid;
    grid-template-columns: 90px 90px 30px 1fr 130px;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.gws-builder-val-row:last-child { border-bottom: none; }
.gws-builder-val-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #475569;
}
.gws-builder-val-stock {
    font-size: 1rem;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: #1e293b;
    text-align: right;
}
.gws-builder-val-stock.is-better { color: #059669; }
.gws-builder-val-stock.is-worse  { color: #dc2626; }
.gws-builder-val-vs {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
}
.gws-builder-val-ind {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.gws-builder-val-ind input[type="number"] {
    width: 72px;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.95rem;
    font-family: 'IBM Plex Mono', monospace;
    color: #64748b;
    background: #fff;
}
.gws-builder-val-ind input[type="number"]:focus {
    outline: none;
    border-color: #3B7DDD;
}
.gws-builder-val-ind-suffix {
    font-size: 0.72rem;
    color: #94a3b8;
}
.gws-builder-val-diff {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    color: #94a3b8;
}
.gws-builder-val-diff.is-better { color: #059669; }
.gws-builder-val-diff.is-worse  { color: #dc2626; }

/* ── Tables (used by anagraphic, technical-info, etc.) ──── */
.gws-builder-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.gws-builder-table th,
.gws-builder-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
.gws-builder-table th {
    color: #64748b;
    font-weight: 500;
    width: 220px;
    font-size: 0.82rem;
}
.gws-builder-table td {
    color: #1e293b;
    font-weight: 500;
}
.gws-builder-table input[type="number"] {
    width: 100px;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.85rem;
    font-family: 'IBM Plex Mono', monospace;
}

/* Outlook dropdown in the rating-grid section. Matches the inline-edit
   feel of the surrounding cells — borderless until focused/hovered. */
.gws-builder-outlook-select {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.82rem;
    color: #1e293b;
    cursor: pointer;
    min-width: 110px;
}
.gws-builder-outlook-select:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.gws-builder-outlook-select:focus {
    background: #f1f5f9;
    border-color: #3B7DDD;
    outline: none;
}
.gws-builder-shell.is-preview .gws-builder-outlook-select {
    /* Strip select chrome in preview so it reads as plain text. */
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 !important;
}
.gws-builder-table [contenteditable]:focus {
    background: #f1f5f9;
    outline: none;
    border-radius: 3px;
    padding: 0 4px;
}

/* Bound-row table (anagraphic, technical-info, analyst-ratings): every cell
   is contenteditable; per-row hide button reveals on hover. */
.gws-builder-bound-table th {
    width: 220px;
}
.gws-builder-bound-table .gws-builder-row-hidecol {
    width: 28px;
    text-align: right;
    padding-right: 4px;
}
.gws-builder-bound-table .gws-builder-row-hidecol button {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 3px;
    visibility: hidden;
}
.gws-builder-bound-table tr:hover .gws-builder-row-hidecol button {
    visibility: visible;
}
.gws-builder-bound-table .gws-builder-row-hidecol button:hover {
    background: #fee2e2;
    color: #dc2626;
}
.gws-builder-bound-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
}
.gws-builder-shell.is-preview .gws-builder-row-hidecol,
.gws-builder-shell.is-preview .gws-builder-bound-actions {
    display: none !important;
}

/* Suggested-sections panel: data-driven pills above the +Add bar. Each pill
   is a clickable button that POSTs a new section of the suggested kind. */
.gws-builder-suggest {
    margin-top: 16px;
    padding: 12px 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
}
.gws-builder-suggest-label {
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gws-builder-suggest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gws-builder-suggest-pill {
    background: #fff;
    border: 1px solid #fbbf24;
    color: #1e293b;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gws-builder-suggest-pill:hover {
    background: #fbbf24;
    color: #fff;
}
.gws-builder-suggest-title {
    font-weight: 600;
}
.gws-builder-suggest-reason {
    color: #64748b;
    font-size: 0.72rem;
    margin-left: 4px;
}
.gws-builder-suggest-pill:hover .gws-builder-suggest-reason {
    color: #fff;
}
.gws-builder-shell.is-preview .gws-builder-suggest {
    display: none !important;
}

.gws-builder-customtable th,
.gws-builder-customtable td {
    border: 1px solid #e2e8f0;
}
.gws-builder-customtable th {
    width: auto;
    background: #f8fafc;
}

/* ── Narrative ─────────────────────────────────────────────── */
.gws-builder-narrative {
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    min-height: 60px;
    white-space: pre-wrap;
    outline: none;
}
.gws-builder-narrative:hover {
    border-color: #f1f5f9;
}
.gws-builder-narrative:focus {
    border-color: #3B7DDD;
    background: #fff;
}
.gws-builder-narrative.is-placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* ── Charts ────────────────────────────────────────────────── */
.gws-builder-chart-wrap {
    margin-top: 8px;
    background: #fff;
    /* Height comes from inline style (sec.height_px; default 240px).
       Chart.js uses maintainAspectRatio:false so the canvas fills this
       exact box. Always 100% width. */
    position: relative;
}
.gws-builder-chart-wrap canvas {
    max-height: 100% !important;
}
.gws-builder-chart-ctrls {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 8px;
}
.gws-builder-chart-ctrls select {
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.78rem;
}

.gws-builder-rev-row {
    /* Flex so inline widths on .gws-builder-rev-col actually apply. Each
       column gets its own width_pct; when both add up to <100 the row
       wraps or leaves whitespace (user-controlled layout). */
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
.gws-builder-rev-col {
    /* Inline style supplies the width; box-sizing + subtracted gap
       prevents overflow when user picks 50 + 50 with a 16px gap. */
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    flex-grow: 0;
    flex-shrink: 0;
}
.gws-builder-rev-col h6 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 600;
}
.gws-builder-rev-editor {
    margin-top: 8px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}
.gws-builder-rev-empty {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-bottom: 6px;
}
.gws-builder-rev-editor-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}
.gws-builder-rev-editor-row input {
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 0.78rem;
}
.gws-builder-rev-name { flex: 1; min-width: 0; }
.gws-builder-rev-pct  { width: 70px; }
.gws-builder-rev-editor-row button {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 6px;
}
.gws-builder-rev-editor-row button:hover {
    color: #dc2626;
}
.gws-builder-rev-editor-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
/* In preview, the manual editor disappears entirely (charts only). */
.gws-builder-shell.is-preview .gws-builder-rev-editor {
    display: none !important;
}

/* ── Balance sheet ─────────────────────────────────────────── */
.gws-builder-fin-wrap {
    overflow-x: auto;
}
.gws-builder-fin {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-family: 'IBM Plex Mono', monospace;
}
.gws-builder-fin th,
.gws-builder-fin td {
    padding: 4px 8px;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
}
.gws-builder-fin thead th {
    background: #2C3E50;
    color: #fff;
    text-align: center;
    font-weight: 600;
    padding: 6px 8px;
}
.gws-builder-fin thead th:first-child {
    text-align: left;
}
.gws-builder-fin-section td {
    background: #f1f5f9;
    color: #2C3E50;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    padding: 6px 8px;
}
.gws-builder-fin-label {
    text-align: left !important;
    font-weight: 500;
}
.gws-builder-fin-growth td {
    color: #64748b;
    font-style: italic;
    font-size: 0.72rem;
    padding-top: 1px;
    padding-bottom: 5px;
}
.gws-builder-fin-growth .pos { color: #059669; }
.gws-builder-fin-growth .neg { color: #dc2626; }

.gws-builder-fin-hidecol {
    width: 28px;
    text-align: center !important;
    padding: 2px 4px !important;
}
.gws-builder-fin-hide {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 4px;
    border-radius: 3px;
    visibility: hidden;
}
.gws-builder-fin tr:hover .gws-builder-fin-hide {
    visibility: visible;
}
.gws-builder-fin-hide:hover {
    background: #fee2e2;
    color: #dc2626;
}
.gws-builder-fin-restore {
    text-align: center;
    padding: 6px !important;
    background: #f8fafc;
}
/* In preview mode, no row-hide affordances + collapse the empty hide column. */
.gws-builder-shell.is-preview .gws-builder-fin-hidecol,
.gws-builder-shell.is-preview .gws-builder-fin-hide,
.gws-builder-shell.is-preview .gws-builder-fin-restore {
    display: none !important;
}

/* ── Image section ─────────────────────────────────────────── */
.gws-builder-image {
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    text-align: center;
}
.gws-builder-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
.gws-builder-image figcaption {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 6px;
    outline: none;
}

/* ── Metrics grid ──────────────────────────────────────────── */
.gws-builder-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.gws-builder-metric {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}
.gws-builder-metric-label {
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.gws-builder-metric-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

/* ── Add-section bar ──────────────────────────────────────── */
.gws-builder-add-bar {
    margin-top: 24px;
    text-align: center;
    position: relative;
}
.gws-builder-add-btn {
    background: #3B7DDD;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 0.82rem;
    cursor: pointer;
}
.gws-builder-add-btn:hover {
    background: #2563eb;
}
.gws-builder-add-menu {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}
.gws-builder-add-menu button,
.gws-builder-add-imgbtn {
    background: #f1f5f9;
    border: 1px solid transparent;
    color: #1e293b;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.gws-builder-add-menu button:hover,
.gws-builder-add-imgbtn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.gws-builder-mini-add {
    margin-top: 8px;
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    padding: 4px 12px;
    font-size: 0.74rem;
    border-radius: 3px;
    cursor: pointer;
}
.gws-builder-mini-add:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.gws-builder-empty {
    color: #94a3b8;
    font-style: italic;
    text-align: center;
    padding: 18px;
    font-size: 0.85rem;
}

.gws-builder-consensus-editor {
    margin-top: 8px;
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
    color: #475569;
}
.gws-builder-consensus-editor input {
    width: 80px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 3px 6px;
    font-family: 'IBM Plex Mono', monospace;
}

/* CSS-only placeholder for contenteditable cells. The previous JS approach
   wrote the placeholder text into the element's textContent and toggled a
   class on focus/blur — that caused the "click outlook, click rating, can't
   type anymore" race because the focus order interleaved with the textContent
   replacements. Trusting :empty::before keeps the data attribute as the only
   source of truth and lets the browser handle caret state correctly. */
[contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}

/* ── Preview mode ─────────────────────────────────────────── */
/* Toggled on the .gws-builder-shell when the user hits Preview.
   Hides every "edit affordance" (toolbars, drag handles, the +Add
   bar, contenteditable outline) so the page approximates what the
   public detail view will render. Empty bound sections are filtered
   out by the JS render loop, not by CSS. */
.gws-builder-shell.is-preview .gws-builder-section-tools,
.gws-builder-shell.is-preview .gws-builder-add-bar,
.gws-builder-shell.is-preview .gws-builder-mini-add,
.gws-builder-shell.is-preview .gws-builder-table-actions,
.gws-builder-shell.is-preview .gws-builder-consensus-editor,
.gws-builder-shell.is-preview .gws-builder-logo-actions,
.gws-builder-shell.is-preview .gws-builder-chart-ctrls {
    display: none !important;
}
.gws-builder-shell.is-preview .gws-builder-section {
    border-color: transparent;
}
.gws-builder-shell.is-preview .gws-builder-section[draggable] {
    cursor: default;
}
.gws-builder-shell.is-preview [contenteditable] {
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.gws-builder-shell.is-preview .gws-builder-narrative:hover {
    border-color: transparent;
}
/* Hide the section wrapper's body padding tweak when no toolbar */
.gws-builder-shell.is-preview .gws-builder-section-body {
    padding: 12px 8px 16px;
}

/* Top toolbar above the builder mount in the manage panel */
.gws-insight-mgr-builder-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
}
.gws-insight-mgr-builder-ticker {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: #2C3E50;
}
.gws-insight-mgr-builder-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #64748b;
    margin-left: 4px;
}
.gws-insight-mgr-builder-date input[type="date"] {
    font-family: inherit;
    font-size: 0.78rem;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
    color: #1e293b;
    cursor: pointer;
}
.gws-insight-mgr-builder-date input[type="date"]:focus {
    outline: 1px solid #3B7DDD;
    border-color: #3B7DDD;
}
.gws-insight-mgr-builder-spacer {
    flex: 1;
}

/* ── AI chat drawer — fixed-position right sidebar ───────────
   Slides in from the right and overlays the page content. The user
   prefers this overlay feel over the previous docked-in-preview
   layout that reflowed everything around it. */
.gws-builder-chat-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -6px 0 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    z-index: 1080;
    transition: right 0.22s ease;
}
.gws-builder-chat-drawer.is-open {
    right: 0;
}
.gws-builder-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #2C3E50;
    color: #fff;
}
.gws-builder-chat-head h6 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gws-builder-chat-head button {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
}
.gws-builder-chat-head button:hover {
    color: #fff;
}

.gws-builder-chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
}
.gws-builder-chat-msg {
    max-width: 88%;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.gws-builder-chat-msg.user {
    align-self: flex-end;
    background: #3B7DDD;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.gws-builder-chat-msg.assistant {
    align-self: flex-start;
    background: #fff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}
.gws-builder-chat-typing {
    align-self: flex-start;
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: italic;
    padding: 4px 8px;
}

.gws-builder-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.gws-builder-chat-input input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    outline: none;
}
.gws-builder-chat-input input:focus {
    border-color: #3B7DDD;
}
.gws-builder-chat-input button {
    background: #3B7DDD;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85rem;
}
.gws-builder-chat-input button:hover {
    background: #2563eb;
}