/* Chart/map prototype (think-cell alternative spike) — authoring surface styles. Served statically
   (scoped .razor.css is gitignored repo-wide, and inline <style> in a nested component is unreliable
   under Razor brace parsing). The rwc- prefix keeps these from colliding with the rest of the pane. */

.rwc-builder { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--rw-surface-raised, #fff); }
.rwc-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rw-border, #e2e5ea); }
.rwc-head-title { font-weight: 600; font-size: 14px; }
.rwc-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.rwc-section-lbl { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rw-text-muted, #6b7280); margin-top: 4px; }

.rwc-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; background: #f4f8ff; border: 1px solid #d3e2f7; border-radius: 6px; }
.rwc-examples-lbl { font-size: 11px; font-weight: 700; color: #2f4f7a; text-transform: uppercase; letter-spacing: .03em; }
.rwc-examples-lbl i { color: #3d6cc0; margin-right: 3px; }
.rwc-example { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #cddcf2; border-radius: 4px; background: #fff; cursor: pointer; font: inherit; font-size: 11px; color: #2f4f7a; }
.rwc-example i { color: #3d6cc0; }
.rwc-example:hover { background: #e8f0fd; border-color: #a9c6ee; }

.rwc-typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rwc-type { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--rw-border, #dfe3e8); border-radius: 6px; background: #fff; cursor: pointer; font-size: 10.5px; color: #46505b; }
.rwc-type i { font-size: 16px; color: #37a686; }
.rwc-type:hover { background: #f2f8f6; }
.rwc-type.sel { border-color: #08594a; background: #e6f2ef; color: #08594a; font-weight: 600; box-shadow: inset 0 0 0 1px #08594a; }
.rwc-type.sel i { color: #08594a; }

.rwc-field { display: flex; flex-direction: column; gap: 3px; }
.rwc-field-label { font-size: 12px; font-weight: 600; color: #3b3b3b; }
.rwc-field-row { display: flex; align-items: center; gap: 6px; }
.rwc-input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; border: 1px solid var(--rw-border, #cfd4da); border-radius: 4px; font: inherit; font-size: 13px; }
.rwc-input:focus { outline: none; border-color: #37a686; box-shadow: 0 0 0 2px rgba(55,166,134,.25); }
.rwc-modeseg { display: inline-flex; border: 1px solid var(--rw-border, #cfd4da); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.rwc-modeopt { padding: 4px 8px; border: 0; background: #fff; cursor: pointer; font: inherit; font-size: 11px; color: #55606b; }
.rwc-modeopt.sel { background: #08594a; color: #fff; }
.rwc-pick { padding: 5px 8px; border: 1px solid var(--rw-border, #cfd4da); border-radius: 4px; background: #fff; cursor: pointer; color: #37a686; }
.rwc-pick:hover { background: #f2f8f6; }

/* The note body MUST be wrapped in a single <span>. This is a flex container, so every inline element
   (<b>, <code>) becomes its own flex item and each text run between them becomes an anonymous one — an
   unwrapped sentence containing markup shatters into narrow side-by-side columns, one word per line. */
.rwc-note { display: flex; gap: 8px; padding: 8px 10px; background: #eef4f2; border: 1px solid #cfe0d9; border-radius: 6px; font-size: 11.5px; color: #35564d; }
.rwc-note i { color: #08594a; margin-top: 2px; flex: none; }
.rwc-note > span { flex: 1; min-width: 0; }
.rwc-note code { background: #dceae5; padding: 0 3px; border-radius: 3px; }

.rwc-series-lbl { text-transform: none; }
.rwc-addseries, .rwc-refresh-preview { border: 1px solid var(--rw-border, #dfe3e8); background: #fff; border-radius: 4px; padding: 2px 8px; cursor: pointer; font: inherit; font-size: 11px; color: #37a686; text-transform: none; letter-spacing: 0; }
.rwc-series { border: 1px solid var(--rw-border, #e2e5ea); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 8px; background: #fafbfc; }
.rwc-series-head { display: flex; align-items: center; justify-content: space-between; }
.rwc-series-n { font-size: 11px; font-weight: 700; color: #6b7280; }
.rwc-series-del { border: 0; background: transparent; cursor: pointer; color: #b3543f; }
.rwc-toolsrow { display: flex; gap: 6px; }
.rwc-tool { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #cfd9d5; border-radius: 4px; background: #f4f8f6; cursor: pointer; font: inherit; font-size: 11.5px; color: #08594a; }
.rwc-tool i { color: #37a686; }
.rwc-tool:hover { background: #e6f2ef; border-color: #a9d6c8; }

.rwc-previewbox { border: 1px solid var(--rw-border, #e2e5ea); border-radius: 6px; padding: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; }
.rwc-preview-host { display: inline-block; }
/* Hide the map's pan/zoom controls in the off-screen render host so they don't appear in the captured PNG. */
#rwc-render-offscreen .k-navigator,
#rwc-render-offscreen .k-zoom-control,
#rwc-render-offscreen .k-map-controls,
#rwc-render-offscreen .k-attribution { display: none !important; }
.rwc-preview-empty { color: #6b7280; font-size: 12px; font-style: italic; padding: 20px; text-align: center; }
.rwc-preview-maptitle { text-align: center; font-weight: 600; font-size: 12px; margin-top: 4px; color: #3b3b3b; }

.rwc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rw-border, #e2e5ea); }
.rwc-foot-actions { display: flex; gap: 8px; }

/* ── Footer Tools popup (Create with AI / Sample Data / Use named ranges) ───── */
.rwc-tools-wrap { position: relative; }
.rwc-foot-tools { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #cfd9d5; border-radius: 4px; background: #f4f8f6; cursor: pointer; font: inherit; font-size: 12px; color: #08594a; }
.rwc-foot-tools:hover { background: #e6f2ef; border-color: #a9d6c8; }
.rwc-foot-tools .rwc-tools-caret { font-size: 10px; }
.rwc-foot-tools.open { background: #e6f2ef; border-color: #08594a; }
.rwc-tools-pop { position: absolute; z-index: 45; bottom: calc(100% + 6px); left: 0; min-width: 210px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--rw-border, #d4d9e0); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,30,45,.16); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.rwc-tools-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; font: inherit; font-size: 12px; color: #28323b; text-align: left; }
.rwc-tools-item:hover { background: #f2f8f6; }
.rwc-tools-item[disabled] { opacity: .6; cursor: default; }
.rwc-tools-item i:first-child { color: #37a686; width: 16px; text-align: center; }
.rwc-tools-item .rwc-tools-sub { margin-left: auto; color: #98a2ad; }
.rwc-sample-list { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 2px; padding: 2px 0 2px 8px; border-left: 2px solid #e6eef2; }

/* ── Preview dock (pinned above the footer; the form scrolls beneath it) ────── */
.rwc-previewdock { flex: 0 0 auto; display: flex; flex-direction: column; background: #fff; border-top: 1px solid var(--rw-border, #e2e5ea); }
.rwc-dock-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #f6f8fa; }
.rwc-dock-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.rwc-dock-toggle i { color: #6b7280; width: 12px; }
.rwc-previewdock .rwc-previewbox { border: 0; border-radius: 0; min-height: 0; padding: 8px 8px 10px; }

/* ── "More charts" tile menu affordance ────────────────────────────────────── */
.rwc-type-more { position: relative; }
.rwc-type i.rwc-type-caret { position: absolute; top: 5px; right: 7px; font-size: 10px; color: #98a2ad; }
.rwc-type-more.sel i.rwc-type-caret { color: #08594a; }
.rwc-type-more.open i.rwc-type-caret { transform: rotate(180deg); }

/* ── Chart-type "More charts" popup (4th tile) ─────────────────────────────── */
.rwc-more-wrap { position: relative; display: flex; }
.rwc-more-wrap .rwc-type { width: 100%; }
.rwc-more-pop { position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; min-width: 190px; background: #fff; border: 1px solid var(--rw-border, #d4d9e0); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,30,45,.16); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.rwc-more-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; font: inherit; font-size: 12px; color: #3b444d; text-align: left; }
.rwc-more-item i { color: #37a686; width: 16px; text-align: center; }
.rwc-more-item:hover { background: #f2f8f6; }
.rwc-more-item.sel { background: #e6f2ef; color: #08594a; font-weight: 600; }

/* ── Sample Data popup (tool) ──────────────────────────────────────────────── */
.rwc-sample-wrap { position: relative; }
.rwc-sample-pop { position: absolute; z-index: 40; bottom: calc(100% + 4px); left: 0; min-width: 230px; max-height: 280px; overflow: auto; background: #fff; border: 1px solid var(--rw-border, #d4d9e0); border-radius: 6px; box-shadow: 0 8px 24px rgba(20,30,45,.16); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.rwc-sample-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; font: inherit; font-size: 12px; color: #3b444d; text-align: left; }
.rwc-sample-item i { color: #3d6cc0; width: 16px; text-align: center; }
.rwc-sample-item:hover { background: #eef4ff; }

/* ── Collapsible panels ────────────────────────────────────────────────────── */
/* flex: 0 0 auto — the panels sit in the .rwc-body flex column; without it they'd shrink to fit and their
   own overflow:hidden (kept for the rounded corners) would clip the content. Pinned to their natural height,
   the panels show everything and .rwc-body does the scrolling instead. */
.rwc-panel { flex: 0 0 auto; border: 1px solid var(--rw-border, #e2e5ea); border-radius: 6px; overflow: hidden; }
.rwc-panel-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: #f6f8fa; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: #38424c; }
.rwc-panel-head i { color: #6b7280; width: 12px; }
.rwc-panel-meta { margin-left: auto; font-weight: 500; font-size: 11px; color: #8a94a0; }
.rwc-panel-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rw-border, #eceff3); }

/* ── Map background segmented control ───────────────────────────────────────── */
.rwc-bgseg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
/* Short, wide segmented buttons: icon beside the label on a single line (not a tall stacked tile) so the
   segmented controls sip task-pane vertical space. */
.rwc-bgopt { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--rw-border, #dfe3e8); border-radius: 6px; background: #fff; cursor: pointer; font: inherit; font-size: 11px; line-height: 1.2; color: #46505b; }
.rwc-bgopt i { font-size: 12px; color: #37a686; }
.rwc-bgopt.sel { border-color: #08594a; background: #e6f2ef; color: #08594a; font-weight: 600; box-shadow: inset 0 0 0 1px #08594a; }
.rwc-bgopt.sel i { color: #08594a; }

.rwc-imgrow { display: flex; flex-wrap: wrap; gap: 6px; }
.rwc-file { cursor: pointer; }

/* ── Map tile-source (advanced) disclosure ─────────────────────────────────── */
.rwc-tilesrc { display: flex; flex-direction: column; gap: 8px; }
.rwc-tilesrc-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: #6b7280; }
.rwc-tilesrc-head i { color: #9aa4af; width: 10px; font-size: 11px; }
.rwc-tilesrc-head:hover { color: #38424c; }
.rwc-tilesrc-body { display: flex; flex-direction: column; gap: 10px; }

/* ── Map data-layer headers + template button ──────────────────────────────── */
.rwc-layerhead { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: #38424c; }
.rwc-layerhead i { color: #37a686; margin-right: 4px; }
.rwc-mini { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid #cfd9d5; border-radius: 4px; background: #f4f8f6; cursor: pointer; font: inherit; font-size: 11px; color: #08594a; }
.rwc-mini:hover { background: #e6f2ef; }

/* ── Combo per-series controls ─────────────────────────────────────────────── */
/* ── Sankey appearance toggles ───────────────────────────────────────────────── */
.rwc-seg3 { grid-template-columns: repeat(3, 1fr); }
.rwc-optlbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rw-text-muted, #6b7280); }
.rwc-optrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rwc-numgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rwc-numgrid label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: #6b7280; }
.rwc-numgrid input { width: 100%; }
/* Pie centre-hole slider: the track takes the free width, the readout is a fixed, non-shrinking
   column so the slider stops resizing as the label goes "None (pie)" → "45%". */
.rwc-holerow { display: flex; align-items: center; gap: 8px; }
.rwc-holeslider { flex: 1 1 auto; min-width: 0; accent-color: #37a686; }
.rwc-holeval { flex: 0 0 62px; font-size: 10.5px; color: #6b7280; text-align: right; }

.rwc-flowmeta { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: #55606b; }
.rwc-flowmeta i { color: #37a686; margin-right: 4px; }

.rwc-comborow { display: flex; align-items: center; gap: 10px; }
.rwc-combotype { flex: 0 0 auto; padding: 4px 6px; }
.rwc-axischk { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #55606b; }

/* ── Popup menu items: force LEFT alignment with a fixed icon column ──────────
   Flex rows align via justify-content (not text-align); a broader button rule
   was centring these. Scoped (two-class) selectors win on specificity, and a
   fixed-width icon column keeps every label starting at the same x. */
.rwc-more-pop .rwc-more-item,
.rwc-tools-pop .rwc-tools-item,
.rwc-sample-list .rwc-sample-item {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}
.rwc-more-pop .rwc-more-item > i,
.rwc-tools-pop .rwc-tools-item > i:first-child,
.rwc-sample-list .rwc-sample-item > i {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
}
/* Sample Data submenu: indented, lighter, clearly nested under its parent row. */
.rwc-sample-list { background: #fbfcfd; border-radius: 4px; }
.rwc-sample-list .rwc-sample-item { padding: 6px 8px; font-size: 11.5px; color: #46505b; }
.rwc-sample-list .rwc-sample-item > i { color: #3d6cc0; }
.rwc-tools-pop .rwc-tools-item .rwc-tools-sub { flex: 0 0 auto; width: auto; }

/* ── Tile-map picker (interactive OpenStreetMap authoring aid) ──────────────── */
.rwc-map-picker { display: flex; flex-direction: column; gap: 8px; }
.rwc-map-search { display: flex; align-items: center; gap: 6px; }
.rwc-map-search > i { color: #6b7280; }
.rwc-map-searchbox { flex: 1 1 auto; }
.rwc-map-searcherr { font-size: 11px; color: #b3543f; }
.rwc-map-canvas { position: relative; width: 100%; height: 200px; border: 1px solid var(--rw-border, #cfd9d5); border-radius: 6px; overflow: hidden; background: #e8eef3; }
.rwc-map-host { position: relative; }
.rwc-map-viewport { position: absolute; inset: 0; cursor: grab; touch-action: none; overflow: hidden; }
.rwc-map-viewport.rwc-map-grabbing { cursor: grabbing; }
.rwc-map-world { position: absolute; inset: 0; will-change: transform; }
.rwc-map-world img { pointer-events: none; }
.rwc-map-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.rwc-map-zoombtn { width: 26px; height: 26px; border: 1px solid #b9c6c1; background: #fff; color: #08594a; font-size: 16px; line-height: 1; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.rwc-map-zoombtn:hover { background: #e6f2ef; }
.rwc-map-coords { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #55606b; }
.rwc-map-coords i { color: #37a686; margin-right: 3px; }
.rwc-mapfields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.rwc-mapfields label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: #6b7280; }
.rwc-mapfields input { width: 100%; }