/* ========================================================================== Telene Grid — Stylesheet -------------------------------------------------------------------------- Intent: - Preserve your existing visual decisions: rounded panels, soft shadows, compact controls, 46px vertical table tabs, 248px sidebar, 320px palette, 58px topbar, 380px analysis blocks, 1800x1200 board, 28px grid. - Remove the layout conflicts that made the workspace collapse. - Add light/dark theme tokens in one place. Dark mode: Add class="theme-dark" to or . ========================================================================== */ /* ========================================================================== 1. THEME TOKENS ========================================================================== */ :root { color-scheme: light; /* Layout */ --sidebar-w: 248px; --right-palette-w: 320px; --topbar-h: 58px; /* Radii */ --border-radius: 12px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 24px; --radius-pill: 999px; /* Typography */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-xs: 11px; --font-sm: 12px; --font-md: 13px; --font-lg: 15px; --font-xl: 18px; /* Brand */ --accent: #567edc; --accent-light: #8b9cf5; --accent-strong: #365db8; --accent-soft: #eef4ff; --accent-border: #c9d8f2; --primary-color: #567edc; /* App surfaces */ --app-bg: #f5f7fb; --main-bg: #f5f7fb; --sidebar-bg: rgba(255, 255, 255, 0.88); --panel-bg: rgba(255, 255, 255, 0.88); --panel-solid: #ffffff; --panel-soft: #f8fafc; --panel-muted: #eef2f8; --card-bg: #ffffff; --bg-light: #f8fafc; --hover-bg: #eef4ff; /* Text */ --text-main: #1f2937; --text-color: #111827; --text-muted: #6b7280; --muted: #6b7280; --muted-text: #6b7280; --text-light: #64748b; --text-inverse: #ffffff; /* Borders / shadows */ --border: #dde3e9; --border-color: #dde3e9; --border-color-soft: #e3e8f0; --border-strong: #c9d8f2; --border-subtle: #e5e7eb; --shadow: 0 10px 30px rgba(15, 23, 42, 0.06); --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08); --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06); --shadow-hover: 0 18px 45px rgba(15, 23, 42, 0.12); --story-accent: rgb(37, 99, 235); /* Status */ --warning-bg: #fff7ed; --warning-border: rgba(245, 158, 11, 0.38); --warning-text: #92400e; --danger-bg: #fef2f2; --danger-text: #b91c1c; --success-bg: #ecfdf5; --success-text: #047857; /* Table */ --table-header-bg: #f5f7f9; --table-border: #e2e4e8; --table-hover: #f9fafb; --table-selection: #eef2ff; /* Workspace canvas */ --canvas-base: #f8fafc; --canvas-grid: rgba(148, 163, 184, 0.2); --canvas-glow: rgba(86, 126, 220, 0.08); /* Block Intents */ --intent-describe: #567edc; --intent-relate: #7c3aed; --intent-compare: #f59e0b; --intent-associate: #cef12f; --intent-predict: #22c55e; --intent-filter: #06b6d4; --intent-group: #ec4899; /* Cursors */ --cursor-col-resize: url("/app/grid/assets/cursors/col-resize.svg") 16 16, col-resize; --cursor-zoom-in: url("/app/grid/assets/cursors/zoom-in.svg") 12 12, zoom-in; --cursor-zoom-out: url("/app/grid/assets/cursors/zoom-out.svg") 12 12, zoom-out; --cursor-grab: url("/app/grid/assets/cursors/grab.svg") 16 16, grab; --cursor-grabbing: url("/app/grid/assets/cursors/grabbing.svg") 16 16, grabbing; } .theme-dark { color-scheme: dark; --accent: #8ba7ff; --accent-light: #a8b8ff; --accent-strong: #c5d0ff; --accent-soft: rgba(139, 167, 255, 0.14); --accent-border: rgba(139, 167, 255, 0.34); --primary-color: #8ba7ff; --app-bg: #0b0f21; --main-bg: #0b1020; --sidebar-bg: rgba(17, 24, 39, 0.88); --panel-bg: rgba(17, 24, 39, 0.88); --panel-solid: #111827; --panel-soft: #141c2e; --panel-muted: #1e293b; --card-bg: #111827; --bg-light: #141c2e; --hover-bg: rgba(139, 167, 255, 0.12); --text-main: #f8fafc; --text-color: #f8fafc; --text-muted: #a5b4c7; --muted: #a5b4c7; --muted-text: #a5b4c7; --text-light: #cbd5e1; --text-inverse: #0f172a; --border: rgba(148, 163, 184, 0.24); --border-color: rgba(148, 163, 184, 0.24); --border-color-soft: rgba(148, 163, 184, 0.16); --border-strong: rgba(203, 213, 225, 0.36); --border-subtle: rgba(148, 163, 184, 0.16); --shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.24); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.32); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28); --shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.42); --warning-bg: rgba(245, 158, 11, 0.14); --warning-border: rgba(245, 158, 11, 0.36); --warning-text: #fbbf24; --danger-bg: rgba(239, 68, 68, 0.12); --danger-text: #fca5a5; --success-bg: rgba(16, 185, 129, 0.12); --success-text: #6ee7b7; --table-header-bg: #192236; --table-border: rgba(148, 163, 184, 0.18); --table-hover: rgba(255, 255, 255, 0.04); --table-selection: rgba(139, 167, 255, 0.16); --canvas-base: #151518; --canvas-grid: rgba(245, 245, 245, 0.20); --canvas-glow: rgba(255, 255, 255, 0.09); } /* .theme-dark { color-scheme: dark; --accent: #a3a3a3; --accent-light: #c4c4c4; --accent-strong: #e5e5e5; --accent-soft: rgba(163, 163, 163, 0.14); --accent-border: rgba(163, 163, 163, 0.34); --primary-color: #a3a3a3; --app-bg: #0f0f10; --main-bg: #121214; --sidebar-bg: rgba(24, 24, 27, 0.9); --panel-bg: rgba(24, 24, 27, 0.9); --panel-solid: #18181b; --panel-soft: #202024; --panel-muted: #2a2a2f; --card-bg: #1b1b1f; --bg-light: #202024; --hover-bg: rgba(255, 255, 255, 0.07); --text-main: #f5f5f5; --text-color: #f5f5f5; --text-muted: #a1a1aa; --muted: #a1a1aa; --muted-text: #a1a1aa; --text-light: #d4d4d8; --text-inverse: #111111; --border: rgba(212, 212, 216, 0.18); --border-color: rgba(212, 212, 216, 0.18); --border-color-soft: rgba(212, 212, 216, 0.11); --border-strong: rgba(228, 228, 231, 0.32); --border-subtle: rgba(212, 212, 216, 0.11); --shadow: 0 10px 30px rgba(0, 0, 0, 0.34); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.38); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.34); --shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.48); --warning-bg: rgba(245, 158, 11, 0.13); --warning-border: rgba(245, 158, 11, 0.34); --warning-text: #fbbf24; --danger-bg: rgba(239, 68, 68, 0.12); --danger-text: #fca5a5; --success-bg: rgba(16, 185, 129, 0.12); --success-text: #6ee7b7; --table-header-bg: #242428; --table-border: rgba(212, 212, 216, 0.13); --table-hover: rgba(255, 255, 255, 0.045); --table-selection: rgba(163, 163, 163, 0.18); --canvas-base: #151518; --canvas-grid: rgba(212, 212, 216, 0.09); --canvas-glow: rgba(255, 255, 255, 0.06); }*/ /* ========================================================================== 2. BASE ========================================================================== */ * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { overflow: hidden; font-family: var(--font-ui); font-size: var(--font-md); color: var(--text-main); background: var(--app-bg); } button, input, select, textarea { font: inherit; } button { color: inherit; } .hidden, [hidden] { display: none !important; } .file-upload-input { display: none; } /* ========================================================================== 3. APP SHELL ========================================================================== */ #app-container { height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "top top" "sidebar main"; overflow: hidden; background: var(--app-bg); } /* #top-nav { grid-area: top; height: var(--topbar-h); min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 18px; border-bottom: 1px solid var(--border-color-soft); background: var(--sidebar-bg); backdrop-filter: blur(12px); z-index: 10; } .theme-dark #top-nav { }*/ #top-nav { grid-area: top; height: var(--topbar-h); min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 18px; border-bottom: 1px solid var(--border-color-soft); background: var(--sidebar-bg); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); z-index: 30; } .theme-dark #top-nav { background: var(--sidebar-bg); } #project-title { display: flex; align-items: center; font-size: var(--font-lg); font-weight: 700; gap: 6px; letter-spacing: 0.12em; color: var(--text-main); caret-color: transparent; } #sidebar { grid-area: sidebar; position: relative; z-index: 20; min-height: 0; padding: 12px; overflow: hidden; border-right: 1px solid var(--border-color-soft); background: var(--sidebar-bg); backdrop-filter: blur(12px); } #sidebar.is-collapsed { overflow: visible; } #main-content.workspace-layout { grid-area: main; position: relative; z-index: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--right-palette-w); overflow: hidden; background: var(--main-bg); padding: 10px; } /* ========================================================================== COLLAPSIBLE LEFT SIDEBAR ========================================================================== */ html.left-sidebar-collapsed { --sidebar-w: 56px; } #app-container { transition: grid-template-columns 160ms ease; } #sidebar { transition: padding 160ms ease; } /* -------------------------------------------------------------------------- Collapse / expand control -------------------------------------------------------------------------- */ .sidebar-collapse-btn { position: absolute; top: 0px; right: -3px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; z-index: 30; } .sidebar-collapse-btn:hover { background: var(--hover-bg); color: var(--text-main); } .sidebar-collapse-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* * Leave room for the toggle above the normal sidebar content. */ #data-view-sidebar, #dashboard-view-sidebar { padding-top: 28px; } /* -------------------------------------------------------------------------- Collapsed rail -------------------------------------------------------------------------- */ #sidebar.is-collapsed { padding-left: 8px; padding-right: 8px; overflow: visible; } #sidebar.is-collapsed .sidebar-collapse-btn { top: 8px; right: 20%; transform: translateX(50%); } /* Hide the normal project header. */ #sidebar.is-collapsed .project-tree-header { display: none; } /* * Keep Datasets and Workspaces themselves, * but convert them into compact rail actions. */ #sidebar.is-collapsed .project-tree-section { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; } /* Actual tree contents are hidden in rail mode. */ #sidebar.is-collapsed .project-tree-children, #sidebar.is-collapsed .project-tree-add-btn { display: none; } /* -------------------------------------------------------------------------- Dataset / Workspace rail buttons -------------------------------------------------------------------------- */ /* Workspaces uses .project-tree-section-title directly. * Datasets contains .project-tree-section-toggle inside its title row. */ #sidebar.is-collapsed .project-tree-section-title, #sidebar.is-collapsed .project-tree-section-toggle { width: 36px; min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0; margin: 0; border-radius: 9px; } /* Dataset has an outer title-row wrapper. * Prevent that wrapper from behaving like a full-width row. */ #sidebar.is-collapsed .project-tree-section-title-row { width: 36px; min-width: 36px; } /* Hide the normal caret and text labels. */ #sidebar.is-collapsed .project-tree-section-title .tree-caret, #sidebar.is-collapsed .project-tree-section-title span:not(.tree-caret), #sidebar.is-collapsed .project-tree-section-toggle .tree-caret, #sidebar.is-collapsed .project-tree-section-toggle span:not(.tree-caret) { display: none; } /* Dataset rail glyph. */ #sidebar.is-collapsed .project-tree-section[data-tree-section="datasets"] .project-tree-section-toggle::before { content: "○"; font-size: 18px; line-height: 1; color: var(--text-muted); } /* Workspace rail glyph. */ #sidebar.is-collapsed .project-tree-section[data-tree-section="workspaces"] .project-tree-section-title::before { content: "◇"; font-size: 18px; line-height: 1; color: var(--text-muted); } #sidebar.is-collapsed .project-tree-section-toggle:hover, #sidebar.is-collapsed .project-tree-section[data-tree-section="workspaces"] .project-tree-section-title:hover { background: var(--hover-bg); } #sidebar.is-collapsed .project-tree-section-toggle:hover::before, #sidebar.is-collapsed .project-tree-section[data-tree-section="workspaces"] .project-tree-section-title:hover::before { color: var(--text-main); } /* -------------------------------------------------------------------------- Old dashboard sidebar -------------------------------------------------------------------------- */ #sidebar.is-collapsed #dashboard-view-sidebar { overflow: hidden; } #sidebar.is-collapsed #dashboard-view-sidebar>* { display: none; } /* -------------------------------------------------------------------------- User band in collapsed rail -------------------------------------------------------------------------- */ #sidebar.is-collapsed .user-band { left: 4px; right: 4px; bottom: 8px; width: auto; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 2px; border-radius: 12px; overflow: visible; } #sidebar.is-collapsed .user-meta { display: none; } #sidebar.is-collapsed .user-avatar { width: 28px; min-width: 28px; height: 28px; font-size: 12px; } #sidebar.is-collapsed .user-menu-btn { width: 24px; min-width: 24px; height: 20px; padding: 0; line-height: 1; } /* Account menu opens to the right of the collapsed rail. */ #sidebar.is-collapsed .user-menu { position: absolute; left: calc(100% + 8px); right: auto; bottom: 0; width: max-content; min-width: 170px; z-index: 100; } /* ========================================================================== 3.1 Dark/Light Theme ========================================================================== */ .top-nav-actions { display: flex; align-items: center; gap: 8px; } .topbar-icon-btn { box-sizing: border-box; font: inherit; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border-color-soft); border-radius: var(--radius-pill); background: var(--panel-solid); color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .topbar-icon-btn:hover { background: var(--hover-bg); color: var(--accent); border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-1px); } .topbar-icon-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .topbar-icon-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); } .topbar-icon-svg { width: 16px; height: 16px; display: block; color: currentColor; } .topbar-icon-btn-symbol { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 15px; line-height: 1; font-weight: 700; } /*Usage button on top nav */ .usage-ring-btn { position: relative; padding: 0; align-items: center; justify-content: center; } .usage-ring-svg { width: 24px; height: 24px; display: block; } .usage-ring-track, .usage-ring-progress { fill: none; stroke-width: 1.6; } .usage-ring-track { stroke: var(--accent-border); opacity: 0.5; } .usage-ring-progress { stroke: var(--accent-strong); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 180ms ease; } .usage-ring-dot { fill: currentColor; opacity: 0.95; } /*usage popover*/ .grid-usage-popover { position: fixed; z-index: 1000; width: 220px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--panel-solid); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); } .grid-usage-popover-title { margin-bottom: 8px; font-size: 12px; font-weight: 650; } .grid-usage-popover-row { display: flex; align-items: center; justify-content: space-between; min-height: 27px; font-size: 12px; } .grid-usage-popover-row span { opacity: 0.72; } .grid-usage-popover-row strong { font-weight: 600; font-variant-numeric: tabular-nums; } #theme-toggle-icon { font-size: 16px; } #open-settings-btn .topbar-icon-btn-symbol { transform: translateY(-0.5px); } /* ========================================================================== 4. BUTTONS / UTILITY COMPONENTS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; width: fit-content; border: none; border-radius: var(--border-radius); padding: 10px 18px; /*background-color: #e0e0e0;*/ color: var(--text-color); font-size: 14px; font-weight: 500; cursor: pointer; gap: 3px; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { background-color: #9c66e3; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .btn-sm { font-size: var(--font-sm); padding: 8px 11px; } .btn-secondary { /*background-color: #e0e0e0;*/ color: var(--text-color); } .btn-secondary:hover { background-color: #d0d0d0; } .btn-primary { background: var(--accent); color: var(--text-inverse); } .card { background-color: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 16px; transition: box-shadow 0.3s ease; } .card:hover { box-shadow: var(--shadow-hover); } .stage-eyebrow { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .selection-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--font-sm); font-weight: 600; white-space: nowrap; } /* ========================================================================== 4.1 SETTINGS MODAL Uses Telene theme tokens, so light/dark mode applies automatically. ========================================================================== */ .settings-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(4px); } .theme-dark .settings-overlay { background: rgba(0, 0, 0, 0.58); } .settings-modal { width: min(900px, 96vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--panel-solid); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-hover); overflow: hidden; } .settings-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border-color-soft); background: var(--panel-solid); } .settings-title { font-family: var(--font-ui); font-size: var(--font-lg); font-weight: 800; color: var(--text-main); } .settings-subtitle { margin-top: 2px; font-family: var(--font-ui); font-size: var(--font-sm); color: var(--text-muted); } .settings-close-btn, .settings-primary-btn, .settings-secondary-btn { border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--font-ui); font-size: var(--font-sm); font-weight: 700; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; } .settings-close-btn, .settings-secondary-btn { border: 1px solid var(--border-color); background: var(--panel-soft); color: var(--text-main); } .settings-close-btn:hover, .settings-secondary-btn:hover { background: var(--hover-bg); border-color: var(--accent-border); } .settings-primary-btn { border: 1px solid var(--accent); background: var(--accent); color: var(--text-inverse); } .settings-primary-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .settings-close-btn:active, .settings-primary-btn:active, .settings-secondary-btn:active { transform: translateY(1px); } .settings-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 0; overflow: hidden; background: var(--panel-solid); } .settings-tabs { padding: 12px; border-right: 1px solid var(--border-color-soft); background: var(--panel-soft); } .settings-tab-btn { width: 100%; border: 0; background: transparent; color: var(--text-muted); text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--font-md); font-weight: 700; cursor: pointer; transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; } .settings-tab-btn:hover { background: var(--hover-bg); color: var(--text-main); } .settings-tab-btn.is-active { background: var(--panel-solid); color: var(--text-main); box-shadow: var(--shadow-sm); } .settings-content { min-height: 0; overflow: auto; padding: 16px; background: var(--panel-solid); } .settings-section { display: flex; flex-direction: column; gap: 14px; } .settings-section-title { font-family: var(--font-ui); font-size: var(--font-md); font-weight: 800; color: var(--text-main); } .settings-section-text { margin-top: 3px; font-family: var(--font-ui); font-size: var(--font-sm); line-height: 1.45; color: var(--text-muted); } .settings-group { border: 1px solid var(--border-color-soft); border-radius: var(--radius-md); background: var(--card-bg); overflow: hidden; box-shadow: var(--shadow-sm); } .settings-group-title { padding: 10px 12px; font-family: var(--font-ui); font-size: var(--font-sm); font-weight: 800; color: var(--text-main); background: var(--panel-soft); border-bottom: 1px solid var(--border-color-soft); } .settings-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-main); } .settings-row:last-child { border-bottom: 0; } .settings-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .settings-row-label { font-family: var(--font-ui); font-size: var(--font-sm); font-weight: 700; color: var(--text-main); } .settings-row-description { font-family: var(--font-ui); font-size: var(--font-xs); color: var(--text-muted); } .settings-input, .settings-select { width: 120px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--panel-solid); color: var(--text-main); padding: 6px 8px; font-family: var(--font-ui); font-size: var(--font-sm); } .settings-input:focus, .settings-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .settings-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .settings-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } .settings-placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 18px; background: var(--panel-soft); color: var(--text-muted); font-family: var(--font-ui); font-size: var(--font-md); } .settings-color-control { display: flex; align-items: center; gap: 8px; } .settings-color-input { width: 34px; height: 30px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--panel-solid); padding: 2px; cursor: pointer; } .settings-color-text { width: 92px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--panel-solid); color: var(--text-main); padding: 6px 8px; font-family: var(--font-ui); font-size: var(--font-sm); } .settings-color-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /*Workspace color settings*/ .settings-color-control { display: inline-flex; align-items: center; gap: 8px; } .settings-color-control input[type="color"] { width: 38px; height: 30px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.55); border-radius: 8px; background: transparent; cursor: pointer; } .settings-color-text { width: 92px; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.55); background: rgba(255, 255, 255, 0.84); color: #0f172a; font-size: 12px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } .settings-color-text:focus { outline: none; border-color: rgba(124, 58, 237, 0.65); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14); } /* Compact layout for smaller screens */ @media (max-width: 720px) { .settings-modal { width: 96vw; max-height: 94vh; } .settings-body { grid-template-columns: 1fr; } .settings-tabs { display: flex; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-color-soft); } .settings-tab-btn { width: auto; white-space: nowrap; } .settings-row { grid-template-columns: 1fr; align-items: start; } .settings-input, .settings-select { width: 100%; } } /* ========================================================================== 5. LEFT PROJECT TREE SIDEBAR ========================================================================== */ #data-view-sidebar, .project-tree-sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding-bottom: 82px; } .project-tree-header { flex: 0 0 auto; padding: 10px 10px 5px; border: 1px solid var(--border-color); border-radius: 18px; background: rgba(255, 255, 255, 0.75); box-shadow: var(--shadow-sm); } .theme-dark .project-tree-header { background: rgba(17, 24, 39, 0.75); } .project-tree-kicker { margin-bottom: 1px; font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-text); } .project-tree-title-row { display: flex; align-items: center; gap: 8px; } .project-tree-title { flex: 1; min-width: 0; border: none; background: transparent; text-align: left; padding: 0; font-size: 15px; font-weight: 750; color: var(--text-color); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-tree-menu-btn { width: 28px; height: 28px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--panel-solid); cursor: pointer; color: var(--text-muted); } .project-tree-section { flex: 0 0 auto; display: grid; gap: 6px; min-width: 0; } .project-tree-section-title-row { display: flex; align-items: center; gap: 8px; } .project-tree-section-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* dataset trash button */ /* dataset trash modal */ .project-trash-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color); } .project-trash-tab { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; opacity: 0.68; border-bottom: 2px solid transparent; } .project-trash-tab.is-active { opacity: 1; border-bottom-color: currentColor; } .dataset-trash-modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--panel-bg, #ffffff); ; } .dataset-trash-modal-card { width: min(640px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--border-subtle); background: var(--surface-raised); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); } .dataset-trash-modal-card .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } .dataset-trash-modal-card .modal-body { padding: 16px; overflow: auto; } .dataset-trash-modal-card .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border-subtle); } .dataset-trash-btn { flex: 0 0 auto; margin-left: auto; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .dataset-trash-icon { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .dataset-trash-modal-card { width: min(640px, calc(100vw - 32px)); } .dataset-trash-list { display: flex; flex-direction: column; gap: 10px; } .dataset-trash-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-raised); } .dataset-trash-main { min-width: 0; } .dataset-trash-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dataset-trash-meta { margin-top: 3px; font-size: 12px; color: var(--text-muted); } .dataset-trash-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /*end of trash*/ .project-tree-section.is-file-dragover { outline: 2px dashed rgba(86, 126, 220, 0.55); outline-offset: 4px; border-radius: 14px; background: rgba(86, 126, 220, 0.06); } .project-tree-section-title { border: none; background: transparent; display: flex; gap: 6px; align-items: center; padding: 6px 4px; font-size: var(--font-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-text); cursor: pointer; } .project-tree-children { display: grid; gap: 5px; min-width: 0; } .project-tree-section.is-collapsed .project-tree-children, .project-tree-section.is-collapsed .project-tree-add-btn { display: none; } .tree-caret { display: inline-block; transition: transform 0.15s ease; } .project-tree-section.is-collapsed .tree-caret { transform: rotate(-90deg); } .project-tree-item { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; border: 1px solid transparent; background: transparent; border-radius: 12px; /*padding: 8px 9px;*/ text-align: left; cursor: pointer; } .project-tree-item:hover { background: rgba(15, 23, 42, 0.04); } .theme-dark .project-tree-item:hover { background: rgba(255, 255, 255, 0.06); } .project-tree-item.is-active { background: rgba(86, 126, 220, 0.09); border-color: rgba(86, 126, 220, 0.28); } .tree-item-icon { color: var(--muted-text); line-height: 1.4; } .tree-item-main { min-width: 0; display: grid; gap: 2px; } .tree-item-title { font-size: var(--font-md); font-weight: 650; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree-item-meta-row { min-width: 0; display: flex; align-items: center; gap: 8px; } .tree-item-meta-row .tree-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dataset-demo-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 16px; padding: 1px 6px; border: 1px solid rgba(86, 126, 220, 0.28); border-radius: 999px; background: rgba(86, 126, 220, 0.08); color: rgb(68, 101, 177); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; } .theme-dark .dataset-demo-badge { border-color: rgba(139, 166, 235, 0.34); background: rgba(139, 166, 235, 0.12); color: rgb(174, 194, 244); } .dataset-demo-badge--tab { margin-left: 4px; } .tree-item-meta { font-size: var(--font-xs); color: var(--muted-text); } .project-tree-add-btn { border: 1px dashed var(--border-color); border-radius: 12px; background: rgba(255, 255, 255, 0.6); padding: 8px 10px; text-align: left; color: var(--muted-text); cursor: pointer; } .theme-dark .project-tree-add-btn { background: rgba(255, 255, 255, 0.04); } .project-tree-add-btn:hover { color: var(--text-color); border-color: rgba(86, 126, 220, 0.45); background: rgba(86, 126, 220, 0.06); } .project-tree-empty { padding: 8px 10px; color: var(--muted-text); font-size: var(--font-sm); } .dataset-tree-item.is-saving { cursor: progress; } .dataset-tree-item.is-saving .tree-item-title { opacity: 0.8; } .dataset-tree-item.is-saving .tree-item-meta { font-weight: 500; } .dataset-save-spinner { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dataset-save-spin 0.75s linear infinite; } @keyframes dataset-save-spin { to { transform: rotate(360deg); } } #add-dataset-tree-btn.is-onboarding-pulse { animation: grid-onboarding-add-dataset 1.15s ease-in-out 3; } @keyframes grid-onboarding-add-dataset { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); } } .workspace-tree-item.is-busy { cursor: progress; } .workspace-tree-item.is-busy .tree-item-title { opacity: 0.8; } .workspace-tree-item.is-busy .tree-item-meta { font-weight: 500; } .project-tree-spinner { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: project-tree-spin 0.75s linear infinite; } @keyframes project-tree-spin { to { transform: rotate(360deg); } } .project-tree-loading { display: grid; gap: 7px; padding: 4px 2px; } .project-tree-skeleton-row { height: 34px; border-radius: 12px; background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.26), rgba(148, 163, 184, 0.12)); background-size: 220% 100%; animation: telene-tree-skeleton 1.2s ease-in-out infinite; } .project-tree-skeleton-row.is-short { width: 72%; } .project-tree-children.is-refreshing { position: relative; } .project-tree-children.is-refreshing::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent, #567edc); opacity: 0.7; animation: telene-tree-refresh-pulse 0.9s ease-in-out infinite; } .project-tree-error { padding: 8px 10px; border-radius: 12px; font-size: var(--font-sm); color: var(--danger-text, #b91c1c); background: rgba(239, 68, 68, 0.08); } @keyframes telene-tree-skeleton { from { background-position: 120% 0; } to { background-position: -120% 0; } } @keyframes telene-tree-refresh-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 0.9; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .project-tree-skeleton-row, .project-tree-children.is-refreshing::after { animation: none; } } .project-menu-popover, .project-picker-popover { position: fixed; z-index: 9999; width: 230px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16); padding: 8px; } .project-menu-popover button, .project-picker-popover button { width: 100%; border: none; background: transparent; border-radius: 10px; padding: 9px 10px; text-align: left; cursor: pointer; color: var(--text-main); } .project-menu-popover button:hover, .project-picker-popover button:hover { background: rgba(15, 23, 42, 0.05); } .project-dataset-context-menu button:hover, .project-workspace-context-menu button:hover { background: rgba(15, 23, 42, 0.05); } .project-menu-popover button.is-danger { color: var(--danger-text, #b91c1c); } .project-dataset-context-menu button.is-danger { color: var(--danger-text, #b91c1c); } .project-workspace-context-menu button.is-danger { color: var(--danger-text, #b91c1c); } .project-menu-popover button.is-danger:hover { background: var(--danger-text, #b91c1c); color: white; } .project-dataset-context-menu button.is-danger:hover { background: var(--danger-text, #b91c1c); color: white; } .project-workspace-context-menu button.is-danger:hover { background: var(--danger-text, #b91c1c); color: white; } .theme-dark .project-menu-popover button:hover, .theme-dark .project-picker-popover button:hover, .theme-dark .project-dataset-context-menu button:hover, .theme-dark .project-workspace-context-menu button:hover { background: rgba(255, 255, 255, 0.06); } .project-picker-title { font-size: var(--font-sm); font-weight: 750; color: var(--muted-text); padding: 6px 10px 8px; } .project-picker-popover small { display: block; margin-top: 2px; color: var(--muted-text); } .project-picker-empty { padding: 10px; color: var(--muted-text); font-size: var(--font-sm); } .add-dataset-popover { min-width: 248px; padding: 6px; } .add-dataset-popover-button { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; } .add-dataset-popover-button:hover, .add-dataset-popover-button:focus-visible { background: var(--hover-bg); } .add-dataset-popover-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--text-secondary); } .dataset-menu-svg { display: block; width: 19px; height: 19px; } .add-dataset-popover-label { min-width: 0; white-space: nowrap; } .add-dataset-popover-separator { height: 1px; margin: 5px 8px; background: var(--border-subtle); } .add-dataset-connector-row { display: flex; align-items: center; width: 100%; gap: 2px; } .add-dataset-connector-row>[data-action] { flex: 1 1 auto; min-width: 0; width: auto; } .add-dataset-connector-account { flex: 0 0 auto; width: auto; min-width: 0; margin-left: auto; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 0.75rem; color: var(--text-muted); letter-spacing: -0.5px; text-decoration: underline; white-space: nowrap; cursor: pointer; } .add-dataset-connector-account:hover { background: var(--hover-bg); color: var(--text-main); } /*excel import dialog*/ .excel-import-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 24px; background: rgb(15 23 42 / 48%); backdrop-filter: blur(4px); } .excel-import-dialog { width: min(960px, 100%); max-height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color, #dbe3ef); border-radius: 16px; background: var(--panel-bg, #fff); box-shadow: 0 24px 70px rgb(15 23 42 / 24%); } .excel-import-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border-color, #e2e8f0); } .excel-import-kicker { margin-bottom: 4px; color: #64748b; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .excel-import-header h2 { margin: 0; font-size: 20px; } .excel-import-close { border: 0; background: transparent; color: inherit; font-size: 26px; cursor: pointer; } .excel-import-controls { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(190px, 1fr) auto; align-items: end; gap: 12px; padding: 16px 22px; } .excel-import-controls label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; } .excel-import-controls small { color: #64748b; font-weight: 400; } .excel-import-controls select, .excel-import-controls input, .excel-import-preview-btn { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px; background: var(--panel-bg, #fff); color: inherit; } .excel-import-preview-btn { cursor: pointer; } .excel-import-summary { padding: 0 22px 12px; color: #64748b; font-size: 13px; } .excel-import-preview-wrap { min-height: 220px; overflow: auto; margin: 0 22px; border: 1px solid var(--border-color, #dbe3ef); border-radius: 10px; } .excel-import-preview { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; } .excel-import-preview th, .excel-import-preview td { max-width: 220px; padding: 8px 10px; overflow: hidden; border-right: 1px solid var(--border-color, #e2e8f0); border-bottom: 1px solid var(--border-color, #e2e8f0); text-align: left; text-overflow: ellipsis; white-space: nowrap; } .excel-import-preview th { position: sticky; top: 0; z-index: 1; background: var(--panel-muted-bg, #f8fafc40); font-weight: 700; } .excel-import-message { min-height: 20px; margin: 10px 22px 0; color: #b42318; font-size: 13px; } .excel-import-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; } .excel-import-actions button { min-height: 38px; padding: 8px 14px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px; cursor: pointer; } .excel-import-confirm { border-color: #1e85fb !important; background: #1e85fb; color: #fff; } .excel-import-confirm:disabled { cursor: not-allowed; opacity: .5; } .csv-import-controls { display: flex; align-items: flex-end; gap: 12px; padding: 16px 22px; } .csv-import-controls label { width: min(320px, 100%); display: grid; gap: 6px; font-size: 13px; font-weight: 600; } .csv-import-controls select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px; background: var(--panel-bg, #fff); color: inherit; } /*microsoft onedrive import*/ .onedrive-picker-overlay { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / 0.38); backdrop-filter: blur(4px); } .onedrive-picker-dialog { width: min(680px, 100%); height: min(680px, calc(100vh - 48px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--border-color, #d9dde5); border-radius: 16px; background: var(--panel-background, #fff); box-shadow: 0 24px 70px rgb(0 0 0 / 0.25); } .onedrive-picker-header, .onedrive-picker-toolbar, .onedrive-picker-footer { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-color, #e3e6eb); } .onedrive-picker-header { justify-content: space-between; } .onedrive-picker-title-area { min-width: 0; } .onedrive-picker-title { font-size: 17px; font-weight: 700; } .onedrive-picker-path { margin-top: 3px; overflow: hidden; color: var(--muted-text-color, #687080); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .onedrive-picker-close { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; font-size: 24px; cursor: pointer; } .onedrive-picker-toolbar { padding-block: 9px; } .onedrive-picker-toolbar-button, .onedrive-picker-button, .onedrive-picker-load-more { min-height: 34px; padding: 7px 12px; border: 1px solid var(--border-color, #d6dae2); border-radius: 8px; background: var(--button-background, #fff); color: inherit; font: inherit; cursor: pointer; } .onedrive-picker-toolbar-button:disabled, .onedrive-picker-button:disabled { cursor: default; opacity: 0.45; } .onedrive-picker-list { overflow: auto; padding: 8px; } .onedrive-picker-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .onedrive-picker-item:hover { background: var(--hover-background, rgb(100 110 130 / 0.08)); } .onedrive-picker-item.selected { border-color: #2584f6; background: rgb(37 132 246 / 0.11); } .onedrive-picker-item-icon { width: 30px; flex: 0 0 30px; font-size: 22px; text-align: center; } .onedrive-picker-item-details { min-width: 0; display: grid; gap: 3px; } .onedrive-picker-item-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .onedrive-picker-item-meta { color: var(--muted-text-color, #727a88); font-size: 12px; } .onedrive-picker-empty { padding: 48px 24px; color: var(--muted-text-color, #727a88); text-align: center; } .onedrive-picker-load-more { display: block; margin: 12px auto; } .onedrive-picker-footer { justify-content: flex-end; border-top: 1px solid var(--border-color, #e3e6eb); border-bottom: 0; } .onedrive-picker-status { min-width: 0; margin-right: auto; overflow: hidden; color: var(--muted-text-color, #727a88); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .onedrive-picker-button.primary { border-color: #1677e8; background: #1677e8; color: #fff; } @media (max-width: 720px) { .excel-import-controls { grid-template-columns: 1fr; } } /* ========================================================================== 6. CENTER STAGE LAYOUT ========================================================================== */ #center-stage { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; } #center-stage-topbar { flex: 0 0 auto; min-height: 58px; margin-right: 12px; border: 1px solid var(--border-color-soft); border-bottom: none; border-radius: 18px 18px 0 0; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; } .theme-dark #center-stage-topbar { background: rgba(17, 24, 39, 0.85); } .stage-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stage-title { margin: 0; font-size: 18px; line-height: 1.1; font-weight: 700; color: var(--text-main); } .stage-toolbar, .workspace-db-panel { display: flex; align-items: center; gap: 8px; min-width: 0; } .center-stage-shell { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; overflow: hidden; } .center-stage-content { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; } #stage-view-area { height: 100%; min-height: 0; position: relative; overflow: hidden; border: 1px solid var(--border-color-soft); border-right: none; background: var(--panel-solid); } .stage-view { display: none; height: 100%; min-height: 0; overflow: hidden; } .stage-view.active { display: flex; flex-direction: column; } /* Report view should behave like a full center-stage document surface. */ #report-view { height: 100%; width: 100%; overflow: auto; } /* Prevent workspace-specific canvas assumptions from affecting report view. */ #report-view.stage-view { background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 32rem), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); } /* Report does not need the workspace pattern tray/canvas layout. */ .report-view .report-page-shell { min-height: 100%; } .workspace-control-bar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 10px; min-height: 46px; } #workspace-tabs-bar { display: flex; align-items: end; gap: 6px; padding: 0 0 0 8px; overflow-x: auto; overflow-y: visible; min-width: 0; } .worksheet-tab { height: 32px; min-width: 92px; border: 1px solid var(--border-color-soft); border-bottom: none; border-radius: 10px 10px 0 0; background: #eef2f8; color: #4b5563; font-size: var(--font-sm); padding: 0 12px; cursor: pointer; } .workspace-db-tab { flex: 0 0 auto; max-width: 220px; } .workspace-tab-title { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-tab-title-input { width: 140px; max-width: 180px; border: 1px solid var(--border-soft, #d6d6d6); border-radius: 6px; padding: 3px 6px; font: inherit; background: #fff; color: inherit; outline: none; } .workspace-tab-title-input:focus { border-color: #7c5cff; box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.15); } .workspace-tab-context-menu { position: fixed; z-index: 9999; min-width: fit-content; padding: 6px; border: 1px solid #ddd; border-radius: 10px; background: var(--panel-muted); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14); } .workspace-tab-context-menu button { width: 100%; border: 0; background: transparent; color: var(--text-main); padding: 8px 10px; border-radius: 7px; text-align: left; font: inherit; cursor: pointer; } .workspace-tab-context-menu button:hover { background: rgba(15, 23, 42, 0.05); } .theme-dark .workspace-tab-context-menu button:hover { background: rgba(255, 255, 255, 0.06); } .theme-dark .workspace-tab-context-menu button:disabled { opacity: 0.45; cursor: not-allowed; color: #888; } .workspace-tab-context-menu button:disabled:hover { background: transparent; } #worksheet-tab-add { flex: 0 0 auto; position: sticky; right: 0; z-index: 10; background: inherit; } .theme-dark .worksheet-tab { background: #1e293b; color: var(--text-muted); } .worksheet-tab.active { background: var(--panel-solid); color: var(--text-main); } .worksheet-tab-add { min-width: 34px; padding: 10px; font-weight: 700; } .auto-insights-icon { width: 20px; height: 20px; flex: 0 0 auto; } .find-patterns { color: #18243a; } [data-theme="dark"] .find-patterns { color: #f3f6fb; } /*table tab and report tab*/ .table-tab, .report-tab-trigger { position: relative; min-width: 82px; height: 32px; border-radius: 0; /*border: 1px solid var(--border-color-soft);*/ border-top: 2px solid gray; background: linear-gradient(to bottom, #ffffff, var(--panel-soft)); color: var(--text-muted); padding: 0 12px; font-size: var(--font-sm); font-weight: 650; } .table-tab.active, .report-tab-trigger.active { color: var(--accent-strong); background: #ffffff; } .table-tab.active::before, .report-tab-trigger.active::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent-strong); } /*end of tabs*/ .workspace-layout-controls, .workspace-zoom-controls { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; } .workspace-layout-btn, .workspace-zoom-btn, .workspace-fit-btn { border: 1px solid var(--border-color-soft); background: var(--panel-solid); color: var(--text-color); border-radius: var(--radius-pill); padding: 5px 9px; font-size: var(--font-sm); cursor: pointer; } .workspace-layout-btn.active, .workspace-zoom-btn.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; } .workspace-layout-btn:hover, .workspace-zoom-btn:hover, .workspace-fit-btn:hover { border-color: var(--accent-border); box-shadow: var(--shadow-soft); transform: translateY(-1px); } /*on report page, workspace controls will be hidden*/ /*#center-stage.is-report-mode .workspace-layout-controls, #center-stage.is-report-mode .workspace-zoom-controls { display: none; } #center-stage.is-non-workspace-mode .workspace-layout-controls, #center-stage.is-non-workspace-mode .workspace-zoom-controls { display: none; }*/ #center-stage.is-table-mode .workspace-layout-controls, #center-stage.is-table-mode .workspace-zoom-controls, #center-stage.is-report-mode .workspace-layout-controls, #center-stage.is-report-mode .workspace-zoom-controls { display: none; } /* ========================================================================== 7. DATASET TABLE TABS ========================================================================== */ .dataset-table-tabs { flex: 0 0 46px; width: 46px; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; overflow-y: auto; border: 1px solid var(--border-color-soft); border-right: none; background: rgba(248, 250, 252, 0.84); } .theme-dark .dataset-table-tabs { background: rgba(15, 23, 42, 0.78); } .dataset-table-tab { min-height: 112px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--panel-solid); color: var(--text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px 4px; position: relative; } .dataset-table-tab:hover { border-color: var(--accent-border); } .dataset-table-tab.is-active { border-color: rgba(86, 126, 220, 0.8); background: rgba(86, 126, 220, 0.08); } .dataset-table-tab-name { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); font-weight: 650; } .dataset-table-tab-close { position: absolute; top: 4px; right: 5px; width: 16px; height: 16px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; text-align: center; color: var(--muted-text); } .dataset-table-tab-close:hover { background: rgba(15, 23, 42, 0.08); color: var(--text-color); } /* ========================================================================== 7.5 REPORT VIEW ========================================================================== */ .report-page-shell { min-height: 100%; padding: 28px 34px 60px; color: #111827; } .report-hero { max-width: 1120px; margin: 0 auto 18px; padding: 24px 26px; border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 28px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; gap: 22px; } .report-hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #7c3aed; margin-bottom: 8px; } .report-hero-title { font-size: 30px; line-height: 1.1; margin: 0; letter-spacing: -0.04em; } .report-hero-subtitle { margin: 8px 0 0; color: #64748b; font-size: 13px; } .report-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .report-primary-btn, .report-ghost-btn, .report-small-action { border: 0; border-radius: 999px; padding: 9px 14px; font-size: 12px; font-weight: 750; cursor: pointer; } .report-primary-btn { color: white; background: #111827; box-shadow: 0 10px 25px rgba(17, 24, 39, 0.16); } .report-ghost-btn, .report-small-action { color: #334155; background: #f1f5f9; } .report-tabs { max-width: 1120px; margin: 0 auto 18px; display: flex; gap: 8px; padding: 6px; width: fit-content; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(148, 163, 184, 0.28); } .report-tab { border: 0; background: transparent; color: #64748b; border-radius: 999px; padding: 9px 16px; font-size: 12px; font-weight: 800; cursor: pointer; } .report-tab.is-active { color: #111827; background: #ffffff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .report-page-body { max-width: 1120px; margin: 0 auto; } .report-document { max-width: 860px; margin: 0 auto; padding: 34px; border-radius: 30px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 30px 90px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255, 255, 255, 0.9); border: 1px solid rgba(226, 232, 240, 0.9); } .report-document--full { max-width: 980px; } .report-static-heading { outline: none; } .report-static-heading:focus, .report-bullet-list li:focus, .report-callout:focus, .report-question:focus, .report-labeled-paragraph span:focus, .report-user-note:focus { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14); border-radius: 8px; } .report-document h2 { font-size: 25px; letter-spacing: -0.035em; margin: 0 0 8px; } .report-section-title { margin: 30px 0 14px; padding-top: 18px; border-top: 1px solid #e5e7eb; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; } .report-muted-line { color: #64748b; font-size: 13px; margin: 0 0 18px; } .report-finding-card, .report-analysis-section { padding: 20px; margin: 16px 0; border-radius: 22px; border: 1px solid #e5e7eb; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); } .report-finding-card.is-outdated, .report-analysis-section.is-outdated { border-color: #f59e0b; background: #fffbeb; } .report-finding-topline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .report-finding-number { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #111827; color: white; font-size: 11px; font-weight: 800; } .report-finding-eyebrow { font-size: 11px; color: #7c3aed; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .report-stat-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .report-stat-chip { display: flex; gap: 7px; align-items: baseline; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 999px; padding: 6px 10px; font-size: 12px; } .report-stat-chip span { color: #64748b; } .report-stat-chip strong { color: #111827; } .report-bullet-list, .report-caution-list { padding-left: 20px; margin: 12px 0; } .report-bullet-list li, .report-caution-list li { margin: 7px 0; line-height: 1.55; outline: none; } .report-callout { margin-top: 12px; padding: 11px 13px; border-radius: 16px; font-size: 13px; line-height: 1.45; border: 1px solid #dbeafe; background: #eff6ff; color: #1e3a8a; } .report-callout--caution { border-color: #fde68a; background: #fffbeb; color: #92400e; } .report-callout--warning { border-color: #fecaca; background: #fef2f2; color: #991b1b; } .report-question { color: #475569; font-size: 14px; margin: 4px 0 14px; } .report-labeled-paragraph { margin: 10px 0; line-height: 1.5; } .report-appendix-section { margin: 12px 0; border: 1px solid #e5e7eb; border-radius: 16px; background: #f8fafc; padding: 12px; } .report-appendix-section summary { cursor: pointer; font-weight: 800; } .report-appendix-section pre { overflow: auto; white-space: pre-wrap; font-size: 11px; color: #334155; } .report-story-manager { max-width: 860px; margin: 0 auto; } .report-story-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; padding: 16px; margin-bottom: 12px; border-radius: 22px; border: 1px solid #e5e7eb; background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06); } .report-story-number { width: 34px; height: 34px; border-radius: 999px; background: #111827; color: white; display: flex; align-items: center; justify-content: center; font-weight: 850; } .report-story-main h3 { margin: 0 0 4px; font-size: 15px; } .report-story-main p { margin: 0 0 10px; font-size: 12px; color: #64748b; } .report-story-note { width: 100%; min-height: 54px; resize: vertical; border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px; font: inherit; font-size: 13px; } .report-story-actions { display: flex; flex-direction: column; gap: 6px; } .report-empty-state { padding: 44px; text-align: center; border-radius: 28px; background: rgba(255, 255, 255, 0.9); border: 1px dashed #cbd5e1; } .report-user-note { padding: 10px 12px; background: #f8fafc; border-radius: 14px; color: #475569; } /*full report updated */ .report-article { line-height: 1.62; } .report-article-subtitle { margin-bottom: 22px; } .report-abstract { margin: 24px 0 28px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); border: 1px solid #e0e7ff; } .report-abstract-label, .report-panel-label { font-size: 11px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; color: #6d28d9; margin-bottom: 8px; } .report-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 28px; } .report-overview-card { padding: 16px; border-radius: 18px; border: 1px solid #e5e7eb; background: #ffffff; } .report-overview-card strong { display: block; font-size: 24px; letter-spacing: -0.04em; margin-bottom: 4px; } .report-overview-card span { color: #64748b; font-size: 12px; font-weight: 700; } .report-method-summary { grid-column: 1 / -1; padding: 14px 16px; border-radius: 18px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px; } .report-method-summary strong { margin-right: 8px; } .report-analysis-section--article { padding: 26px; margin: 22px 0; } .report-analysis-header { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; margin-bottom: 12px; } .report-analysis-number { width: 38px; height: 38px; border-radius: 14px; background: #111827; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 850; font-size: 12px; } .report-analysis-method { font-size: 11px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: #7c3aed; margin-bottom: 4px; } .report-question--article { font-size: 14px; color: #475569; padding: 12px 14px; background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; } .report-result-paragraph { font-size: 15px; color: #111827; margin: 16px 0; } .report-evidence-panel, .report-interpretation-panel, .report-section-diagnostics { margin-top: 16px; padding: 16px; border-radius: 20px; background: #ffffff; border: 1px solid #e5e7eb; } .report-diagnostics-summary { margin: 18px 0 28px; } .report-diagnostic-row { display: grid; grid-template-columns: minmax(180px, 0.35fr) 1fr; gap: 12px; padding: 12px 14px; margin: 8px 0; border-radius: 16px; border: 1px solid #dbeafe; background: #eff6ff; } .report-diagnostic-row--caution { border-color: #fde68a; background: #fffbeb; } .report-diagnostic-row--warning { border-color: #fecaca; background: #fef2f2; } .report-diagnostic-row strong { font-size: 12px; } .report-diagnostic-row span { font-size: 13px; color: #334155; } .report-appendix-body { padding-top: 12px; } .report-appendix-table-wrap { margin: 14px 0; } .report-appendix-table-wrap h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; } .report-appendix-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; background: white; } .report-appendix-table th, .report-appendix-table td { border-bottom: 1px solid #e5e7eb; padding: 8px 10px; font-size: 12px; text-align: left; vertical-align: top; } .report-appendix-table th { width: 34%; color: #475569; font-weight: 800; background: #f8fafc; } .report-appendix-table td { color: #111827; } /*prose style full report styles*/ .report-prose-document { max-width: 900px; font-size: 15px; line-height: 1.72; } .report-prose-opening { margin: 24px 0 30px; padding: 20px 22px; border-radius: 22px; background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); border: 1px solid #e0e7ff; } .report-prose-section-heading { margin: 38px 0 16px; padding-top: 22px; border-top: 1px solid #e5e7eb; font-size: 19px; letter-spacing: -0.025em; } .report-prose-result-section { margin: 28px 0 34px; } .report-prose-result-section.is-outdated { padding: 18px; border-radius: 20px; background: #fffbeb; border: 1px solid #f59e0b; } .report-prose-result-title { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.025em; } .report-prose-method-line { margin: 0 0 14px; color: #475569; font-size: 14px; font-style: italic; } .report-prose-paragraph { margin: 13px 0; color: #1f2937; } .report-prose-evidence { color: #334155; background: #f8fafc; border-left: 4px solid #7c3aed; padding: 12px 14px; border-radius: 12px; } .report-figure { margin: 22px auto; padding: 14px; border-radius: 22px; border: 1px solid #e5e7eb; background: #ffffff; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06); } .report-figure--small { max-width: 420px; } .report-figure--medium { max-width: 620px; } .report-figure--large { max-width: 780px; } .report-figure--full { max-width: 100%; } .report-figure-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; } .report-figure-size-btn { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 750; cursor: pointer; } .report-figure-visual { min-height: 220px; } .report-figure figcaption { margin-top: 10px; font-size: 12px; color: #64748b; text-align: center; } .report-prose-limitations, .report-prose-conclusion { margin: 16px 0 28px; } /* settings improvements*/ /* Disabled export placeholder button. */ .report-primary-btn:disabled, .report-ghost-btn:disabled, .report-small-action:disabled { cursor: not-allowed; opacity: 0.52; box-shadow: none; } /* -------------------------------------------------------------------------- Report density modes -------------------------------------------------------------------------- */ .report-density--compact { padding: 24px; } .report-density--compact.report-prose-document { font-size: 14px; line-height: 1.58; } .report-density--compact .report-section-title { margin-top: 22px; padding-top: 14px; } .report-density--compact .report-prose-section-heading { margin-top: 28px; padding-top: 16px; } .report-density--compact .report-finding-card, .report-density--compact .report-analysis-section { padding: 16px; margin: 12px 0; } .report-density--compact .report-prose-result-section { margin: 20px 0 24px; } .report-density--compact .report-prose-paragraph { margin: 9px 0; } .report-density--presentation { max-width: 1040px; padding: 42px; font-size: 17px; line-height: 1.78; } .report-density--presentation.report-document--memo { max-width: 980px; } .report-density--presentation .report-document h2, .report-density--presentation.report-document h2 { font-size: 32px; } .report-density--presentation .report-prose-section-heading { font-size: 24px; margin-top: 48px; } .report-density--presentation .report-prose-result-title { font-size: 22px; } .report-density--presentation .report-stat-chip { font-size: 13px; padding: 8px 12px; } /* -------------------------------------------------------------------------- Branding -------------------------------------------------------------------------- */ .report-branding { color: #64748b; font-size: 11px; font-weight: 750; letter-spacing: 0.04em; } .report-branding--header { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; text-align: right; } .report-branding--footer { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid #e5e7eb; text-align: center; } .report-branding--cover { margin-top: 36px; text-align: center; } .report-branding--standard { color: #4f46e5; font-weight: 850; } .report-branding--subtle { opacity: 0.72; } /* -------------------------------------------------------------------------- Export-ready report elements -------------------------------------------------------------------------- */ .report-cover-page { min-height: 460px; display: flex; flex-direction: column; justify-content: center; padding: 48px 24px; margin-bottom: 34px; border-radius: 26px; background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e5e7eb; text-align: center; } .report-cover-eyebrow { font-size: 11px; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 14px; } .report-cover-title { margin: 0; font-size: 42px; line-height: 1.08; letter-spacing: -0.055em; color: #111827; } .report-cover-subtitle { margin: 18px auto 0; max-width: 620px; color: #64748b; font-size: 14px; line-height: 1.55; } .report-generated-timestamp { margin: -6px 0 20px; color: #94a3b8; font-size: 11px; font-weight: 700; } /* Data attributes prepared for future export styling. */ .report-document[data-page-size="a4"] { --report-export-page-width: 210mm; } .report-document[data-page-size="letter"] { --report-export-page-width: 8.5in; } .report-document[data-orientation="landscape"] { max-width: 1120px; } /* Hide preview-only controls when the document is marked/exported later. */ .report-document[data-export-mode="true"] .report-figure-toolbar { display: none; } /* -------------------------------------------------------------------------- Figure refinements -------------------------------------------------------------------------- */ .report-figure-size-btn:hover { background: #eef2ff; color: #3730a3; } .report-figure-size-btn:focus-visible, .report-tab:focus-visible, .report-primary-btn:focus-visible, .report-ghost-btn:focus-visible, .report-small-action:focus-visible { outline: 3px solid rgba(124, 58, 237, 0.22); outline-offset: 2px; } .report-figure-visual>svg, .report-figure-visual canvas { max-width: 100%; } /* -------------------------------------------------------------------------- Settings panel helper for disabled rows -------------------------------------------------------------------------- */ .settings-row.is-disabled { opacity: 0.62; } .settings-row.is-disabled input, .settings-row.is-disabled select { cursor: not-allowed; } /* -------------------------------------------------------------------------- Mobile / narrow screens -------------------------------------------------------------------------- */ @media (max-width: 760px) { .report-page-shell { padding: 18px 14px 42px; } .report-hero { flex-direction: column; align-items: stretch; padding: 20px; border-radius: 22px; } .report-hero-title { font-size: 24px; } .report-hero-actions { justify-content: flex-start; } .report-tabs { width: 100%; overflow-x: auto; justify-content: flex-start; } .report-tab { white-space: nowrap; } .report-document, .report-document--full, .report-prose-document { max-width: none; padding: 22px; border-radius: 22px; } .report-story-row { grid-template-columns: 36px 1fr; } .report-story-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .report-cover-page { min-height: 320px; padding: 34px 18px; } .report-cover-title { font-size: 30px; } .report-density--presentation { padding: 26px; font-size: 15px; } } /* -------------------------------------------------------------------------- Print / future PDF-friendly behavior -------------------------------------------------------------------------- */ @media print { #report-view.stage-view { background: #ffffff; } .report-page-shell { padding: 0; color: #111827; } .report-hero, .report-tabs, .report-figure-toolbar { display: none !important; } .report-page-body { max-width: none; margin: 0; } .report-document, .report-document--full, .report-prose-document { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #ffffff; } .report-cover-page { break-after: page; border: 0; border-radius: 0; background: #ffffff; } .report-prose-section-heading { break-after: avoid; } .report-prose-result-section, .report-finding-card, .report-figure, .report-appendix-section { break-inside: avoid; } .report-branding--footer { margin-top: 24px; } } /* ========================================================================== 8. WORKSPACE VIEW / CANVAS ========================================================================== */ #workspace-view { min-height: 0; overflow: hidden; background: var(--panel-solid); position: relative; } .workspace-pattern-tray { flex: 0 0 auto; border: 1px solid var(--border-color-soft); border-radius: 0px 0px 18px 18px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-soft); padding: 12px; margin: 0 12px 12px 0; } .theme-dark .workspace-pattern-tray { background: rgba(17, 24, 39, 0.9); } .pattern-tray-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pattern-tray-collapse-toggle { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, auto) auto; align-items: center; justify-content: start; gap: 8px; border: 0; background: transparent; color: var(--text-color); padding: 0; text-align: left; cursor: pointer; } .pattern-tray-collapse-toggle h3 { margin: 0; font-size: 15px; } .pattern-tray-chevron { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 1rem; opacity: 0.75; transition: transform 160ms ease; } .pattern-tray-count { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } .pattern-tray-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .pattern-tray-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-top: 10px; } .workspace-pattern-tray.is-collapsed .pattern-tray-scroll { display: none; } .workspace-pattern-tray.is-collapsed .pattern-tray-chevron { transform: rotate(-90deg); } .pattern-card { flex: 0 0 230px; border: 1px solid rgba(86, 126, 220, 0.22); border-radius: 14px; background: linear-gradient(180deg, var(--panel-solid), var(--panel-soft)); padding: 10px; cursor: grab; transition: 0.15s ease; } .pattern-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .pattern-card.is-dragging { opacity: 0.55; } .pattern-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .pattern-card-type { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #4f79d8; } .pattern-card-score { font-size: 11px; padding: 3px 7px; border-radius: var(--radius-pill); background: rgba(86, 126, 220, 0.12); color: #365db8; font-weight: 700; } .pattern-card-title { font-size: var(--font-md); font-weight: 700; line-height: 1.3; color: var(--text-color); margin-bottom: 5px; } .pattern-card-summary { font-size: var(--font-sm); line-height: 1.35; color: var(--text-muted); } /*grid analyst*/ .pattern-card--insight-path { gap: 8px; } .pattern-card-path-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.62); } .pattern-card-path-step { max-width: 120px; padding: 3px 7px; border-radius: 999px; background: rgba(139, 167, 255, 0.08); color: var(--text-muted); border: 1px solid rgba(139, 167, 255, 0.14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pattern-card-path-arrow { color: var(--text-muted); } .pattern-card-creates { margin-top: 2px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.46); } /*END: pattern card - analyst*/ /* #workspace-canvas { flex: 1 1 auto; min-height: 0; position: relative; overflow: auto; padding: 18px; border-radius: 0 0 18px 18px; background: radial-gradient(circle at center, var(--canvas-glow), transparent 26%), linear-gradient(var(--canvas-grid) 1px, transparent 1px), linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px), var(--canvas-base); background-size: auto, 28px 28px, 28px 28px; }*/ #workspace-canvas { flex: 1 1 auto; min-height: 0; position: relative; overflow: auto; padding: 18px; border-radius: 0 0 18px 18px; background: radial-gradient(circle at 50% 35%, var(--canvas-glow), transparent 34%), radial-gradient(circle, var(--canvas-grid) 1px, transparent 1.55px), var(--canvas-base); background-size: auto, 24px 24px; background-position: center center, 0 0; } #workspace-canvas.is-drop-target { outline: 2px solid rgba(86, 126, 220, 0.25); outline-offset: -10px; } #workspace-canvas.is-dragging-column .analysis-role-dock { opacity: 1; transform: translateX(0); pointer-events: auto; } #workspace-canvas.is-block-canvas-drop-ready { box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18); } .theme-dark #workspace-canvas.is-block-canvas-drop-ready { box-shadow: inset 0 0 0 1px rgba(139, 167, 255, 0.20); } .workspace-board { position: relative; min-width: 1800px; min-height: 1200px; transform-origin: top left; } /*Workspace Empty State for Beginners*/ .workspace-empty-state { position: absolute; inset: 0; margin: auto; width: min(480px, calc(100% - 64px)); height: max-content; text-align: center; color: var(--text-muted); pointer-events: none; top: 100px; } .workspace-empty-state h3 { margin: 10px 0 8px; color: var(--text-color); font-size: 18px; font-weight: 600; } .workspace-empty-state p { max-width: 440px; margin: 0 auto; line-height: 1.6; } .workspace-empty-icon { font-size: 27px; opacity: 0.55; } .workspace-empty-action { margin-top: 18px; padding: 9px 15px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--canvas-base); color: var(--text-color); font: inherit; cursor: pointer; pointer-events: auto; } .workspace-empty-action:hover { border-color: var(--accent); } .workspace-empty-hints { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 18px; } .hint-chip { padding: 5px 9px; border: 1px solid var(--border-color); border-radius: 999px; font-size: 11px; opacity: 0.78; } /* ========================================================================== 8.1 WORKSPACE MINIMAP ========================================================================== */ .workspace-minimap { position: absolute; right: 18px; bottom: 18px; width: 220px; height: 160px; z-index: 40; border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.12)); border-radius: 14px; background: color-mix(in srgb, var(--panel-bg, #101522) 0%, transparent); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); overflow: hidden; backdrop-filter: blur(14px); } .workspace-minimap.is-collapsed { height: 34px; } .workspace-minimap-header { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text, rgba(255, 255, 255, 0.62)); border-bottom: 1px solid var(--panel-border, rgba(255, 255, 255, 0.10)); } .workspace-minimap-toggle { width: 22px; height: 22px; border: 0; border-radius: 8px; cursor: pointer; color: inherit; background: rgba(255, 255, 255, 0.06); } .workspace-minimap-body { position: relative; height: calc(100% - 34px); overflow: hidden; cursor: pointer; } .workspace-minimap-content { position: absolute; inset: 0; } .workspace-minimap-node { position: absolute; box-sizing: border-box; min-width: 3px; min-height: 3px; border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: visible; } .workspace-minimap-node.is-selected { background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); } .workspace-minimap-node.intent-describe { border-color: var(--intent-describe); } .workspace-minimap-node.intent-relate { border-color: var(--intent-relate); } .workspace-minimap-node.intent-compare, .workspace-minimap-node.intent-contrast { border-color: var(--intent-compare); } .workspace-minimap-node.intent-associate { border-color: var(--intent-associate); } .workspace-minimap-node.intent-predict { border-color: var(--intent-predict); } .workspace-minimap-node.intent-filter { border-color: var(--intent-filter); } .workspace-minimap-node.intent-group { border-color: var(--intent-group); } .workspace-minimap-node.is-in-story { background: rgba(37, 99, 235, 0.16); box-shadow: /*0 0 0 1.5px rgba(37, 99, 235, 0.72), 0 0 0 3px rgba(37, 99, 235, 0.18);*/ 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 0 4px rgba(37, 99, 235, 0.24); } .workspace-minimap-node.is-in-story::after { content: ""; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; border-radius: 999px; background: var(--story-accent); box-shadow: 0 0 0 1px var(--panel-solid, #101522); } .workspace-minimap-viewport { position: absolute; box-sizing: border-box; pointer-events: none; border: 1px solid color-mix(in srgb, var(--muted), transparent 50%); border-radius: 5px; background: rgba(255, 255, 255, 0.06); } /* ========================================================================== 9. WORKSPACE BLOCKS ========================================================================== */ .workspace-link-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; } .workspace-link { fill: none; stroke: rgba(86, 126, 220, 0.32); stroke-width: 2; stroke-linecap: round; transition: opacity 180ms ease, d 220ms cubic-bezier(0.22, 1, 0.36, 1); opacity: 1; } .workspace-link.is-entering { stroke-dasharray: 8 8; animation: linkAppear 360ms ease-out; } .workspace-link-dot { fill: rgba(86, 126, 220, 0.72); filter: drop-shadow(0 2px 5px rgba(86, 126, 220, 0.35)); } .workspace-link-group:hover .workspace-link { stroke: rgba(86, 126, 220, 0.72); stroke-width: 2.5; } @keyframes linkAppear { from { opacity: 0; stroke-dashoffset: 24; } to { opacity: 1; stroke-dashoffset: 0; } } .analysis-block { position: absolute; width: 380px; max-width: none; padding: 16px 16px 14px; border: 4px solid rgba(30, 41, 59, 0.8); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)); box-shadow: 0 24px 20px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); overflow: visible; z-index: 2; container-type: inline-size; } .theme-dark .analysis-block { border-color: rgba(148, 163, 184, 0.18); background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.92)); box-shadow: 0 24px 20px rgba(0, 0, 0, 0.38), 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .analysis-block:hover { transform: translateY(-2px); box-shadow: 0 34px 90px rgba(15, 23, 42, 0.18), 0 12px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95); } .analysis-block.block-lg { width: 390px; } /* ORIGINAL BLANK .analysis-block.analysis-block--compact { position: absolute; width: 320px; max-width: none; padding: 12px 14px 14px; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 22px; background: var(--panel-solid); box-shadow: 0 15px 5px rgba(15, 23, 42, 0.3), 0 8px 18px rgba(15, 23, 42, 0.07); overflow: visible; }*/ /* BORDER ALL AROUND .analysis-block.analysis-block--compact { --block-accent: rgba(15, 23, 42, 0.6); position: absolute; width: 320px; max-width: none; padding: 12px 14px 14px; border: 4px solid var(--block-accent); border-radius: 22px; background: var(--panel-solid); box-shadow: 0 15px 5px rgba(15, 23, 42, 0.3), 0 8px 18px rgba(15, 23, 42, 0.07); overflow: visible; } .analysis-block[data-intent="describe"] { --block-accent: rgba(86, 126, 220, 0.72); } .analysis-block[data-intent="relate"] { --block-accent: rgba(124, 58, 237, 0.72); } .analysis-block[data-intent="compare"], .analysis-block[data-intent="contrast"] { --block-accent: rgba(245, 158, 11, 0.78); } .analysis-block[data-intent="predict"] { --block-accent: rgba(34, 197, 94, 0.72); } .analysis-block[data-intent="filter"] { --block-accent: rgba(6, 182, 212, 0.68); } .analysis-block[data-intent="group"] { --block-accent: rgba(236, 72, 153, 0.68); }*/ .analysis-block.analysis-block--compact { --block-accent: rgba(86, 126, 220, 0.75); position: absolute; width: 340px; max-width: none; padding: 12px 14px 14px 18px; border: 4px solid rgba(15, 23, 42, 0.48); border-left: 10px solid var(--block-accent); border-radius: 22px; background: var(--panel-solid); box-shadow: 0 15px 5px rgba(15, 23, 42, 0.3), 0 8px 18px rgba(15, 23, 42, 0.07); overflow: visible; } .analysis-block[data-intent="describe"] { --block-accent: var(--intent-describe); } .analysis-block[data-intent="relate"] { --block-accent: var(--intent-relate); } .analysis-block[data-intent="compare"], .analysis-block[data-intent="contrast"] { --block-accent: var(--intent-compare); } .analysis-block[data-intent="associate"] { --block-accent: var(--intent-associate); } .analysis-block[data-intent="predict"] { --block-accent: var(--intent-predict); } .analysis-block[data-intent="filter"] { --block-accent: var(--intent-filter); } .analysis-block[data-intent="group"] { --block-accent: var(--intent-group); } .analysis-block.analysis-block--compact:hover { transform: translateY(-2px); box-shadow: 0 26px 14px rgba(15, 23, 42, 0.18), 0 10px 22px rgba(15, 23, 42, 0.08); } .analysis-block.is-root-block { border-color: var(--accent-border); box-shadow: 0 18px 45px rgba(86, 126, 220, 0.18); } .analysis-block.is-branch-target { outline: 2px solid rgba(86, 126, 220, 0.42); outline-offset: 3px; transform: scale(1.015); } .analysis-block.is-selected { outline: 2px solid rgba(86, 126, 220, 0.65); outline-offset: 4px; box-shadow: 0 20px 50px rgba(86, 126, 220, 0.18); } .analysis-block.is-outdated { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.28), 0 12px 30px rgba(15, 23, 42, 0.10); } .analysis-block-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .analysis-block-header-right { display: inline-flex; align-items: center; gap: 6px; } .analysis-block-delete-btn { border: 0; background: transparent; color: #777; cursor: pointer; border-radius: 6px; padding: 2px 6px; font-size: 16px; line-height: 1; } .analysis-block-delete-btn:hover { background: #f3f4f6; color: #b42318; transform: scale(1.1); } .analysis-block-eyebrow { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 2px; padding: 4px 8px; border-radius: var(--radius-pill); background: rgba(86, 126, 220, 0.08); color: rgba(71, 85, 105, 0.78); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .theme-dark .analysis-block-eyebrow { color: rgba(203, 213, 225, 0.78); } .analysis-block-eyebrow-wrap { min-width: 0; display: flex; align-items: center; gap: 6px; } .analysis-block-demo-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 15px; padding: 1px 5px; border: 1px solid rgba(86, 126, 220, 0.26); border-radius: 999px; background: rgba(86, 126, 220, 0.07); color: rgb(68, 101, 177); font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; } .theme-dark .analysis-block-demo-badge { border-color: rgba(139, 166, 235, 0.32); background: rgba(139, 166, 235, 0.11); color: rgb(174, 194, 244); } /*block title*/ .analysis-block-title { margin: 0 0 2px; min-width: 0; width: 100%; max-width: 100%; font-size: 17px; line-height: 1.25; font-weight: 750; letter-spacing: -0.025em; color: var(--text-color); } .analysis-block-title-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 1px; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; } .block-title-separator { flex: 0 0 auto; color: var(--text-soft, #94a3b8); font-size: 12px; font-weight: 800; } .analysis-block-title-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; max-width: 100%; } .analysis-block-branch-row { display: flex; align-items: center; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; } .block-branch-chip { display: flex; align-items: center; min-width: 0; max-width: 100%; padding: 3px 7px; border-radius: 999px; border: 1px dashed rgba(100, 116, 139, 0.42); background: rgba(100, 116, 139, 0.08); color: var(--text-muted); font-size: 11px; font-weight: 750; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .block-branch-chip.is-filter { border-color: rgba(245, 158, 11, 0.42); background: rgba(245, 158, 11, 0.10); } .block-branch-chip.is-group { border-color: rgba(34, 197, 94, 0.38); background: rgba(34, 197, 94, 0.09); } .analysis-block-branch-row .block-col-chip.is-contextual { max-width: 100%; } .block-col-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 112px; padding: 7px 7px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.035); color: var(--text-main); font-size: 13px; font-weight: 750; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .block-col-chip.is-numeric { border-color: rgba(86, 126, 220, 0.36); background: rgba(86, 126, 220, 0.10); } .block-col-chip.is-categorical { border-color: rgba(34, 197, 94, 0.32); background: rgba(34, 197, 94, 0.10); } .block-col-chip.is-binary { border-color: rgba(245, 158, 11, 0.36); background: rgba(245, 158, 11, 0.12); } .block-col-chip.is-date { border-color: rgba(168, 85, 247, 0.30); background: rgba(168, 85, 247, 0.10); } .block-col-chip.is-text { border-color: rgba(100, 116, 139, 0.32); background: rgba(100, 116, 139, 0.10); } .block-col-chip--more { max-width: none; color: var(--text-muted); font-weight: 700; background: rgba(100, 116, 139, 0.08); } .block-title-operator { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.01em; } /*end of block title*/ .analysis-block-body { font-size: var(--font-md); line-height: 1.55; color: var(--text-muted); } .analysis-block-status { position: absolute; top: -1px; right: 18px; padding: 5px 10px 6px; border-radius: 0 0 10px 10px; border: 1px solid rgba(15, 23, 42, 0.08); border-top: none; background: #f8fafc; color: #475569; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.03em; box-shadow: 0 5px 10px rgba(15, 23, 42, 0.08); } .theme-dark .analysis-block-status { background: #1e293b; color: var(--text-muted); border-color: rgba(148, 163, 184, 0.16); } .block-outdated-badge { border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-text); border-radius: var(--radius-pill); padding: 2px 7px; font-size: 10px; font-weight: 800; line-height: 1.4; cursor: pointer; } .block-outdated-badge:hover { background: #ffedd5; border-color: rgba(245, 158, 11, 0.65); } .relationship-visual-switcher { display: flex; align-items: center; gap: 4px; margin: 2px 14px 8px; padding: 3px; width: fit-content; max-width: calc(100% - 28px); border: 1px solid var(--border-color); border-radius: 999px; background: var(--panel-soft); } .relationship-visual-switcher[hidden] { display: none; } .relationship-visual-switcher-btn { appearance: none; min-width: 0; padding: 5px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; } .relationship-visual-switcher-btn:hover { color: var(--text-color); background: var(--panel-strong); } .relationship-visual-switcher-btn.is-active { color: var(--accent-color); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--accent-border); } .analysis-block-chart-placeholder, .analysis-block-chart-placeholder.analysis-visual-host { height: 168px; margin-top: 6px; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 20px; background: radial-gradient(circle at 50% 0%, rgba(86, 126, 220, 0.08), transparent 42%), linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -20px 40px rgba(15, 23, 42, 0.025); } .theme-dark .analysis-block-chart-placeholder, .theme-dark .analysis-block-chart-placeholder.analysis-visual-host { background: radial-gradient(circle at 50% 0%, rgba(139, 167, 255, 0.10), transparent 42%), linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.85)); } .analysis-key-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .analysis-key-stats-row--compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 9px; } .analysis-stat-pill { padding: 8px 8px; border-radius: 14px; background: rgba(248, 250, 252, 0.9); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); } .theme-dark .analysis-stat-pill { background: rgba(30, 41, 59, 0.9); } .analysis-key-stats-row--compact .analysis-stat-pill { padding: 6px 6px 5px; border-radius: 11px; } .analysis-stat-label { display: block; margin-bottom: 3px; font-size: 10px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .analysis-key-stats-row--compact .analysis-stat-label { font-size: 8.5px; } .analysis-stat-value { display: block; font-size: 16px; line-height: 1; font-weight: 760; letter-spacing: -0.02em; color: var(--text-color); } .analysis-key-stats-row--compact .analysis-stat-value { font-size: 13px; } .analysis-panel-body { display: grid; gap: 12px; } .analysis-panel-meta-row { display: flex; flex-wrap: wrap; gap: 6px; } .analysis-mini-badge { font-size: 11px; padding: 4px 8px; border-radius: var(--radius-pill); background: rgba(15, 23, 42, 0.08); color: #334155; } .theme-dark .analysis-mini-badge { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } /* predict block predictor chip flags*/ .analysis-block-predictor-rail { position: absolute; left: 0; top: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; transform: translateX(-90px); z-index: 3; pointer-events: none; } .block-predictor-rail-chip { display: block; min-width: 0; max-width: 88px; padding: 3px 6px; border-radius: 10px 0px 0px 10px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(24, 26, 29, 0.035); color: var(--text-main); font-size: 10px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .block-predictor-rail-chip.is-category-level { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; text-overflow: clip; } .block-predictor-rail-source { display: block; max-width: 100%; font-size: 9px; font-weight: 650; line-height: 1.1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .block-predictor-rail-value { display: block; max-width: 100%; font-size: 10px; font-weight: 750; line-height: 1.1; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .block-predictor-rail-chip.is-numeric { border-color: rgba(161, 166, 178, 0.36); background: rgba(64, 66, 72, 0.1); } .block-predictor-rail-chip.is-categorical { border-color: rgba(34, 197, 94, 0.32); background: rgba(34, 197, 94, 0.10); } .block-predictor-rail-chip.is-binary { border-color: rgba(245, 158, 11, 0.36); background: rgba(245, 158, 11, 0.12); } .block-predictor-rail-chip.is-date { border-color: rgba(168, 85, 247, 0.30); background: rgba(168, 85, 247, 0.10); } .block-predictor-rail-chip.is-text { border-color: rgba(100, 116, 139, 0.32); background: rgba(100, 116, 139, 0.10); } .block-predictor-rail-chip--more { color: var(--text-muted); font-weight: 750; background: rgba(100, 116, 139, 0.08); } /* ========================================================================== COMPACT BLOCK PANEL PREVIEW ========================================================================== */ .analysis-expandable-region--compact { position: relative; min-width: 0; margin-top: 8px; border-top: 1px solid var(--border-color-soft); } .analysis-expandable-region--compact[hidden] { display: none; } .analysis-panel-preview { min-width: 0; } .analysis-panel-preview-content { position: relative; min-width: 0; max-height: 180px; overflow: hidden; padding: 12px 12px 24px; } /* Fade communicates that more content is available. */ .analysis-panel-preview-content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--card-bg)); } .analysis-panel-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 18px; min-width: 0; } .analysis-panel-section { display: grid; align-content: start; gap: 7px; min-width: 0; } .analysis-panel-section-title { display: block; margin: 0; font-size: var(--font-xs); font-weight: 700; line-height: 1.3; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .analysis-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 5px 14px; min-width: 0; } .analysis-panel-stack>.analysis-panel-section .analysis-panel-list { grid-template-columns: 1fr; } .analysis-panel-bullet { min-width: 0; max-width: none; font-size: var(--font-md); line-height: 1.45; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; word-break: normal; cursor: default; } .analysis-panel-bullet:hover { color: var(--text-color); } .analysis-panel-preview-footer { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding: 7px 12px 10px; border-top: 1px solid var(--border-color-soft); background: var(--card-bg); } .analysis-panel-inspector-link { appearance: none; border: 0; padding: 3px 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--font-sm); font-weight: 650; cursor: pointer; } .analysis-panel-inspector-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; } .analysis-learning-links { display: grid; gap: 6px; } .analysis-learning-link { appearance: none; width: 100%; border: 1px solid var(--accent-border); border-radius: var(--radius-sm); padding: 7px 9px; background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-size: var(--font-sm); line-height: 1.35; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; } .analysis-learning-link:hover { background: var(--hover-bg); } .analysis-panel-empty { color: var(--text-muted); font-size: var(--font-md); line-height: 1.45; } .analysis-floating-action.is-active:not([data-action="story"]) { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-border); } @container (max-width: 340px) { .analysis-panel-stack, .analysis-panel-list { grid-template-columns: 1fr; } } .theme-dark .analysis-panel-bullet { color: var(--text-muted); } .analysis-panel-bullet:hover { color: var(--text-color); } .analysis-control-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } .analysis-block:hover .analysis-control-actions, .analysis-block.is-selected .analysis-control-actions { opacity: 1; transform: translateY(0); pointer-events: auto; } .analysis-control-actions .btn { border-radius: var(--radius-pill); border: 1px solid rgba(148, 163, 184, 0.26); background: rgba(255, 255, 255, 0.72); color: #475569; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } .theme-dark .analysis-control-actions .btn { background: rgba(17, 24, 39, 0.72); color: var(--text-muted); } /* Bottom hover actions on analysis blocks */ .analysis-floating-actions { position: absolute; left: 18px; right: 18px; bottom: -21px; display: flex; justify-content: center; gap: 4px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } .analysis-block:hover .analysis-floating-actions, .analysis-block:focus-within .analysis-floating-actions, .analysis-block.is-selected .analysis-floating-actions, .analysis-floating-actions:hover { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Invisible hover bridge so the actions don't disappear while moving mouse downward */ .analysis-block::before { content: ""; position: absolute; left: 0; right: 0; bottom: -42px; height: 48px; pointer-events: auto; } .analysis-floating-action { padding: 6px 9px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0 0 10px 10px; background: var(--panel-solid); color: var(--text-muted); font-size: 12px; font-weight: 750; box-shadow: 0 10px 14px rgba(15, 23, 42, 0.14), 0 3px 7px rgba(15, 23, 42, 0.08); cursor: pointer; transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .analysis-floating-action:hover { color: var(--text-color); background: var(--panel-soft); border-color: var(--accent-border); transform: translateY(-1px); } .analysis-floating-action[data-action="story"], .analysis-control-actions [data-action="story"] { display: inline-flex; align-items: center; gap: 0; } .analysis-floating-action[data-action="story"]::after, .analysis-control-actions [data-action="story"]::after { content: "+"; width: 0; margin-left: 0; opacity: 0; overflow: hidden; transform: translateX(-3px); transition: width 140ms ease, margin-left 140ms ease, opacity 140ms ease, transform 140ms ease; } .analysis-floating-action[data-action="story"]:hover::after, .analysis-floating-action[data-action="story"]:focus-visible::after, .analysis-control-actions [data-action="story"]:hover::after, .analysis-control-actions [data-action="story"]:focus-visible::after { width: 0.8em; margin-left: 0.3em; opacity: 1; transform: translateX(0); } .analysis-floating-action[data-action="story"].is-active::after, .analysis-control-actions [data-action="story"].is-active::after { content: "−"; } .analysis-floating-action[data-action="story"].is-active, .analysis-control-actions [data-action="story"].is-active { font-weight: 600; } .analysis-block.analysis-block--compact.is-in-story { border-top-color: rgba(37, 99, 235, 0.55); border-right-color: rgba(37, 99, 235, 0.55); border-bottom-color: rgba(37, 99, 235, 0.55); background: linear-gradient(rgba(37, 99, 235, 0.045), rgba(37, 99, 235, 0.045)), var(--panel-solid); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11), 0 15px 5px rgba(15, 23, 42, 0.3), 0 8px 18px rgba(15, 23, 42, 0.07); } .analysis-block.is-in-story .analysis-floating-action[data-action="story"], .analysis-block.is-in-story .analysis-control-actions [data-action="story"] { background: rgba(37, 99, 235, 0.11); border-color: rgba(37, 99, 235, 0.35); font-weight: 600; } .analysis-block.analysis-block--compact.is-in-story::after { content: "In report"; position: absolute; top: -22px; right: 18px; padding: 2px 8px; border: 1px solid rgba(37, 99, 235, 0.28); border-radius: 5px 5px 0px 0px; background: var(--panel-solid); color: rgb(37, 99, 235); font-size: 10px; font-weight: 650; line-height: 1.4; letter-spacing: 0.02em; pointer-events: none; } .theme-dark .analysis-floating-action { border-color: rgba(148, 163, 184, 0.18); background: #111827; color: var(--text-muted); box-shadow: 0 10px 14px rgba(0, 0, 0, 0.34), 0 3px 7px rgba(0, 0, 0, 0.24); } .theme-dark .analysis-floating-action:hover { color: var(--text-color); background: #1e293b; border-color: var(--accent-border); } /* Block skins */ .analysis-block.skin-glass { border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.72); background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 255, 0.78)), radial-gradient(circle at top left, rgba(110, 138, 255, 0.20), transparent 34%); box-shadow: 0 20px 10px rgba(15, 23, 42, 0.18), 0 10px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95); backdrop-filter: blur(18px) saturate(1.25); } .analysis-block.skin-paper { border-radius: 22px; border: 1px solid rgba(30, 41, 59, 0.08); background: linear-gradient(180deg, #fffdf8 0%, #fff 58%, #f8fafc 100%); box-shadow: 0 20px 10px rgba(15, 23, 42, 0.16), 0 8px 18px rgba(15, 23, 42, 0.07); } .analysis-block.skin-capsule { border-radius: 30px; border: 1px solid rgba(86, 126, 220, 0.16); background: radial-gradient(circle at 20% 0%, rgba(86, 126, 220, 0.18), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 20px 10px rgba(59, 84, 160, 0.20), 0 12px 30px rgba(15, 23, 42, 0.09); } .analysis-block.skin-dark { border-radius: 28px; border: 1px solid rgba(148, 163, 184, 0.20); background: radial-gradient(circle at top left, rgba(96, 165, 250, 0.22), transparent 34%), linear-gradient(180deg, #111827 0%, #0f172a 100%); color: #e5e7eb; box-shadow: 0 20px 10px rgba(2, 6, 23, 0.45), 0 12px 36px rgba(2, 6, 23, 0.30); } .analysis-block.skin-dark .analysis-block-title { color: #f8fafc; } .analysis-block.skin-dark .analysis-block-body, .analysis-block.skin-dark .analysis-block-eyebrow { color: rgba(226, 232, 240, 0.72); } .analysis-block-flags { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .analysis-block-flag { display: inline-flex; align-items: center; white-space: nowrap; } .analysis-block-flag+.analysis-block-flag::before { content: "•"; margin: 0 7px; color: var(--text-muted); opacity: 0.6; } /* Role chooser / branch popovers */ .workspace-role-popover, .workspace-filter-popover, .workspace-predict-popover { position: fixed; z-index: 10000; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 18px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 8px 20px rgba(15, 23, 42, 0.12); padding: 10px; } .theme-dark .workspace-role-popover, .theme-dark .workspace-filter-popover, .theme-dark .workspace-predict-popover { background: rgba(17, 24, 39, 0.96); } .workspace-role-popover { width: 260px; animation: rolePopoverIn 0.14s ease-out; } .workspace-filter-popover { width: 270px; max-height: min(340px, calc(100vh - 24px)); overflow: auto; border-radius: 20px; } @keyframes rolePopoverIn { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .workspace-role-popover-title, .workspace-filter-title { padding: 8px 8px 10px; color: var(--text-color); font-size: var(--font-md); font-weight: 800; letter-spacing: -0.01em; } .workspace-role-option, .workspace-filter-option { width: 100%; display: grid; gap: 3px; padding: 10px 11px; margin: 2px 0; border: none; border-radius: 13px; background: transparent; color: #334155; text-align: left; cursor: pointer; font-size: var(--font-md); font-weight: 750; } .theme-dark .workspace-role-option, .theme-dark .workspace-filter-option { color: var(--text-muted); } .workspace-role-option small { display: block; color: #64748b; font-size: var(--font-xs); font-weight: 500; line-height: 1.35; } .workspace-role-option:hover, .workspace-filter-option:hover { background: #f1f5f9; color: #1d4ed8; } .theme-dark .workspace-role-option:hover, .theme-dark .workspace-filter-option:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent-strong); } /* ------------------------------------------------------------ Role chooser / branch direction popover ------------------------------------------------------------ */ .workspace-role-popover-pro { width: 338px; padding: 12px; border-radius: 22px; border: 1px solid rgba(148, 163, 184, 0.26); background: radial-gradient(circle at 18% 0%, rgba(139, 167, 255, 0.22), transparent 36%), radial-gradient(circle at 90% 18%, rgba(168, 85, 247, 0.12), transparent 32%), rgba(255, 255, 255, 0.96); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24), 0 12px 28px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78); animation: rolePopoverProIn 0.16s cubic-bezier(.2, .9, .2, 1); max-height: calc(100vh - 24px); overflow: auto; } .theme-dark .workspace-role-popover-pro { border-color: rgba(148, 163, 184, 0.22); background: radial-gradient(circle at 18% 0%, rgba(139, 167, 255, 0.18), transparent 38%), radial-gradient(circle at 90% 18%, rgba(168, 85, 247, 0.13), transparent 34%), rgba(17, 24, 39, 0.96); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48), 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .workspace-role-popover-pro::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), transparent 28%, transparent 70%, rgba(139, 167, 255, 0.16)); opacity: 0.8; } .theme-dark .workspace-role-popover-pro::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 30%, transparent 68%, rgba(139, 167, 255, 0.14)); } @keyframes rolePopoverProIn { from { opacity: 0; transform: translateY(6px) scale(0.975); } to { opacity: 1; transform: translateY(0) scale(1); } } .workspace-role-hero, .workspace-role-section, .workspace-role-footer { position: relative; z-index: 1; } .workspace-role-hero { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 8px 8px 12px; } .workspace-role-hero-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 15px; color: #4338ca; background: linear-gradient(135deg, rgba(139, 167, 255, 0.30), rgba(168, 85, 247, 0.14)), rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 22px rgba(79, 70, 229, 0.18); font-size: 17px; font-weight: 900; } .theme-dark .workspace-role-hero-icon { color: var(--accent-strong); background: linear-gradient(135deg, rgba(139, 167, 255, 0.22), rgba(168, 85, 247, 0.14)), rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 22px rgba(0, 0, 0, 0.24); } .workspace-role-kicker { margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; } .theme-dark .workspace-role-kicker { color: var(--text-muted); } .workspace-role-title { color: #0f172a; font-size: 15px; font-weight: 850; letter-spacing: -0.02em; line-height: 1.2; } .theme-dark .workspace-role-title { color: var(--text-color); } .workspace-role-title strong { color: #4f46e5; font-weight: 900; } .theme-dark .workspace-role-title strong { color: var(--accent-strong); } .workspace-role-subtitle { margin-top: 5px; color: #64748b; font-size: 12px; font-weight: 560; line-height: 1.35; } .theme-dark .workspace-role-subtitle { color: var(--text-muted); } .workspace-role-subtitle span { color: #334155; font-weight: 750; } .theme-dark .workspace-role-subtitle span { color: var(--text-color); } .workspace-role-section { padding: 4px; border-radius: 18px; background: rgba(248, 250, 252, 0.70); border: 1px solid rgba(148, 163, 184, 0.14); } .theme-dark .workspace-role-section { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.07); } .workspace-role-section-label { padding: 7px 8px 5px; color: #64748b; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .theme-dark .workspace-role-section-label { color: var(--text-muted); } .workspace-role-options { display: grid; gap: 5px; } .workspace-role-option-pro { position: relative; width: 100%; display: grid; grid-template-columns: 34px 1fr 18px; gap: 9px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: #334155; text-align: left; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease; } .workspace-role-option-pro:hover { transform: translateY(-1px); border-color: rgba(99, 102, 241, 0.22); background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(250, 245, 255, 0.82)); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82); color: #1d4ed8; } .theme-dark .workspace-role-option-pro { color: var(--text-muted); } .theme-dark .workspace-role-option-pro:hover { border-color: rgba(139, 167, 255, 0.30); background: linear-gradient(135deg, rgba(139, 167, 255, 0.11), rgba(168, 85, 247, 0.08)); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08); color: var(--accent-strong); } .workspace-role-option-pro.is-emphasized { background: rgba(255, 255, 255, 0.54); } .theme-dark .workspace-role-option-pro.is-emphasized { background: rgba(255, 255, 255, 0.035); } .workspace-role-option-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 13px; color: #4f46e5; background: rgba(99, 102, 241, 0.10); font-size: 16px; font-weight: 900; } .workspace-role-option-pro:hover .workspace-role-option-icon { background: rgba(99, 102, 241, 0.16); } .theme-dark .workspace-role-option-icon { color: var(--accent-strong); background: rgba(139, 167, 255, 0.10); } .workspace-role-option-copy { min-width: 0; display: grid; gap: 2px; } .workspace-role-option-label { color: #1e293b; font-size: 13px; font-weight: 850; letter-spacing: -0.01em; } .theme-dark .workspace-role-option-label { color: var(--text-color); } .workspace-role-option-hint { color: #64748b; font-size: 11px; font-weight: 560; line-height: 1.32; } .theme-dark .workspace-role-option-hint { color: var(--text-muted); } .workspace-role-option-arrow { color: #94a3b8; font-size: 15px; font-weight: 900; opacity: 0; transform: translateX(-3px); transition: opacity 0.12s ease, transform 0.12s ease; } .workspace-role-option-pro:hover .workspace-role-option-arrow { opacity: 1; transform: translateX(0); } .workspace-role-footer { margin: 9px 4px 0; padding: 9px 10px 2px; color: #64748b; font-size: 11px; font-weight: 560; line-height: 1.35; } .theme-dark .workspace-role-footer { color: var(--text-muted); } /*analysis role dock */ .analysis-role-dock { position: absolute; top: 150px; right: -30px; z-index: 8; opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } .analysis-block:hover .analysis-role-dock, .analysis-block.is-selected .analysis-role-dock, .analysis-block.is-role-dock-target .analysis-role-dock { opacity: 1; transform: translateX(0); pointer-events: auto; } .analysis-role-dock-pill { padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.08); color: #475569; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .theme-dark .analysis-role-dock-pill { background: rgba(17, 24, 39, 0.94); color: var(--text-muted); } .analysis-role-dock.is-drop-over .analysis-role-dock-pill { border-color: rgba(86, 126, 220, 0.45); color: #3157b7; box-shadow: 0 12px 28px rgba(86, 126, 220, 0.20), 0 4px 10px rgba(15, 23, 42, 0.08); } /* ------------------------------------------------------------ Group summary expansion controls ------------------------------------------------------------ */ .group-summary-action-panel { margin-top: 6px; padding: 12px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.18); background: linear-gradient(135deg, rgba(239, 246, 255, 0.72), rgba(250, 245, 255, 0.52)); } .theme-dark .group-summary-action-panel { border-color: rgba(255, 255, 255, 0.08); background: linear-gradient(135deg, rgba(139, 167, 255, 0.08), rgba(168, 85, 247, 0.05)); } .group-summary-action-title { color: #1e293b; font-size: 12px; font-weight: 850; letter-spacing: -0.01em; } .theme-dark .group-summary-action-title { color: var(--text-color); } .group-summary-action-subtitle { margin-top: 3px; color: #64748b; font-size: 11px; font-weight: 560; line-height: 1.35; } .theme-dark .group-summary-action-subtitle { color: var(--text-muted); } .group-summary-action-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; } .group-summary-action-btn { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.74); color: #475569; padding: 7px 10px; font-size: 11px; font-weight: 800; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } .group-summary-action-btn:hover { transform: translateY(-1px); border-color: rgba(99, 102, 241, 0.28); color: #4f46e5; box-shadow: 0 8px 18px rgba(99, 102, 241, 0.12); } .group-summary-action-btn.is-primary { border-color: rgba(99, 102, 241, 0.28); background: rgba(99, 102, 241, 0.10); color: #4f46e5; } .theme-dark .group-summary-action-btn { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } .theme-dark .group-summary-action-btn:hover, .theme-dark .group-summary-action-btn.is-primary { border-color: rgba(139, 167, 255, 0.30); background: rgba(139, 167, 255, 0.11); color: var(--accent-strong); } /* Choose groups popover */ .workspace-group-choose-popover { width: 320px; position: fixed; z-index: 10002; } .group-choose-list { position: relative; z-index: 1; max-height: 260px; overflow: auto; display: grid; gap: 4px; padding: 6px; border-radius: 16px; background: rgba(248, 250, 252, 0.70); border: 1px solid rgba(148, 163, 184, 0.14); } .theme-dark .group-choose-list { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.07); } .group-choose-option { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: center; padding: 8px 9px; border-radius: 12px; color: #334155; font-size: 12px; font-weight: 700; cursor: pointer; } .group-choose-option:hover { background: rgba(99, 102, 241, 0.08); } .theme-dark .group-choose-option { color: var(--text-color); } .group-choose-footer { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .group-choose-option.is-expanded { opacity: 0.58; } .group-choose-option em { margin-left: 6px; color: #64748b; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .theme-dark .group-choose-option em { color: var(--text-muted); } .group-choose-mode-panel { position: relative; z-index: 1; margin-bottom: 10px; padding: 8px; border-radius: 16px; background: rgba(248, 250, 252, 0.70); border: 1px solid rgba(148, 163, 184, 0.14); } .theme-dark .group-choose-mode-panel { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.07); } .group-choose-mode-label { margin-bottom: 7px; color: #64748b; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .theme-dark .group-choose-mode-label { color: var(--text-muted); } .group-choose-mode-buttons { display: flex; flex-wrap: wrap; gap: 6px; } .group-choose-mode-btn { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.68); color: #475569; padding: 6px 9px; font-size: 11px; font-weight: 800; cursor: pointer; } .group-choose-mode-btn:hover, .group-choose-mode-btn.is-active { border-color: rgba(99, 102, 241, 0.30); background: rgba(99, 102, 241, 0.10); color: #4f46e5; } .theme-dark .group-choose-mode-btn { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } .theme-dark .group-choose-mode-btn:hover, .theme-dark .group-choose-mode-btn.is-active { border-color: rgba(139, 167, 255, 0.30); background: rgba(139, 167, 255, 0.11); color: var(--accent-strong); } /*numerical bin for groups*/ .custom-bin-editor { display: grid; gap: 10px; padding: 6px; } .custom-bin-range-note { color: #64748b; font-size: 11px; font-weight: 650; } .theme-dark .custom-bin-range-note { color: var(--text-muted); } .custom-bin-rows { display: grid; gap: 6px; } .custom-bin-row { display: grid; grid-template-columns: 1.2fr 0.75fr 0.75fr 28px; gap: 6px; align-items: center; } .custom-bin-row input { min-width: 0; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 10px; background: rgba(255, 255, 255, 0.78); color: #1e293b; padding: 7px 8px; font-size: 11px; font-weight: 700; } .theme-dark .custom-bin-row input { border-color: rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.05); color: var(--text-color); } .custom-bin-remove { width: 28px; height: 28px; border: none; border-radius: 10px; background: rgba(239, 68, 68, 0.08); color: #dc2626; cursor: pointer; font-weight: 900; } .custom-bin-controls { display: flex; flex-wrap: wrap; gap: 7px; } .custom-bin-warnings { display: grid; gap: 4px; } .custom-bin-warning { color: #b45309; font-size: 10px; font-weight: 750; } .theme-dark .custom-bin-warning { color: #fbbf24; } /* ------------------------------------------------------------ Prediction target chooser ------------------------------------------------------------ */ .workspace-predict-popover { width: 360px; position: fixed; z-index: 10001; } .workspace-predict-options { display: grid; gap: 5px; } .workspace-predict-option.is-recommended { border-color: rgba(99, 102, 241, 0.24); background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(250, 245, 255, 0.78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 20px rgba(99, 102, 241, 0.10); } .theme-dark .workspace-predict-option.is-recommended { border-color: rgba(139, 167, 255, 0.28); background: linear-gradient(135deg, rgba(139, 167, 255, 0.11), rgba(168, 85, 247, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.24); } .workspace-predict-option .workspace-role-option-label { display: flex; align-items: center; gap: 7px; } .workspace-predict-option .workspace-role-option-label em { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: rgba(79, 70, 229, 0.10); color: #4f46e5; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .theme-dark .workspace-predict-option .workspace-role-option-label em { background: rgba(139, 167, 255, 0.13); color: var(--accent-strong); } /* ------------------------------------------------------------ Block-on-block drag grammar ------------------------------------------------------------ */ body.is-analysis-block-dragging .analysis-block { transition: opacity 120ms ease, box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease; } body.is-analysis-block-dragging .analysis-block:not(.is-block-drag-source):not(.is-block-drop-eligible) { opacity: 0.62; } .analysis-block.is-block-drag-source { opacity: 0.72; outline: 1px solid rgba(99, 102, 241, 0.35); outline-offset: 3px; } .analysis-block.is-block-drop-eligible { opacity: 1; } .analysis-block.is-block-drop-strong { box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.22), 0 18px 44px rgba(15, 23, 42, 0.14); } .analysis-block.is-block-drop-weak { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18), 0 12px 28px rgba(15, 23, 42, 0.10); } .analysis-block-drag-ghost { width: 190px; padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(148, 163, 184, 0.28); box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18); pointer-events: none; } .analysis-block-drag-ghost-eyebrow { margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .analysis-block-drag-ghost-title { color: #0f172a; font-size: 12px; font-weight: 850; line-height: 1.25; } .block-drop-preview-zone { position: absolute; left: 10px; right: 10px; z-index: 8; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 12px; border-radius: 15px; border: 1px solid rgba(99, 102, 241, 0.20); background: rgba(238, 242, 255, 0.86); color: #5b88f0; /* #3864ca;*/ font-size: 20px; font-weight: 900; line-height: 1.25; text-align: center; letter-spacing: -0.015em; pointer-events: none; opacity: 0.84; transform: scale(0.985); transition: opacity 100ms ease, transform 100ms ease, background 100ms ease, border-color 100ms ease, box-shadow 100ms ease; } .block-drop-preview-zone.is-active { opacity: 1; transform: scale(1); border-color: rgba(99, 102, 241, 0.48); background: rgba(224, 231, 255, 0.98); box-shadow: 0 10px 26px rgba(79, 70, 229, 0.14); } .block-drop-preview-zone.is-ineligible { border-color: rgba(148, 163, 184, 0.18); background: rgba(248, 250, 252, 0.82); color: #64748b; } .block-drop-preview-zone--header { top: 8px; min-height: 60px; } .block-drop-preview-zone--body { top: 70px; bottom: 10px; min-height: 64px; } .theme-dark .analysis-block-drag-ghost { background: rgba(17, 24, 39, 0.96); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36); } .theme-dark .analysis-block-drag-ghost-eyebrow { color: var(--text-muted); } .theme-dark .analysis-block-drag-ghost-title { color: var(--text-color); } .theme-dark .analysis-block.is-block-drag-source { outline-color: rgba(139, 167, 255, 0.45); } .theme-dark .analysis-block.is-block-drop-strong { box-shadow: 0 0 0 1px rgba(139, 167, 255, 0.32), 0 20px 52px rgba(0, 0, 0, 0.34); } .theme-dark .block-drop-preview-zone { border-color: rgba(139, 167, 255, 0.22); background: rgba(139, 167, 255, 0.4); color: var(--accent-strong); } .theme-dark .block-drop-preview-zone.is-active { border-color: rgba(139, 167, 255, 0.42); background: rgba(139, 167, 255, 0.6); } .theme-dark .block-drop-preview-zone.is-ineligible { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.045); color: var(--text-muted); } /* ========================================================================== 10. VISUALIZATION STYLES ========================================================================== */ /* Inspection Zoomed Visuals*/ .is-chart-inspectable { cursor: zoom-in; position: relative; } .is-chart-inspectable::after { content: "Inspect"; position: absolute; right: 8px; bottom: 6px; z-index: 2; font-size: 10px; font-weight: 600; color: var(--text-muted, #64748b); background: rgba(248, 250, 252, 0.92); border: 1px solid rgba(148, 163, 184, 0.38); border-radius: 999px; padding: 3px 7px; opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .is-chart-inspectable:hover::after { opacity: 1; } .chart-inspection-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(4px); } .chart-inspection-modal { width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--panel-bg, #ffffff); border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 20px; box-shadow: 0 28px 90px rgba(15, 23, 42, 0.32); overflow: hidden; } .chart-inspection-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.24); } .chart-inspection-title-wrap { min-width: 0; } .chart-inspection-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #64748b); } .chart-inspection-title { margin-top: 2px; font-size: 14px; font-weight: 750; color: var(--text-main, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart-inspection-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chart-inspection-btn { border: 1px solid rgba(148, 163, 184, 0.45); background: var(--button-bg); color: var(--text-main); border-radius: 10px; padding: 7px 10px; font-size: 12px; font-weight: 650; cursor: pointer; } .chart-inspection-btn:hover { background: var(--button-hover-bg, #eef2ff); } .chart-inspection-btn:disabled { opacity: 0.48; cursor: not-allowed; } .chart-inspection-body { padding: 16px; overflow: auto; } .chart-inspection-chart-host { min-height: 460px; width: 100%; background: var(--panel-bg, #ffffff); border-radius: 14px; } .stratified-comparison-preview { width: 100%; height: 100%; padding: 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; } .stratified-comparison-preview__title { font-size: 11px; font-weight: 750; color: var(--text-main, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stratified-comparison-preview__rows { display: flex; flex-direction: column; gap: 4px; } .stratified-comparison-preview__row { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--text-muted, #64748b); } .stratified-comparison-preview__row span:first-child { font-weight: 650; color: var(--text-main, #334155); } .stratified-comparison-preview__hint { margin-top: auto; font-size: 10px; color: var(--text-muted, #94a3b8); } /* end of inspection zoomed visuals*/ .analysis-visual-host { position: relative; min-height: 190px; margin-top: 6px; border-radius: 16px; background: linear-gradient(180deg, var(--panel-solid), var(--panel-soft)); border: 1px solid rgba(148, 163, 184, 0.25); padding: 8px; overflow: hidden; } .viz-svg { width: 100%; height: 100%; overflow: visible; background: var(--viz-background, transparent); } .viz-title { font-family: var(--viz-font-family, var(--font-ui)); font-size: var(--viz-title-size, 12px); font-weight: 750; fill: var(--viz-text, rgba(15, 23, 42, 0.88)); } .viz-subtitle { font-family: var(--viz-font-family, var(--font-ui)); font-size: var(--viz-subtitle-size, 9.5px); font-weight: 500; fill: var(--viz-text-muted, rgba(100, 116, 139, 0.82)); } .viz-axis { stroke: var(--viz-axis, rgba(100, 116, 139, 0.34)); stroke-width: 1; } .viz-grid-line { stroke: var(--viz-grid, rgba(148, 163, 184, 0.18)); stroke-width: 1; } .viz-axis-tick { font-family: var(--viz-font-family, var(--font-ui)); font-size: var(--viz-tick-size, 9px); fill: var(--viz-text-muted, rgba(100, 116, 139, 0.86)); } .viz-axis-label { font-family: var(--viz-font-family, var(--font-ui)); font-size: var(--viz-axis-label-size, 9.5px); font-weight: 650; fill: var(--viz-text-muted, rgba(71, 85, 105, 0.9)); } .viz-bar { fill: var(--viz-primary, rgba(86, 126, 220, 0.66)); } .viz-bar:hover { opacity: 0.85; } .viz-bar-label, .viz-heat-label { font-family: var(--viz-font-family, var(--font-ui)); font-size: var(--viz-value-label-size, 9px); font-weight: 700; fill: var(--viz-text, rgba(30, 41, 59, 0.78)); pointer-events: none; } .viz-reference-line { stroke: var(--viz-reference, rgba(15, 23, 42, 0.55)); stroke-width: 1.2; stroke-dasharray: 4 4; } .viz-reference-line-muted { stroke: var(--viz-text-muted, rgba(100, 116, 139, 0.5)); } .viz-reference-label { font-family: var(--viz-font-family, var(--font-ui)); font-size: 8.8px; font-weight: 650; fill: var(--viz-text, rgba(30, 41, 59, 0.78)); paint-order: stroke; stroke: var(--viz-background, rgba(255, 255, 255, 0.9)); stroke-width: 3px; } .viz-error-line, .viz-error-cap { stroke: var(--viz-text-muted, rgba(30, 41, 59, 0.45)); stroke-width: 1.4; } .viz-heat-cell { fill: var(--viz-primary, rgba(86, 126, 220, 0.9)); } .viz-heat-cell:hover { stroke: var(--viz-text, rgba(30, 41, 59, 0.45)); stroke-width: 1.2; } .viz-dot { fill: var(--viz-primary, rgba(37, 99, 235, 0.75)); stroke: var(--viz-point-stroke, #ffffff); stroke-width: 1.5; } .viz-dot-strong { fill: var(--viz-primary-strong, rgba(79, 70, 229, 0.9)); stroke: var(--viz-point-stroke, #ffffff); stroke-width: 2; } .viz-trend-line { stroke: var(--viz-mean, rgba(15, 23, 42, 0.7)); stroke-width: 2; stroke-linecap: round; } .viz-label { font-family: var(--viz-font-family, var(--font-ui)); font-size: 11px; fill: var(--viz-text-muted, #64748b); } .theme-dark .viz-title { fill: rgba(248, 250, 252, 0.88); } .theme-dark .viz-bar-label, .theme-dark .viz-heat-label { fill: rgba(248, 250, 252, 0.78); } .theme-dark .viz-reference-line { stroke: rgba(248, 250, 252, 0.55); } .viz-tooltip { position: absolute; z-index: 5; max-width: 220px; padding: 6px 8px; border-radius: 10px; background: rgba(15, 23, 120, 0.7); color: white; font-size: var(--font-sm); pointer-events: none; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.22); display: none; white-space: nowrap; } .viz-tooltip.is-visible { display: block; } .viz-empty { min-height: 150px; display: grid; place-items: center; color: #64748b; font-size: var(--font-md); } .viz-text-summary { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; } .viz-text-summary-title { font-size: 12px; font-weight: 750; color: rgba(15, 23, 42, 0.88); } .theme-dark .viz-text-summary-title { color: rgba(248, 250, 252, 0.88); } .viz-text-summary-subtitle { margin-top: 2px; font-size: 9.5px; font-weight: 500; color: rgba(100, 116, 139, 0.82); } .viz-word-cloud { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow: hidden; } .viz-word-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px; border-radius: var(--radius-pill); border: 1px solid rgba(148, 163, 184, 0.22); background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(15, 23, 42, 0.04); color: rgba(30, 41, 59, 0.88); line-height: 1.1; } .theme-dark .viz-word-chip { background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.82)); color: rgba(248, 250, 252, 0.88); } .viz-word-rank, .viz-word-count { font-size: 0.72em; font-weight: 750; } .viz-word-rank { color: rgba(100, 116, 139, 0.75); } .viz-word-text { min-width: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 720; } .viz-word-count { color: rgba(86, 126, 220, 0.9); } /*grouped box plot*/ .viz-row-guide { stroke: var(--viz-grid, rgba(148, 163, 184, 0.22)); stroke-width: 1; } .viz-range-line { stroke: var(--viz-text-soft, #94a3b8); stroke-width: 2; stroke-linecap: round; } .viz-box { fill: var(--viz-box-fill, rgba(86, 126, 220, 0.16)); stroke: var(--viz-box-stroke, #4f79d8); stroke-width: 1.4; } .viz-median-line { stroke: var(--viz-median, #0f172a); stroke-width: 2; stroke-linecap: round; } .viz-mean-point { fill: var(--viz-background, #ffffff); stroke: var(--viz-mean, #0f172a); stroke-width: 1.6; } .viz-point { fill: var(--viz-primary, #4f79d8); /*stroke: var(--viz-point-stroke, #ffffff);*/ stroke-width: 1; } .viz-point-muted { opacity: 0.78; } .viz-hexbin-cell { stroke: none; /*var(--viz-background);*/ stroke-width: 0.7; vector-effect: non-scaling-stroke; transition: opacity 140ms ease, filter 140ms ease; } .viz-hexbin-cell:hover { opacity: 1 !important; filter: brightness(0.94); } .viz-bubble-frequency-point { stroke: rgba(255, 255, 255, 0.85); stroke-width: 0.8; vector-effect: non-scaling-stroke; transition: opacity 140ms ease, r 140ms ease; } .viz-bubble-frequency-point:hover { opacity: 1 !important; } .viz-n-label { font-family: var(--viz-font-family, var(--font-ui)); font-size: 10px; fill: var(--viz-text-muted, #64748b); } .viz-n-label-caution { fill: var(--viz-warning, #b45309); font-weight: 600; } .viz-area-fill { fill: var(--viz-primary-soft, rgba(86, 126, 220, 0.16)); } .viz-event-stem { stroke: var(--viz-text-soft, #94a3b8); stroke-width: 1.4; } /*group summary*/ .group-summary-rail { height: 100%; min-height: 190px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 18px; border: 1px solid rgba(139, 167, 255, 0.22); background: radial-gradient(circle at top left, rgba(139, 167, 255, 0.13), transparent 34%), rgba(255, 255, 255, 0.032); } .group-summary-rail-header { display: flex; align-items: center; min-width: 0; } /* .group-summary-rail-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: rgba(139, 167, 255, 0.12); border: 1px solid rgba(139, 167, 255, 0.22); color: var(--accent, #8ba7ff); font-size: 20px; line-height: 1; }*/ .group-summary-rail-title-wrap { min-width: 0; } /* .group-summary-rail-eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); } .group-summary-rail-title { margin-top: 2px; font-size: 0.98rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }*/ .group-summary-rail-subtitle { margin-top: 2px; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-summary-rail-list { display: flex; flex-direction: column; gap: 7px; min-height: 0; } .group-summary-rail-row { display: grid; grid-template-columns: minmax(72px, 0.8fr) minmax(120px, 1.4fr); /*gap: 10px;*/ align-items: center; padding: 0px 4px; /*border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.055);*/ } .group-summary-rail-row.is-small { opacity: 0.72; } .group-summary-rail-label-col { min-width: 0; } .group-summary-rail-label { font-size: 0.8rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-summary-rail-n { margin-top: 1px; font-size: 0.5rem; color: var(--text-muted); } .group-summary-rail-metric-col { min-width: 0; display: flex; flex-direction: column; color: var(--text-main); gap: 5px; } .group-summary-rail-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .group-summary-rail-metric { min-width: 0; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-summary-rail-tag { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; font-size: 0.64rem; line-height: 1.25; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--text-main); } .group-summary-rail-tag.is-strong { background: rgba(139, 167, 255, 0.16); border-color: rgba(139, 167, 255, 0.24); color: var(--text-main); } .group-summary-rail-tag.is-moderate { background: rgba(139, 167, 255, 0.09); border-color: rgba(139, 167, 255, 0.16); color: var(--text-muted); } .group-summary-rail-tag.is-muted { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.055); color: var(--text-muted); } .group-summary-rail-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.07); } .group-summary-rail-fill { height: 100%; border-radius: inherit; background: rgba(139, 167, 255, 0.62); } .group-summary-rail-more, .group-summary-rail-empty { padding: 6px 8px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.48); } .group-summary-rail-hint { margin-top: auto; font-size: 0.74rem; color: rgba(255, 255, 255, 0.48); } /*end of group summary visual*/ /*stratified comparison*/ .stratified-comparison-viz { display: flex; flex-direction: column; gap: 10px; width: 100%; } .stratified-comparison-viz__header { padding: 2px 2px 0; } .stratified-comparison-viz__title { font-size: 12px; font-weight: 700; color: #0f172a; } .stratified-comparison-viz__subtitle { margin-top: 2px; font-size: 11px; color: #64748b; } .stratified-comparison-viz__panel { border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 12px; padding: 8px; background: rgba(248, 250, 252, 0.72); } .stratified-comparison-viz__panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .stratified-comparison-viz__panel-title { font-size: 11px; font-weight: 700; color: #334155; } .stratified-comparison-viz__panel-stat { font-size: 10px; color: #64748b; white-space: nowrap; } .stratified-comparison-viz__chart { height: 170px; } .stratified-comparison-viz__note { font-size: 10.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 7px 8px; } /*prediction decision tree*/ .prediction-tree-rules-wrap { height: 100%; min-height: 160px; padding: 1px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; overflow: hidden; box-sizing: border-box; } .prediction-tree-header { min-width: 0; display: flex; gap: 10px; } .prediction-tree-title { font-size: 12px; font-weight: 700; color: #0f172a; } .prediction-tree-subtitle { font-size: 10px; color: #64748b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prediction-tree-driver { display: none; /* border: 1px solid #e2e8f0; border-radius: 10px; padding: 2px; background: #ffffff; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0;*/ } .prediction-tree-driver-label { font-size: 10px; color: #64748b; flex: 0 0 auto; } .prediction-tree-driver-value { font-size: 11px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .prediction-tree-rule-matrix { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(64px, 1fr) minmax(64px, 1fr); gap: 6px; min-height: 0; } .prediction-tree-rule-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px; background: #ffffff; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(24px, 1fr) auto; gap: 4px; } .prediction-tree-rule-card-header { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; } .prediction-tree-rule-title { font-size: 10px; font-weight: 700; color: #0f172a; min-width: 0; } .prediction-tree-rule-badge { font-size: 10px; font-weight: 700; color: #0f172a; background: #f1f5f9; border-radius: 999px; padding: 2px 6px; white-space: nowrap; flex: 0 0 auto; } .prediction-tree-rule-condition { font-size: 10.5px; font-weight: 600; color: #334155; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .prediction-tree-rule-footer { font-size: 9px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prediction-tree-rule-empty { border: 1px dashed #e2e8f0; border-radius: 10px; background: #f8fafc; min-height: 54px; } .prediction-tree-footer { font-size: 10px; color: #94a3b8; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prediction-tree-ladder-wrap { height: 100%; min-height: 160px; padding: 10px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; overflow: hidden; box-sizing: border-box; } .prediction-tree-ladder-title { font-size: 12px; font-weight: 700; color: #0f172a; } .prediction-tree-ladder-subtitle { font-size: 10px; color: #64748b; margin-top: 2px; } .prediction-tree-ladder-list { display: flex; flex-direction: column; gap: 7px; min-height: 0; justify-content: center; } .prediction-tree-band-row { display: grid; grid-template-columns: minmax(92px, 1.5fr) 50px 60px; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; } .prediction-tree-band-condition { font-size: 10.5px; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prediction-tree-band-bar { height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; } .prediction-tree-band-fill { height: 100%; border-radius: 999px; background: #0f172a; } .prediction-tree-band-value { font-size: 10px; font-weight: 700; color: #0f172a; white-space: nowrap; font-variant-numeric: tabular-nums; } .prediction-tree-ladder-footer { font-size: 10px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*prediction visual switcher*/ /* Prediction visual switcher */ .prediction-visual-switcher { display: flex; align-items: center; gap: 4px; margin: 2px 14px 6px; padding: 3px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 10px; background: rgba(248, 250, 252, 0.72); overflow-x: auto; scrollbar-width: none; } .prediction-visual-switcher::-webkit-scrollbar { display: none; } .prediction-visual-switcher-button { flex: 0 0 auto; min-height: 26px; padding: 4px 9px; border: 0; border-radius: 7px; background: transparent; color: #64748b; font: inherit; font-size: 11px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } .prediction-visual-switcher-button:hover { color: #334155; background: rgba(226, 232, 240, 0.68); } .prediction-visual-switcher-button.is-active { color: #1e3a5f; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(79, 121, 216, 0.18); } .prediction-visual-switcher-button:focus-visible { outline: 2px solid rgba(79, 121, 216, 0.72); outline-offset: 1px; } .prediction-visual-switcher-button:disabled { cursor: default; opacity: 0.72; } /*coming soon message*/ .prediction-soon-card { height: 100%; min-height: 180px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid rgba(139, 167, 255, 0.24); border-radius: 18px; background: radial-gradient(circle at top left, rgba(139, 167, 255, 0.16), transparent 34%), rgba(255, 255, 255, 0.035); } .prediction-soon-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: repeating-linear-gradient(135deg, rgba(139, 167, 255, 0.14) 0, rgba(139, 167, 255, 0.14) 6px, rgba(255, 255, 255, 0.035) 6px, rgba(255, 255, 255, 0.035) 12px); border: 1px solid rgba(139, 167, 255, 0.26); color: var(--accent, #8ba7ff); } .prediction-soon-marker { font-size: 22px; line-height: 1; transform: translateY(-1px); } .prediction-soon-content { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .prediction-soon-eyebrow { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-main); } .prediction-soon-title { font-size: 1.02rem; font-weight: 700; color: var(--text-main); } .prediction-soon-summary { font-size: 0.86rem; color: var(--text-muted); } .prediction-soon-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; } .prediction-soon-chip { max-width: 100%; padding: 4px 8px; border-radius: 999px; background: rgba(139, 167, 255, 0.12); border: 1px solid rgba(139, 167, 255, 0.18); color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prediction-soon-chip.is-muted { background: rgba(139, 167, 255, 0.12); border: 1px solid rgba(139, 167, 255, 0.18); color: var(--text-muted); } .prediction-soon-hint { margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); } .analysis-visual-fallback { display: grid; gap: 0.25rem; min-height: 5rem; padding: 0.75rem; border-radius: 0.8rem; background: rgba(15, 23, 42, 0.35); border: 1px dashed rgba(148, 163, 184, 0.3); } .analysis-visual-fallback-title { font-size: 0.74rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); } .analysis-visual-fallback-detail { font-size: 0.72rem; line-height: 1.35; color: rgba(255, 255, 255, 0.56); } /* ========================================================================== 11. TABLE VIEW ========================================================================== */ #table-view { background: #ffffff; } .theme-dark #table-view { background: var(--panel-solid); } .table-view-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 0; background: var(--panel-solid); } .table-view-header { flex: 0 0 52px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--table-border); background: var(--panel-solid); } .column-derived-badge, .table-derived-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--border-color); border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 650; line-height: 1.2; opacity: 0.82; background: color-mix(in srgb, var(--surface-color) 88%, var(--accent-color) 12%); color: var(--text-muted); cursor: pointer; } .table-derived-badge { width: 20px; height: 20px; padding: 0; font-size: 12px; } .column-derived-badge:hover, .table-derived-badge:hover { box-shadow: 0 0 2px gray; transform: scale(1.05); transition: all 0.2s ease; } .table-view-title { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 650; color: var(--text-main); } .table-view-actions { display: flex; gap: 8px; align-items: center; } #table-view-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--panel-solid); } .table-edit-toolbar { flex: 0 0 auto; display: flex; position: relative; z-index: 80; overflow: visible; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin: 8px 8px 8px; border: 1px solid var(--border-subtle); border-radius: 12px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); } .theme-dark .table-edit-toolbar { background: rgba(17, 24, 39, 0.82); } .table-edit-toolbar.is-dirty { border-color: #f2c94c; background: #fffaf0; } .theme-dark .table-edit-toolbar.is-dirty { background: rgba(245, 158, 11, 0.12); } .table-edit-status { position: relative; z-index: 90; overflow: visible; font-size: var(--font-md); color: #374151; display: flex; align-items: center; gap: 8px; } .table-edit-actions { display: flex; align-items: flex-end; gap: 8px; min-width: 0; } .table-edit-action-group { position: relative; display: inline-flex; align-items: flex-end; padding-top: 7px; } .table-edit-action-group.has-no-label { padding-top: 0; } .table-edit-action-group-label { position: absolute; top: 0; left: 6px; right: 6px; display: flex; align-items: center; gap: 5px; color: var(--text-muted); font-family: var(--font-ui); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; pointer-events: none; user-select: none; } .table-edit-action-group-label::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); opacity: 0.75; } .table-edit-action-group-buttons { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--border-subtle); border-radius: 8px; background: color-mix(in srgb, var(--panel-solid) 92%, var(--text-main) 8%); } .table-edit-compact-btn { min-width: 38px; height: 28px; padding: 0 8px; border-radius: 6px; white-space: nowrap; } .table-edit-compact-btn.is-destructive { color: inherit; } .table-edit-compact-btn.is-destructive:hover:not(:disabled) { color: var(--danger, #ef4444); background: color-mix(in srgb, var(--danger, #ef4444) 9%, transparent); border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, var(--border-subtle)); } .table-edit-history-group { margin-left: 1px; } .table-column-visibility-control { align-self: center; } /* table visibility popover*/ .table-column-visibility-control { position: relative; display: inline-flex; } .table-column-visibility-btn { position: relative; width: 34px; min-width: 34px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; overflow: visible; } .table-eye-icon { flex: 0 0 auto; display: block; color: currentColor; } .table-toolbar-eye-icon { width: 20px; height: 20px; flex: 0 0 auto; opacity: 0.92; } .table-column-eye-icon { width: 16px; height: 16px; opacity: 0.88; } .table-column-visibility-item.is-hidden .table-column-eye-icon { opacity: 0.55; } .table-toolbar-eye-count { position: absolute; top: -5px; right: -6px; z-index: 2; min-width: 15px; height: 15px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface-color, #fff); border-radius: 999px; background: #326fa8; color: #fff; font-size: 9px; font-weight: 750; line-height: 1; box-sizing: border-box; pointer-events: none; } .table-column-visibility-popover { position: absolute; z-index: 80; top: calc(100% + 7px); right: 0; width: min(290px, 80vw); max-height: 390px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08); } .table-column-visibility-head { min-height: 42px; padding: 9px 11px 8px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .table-column-visibility-head strong { font-size: 12px; font-weight: 750; color: #24364b; } .table-column-visibility-show-all { border: 0; padding: 4px 6px; border-radius: 6px; background: transparent; color: #0f63aa; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; } .table-column-visibility-show-all:hover { background: rgba(15, 99, 170, 0.08); } .table-column-visibility-list { max-height: 340px; overflow-y: auto; padding: 5px; } .table-column-visibility-item { width: 100%; min-height: 34px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 8px; background: transparent; color: #334155; text-align: left; cursor: pointer; } .table-column-visibility-item:hover { background: rgba(15, 99, 170, 0.07); } .table-column-visibility-item.is-hidden { color: #7b8797; } .table-column-visibility-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .theme-dark .table-edit-status { color: var(--text-muted); } /*contrast rail visual*/ .viz-contrast-rail { stroke: var(--viz-grid, rgba(148, 163, 184, 0.22)); stroke-width: 1.4; stroke-linecap: round; } .viz-contrast-zero-line { stroke-dasharray: 3 4; opacity: 0.78; } .viz-contrast-connector { stroke: var(--viz-primary, rgba(86, 126, 220, 0.38)); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 4; } .viz-contrast-label { font-weight: 650; } .viz-contrast-right-label { font-size: 8.4px; fill: var(--viz-text-muted, rgba(100, 116, 139, 0.82)); } .viz-contrast-value-label { font-family: var(--viz-font-family, var(--font-ui)); font-size: 8.5px; font-weight: 750; fill: var(--viz-text, rgba(30, 41, 59, 0.78)); paint-order: stroke; stroke: var(--viz-background, rgba(255, 255, 255, 0.9)); stroke-width: 3px; } .viz-contrast-evidence-marker { pointer-events: none; } .viz-contrast-evidence-strong { fill: none; stroke: var(--viz-primary-strong, rgba(79, 70, 229, 0.85)); stroke-width: 1.6; } .viz-contrast-evidence-weak { fill: none; stroke: var(--viz-text-muted, rgba(100, 116, 139, 0.42)); stroke-width: 1.2; } .viz-contrast-evidence-unknown { fill: var(--viz-text-muted, rgba(100, 116, 139, 0.18)); stroke: var(--viz-text-muted, rgba(100, 116, 139, 0.42)); stroke-width: 1; } .viz-contrast-evidence-small-n { fill: var(--viz-warning, rgba(245, 158, 11, 0.18)); stroke: var(--viz-warning, rgba(245, 158, 11, 0.72)); stroke-width: 1.2; } .theme-dark .viz-contrast-value-label { fill: rgba(248, 250, 252, 0.84); stroke: rgba(15, 23, 42, 0.92); } .theme-dark .viz-contrast-right-label { fill: rgba(203, 213, 225, 0.76); } /*unsaved change log*/ /* ------------------------------------------------------------ Table edit status + unsaved change popover ------------------------------------------------------------ */ .table-edit-status { position: relative; } .table-edit-status-wrap { position: relative; display: inline-flex; z-index: 100; overflow: visible; align-items: center; } .table-edit-status-button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--border-color-soft); border-radius: 999px; background: var(--panel-soft); color: var(--text-muted); font-size: 12px; font-weight: 800; cursor: pointer; } .table-edit-status-button.is-dirty { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-text); } .table-edit-status-button:hover { border-color: var(--accent-border); } .table-change-log-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(360px, calc(100vw - 40px)); display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--panel-solid); color: var(--text-color); box-shadow: var(--shadow-hover); z-index: 9999; } .table-change-log-popover[hidden] { display: none; } .table-change-log-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .table-change-log-head strong { font-size: 12px; font-weight: 900; } .table-change-log-head span { color: var(--text-muted); font-size: 11px; } .table-change-log-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; } .table-change-log-item { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 28px; padding: 5px 7px; border: 1px solid var(--border-color-soft); border-radius: 11px; background: var(--panel-soft); } .table-change-log-kind { display: inline-flex; justify-content: center; align-items: center; min-height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-strong); font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } .table-change-log-label { min-width: 0; color: var(--text-color); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-change-log-more, .table-change-log-empty { color: var(--text-muted); font-size: 11px; } /*END of unsaved change log*/ .dirty-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: #f59e0b; display: inline-block; } .table-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .table-pagination-bar { flex: 0 0 auto; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--table-border); background: var(--panel-soft); } .table-page-meta, .table-page-status, .table-rows-label { font-size: var(--font-sm); color: #666; } .theme-dark .table-page-meta, .theme-dark .table-page-status, .theme-dark .table-rows-label { color: var(--text-muted); } .table-page-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .table-rows-label select { margin-left: 6px; padding: 5px 8px; font-size: var(--font-sm); border: 1px solid #d9dde3; border-radius: 8px; background: var(--panel-solid); color: var(--text-main); } .data-table-shell { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--panel-solid); } .data-table-shell::-webkit-scrollbar { width: 8px; height: 8px; } .data-table-shell::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; } .data-table-shell::-webkit-scrollbar-track { background: #f5f7f9; } .theme-dark .data-table-shell::-webkit-scrollbar-thumb { background: #475569; } .theme-dark .data-table-shell::-webkit-scrollbar-track { background: #0f172a; } .data-grid-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; font-family: var(--font-ui); font-size: var(--font-md); color: #1d2731; background: var(--panel-solid); user-select: none; } .theme-dark .data-grid-table { color: var(--text-main); } .data-grid-table td, .data-grid-table th { overflow: hidden; text-overflow: ellipsis; user-select: none; } .data-grid-table thead th { position: sticky; top: 0; z-index: 10; background: var(--table-header-bg); text-align: left; font-weight: 500; color: #666666; padding: 8px 12px; border-right: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border); white-space: nowrap; vertical-align: middle; font-size: var(--font-sm); } .theme-dark .data-grid-table thead th { color: var(--text-muted); } .data-grid-table thead th:last-child { border-right: none; } .table-th-inner { display: flex; justify-content: space-between; align-items: center; gap: 8px; } th[data-column-id], .data-table-header-cell { position: relative; overflow: visible; } /* ------------------------------------------------------------ Table context menu ------------------------------------------------------------ */ .table-context-menu { position: fixed; z-index: 9999; min-width: 190px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--panel-solid); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.12); font-family: var(--font-ui); font-size: var(--font-sm); color: var(--text-main); } .table-context-menu[hidden] { display: none; } .table-context-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 30px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; } .table-context-menu-shortcut { margin-left: auto; color: var(--text-muted); font-size: 0.82em; opacity: 0.8; white-space: nowrap; } .table-context-menu-item:hover { background: rgba(86, 126, 220, 0.12); } .table-context-menu-item.is-danger { color: var(--danger, #ef4444); } .table-context-menu-separator { height: 1px; margin: 5px 4px; background: var(--border-subtle); } .table-context-menu-item:disabled, .table-context-menu-item.is-disabled { opacity: 0.42; cursor: not-allowed; } .table-context-menu-item:disabled:hover { background: transparent; } .table-context-menu-section-label, .palette-context-menu-section-label { padding: 7px 10px 4px; color: var(--text-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; user-select: none; } .table-context-menu-section-label:not(:first-child), .palette-context-menu-section-label:not(:first-child) { margin-top: 5px; border-top: 1px solid var(--border-color-soft); } /* ------------------------------------------------------------ Column reordering ------------------------------------------------------------ */ /* .data-table-header-cell[draggable="true"], th[data-column-id][draggable="true"] { cursor: grab; } .data-table-header-cell[draggable="true"]:active, th[data-column-id][draggable="true"]:active { cursor: grabbing; }*/ .table-th-label, .table-th-reorder-handle { cursor: grab; } .table-th-label:active, .table-th-reorder-handle:active { cursor: grabbing; } .is-column-dragging { opacity: 0.55; } .is-column-drop-left, .is-column-drop-right { position: relative; } .is-column-drop-left::before, .is-column-drop-right::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 999px; background: var(--accent); z-index: 2; } .is-column-drop-left::before { left: 0; } .is-column-drop-right::after { right: 0; } /*end of column reordering*/ th[data-column-id][draggable="true"] .table-col-resize-handle, .data-table-header-cell[draggable="true"] .table-col-resize-handle { /*cursor: col-resize !important;*/ z-index: 50; } body.is-resizing-table-col, body.is-resizing-table-col * { /*cursor: col-resize !important;*/ user-select: none; } .table-th-type-badge { border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.85); border-radius: var(--radius-pill); min-width: 28px; height: 22px; padding: 0 6px; font-size: 11px; font-weight: 800; cursor: pointer; } .theme-dark .table-th-type-badge { background: rgba(15, 23, 42, 0.85); border-color: rgba(148, 163, 184, 0.18); } .table-th-type-badge:hover { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.08); } .table-th-type-badge svg, .palette-card-icon svg, .chip-icon svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .table-th-type-badge svg text { fill: currentColor; stroke: none; } .table-th-label { color: #666666; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; user-select: none; } .theme-dark .table-th-label { color: var(--text-muted); } .table-sort-indicator { display: inline-flex; margin-left: 4px; font-size: 11px; opacity: 0.75; } .table-filter-indicator { margin-left: 4px; font-size: 10px; color: #4f46e5; } .table-th-actions { display: flex; align-items: center; gap: 6px; } .table-th-actions span { cursor: pointer; opacity: 0.6; font-size: 11px; } .table-th-actions span:hover { opacity: 1; } .data-grid-table tbody td { padding: 2px 6px; border-right: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border); white-space: nowrap; vertical-align: top; background: var(--panel-solid); } .data-grid-table tbody td:last-child { border-right: none; } .data-grid-table tbody tr:hover td:not(.is-in-selected-range):not(.is-active-cell):not(.is-editing) { background-color: var(--table-hover); } .data-grid-table th:first-child, .data-grid-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel-solid); } .data-grid-table thead th:first-child { z-index: 12; background: var(--table-header-bg); } .row-index-header, .row-index-cell { width: 15px; min-width: min-content; max-width: 50px; text-align: right; color: #666; } .row-index-cell { font-size: var(--font-sm); color: #065eb5; font-weight: 500; cursor: pointer; user-select: none; } .row-index-cell:hover { background: #f3f6fb !important; } .row-index-cell.row-selected { background: rgba(59, 130, 246, 0.08) !important; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22); } .data-grid-table tbody tr.table-row-selected td, .table-col-selected, .column-chip.is-selected, .palette-column-card.is-selected, .data-grid-table thead th.table-col-selected { /*background-color: rgba(161, 48, 210, 0.05) !important;*/ background: #e0e7ff80 !important; /*box-shadow: 0 0 4px 0px rgba(161, 48, 210, 0.25);*/ outline: 2px solid rgba(86, 126, 220, 0.28); outline-offset: -2px; } .data-grid-table tbody tr.is-ignored-row td { opacity: 0.45; background: #f3f4f6; text-decoration: line-through; } .data-grid-table tbody tr.is-ignored-row .row-index-cell::after { content: " ignored"; margin-left: 6px; font-size: 11px; color: #6b7280; text-decoration: none; } .table-empty-cell { text-align: center; color: #666; padding: 20px !important; background: var(--panel-solid) !important; } .editable-data-cell { cursor: cell; outline: none; position: relative; height: 22px; max-width: 240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .editable-data-cell:hover { background: #f8fafc; } .theme-dark .editable-data-cell:hover { background: rgba(255, 255, 255, 0.04); } .editable-data-cell .cell-value { display: inline-block; min-width: 1ch; } /* .editable-data-cell .cell-badge { display: inline-flex; margin-left: 6px; vertical-align: middle; }*/ .editable-data-cell.is-in-selected-range { background: var(--table-selection); } .editable-data-cell.is-active-cell { box-shadow: inset 0 0 2px 2px #4a6adb; background: #f8f7ff; } .theme-dark .editable-data-cell.is-active-cell { background: rgba(139, 167, 255, 0.14); } .editable-data-cell.is-range-anchor { box-shadow: inset 0 0 0 2px #4f46e5; } .editable-data-cell.is-active-cell.is-in-selected-range { background: #e0e7ff; } .theme-dark .editable-data-cell.is-active-cell.is-in-selected-range { background: rgba(139, 167, 255, 0.22); } /* .editable-data-cell.is-edited { background: #fff7d6; } .theme-dark .editable-data-cell.is-edited { background: rgba(245, 158, 11, 0.18); }*/ .editable-data-cell.is-editing { padding: 0; background: var(--panel-solid); height: 22px; } .cell-editor-input { box-sizing: border-box; width: 100%; height: 22px; min-height: 20px; border: none; outline: none; padding: 0 8px; font: inherit; line-height: 22px; background: transparent; color: inherit; user-select: text; } .editable-data-cell.is-copied-top { border-top: 2px dashed #4f46e5; } .editable-data-cell.is-copied-bottom { border-bottom: 2px dashed #4f46e5; } .editable-data-cell.is-copied-left { border-left: 2px dashed #4f46e5; } .editable-data-cell.is-copied-right { border-right: 2px dashed #4f46e5; } .table-placeholder-card { margin: 16px; border: 1px solid var(--table-border); border-radius: 14px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; font-size: var(--font-md); background: var(--panel-solid); } /* Column/table menus */ .column-menu, .column-filter-menu, .column-type-menu { position: fixed; z-index: 9999; border: 1px solid var(--border-color-soft); background: var(--panel-solid); box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14); } .column-menu { min-width: 140px; max-width: 280px; padding: 6px; border-radius: 10px; } .column-menu-item { padding: 8px 10px; font-size: var(--font-sm); cursor: pointer; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .column-menu-item:hover { background: var(--panel-soft); } .column-menu-section-label { padding: 7px 10px 4px; color: var(--text-muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; user-select: none; } .column-menu-separator { height: 1px; margin: 6px 6px; background: var(--border-color-soft); } .column-filter-menu { width: 260px; padding: 12px; border-radius: 12px; } .filter-title { font-size: var(--font-md); font-weight: 700; margin-bottom: 10px; color: var(--text-color); } .filter-field { display: grid; gap: 4px; margin-bottom: 10px; font-size: var(--font-sm); color: #4b5563; } .theme-dark .filter-field { color: var(--text-muted); } .filter-field input, .filter-field select { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 8px; font-size: var(--font-md); background: var(--panel-solid); color: var(--text-main); } .filter-checklist { max-height: 180px; overflow: auto; display: grid; gap: 6px; margin-bottom: 10px; } .filter-check { display: flex; gap: 8px; align-items: center; font-size: var(--font-md); } .filter-actions { display: flex; justify-content: flex-end; gap: 8px; } .column-type-menu { width: 260px; padding: 6px; border-radius: 14px; z-index: 3000; } .column-type-menu-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; width: 100%; gap: 9px; border: none; background: transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; text-align: left; } .column-type-menu-item:hover { background: rgba(99, 102, 241, 0.08); } .column-type-menu-item.is-active { background: rgba(99, 102, 241, 0.13); } .column-type-copy { min-width: 0; } .column-type-label { display: block; font-size: var(--font-md); font-weight: 800; color: var(--text-color); } .column-type-hint { display: block; margin-top: 2px; font-size: var(--font-xs); color: var(--text-muted); } .column-type-order-btn { border: 1px solid rgba(99, 102, 241, 0.25); background: rgba(99, 102, 241, 0.08); color: #4338ca; border-radius: var(--radius-pill); padding: 4px 8px; font-size: var(--font-xs); font-weight: 800; cursor: pointer; } .column-type-order-btn:hover { background: rgba(99, 102, 241, 0.14); } .column-type-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .column-type-icon svg text { fill: currentColor; } .column-rename-input { width: 100px; min-width: 90px; border: none; outline: none; background: var(--panel-solid); color: var(--text-main); font: inherit; font-weight: 700; padding: 2px 4px; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.4); } .table-col-resize-handle { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; /*cursor: col-resize !important;*/ z-index: 50; user-select: none; touch-action: none; } .table-col-resize-handle:hover { background: rgba(86, 126, 220, 0.16); } body.is-resizing-table-col { /*cursor: col-resize;*/ user-select: none; } /* Ordinal order dialog */ .ordinal-order-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.18); display: flex; align-items: center; justify-content: center; z-index: 4000; } .ordinal-order-dialog { width: 360px; max-height: 80vh; overflow: auto; background: var(--panel-solid); border-radius: 18px; padding: 16px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22); } .ordinal-order-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ordinal-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .ordinal-order-header h3 { margin: 2px 0 0; font-size: 16px; } .ordinal-close-btn { border: none; background: transparent; font-size: 22px; cursor: pointer; } .ordinal-help { margin: 10px 0; font-size: var(--font-sm); color: var(--text-muted); } .ordinal-order-list { display: grid; gap: 6px; } .ordinal-order-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 12px; background: #f9fafb; } .theme-dark .ordinal-order-item { border-color: rgba(148, 163, 184, 0.16); background: rgba(255, 255, 255, 0.04); } .ordinal-rank { width: 22px; height: 22px; border-radius: var(--radius-pill); background: #eef2ff; color: #4338ca; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-sm); font-weight: 800; } .ordinal-value { flex: 1; font-size: var(--font-md); font-weight: 600; } .ordinal-buttons { display: flex; gap: 4px; } .ordinal-buttons button { border: 1px solid rgba(15, 23, 42, 0.1); background: var(--panel-solid); border-radius: 8px; cursor: pointer; } .ordinal-order-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } /*derived panel*/ .derived-formula-popover { position: fixed; z-index: 9999; width: 320px; padding: 14px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--panel-muted); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16); } .derived-formula-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .derived-formula-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .derived-formula-title { font-size: 15px; font-weight: 750; color: var(--text-color); } .derived-formula-close { border: none; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; } .derived-formula-body { display: grid; gap: 8px; } .derived-formula-row { display: grid; gap: 3px; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface-color) 86%, var(--border-color) 14%); } .derived-formula-row span { font-size: 11px; color: var(--text-muted); } .derived-formula-row strong { font-size: 13px; color: var(--text-color); word-break: break-word; } .derived-formula-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } /* ========================================================================== 12. RIGHT COLUMN PALETTE ========================================================================== */ #right-palette { min-height: 0; position: relative; display: flex; flex-direction: column; width: var(--right-palette-w); padding: 12px; border-left: 1px solid var(--border-color-soft); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); } .theme-dark #right-palette { background: rgba(17, 24, 39, 0.88); } .palette-header { padding: 4px 2px 12px; } .palette-title { margin: 0; font-size: 17px; color: var(--text-main); } .palette-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .palette-tab { border: 1px solid var(--border-color-soft); background: #f5f7fb; border-radius: var(--radius-pill); font-size: var(--font-sm); padding: 7px 10px; cursor: pointer; color: var(--text-main); } .theme-dark .palette-tab { background: rgba(255, 255, 255, 0.04); } .palette-tab.active { background: var(--panel-solid); border-color: var(--accent-border); font-weight: 650; } .palette-tab:hover { border-color: var(--accent-border); box-shadow: var(--shadow-soft); transform: translateY(-2px); transition: all 0.2s ease-in; } .palette-panel { display: none; min-height: 0; flex: 1; overflow: auto; } .palette-panel.active { display: block; } .palette-search-wrap { padding: 8px 10px 6px; } .palette-search-input { width: 100%; height: 32px; border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.22)); border-radius: 999px; padding: 0 12px; font-size: 12px; color: var(--text-main, #e5e7eb); background: var(--panel-soft, rgba(15, 23, 42, 0.42)); outline: none; } .palette-search-input::placeholder { color: var(--text-muted, #94a3b8); } .palette-search-input:focus { border-color: var(--accent, #8ba7ff); box-shadow: 0 0 0 2px rgba(139, 167, 255, 0.14); } .column-grid-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; padding-top: 5px; } .palette-column-card { border: 1px solid var(--border-color-soft); border-radius: 14px; background: var(--panel-solid); padding: 10px; min-height: 126px; cursor: grab; transition: 0.15s ease; } .palette-column-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .palette-column-card.is-dragging { opacity: 0.6; cursor: grabbing; } .palette-column-card.is-onboarding-source { animation: grid-onboarding-palette-card 1.35s ease-in-out 2; } @keyframes grid-onboarding-palette-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .onboarding-drag-ghost { box-sizing: border-box; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.12)); } .palette-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .palette-card-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: #4f79d8; display: grid; place-items: center; font-size: var(--font-sm); font-weight: 700; flex-shrink: 0; } .palette-card-name { font-size: var(--font-sm); font-weight: 600; line-height: 1.3; word-break: break-word; color: var(--text-main); } .palette-card-type { margin-top: 2px; font-size: var(--font-xs); color: var(--text-muted); } /*.palette-card-viz { height: 56px; border-radius: 10px; border: 1px dashed #dbe4f0; background: #fafcff; margin-bottom: 8px; } .theme-dark .palette-card-viz { border-color: rgba(148, 163, 184, 0.22); background: rgba(15, 23, 42, 0.45); }*/ /* Palette glyphs and visualizations */ .palette-card-viz { position: relative; height: 56px; margin-bottom: 8px; overflow: visible; border: 1px solid var(--border-color-soft); border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-solid) 94%, var(--accent-soft)), var(--panel-solid)); } .palette-card-viz--glyph { padding: 3px 8px 5px; } .palette-data-glyph { --palette-glyph-color: #46617f; /*#567edc;*/ --palette-glyph-soft: rgba(86, 126, 220, 0.34); position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 4px; gap: 3px; } .palette-data-glyph--low-cardinality-numeric { --palette-glyph-color: #159788; --palette-glyph-soft: rgba(21, 151, 136, 0.32); } .palette-data-glyph--binary, .palette-data-glyph--categorical, .palette-data-glyph--text { --palette-glyph-color: #7757d9; --palette-glyph-soft: rgba(119, 87, 217, 0.3); } .palette-data-glyph--ordinal { --palette-glyph-color: #e97824; --palette-glyph-soft: rgba(233, 120, 36, 0.3); } .palette-data-glyph--date, .palette-data-glyph--time { --palette-glyph-color: #1596a3; --palette-glyph-soft: rgba(21, 150, 163, 0.3); } .palette-data-glyph--id { --palette-glyph-color: #46617f; --palette-glyph-soft: rgba(70, 97, 127, 0.3); } .palette-glyph-range-track { fill: color-mix(in srgb, var(--palette-glyph-color) 18%, transparent); } .palette-glyph-iqr-band { fill: color-mix(in srgb, var(--palette-glyph-color) 62%, transparent); } .palette-glyph-median { stroke: var(--panel-solid); stroke-width: 2; stroke-linecap: round; } .palette-glyph-mean { fill: var(--palette-glyph-color); stroke: var(--panel-solid); stroke-width: 1; } .palette-data-glyph>svg { width: 100%; height: 100%; min-height: 0; overflow: visible; } .palette-glyph-line { fill: none; stroke: var(--palette-glyph-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .palette-glyph-line--soft { opacity: 0.52; } .palette-glyph-line--dotted { stroke-dasharray: 1 7; stroke-width: 3; } .palette-glyph-fill { fill: var(--palette-glyph-color); } .palette-glyph-fill--soft { opacity: 0.66; } .palette-glyph-outline, .palette-glyph-endpoint { fill: var(--panel-solid); stroke: var(--palette-glyph-color); stroke-width: 1.7; } .palette-glyph-track { fill: var(--palette-glyph-soft); } .palette-glyph-text { fill: var(--palette-glyph-color); font-size: 9px; font-weight: 650; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .palette-glyph-text-line { stroke: var(--palette-glyph-color); stroke-width: 3.4; stroke-linecap: round; } .palette-glyph-text-line--soft { opacity: 0.58; } .palette-glyph-id-line { stroke: var(--palette-glyph-color); stroke-width: 1.1; opacity: 0.82; } /* .palette-glyph-id-line--strong { stroke-width: 2; opacity: 1; }*/ /* Completion strip */ .palette-quality { position: relative; width: 100%; height: 4px; border-radius: 999px; outline: none; } .palette-quality-track { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: color-mix(in srgb, var(--text-muted) 14%, transparent); } .palette-quality-fill { width: 100%; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--palette-glyph-color) 72%, transparent); transition: width 180ms ease; } .palette-quality.has-warning .palette-quality-fill { background: #d59a32; } .palette-quality.has-danger .palette-quality-fill { background: #d46161; } .palette-card-viz.is-profile-pending .palette-data-glyph>svg { opacity: 0.52; } .palette-quality.is-pending .palette-quality-track { overflow: hidden; background: color-mix(in srgb, var(--text-muted) 11%, transparent); } .palette-quality.is-pending .palette-quality-fill { width: 38%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--palette-glyph-color) 46%, transparent), transparent); animation: palette-profile-loading 1.35s ease-in-out infinite; } @keyframes palette-profile-loading { from { transform: translateX(-150%); } to { transform: translateX(360%); } } @media (prefers-reduced-motion: reduce) { .palette-quality.is-pending .palette-quality-fill { animation: none; width: 100%; opacity: 0.35; } } /* Stylish, restrained tooltip */ .palette-quality-tooltip { position: absolute; z-index: 120; left: 50%; bottom: calc(100% + 9px); width: max-content; max-width: 210px; padding: 8px 10px; border: 1px solid var(--border-color-soft); border-radius: 9px; background: var(--panel-solid); color: var(--text-main); box-shadow: var(--shadow-soft); font-size: var(--font-xs); line-height: 1.4; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; } .palette-quality-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid var(--border-color-soft); border-bottom: 1px solid var(--border-color-soft); background: var(--panel-solid); transform: translateX(-50%) rotate(45deg); } .palette-quality-tooltip-title { margin-bottom: 2px; font-weight: 650; } .palette-quality-tooltip-rate { margin-top: 2px; color: var(--text-muted); } .palette-quality:hover .palette-quality-tooltip, .palette-quality:focus-visible .palette-quality-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .palette-quality:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-border) 56%, transparent); } /* Dark mode */ .theme-dark .palette-card-viz { background: color-mix(in srgb, var(--panel-solid) 92%, var(--accent-soft)); } .theme-dark .palette-glyph-outline, .theme-dark .palette-glyph-endpoint { fill: var(--panel-solid); } @media (prefers-reduced-motion: reduce) { .palette-quality-fill, .palette-quality-tooltip { transition: none; } } @media (prefers-reduced-motion: reduce) { #add-dataset-tree-btn.is-onboarding-pulse, .palette-column-card.is-onboarding-source { animation: none; } .onboarding-drag-ghost { display: none; } } .palette-card-footer { font-size: var(--font-xs); color: var(--text-muted); } .palette-empty { font-size: var(--font-sm); color: var(--text-muted); padding: 8px 2px; } .palette-resize-handle { position: absolute; left: -5px; top: 0; width: 10px; height: 100%; /*cursor: col-resize;*/ z-index: 20; } .palette-resize-handle::after { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: transparent; } .palette-resize-handle:hover::after, body.is-resizing-palette .palette-resize-handle::after { background: rgba(86, 126, 220, 0.45); } #right-palette.is-rail { padding: 10px 8px; } #right-palette.is-rail .palette-header, #right-palette.is-rail .palette-tabs, #right-palette.is-rail .palette-card-name, #right-palette.is-rail .palette-card-type, #right-palette.is-rail .palette-card-viz, #right-palette.is-rail .palette-card-footer { display: none; } #right-palette.is-rail .column-grid-palette { grid-template-columns: 1fr; } #right-palette.is-rail .palette-column-card { min-height: 42px; padding: 8px; border-radius: 12px; } #right-palette.is-rail .palette-card-top { margin: 0; justify-content: center; } /*derived columns*/ .derived-palette-header { padding: 10px; border-bottom: 1px solid var(--border-color); } #create-derived-column-btn { width: 100%; } .derived-column-list { display: grid; gap: 8px; padding: 10px; } .derived-column-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface-color); } .derived-column-name { font-size: 13px; font-weight: 700; color: var(--text-color); } .derived-column-meta { margin-top: 3px; font-size: 11px; color: var(--text-muted); } .derived-column-formula-btn { border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 11px; padding: 4px 8px; cursor: pointer; } .derived-column-formula-btn:hover { color: var(--text-color); border-color: var(--text-muted); } /*Inspector Details Panel*/ .block-inspector-empty { padding: 14px; color: var(--text-muted); font-size: 13px; } .block-inspector-content { padding: 12px; overflow: auto; } .block-inspector { display: grid; gap: 14px; } .block-inspector-header { padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); } .block-inspector-title { margin: 2px 0 0; font-size: 15px; line-height: 1.25; } .block-inspector-section { display: grid; gap: 8px; } .block-inspector-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .block-inspector-list { display: grid; gap: 6px; } .block-inspector-item { padding: 8px 9px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--panel-soft); font-size: 12px; line-height: 1.35; color: var(--text-main); } .block-inspector-item.is-muted { color: var(--text-muted); } .block-inspector--grouped-analysis .block-inspector-item { font-variant-numeric: tabular-nums; } .block-inspector-substack { display: grid; gap: 14px; } .block-inspector--group-summary .block-inspector-item, .block-inspector--describe .block-inspector-item, .block-inspector--relate .block-inspector-item, .block-inspector--compare .block-inspector-item, .block-inspector--associate .block-inspector-item { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ Derived Formula Composer v2 Theme-safe: follows existing :root / .theme-dark variables ------------------------------------------------------------ */ #derived-builder-root { position: relative; z-index: 10000; } .formula-composer-backdrop { position: fixed; inset: 0; z-index: 10000; background: color-mix(in srgb, #0f172a 42%, transparent); } .formula-composer-sheet { position: fixed; top: 18px; right: 18px; bottom: 18px; width: min(1040px, calc(100vw - 36px)); z-index: 10001; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-radius: 26px; background: var(--panel-solid); color: var(--text-color); box-shadow: var(--shadow-hover); } .formula-composer-header { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border-color-soft); } .formula-composer-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } .formula-composer-header h2 { margin: 3px 0 4px; font-size: 22px; line-height: 1.1; color: var(--text-color); } .formula-composer-header p { margin: 0; max-width: 640px; font-size: 13px; color: var(--text-muted); } .formula-composer-close { width: 34px; height: 34px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 22px; cursor: pointer; } .formula-composer-close:hover { color: var(--text-color); border-color: var(--accent-border); background: var(--hover-bg); } .formula-composer-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 0; } .formula-composer-main { min-width: 0; overflow: auto; padding: 20px; display: grid; align-content: start; gap: 12px; } .formula-library { overflow: auto; padding: 16px; border-left: 1px solid var(--border-color-soft); background: color-mix(in srgb, var(--panel-soft) 76%, transparent); } /* ------------------------------------------------------------ Name row ------------------------------------------------------------ */ .formula-name-row { display: grid; gap: 7px; } .formula-name-row label, .formula-label, .formula-section-title { font-size: 12px; font-weight: 800; color: var(--text-color); } .formula-name-row input { min-height: 40px; border: 1px solid var(--border-color); border-radius: 14px; padding: 8px 12px; background: var(--panel-solid); color: var(--text-color); font-size: 14px; outline: none; } .formula-name-row input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } /* ------------------------------------------------------------ Top command bar ------------------------------------------------------------ */ .formula-top-tools { display: grid; grid-template-columns: 190px 250px minmax(280px, 1fr); grid-template-areas: "operators values logic" "functions functions functions"; gap: 10px; align-items: stretch; } .formula-top-tools .formula-library-section { min-width: 0; width: auto; margin-bottom: 0; padding: 10px; gap: 8px; border-radius: 18px; border: 1px solid var(--border-color-soft); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%), var(--panel-solid); box-shadow: var(--shadow-sm); } .formula-tool-section { min-width: 0; } .formula-top-tools .formula-section-title { font-size: 10px; line-height: 1; letter-spacing: 0.075em; text-transform: uppercase; color: var(--text-muted); } .formula-operator-tool-section { grid-area: operators; } .formula-value-tool-section { grid-area: values; } .formula-logic-tool-section { grid-area: logic; } .formula-function-tool-section { grid-area: functions; } /* Operators */ .formula-top-tools .formula-operator-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .formula-top-tools .formula-operator-grid button { width: auto; height: 34px; min-height: 34px; padding: 0; border-radius: 12px; border: 1px solid var(--border-color-soft); background: var(--panel-soft); color: var(--text-color); font-size: 15px; font-weight: 900; box-shadow: none; cursor: grab; } .formula-top-tools .formula-operator-grid button:hover { border-color: var(--accent-border); background: var(--hover-bg); } /* Constant values */ .formula-value-tools { display: grid; gap: 6px; } .formula-value-tool-section .formula-value-tools+.formula-value-tools { margin-top: 6px; } .formula-top-tools .formula-value-tool-section .formula-number-row { display: grid; grid-template-columns: minmax(0, 1fr) 68px; gap: 6px; align-items: center; } .formula-top-tools .formula-value-tool-section .formula-number-row input { width: 100%; height: 32px; min-height: 32px; border-radius: 11px; padding: 5px 9px; border: 1px solid var(--border-color-soft); background: var(--panel-soft); color: var(--text-color); font-size: 12px; outline: none; } .formula-top-tools .formula-value-tool-section .formula-number-row input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .formula-top-tools .formula-value-tool-section .formula-number-row button { height: 32px; min-height: 32px; border-radius: 11px; padding: 0 8px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-size: 10.5px; font-weight: 850; white-space: nowrap; cursor: pointer; } .formula-top-tools .formula-value-tool-section .formula-number-row button:hover { border-color: var(--accent); background: var(--hover-bg); } /* Functions */ .formula-top-tools .formula-function-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 104px; overflow: auto; padding-right: 2px; } .formula-top-tools .formula-function-grid button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border-color-soft); background: var(--panel-soft); color: var(--text-color); text-align: left; box-shadow: none; cursor: pointer; } .formula-top-tools .formula-function-grid button:hover { border-color: var(--accent-border); background: var(--hover-bg); } .formula-top-tools .formula-function-grid button strong { font-size: 11px; line-height: 1; font-weight: 850; } .formula-top-tools .formula-function-grid button small { display: inline; font-size: 9.5px; color: var(--text-muted); opacity: 0.85; } /* ------------------------------------------------------------ Formula workspace ------------------------------------------------------------ */ .formula-workspace { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border-color-soft); border-radius: 22px; background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%), var(--panel-solid); } .formula-workspace-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .formula-display-text { margin-top: 4px; font-size: 13px; color: var(--text-muted); word-break: break-word; } .formula-status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; } .formula-status-pill.is-ready { background: var(--success-bg); color: var(--success-text); } .formula-status-pill.is-warning { background: var(--warning-bg); color: var(--warning-text); } .formula-token-canvas { min-height: 118px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 8px; padding: 14px; border: 1px dashed var(--border-color); border-radius: 18px; background: color-mix(in srgb, var(--panel-solid) 72%, transparent); } .formula-token-canvas.is-drag-over { border-color: var(--accent); background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%), color-mix(in srgb, var(--panel-solid) 82%, transparent); } .formula-canvas-placeholder { color: var(--text-muted); font-size: 13px; } /* ------------------------------------------------------------ Formula tokens ------------------------------------------------------------ */ .formula-token, .formula-group-select, .formula-group-remove { border: 1px solid var(--border-color); border-radius: 999px; min-height: 32px; padding: 6px 11px; background: var(--panel-solid); color: var(--text-color); font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .formula-token:hover, .formula-group-select:hover, .formula-group-remove:hover { transform: translateY(-1px); border-color: var(--accent-border); box-shadow: var(--shadow-sm); } .formula-token.is-selected, .formula-token-group.is-selected, .formula-token-group:has(.is-selected) { outline: 2px solid var(--accent-border); outline-offset: 2px; } .formula-token-column { background: color-mix(in srgb, var(--accent) 13%, var(--panel-solid)); border-color: var(--accent-border); } .formula-token-number { background: color-mix(in srgb, #0ea5e9 14%, var(--panel-solid)); border-color: color-mix(in srgb, #0ea5e9 34%, transparent); } .formula-token-string { background: color-mix(in srgb, #ec4899 13%, var(--panel-solid)); border-color: color-mix(in srgb, #ec4899 32%, transparent); } .formula-token-operator { min-width: 34px; padding-inline: 10px; background: color-mix(in srgb, var(--text-color) 5%, transparent); } .formula-token.is-dragging, .formula-token-group.is-dragging { opacity: 0.45; transform: scale(0.98); } /* Groups */ .formula-token-group { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--accent-border); border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .formula-group-inner { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } .formula-group-select, .formula-group-remove { min-width: 28px; height: 28px; min-height: 28px; padding: 0; background: var(--panel-solid); } .formula-group-select { color: var(--accent); } .formula-group-remove { color: var(--danger-text); } /* Functions inside formula */ .formula-token-function { display: inline-flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .formula-function-head, .formula-function-unwrap { border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 999px; min-height: 28px; padding: 0 8px; background: var(--panel-solid); color: var(--text-color); font-size: 12px; font-weight: 800; cursor: pointer; } .formula-function-unwrap { color: var(--danger-text); } .formula-function-inner, .formula-function-arg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } .formula-function-comma { color: var(--text-muted); font-weight: 800; } /* IF token inside formula canvas */ .formula-token-if { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--warning-border); border-radius: 18px; background: var(--warning-bg); } .formula-if-head, .formula-if-label { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-text); font-size: 11px; font-weight: 900; } .formula-if-head { border: 1px solid var(--warning-border); cursor: pointer; } .formula-if-part { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } .formula-if-operator { font-size: 12px; font-weight: 900; color: var(--text-muted); } .formula-token-if.is-selected, .formula-token-if:has(.is-selected) { outline: 2px solid var(--warning-border); outline-offset: 2px; } /* ------------------------------------------------------------ Formula actions ------------------------------------------------------------ */ .formula-action-bar { display: flex; flex-wrap: wrap; gap: 8px; } .formula-soft-btn { border: 1px solid var(--border-color); border-radius: 999px; padding: 7px 11px; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 750; cursor: pointer; } .formula-soft-btn:hover { color: var(--text-color); border-color: var(--accent-border); background: var(--hover-bg); } /* ------------------------------------------------------------ Preview ------------------------------------------------------------ */ .formula-preview-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border-color-soft); border-radius: 18px; background: var(--panel-solid); } .formula-preview-list { display: grid; gap: 5px; } .formula-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, var(--panel-soft) 86%, transparent); font-size: 12px; } .formula-preview-row span { color: var(--text-muted); } .formula-preview-row strong { color: var(--text-color); } .formula-preview-empty, .formula-library-empty { font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* ------------------------------------------------------------ Right column library ------------------------------------------------------------ */ .formula-library-section { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border-color-soft); border-radius: 18px; background: var(--panel-solid); margin-bottom: 12px; } .formula-chip-list { display: flex; flex-wrap: wrap; gap: 7px; } .formula-chip, .formula-template-card, .formula-operator-grid button, .formula-number-row button { border: 1px solid var(--border-color); border-radius: 999px; background: var(--panel-solid); color: var(--text-color); cursor: pointer; } .formula-chip { padding: 7px 10px; font-size: 12px; font-weight: 750; } .formula-chip:hover { border-color: var(--accent-border); background: var(--hover-bg); } .formula-chip-column { display: inline-grid; gap: 2px; border-radius: 14px; text-align: left; } .formula-chip-column span { font-size: 12px; font-weight: 800; } .formula-chip-column small { font-size: 10px; color: var(--text-muted); } .formula-template-card { display: grid; gap: 3px; width: 100%; padding: 10px 11px; border-radius: 14px; text-align: left; } .formula-template-card strong { font-size: 13px; } .formula-template-card span { font-size: 11px; color: var(--text-muted); } /* General function grid fallback outside top tools */ .formula-function-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .formula-function-grid button { display: grid; gap: 2px; min-height: 44px; border: 1px solid var(--border-color); border-radius: 13px; background: var(--panel-solid); color: var(--text-color); cursor: pointer; text-align: left; padding: 7px 9px; } .formula-function-grid button strong { font-size: 12px; } .formula-function-grid button small { font-size: 10px; color: var(--text-muted); } .formula-library-hint { font-size: 11px; line-height: 1.35; color: var(--text-muted); } /* General number row fallback */ .formula-number-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; } .formula-number-row input { min-width: 0; border: 1px solid var(--border-color); border-radius: 12px; padding: 7px 9px; background: var(--panel-solid); color: var(--text-color); } /* ------------------------------------------------------------ Drag affordances ------------------------------------------------------------ */ .formula-chip[draggable="true"], .formula-operator-grid button[draggable="true"], .formula-token[draggable="true"], .formula-token-group[draggable="true"] { cursor: grab; } .formula-chip[draggable="true"]:active, .formula-operator-grid button[draggable="true"]:active, .formula-token[draggable="true"]:active, .formula-token-group[draggable="true"]:active { cursor: grabbing; } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .formula-composer-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--border-color-soft); } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (max-width: 1180px) { .formula-top-tools { grid-template-columns: 1fr 1fr; grid-template-areas: "operators values" "logic logic" "functions functions"; } } @media (max-width: 820px) { .formula-composer-body { grid-template-columns: 1fr; } .formula-library { border-left: none; border-top: 1px solid var(--border-color-soft); } .formula-top-tools { grid-template-columns: 1fr; grid-template-areas: "operators" "values" "logic" "functions"; } } /* ------------------------------------------------------------ Formula Composer: elegant top command bar ------------------------------------------------------------ */ .formula-top-tools { display: grid; grid-template-columns: 190px 250px minmax(280px, 1fr); grid-template-areas: "operators values logic" "functions functions functions"; gap: 10px; align-items: stretch; } /* Tool cards */ .formula-top-tools .formula-library-section { min-width: 0; width: auto; margin-bottom: 0; padding: 10px; gap: 8px; border-radius: 18px; border: 1px solid var(--border-color-soft); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%), var(--panel-solid); box-shadow: var(--shadow-sm); } .formula-tool-section { min-width: 0; } .formula-top-tools .formula-section-title { font-size: 10px; line-height: 1; letter-spacing: 0.075em; text-transform: uppercase; color: var(--text-muted); } /* ------------------------------------------------------------ Place cards in grid ------------------------------------------------------------ */ .formula-operator-tool-section { grid-area: operators; } .formula-value-tool-section { grid-area: values; } .formula-logic-tool-section { grid-area: logic; } .formula-function-tool-section { grid-area: functions; } /* ------------------------------------------------------------ Operators: compact but readable ------------------------------------------------------------ */ .formula-top-tools .formula-operator-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .formula-top-tools .formula-operator-grid button { width: auto; height: 34px; min-height: 34px; padding: 0; border-radius: 12px; border: 1px solid var(--border-color-soft); background: var(--panel-soft); color: var(--text-color); font-size: 15px; font-weight: 900; box-shadow: none; } .formula-top-tools .formula-operator-grid button:hover { border-color: var(--accent-border); background: var(--hover-bg); } /* ------------------------------------------------------------ Constant values: compact two-row block ------------------------------------------------------------ */ .formula-value-tools { display: grid; gap: 6px; } .formula-value-tool-section .formula-value-tools+.formula-value-tools { margin-top: 6px; } .formula-top-tools .formula-value-tool-section .formula-number-row { display: grid; grid-template-columns: minmax(0, 1fr) 68px; gap: 6px; align-items: center; } .formula-top-tools .formula-value-tool-section .formula-number-row input { width: 100%; height: 32px; min-height: 32px; border-radius: 11px; padding: 5px 9px; border: 1px solid var(--border-color-soft); background: var(--panel-soft); color: var(--text-color); font-size: 12px; outline: none; } .formula-top-tools .formula-value-tool-section .formula-number-row input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .formula-top-tools .formula-value-tool-section .formula-number-row button { height: 32px; min-height: 32px; border-radius: 11px; padding: 0 8px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-size: 10.5px; font-weight: 850; white-space: nowrap; } .formula-top-tools .formula-value-tool-section .formula-number-row button:hover { border-color: var(--accent); background: var(--hover-bg); } /* ------------------------------------------------------------ Logic / IF builder — simple stacked rule ------------------------------------------------------------ */ .formula-if-builder { display: grid; gap: 7px; } .formula-if-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 7px; align-items: center; } .formula-if-row:first-child { grid-template-columns: 46px minmax(120px, 1.25fr) minmax(72px, 0.75fr); } .formula-if-word { display: inline-flex; align-items: center; justify-content: center; height: 30px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-text); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; } .formula-if-builder select, .formula-if-builder input { min-width: 0; width: 100%; height: 30px; min-height: 30px; border: 1px solid var(--border-color-soft); border-radius: 10px; padding: 5px 8px; background: var(--panel-soft); color: var(--text-color); font-size: 11px; outline: none; } .formula-if-builder select { padding-right: 24px; text-overflow: ellipsis; } .formula-if-builder select:focus, .formula-if-builder input:focus { border-color: var(--warning-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text) 12%, transparent); } .formula-if-builder button { width: 100%; height: 32px; min-height: 32px; border: 1px solid var(--warning-border); border-radius: 11px; background: var(--warning-bg); color: var(--warning-text); cursor: pointer; font-size: 11px; font-weight: 900; /* important: cancels old grid-column rules */ grid-column: auto; } .formula-if-builder button:hover { filter: brightness(0.98); } /* ------------------------------------------------------------ Functions: full-width elegant chip tray ------------------------------------------------------------ */ .formula-top-tools .formula-function-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 104px; overflow: auto; padding-right: 2px; } .formula-top-tools .formula-function-grid button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border-color-soft); background: var(--panel-soft); color: var(--text-color); text-align: left; box-shadow: none; } .formula-top-tools .formula-function-grid button:hover { border-color: var(--accent-border); background: var(--hover-bg); } .formula-top-tools .formula-function-grid button strong { font-size: 11px; line-height: 1; font-weight: 850; } .formula-top-tools .formula-function-grid button small { display: inline; font-size: 9.5px; color: var(--text-muted); opacity: 0.85; } /* ------------------------------------------------------------ Main composer vertical density ------------------------------------------------------------ */ .formula-composer-main { gap: 12px; } .formula-workspace { padding: 14px; } .formula-token-canvas { min-height: 118px; } /* ------------------------------------------------------------ Rendered IF token inside formula canvas ------------------------------------------------------------ */ .formula-token-if { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.32)); border-radius: 18px; background: var(--warning-bg, rgba(245, 158, 11, 0.08)); } .formula-if-head, .formula-if-label { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 999px; background: rgba(245, 158, 11, 0.14); color: var(--warning-text, #92400e); font-size: 11px; font-weight: 900; } .formula-if-head { border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.38)); cursor: pointer; } .formula-if-part { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } .formula-if-operator { font-size: 12px; font-weight: 900; color: var(--text-muted); } .formula-token-if.is-selected, .formula-token-if:has(.is-selected) { outline: 2px solid rgba(245, 158, 11, 0.42); outline-offset: 2px; } /* ------------------------------------------------------------ Responsive top tools ------------------------------------------------------------ */ @media (max-width: 1180px) { .formula-top-tools { grid-template-columns: minmax(92px, 0.5fr) minmax(230px, 1fr) minmax(260px, 1fr); } .formula-function-tool-section { grid-column: 1 / -1; } } @media (max-width: 820px) { .formula-top-tools { grid-template-columns: 1fr; } .formula-operator-tool-section, .formula-value-tool-section, .formula-logic-tool-section, .formula-function-tool-section { min-width: 0; } .formula-top-tools .formula-operator-grid { grid-template-columns: repeat(5, 32px); } } /* ========================================================================== 12.x DATASET CREATION STUDIO MODAL ========================================================================== */ #dataset-studio-root { position: relative; z-index: 10000; } .dataset-studio-backdrop { position: fixed; inset: 0; z-index: 10000; background: color-mix(in srgb, #0f172a 42%, transparent); } .dataset-studio-sheet { position: fixed; top: 15px; right: 15px; bottom: 15px; width: min(1180px, calc(100vw - 30px)); z-index: 10001; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); border-radius: 22px; background: var(--panel-solid); color: var(--text-color); box-shadow: var(--shadow-hover); } .dataset-studio-header { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 14px; padding: 14px 18px 12px; border-bottom: 1px solid var(--border-color-soft); } .dataset-studio-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } .dataset-studio-header h2 { margin: 2px 0 0; font-size: 19px; line-height: 1.1; color: var(--text-color); } .dataset-studio-header p { display: none; } .dataset-studio-close { width: 30px; height: 30px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; } .dataset-studio-close:hover { color: var(--text-color); border-color: var(--accent-border); background: var(--hover-bg); } .dataset-studio-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 310px; } .dataset-studio-panel { min-width: 0; overflow: auto; padding: 12px; border-right: 1px solid var(--border-color-soft); } .dataset-studio-panel:last-child { border-right: none; border-left: 1px solid var(--border-color-soft); } .dataset-studio-main { min-width: 0; overflow: auto; padding: 14px; display: grid; align-content: start; gap: 10px; } .dataset-studio-section { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border-color-soft); border-radius: 15px; background: var(--panel-solid); } .dataset-studio-section-title { font-size: 11px; font-weight: 850; color: var(--text-color); } .dataset-studio-muted { color: var(--text-muted); font-size: 11px; line-height: 1.35; } .dataset-studio-dataset-list, .dataset-studio-column-list, .dataset-studio-output-list, .dataset-studio-preview-list { display: grid; gap: 6px; } .dataset-studio-dataset-card, .dataset-studio-column-card, .dataset-studio-output-card { width: 100%; border: 1px solid var(--border-color-soft); border-radius: 12px; background: var(--panel-soft); color: var(--text-color); text-align: left; padding: 7px 8px; } /* Only dataset/source-column cards are whole-card buttons now. */ button.dataset-studio-dataset-card, button.dataset-studio-column-card { cursor: pointer; } button.dataset-studio-dataset-card:hover, button.dataset-studio-column-card:hover { border-color: var(--accent-border); background: var(--hover-bg); } /* Output cards are containers, not whole-card buttons. */ .dataset-studio-output-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } .dataset-studio-output-card-main { min-width: 0; } .dataset-studio-output-actions { display: inline-flex; align-items: center; gap: 4px; } .dataset-studio-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border-color-soft); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 900; cursor: pointer; } .dataset-studio-icon-btn:hover:not(:disabled) { color: var(--text-color); border-color: var(--accent-border); background: var(--hover-bg); } .dataset-studio-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; } .dataset-studio-icon-btn.is-danger:hover:not(:disabled) { color: var(--danger, #ef4444); border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, transparent); background: color-mix(in srgb, var(--danger, #ef4444) 9%, transparent); } .dataset-studio-dataset-card.is-active { border-color: var(--accent-border); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%), var(--panel-soft); } .dataset-studio-card-row { display: flex; align-items: center; gap: 7px; min-width: 0; } .dataset-studio-card-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; font-weight: 850; } .dataset-studio-card-meta { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; line-height: 1.25; } .dataset-studio-type-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; border: 1px solid var(--border-color-soft); border-radius: 8px; background: color-mix(in srgb, var(--panel-solid) 84%, transparent); color: var(--text-muted); } .dataset-studio-type-icon svg { width: 16px; height: 16px; display: block; } .dataset-studio-type-icon svg path, .dataset-studio-type-icon svg rect, .dataset-studio-type-icon svg circle, .dataset-studio-type-icon svg line, .dataset-studio-type-icon svg polyline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dataset-studio-type-icon svg text { fill: currentColor; } .dataset-studio-toolbar { display: flex; flex-wrap: wrap; gap: 6px; } .dataset-studio-soft-btn { border: 1px solid var(--border-color); border-radius: 999px; padding: 5px 9px; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 750; cursor: pointer; } .dataset-studio-soft-btn:hover { color: var(--text-color); border-color: var(--accent-border); background: var(--hover-bg); } .dataset-studio-name-row { display: grid; gap: 5px; } .dataset-studio-name-row label { font-size: 11px; font-weight: 800; } .dataset-studio-name-row input { min-height: 32px; border: 1px solid var(--border-color); border-radius: 10px; padding: 5px 9px; background: var(--panel-solid); color: var(--text-color); font-size: 12px; outline: none; } .dataset-studio-name-row input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } /* Filters */ .dataset-studio-filter-builder { display: grid; gap: 8px; } .dataset-studio-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 0.75fr); gap: 7px; } .dataset-studio-filter-row label, .dataset-studio-filter-field { display: grid; gap: 4px; font-size: 11px; font-weight: 800; color: var(--text-color); } .dataset-studio-filter-row select, .dataset-studio-filter-row input, .dataset-studio-filter-field input { min-width: 0; min-height: 32px; border: 1px solid var(--border-color); border-radius: 10px; padding: 5px 9px; background: var(--panel-solid); color: var(--text-color); font-size: 12px; outline: none; } .dataset-studio-filter-row select:focus, .dataset-studio-filter-row input:focus, .dataset-studio-filter-field input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } /* Split */ .dataset-studio-split-builder { display: grid; gap: 9px; } .dataset-studio-toggle-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 9px; border: 1px solid var(--border-color-soft); border-radius: 12px; background: var(--panel-soft); font-size: 12px; font-weight: 800; color: var(--text-color); } .dataset-studio-toggle-row input { width: 14px; height: 14px; accent-color: var(--accent); } .dataset-studio-split-values { display: flex; flex-wrap: wrap; gap: 6px; } .dataset-studio-check-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 8px; border: 1px solid var(--border-color-soft); border-radius: 999px; background: var(--panel-soft); color: var(--text-color); font-size: 11px; font-weight: 750; cursor: pointer; } .dataset-studio-check-chip:hover { border-color: var(--accent-border); background: var(--hover-bg); } .dataset-studio-check-chip input { width: 13px; height: 13px; accent-color: var(--accent); } /* Aggregation */ .dataset-studio-aggregate-builder { display: grid; gap: 9px; } /* Preview */ .dataset-studio-preview-table { width: 100%; border-collapse: collapse; font-size: 11px; } .dataset-studio-preview-table th, .dataset-studio-preview-table td { max-width: 120px; padding: 5px 6px; border-bottom: 1px solid var(--border-color-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .dataset-studio-preview-table th { color: var(--text-muted); font-weight: 850; } .dataset-studio-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-color-soft); } /* Mode strip */ .dataset-studio-mode-strip { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; padding: 0 0 5px; background: var(--panel-solid); } .dataset-studio-mode-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid var(--border-color-soft); border-radius: 999px; padding: 5px 9px; background: var(--panel-soft); color: var(--text-muted); font-size: 11px; font-weight: 850; cursor: pointer; } .dataset-studio-mode-btn:hover { color: var(--text-color); border-color: var(--accent-border); background: var(--hover-bg); } .dataset-studio-mode-btn.is-active { color: var(--accent-strong); border-color: var(--accent-border); background: var(--accent-soft); } .dataset-studio-mode-btn strong { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); font-size: 10px; font-weight: 900; line-height: 1; } .dataset-studio-mode-btn.has-state:not(.is-active) strong { background: color-mix(in srgb, var(--text-color) 8%, transparent); color: var(--text-muted); } .dataset-studio-column-card.is-selected { border-color: var(--accent-border); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--panel-soft); } .dataset-studio-selected-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 900; } .dataset-studio-inline-status { align-self: center; color: var(--text-muted); font-size: 11px; font-weight: 750; } /* Recipe summary */ .dataset-studio-recipe-summary { display: grid; gap: 5px; } .dataset-studio-summary-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 24px; padding: 4px 6px; border-radius: 9px; background: color-mix(in srgb, var(--panel-soft) 72%, transparent); } .dataset-studio-summary-row span { color: var(--text-muted); font-size: 10px; font-weight: 800; } .dataset-studio-summary-row strong { min-width: 0; overflow: hidden; color: var(--text-color); font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .dataset-studio-summary-row.is-active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 64%), color-mix(in srgb, var(--panel-soft) 76%, transparent); } .dataset-studio-summary-detail-block { display: grid; gap: 5px; padding-top: 6px; border-top: 1px solid var(--border-color-soft); } .dataset-studio-summary-detail-title { color: var(--text-muted); font-size: 10px; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; } .dataset-studio-summary-chip-list { display: flex; flex-wrap: wrap; gap: 5px; } .dataset-studio-summary-chip { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 22px; padding: 3px 7px; border: 1px solid var(--border-color-soft); border-radius: 999px; background: var(--panel-soft); color: var(--text-color); font-size: 10.5px; font-weight: 750; } .dataset-studio-sample-note { display: inline-flex; width: fit-content; max-width: 100%; padding: 4px 7px; border: 1px solid var(--border-color-soft); border-radius: 999px; background: color-mix(in srgb, var(--panel-soft) 78%, transparent); color: var(--text-muted); font-size: 10.5px; font-weight: 750; } .dataset-studio-sample-empty { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px dashed var(--border-color-soft); border-radius: 13px; background: color-mix(in srgb, var(--panel-soft) 62%, transparent); } .dataset-studio-sample-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--border-color-soft); color: var(--text-muted); font-size: 15px; font-weight: 900; } .dataset-studio-sample-empty strong { display: block; color: var(--text-color); font-size: 11.5px; font-weight: 850; } .dataset-studio-sample-empty p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; } /* Source column chips */ .dataset-studio-source-chip-list { display: flex; flex-wrap: wrap; gap: 6px; } .dataset-studio-source-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; border: 1px solid var(--border-color-soft); border-radius: 999px; background: var(--panel-soft); color: var(--text-color); padding: 4px 7px 4px 5px; cursor: pointer; } .dataset-studio-source-chip:hover { border-color: var(--accent-border); background: var(--hover-bg); } .dataset-studio-source-chip.is-selected { border-color: var(--accent-border); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%), var(--panel-soft); } .dataset-studio-source-chip .dataset-studio-type-icon { width: 21px; height: 20px; border-radius: 999px; } .dataset-studio-source-chip .dataset-studio-type-icon svg { width: 14px; height: 14px; } .dataset-studio-source-chip-name { min-width: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 850; } .dataset-studio-source-chip-meta { color: var(--text-muted); font-size: 10px; font-weight: 750; white-space: nowrap; } .dataset-studio-source-chip .dataset-studio-selected-mark { width: 16px; height: 16px; font-size: 10px; } .dataset-studio-match-builder, .dataset-studio-link-list { display: grid; gap: 8px; } .dataset-studio-link-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid var(--border-color-soft); border-radius: 12px; background: var(--panel-soft); } .dataset-studio-link-card strong, .dataset-studio-link-card span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dataset-studio-link-card strong { color: var(--text-color); font-size: 11.5px; font-weight: 850; } .dataset-studio-link-card span { margin-top: 2px; color: var(--text-muted); font-size: 10.5px; font-weight: 700; } .dataset-studio-source-chip.is-disabled { opacity: 0.48; cursor: not-allowed; } .dataset-studio-source-chip.is-disabled:hover { border-color: var(--border-color-soft); background: var(--panel-soft); } .dataset-studio-soft-btn:disabled { opacity: 0.45; cursor: not-allowed; } .dataset-studio-warning-note { padding: 7px 8px; border: 1px dashed color-mix(in srgb, #f59e0b 45%, var(--border-color-soft)); border-radius: 11px; background: color-mix(in srgb, #f59e0b 8%, var(--panel-solid)); color: color-mix(in srgb, #f59e0b 72%, var(--text-color)); font-size: 11px; font-weight: 750; line-height: 1.35; } /*match diagnostics*/ .dataset-studio-match-diagnostics { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); border-radius: 12px; background: rgba(255, 255, 255, 0.035); } .dataset-studio-match-diagnostics.is-good { border-color: rgba(80, 200, 140, 0.35); background: rgba(80, 200, 140, 0.08); } .dataset-studio-match-diagnostics.is-warning { border-color: rgba(240, 185, 80, 0.45); background: rgba(240, 185, 80, 0.08); } .dataset-studio-match-diagnostics.is-danger { border-color: rgba(255, 105, 105, 0.45); background: rgba(255, 105, 105, 0.08); } .dataset-studio-match-diagnostics-title { font-size: 12px; font-weight: 750; color: var(--text-main); } .dataset-studio-match-diagnostics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .dataset-studio-match-diagnostics-grid>div { display: grid; gap: 2px; min-width: 0; } .dataset-studio-match-diagnostics-grid span, .dataset-studio-match-diagnostics-grid small, .dataset-studio-match-diagnostics-note { font-size: 11px; color: var(--text-muted); } .dataset-studio-match-diagnostics-grid strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-main); } .dataset-studio-link-card { display: grid; gap: 8px; } .dataset-studio-link-card-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; } /*selected dataset dock*/ .dataset-studio-selected-dock { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); border-radius: 14px; background: rgba(255, 255, 255, 0.035); } .dataset-studio-selected-source-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .dataset-studio-selected-source-card { display: grid; gap: 3px; min-width: 190px; max-width: 240px; padding: 9px 10px; border: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); border-top-width: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: inherit; text-align: left; cursor: pointer; } .dataset-studio-selected-source-card:hover, .dataset-studio-selected-source-card.is-active { background: rgba(255, 255, 255, 0.5); box-shadow: 1px 1px gray; } .dataset-studio-selected-source-role { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .dataset-studio-selected-source-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; color: var(--text-main); } .dataset-studio-selected-source-meta, .dataset-studio-selected-source-match { font-size: 11px; color: var(--text-muted); } .dataset-studio-selected-source-card.source-blue { border-top-color: #7aa7ff; } .dataset-studio-selected-source-card.source-purple { border-top-color: #CA83FC; } .dataset-studio-selected-source-card.source-gold { border-top-color: #e8b957; } .dataset-studio-selected-source-card.source-green { border-top-color: #68d391; } .dataset-studio-selected-source-card.source-pink { border-top-color: #f687b3; } .dataset-studio-selected-source-card.source-teal { border-top-color: #4fd1c5; } .dataset-studio-link-card { display: grid; gap: 8px; border-left: 4px solid transparent; } .dataset-studio-link-card.source-blue { border-left-color: #7aa7ff; } .dataset-studio-link-card.source-purple { border-left-color: #CA83FC; } .dataset-studio-link-card.source-gold { border-left-color: #e8b957; } .dataset-studio-link-card.source-green { border-left-color: #68d391; } .dataset-studio-link-card.source-pink { border-left-color: #f687b3; } .dataset-studio-link-card.source-teal { border-left-color: #4fd1c5; } .dataset-studio-output-card { border-left: 4px solid transparent; } .dataset-studio-output-card.source-blue { border-left-color: #7aa7ff; } .dataset-studio-output-card.source-purple { border-left-color: #CA83FC; } .dataset-studio-output-card.source-gold { border-left-color: #e8b957; } .dataset-studio-output-card.source-green { border-left-color: #68d391; } .dataset-studio-output-card.source-pink { border-left-color: #f687b3; } .dataset-studio-output-card.source-teal { border-left-color: #4fd1c5; } .dataset-studio-source-mini-badge { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 2px 6px; border-radius: 999px; font-size: 10px; font-weight: 750; line-height: 1.2; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } .dataset-studio-source-mini-badge.source-blue { color: #a9c4ff; } .dataset-studio-source-mini-badge.source-purple { color: #ccb8ff; } .dataset-studio-source-mini-badge.source-gold { color: #f1cd7a; } .dataset-studio-source-mini-badge.source-green { color: #98e8b7; } .dataset-studio-source-mini-badge.source-pink { color: #ffafd0; } .dataset-studio-source-mini-badge.source-teal { color: #8ce7df; } .dataset-studio-source-chip { border-left: 3px solid transparent; } .dataset-studio-source-chip.source-blue { border-left-color: #7aa7ff; } .dataset-studio-source-chip.source-purple { border-left-color: #CA83FC; } .dataset-studio-source-chip.source-gold { border-left-color: #e8b957; } .dataset-studio-source-chip.source-green { border-left-color: #68d391; } .dataset-studio-source-chip.source-pink { border-left-color: #f687b3; } .dataset-studio-source-chip.source-teal { border-left-color: #4fd1c5; } .dataset-studio-recipe-summary { display: grid; gap: 10px; } .dataset-studio-recipe-group { display: grid; gap: 8px; } .dataset-studio-recipe-group-title { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .dataset-studio-recipe-block, .dataset-studio-recipe-output-source { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); border-left: 4px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.035); } .dataset-studio-recipe-label { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .dataset-studio-recipe-title { font-size: 12px; font-weight: 750; color: var(--text-main); } .dataset-studio-recipe-note { font-size: 11px; color: var(--text-muted); line-height: 1.35; } .dataset-studio-recipe-note strong { color: var(--text-main); font-weight: 700; } .dataset-studio-recipe-column-list { display: flex; flex-wrap: wrap; gap: 5px; } .dataset-studio-recipe-column-list span { max-width: 100%; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 10px; color: var(--text-muted); } .dataset-studio-recipe-empty { padding: 8px 10px; border: 1px dashed var(--border-muted, rgba(255, 255, 255, 0.14)); border-radius: 10px; font-size: 11px; color: var(--text-muted); } .dataset-studio-recipe-block.source-blue, .dataset-studio-recipe-output-source.source-blue { border-left-color: #7aa7ff; } .dataset-studio-recipe-block.source-purple, .dataset-studio-recipe-output-source.source-purple { border-left-color: #CA83FC; } .dataset-studio-recipe-block.source-gold, .dataset-studio-recipe-output-source.source-gold { border-left-color: #e8b957; } .dataset-studio-recipe-block.source-green, .dataset-studio-recipe-output-source.source-green { border-left-color: #68d391; } .dataset-studio-recipe-block.source-pink, .dataset-studio-recipe-output-source.source-pink { border-left-color: #f687b3; } .dataset-studio-recipe-block.source-teal, .dataset-studio-recipe-output-source.source-teal { border-left-color: #4fd1c5; } /*sql statement*/ .dataset-studio-sql-view { margin-top: 10px; border: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); border-radius: 12px; background: rgba(255, 255, 255, 0.035); overflow: hidden; } .dataset-studio-sql-view summary { padding: 8px 10px; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .dataset-studio-sql-view pre { margin: 0; padding: 10px; max-height: 220px; overflow: auto; border-top: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); background: rgba(0, 0, 0, 0.22); } .dataset-studio-sql-view code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.45; color: var(--text-main); white-space: pre; } .dataset-studio-sql-note { padding: 8px 10px; border-top: 1px solid var(--border-muted, rgba(255, 255, 255, 0.12)); font-size: 11px; color: var(--text-muted); } .dataset-studio-inline-link-btn { display: inline-flex; align-items: center; margin-left: 6px; padding: 0; border: 0; background: transparent; color: var(--accent, #8ba7ff); font: inherit; font-weight: 750; cursor: pointer; } .dataset-studio-inline-link-btn:hover { text-decoration: underline; } @media (max-width: 980px) { .dataset-studio-body { grid-template-columns: 1fr; } .dataset-studio-panel, .dataset-studio-panel:last-child { border-right: none; border-left: none; border-bottom: 1px solid var(--border-color-soft); } } @media (max-width: 720px) { .dataset-studio-filter-row { grid-template-columns: 1fr; } } /* ========================================================================== 13. PROJECT DATASET POPOVERS ========================================================================== */ .add-dataset-popover, .saved-dataset-picker { position: fixed; z-index: 9999; border: 1px solid var(--border-color); border-radius: 14px; background: var(--panel-solid); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16); padding: 8px; } .add-dataset-popover { width: 300px; } .saved-dataset-picker { width: 230px; } .add-dataset-popover button, .saved-dataset-picker button { background: transparent; border-radius: 10px; padding: 9px 10px; text-align: left; cursor: pointer; color: var(--text-main); } .add-dataset-popover>.add-dataset-popover-button, .saved-dataset-picker>button { width: 100%; } .add-dataset-popover button:hover, .saved-dataset-picker button:hover { background: rgba(15, 23, 42, 0.05); } .theme-dark .add-dataset-popover button:hover, .theme-dark .saved-dataset-picker button:hover { background: rgba(255, 255, 255, 0.06); } .saved-dataset-picker-title { font-size: var(--font-sm); font-weight: 750; color: var(--muted-text); padding: 6px 10px 8px; } .saved-dataset-picker small { display: block; margin-top: 2px; color: var(--muted-text); } .saved-dataset-picker-empty { padding: 10px; color: var(--muted-text); font-size: var(--font-sm); } /* ========================================================================== 14. USER BAND / STORY PANEL ========================================================================== */ .user-band { position: absolute; left: 14px; bottom: 14px; width: calc(100% - 28px); display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); backdrop-filter: blur(16px); z-index: 20; } .theme-dark .user-band { border-color: rgba(148, 163, 184, 0.16); background: rgba(17, 24, 39, 0.86); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #111827; color: white; } .theme-dark .user-avatar { background: #f8fafc; color: #111827; } .user-meta { min-width: 0; flex: 1; } .user-name { font-size: var(--font-md); font-weight: 650; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-plan { font-size: var(--font-xs); color: var(--text-muted); } .user-menu-btn { border: none; background: transparent; font-size: 20px; cursor: pointer; } .user-menu { position: absolute; bottom: 58px; left: 8px; right: 8px; padding: 8px; border-radius: 14px; background: var(--panel-solid); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14); border: 1px solid rgba(15, 23, 42, 0.08); } .user-menu button { width: 100%; padding: 9px 10px; text-align: left; border: none; background: transparent; border-radius: 10px; cursor: pointer; color: var(--text-main); } .user-menu button:hover { background: #f3f4f6; } .theme-dark .user-menu button:hover { background: rgba(255, 255, 255, 0.06); } .story-panel { display: grid; gap: 10px; padding: 12px; overflow: auto; min-height: 0; } .story-panel-header { display: flex; justify-content: space-between; align-items: center; } .story-panel-header h3 { margin: 0; font-size: 15px; } #story-count { font-size: var(--font-xs); color: var(--text-muted); } .story-list { display: grid; gap: 10px; } .story-item { border: 1px solid var(--border-color-soft); border-radius: 14px; background: var(--panel-solid); padding: 10px; cursor: pointer; } .story-item-title { font-size: var(--font-md); font-weight: 700; color: var(--text-color); line-height: 1.35; } .story-item-meta { margin-top: 5px; font-size: var(--font-xs); color: var(--text-muted); } .story-item-remove { margin-top: 8px; border: 0; background: transparent; color: #64748b; font-size: var(--font-xs); cursor: pointer; } .analysis-block.is-in-story { border-color: rgba(124, 58, 237, 0.45); } .analysis-block.is-in-story::after { content: "In story"; position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 800; color: #6d28d9; background: rgba(124, 58, 237, 0.09); border-radius: var(--radius-pill); padding: 4px 7px; } /* ========================================================================== 15. PROFILE / SHARE / AUTO INSIGHT MODALS ========================================================================== */ .profile-modal-backdrop, .auto-insight-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(6px); z-index: 1000; } .auto-insight-modal { display: none; z-index: 2000; } .profile-modal, .auto-insight-panel { background: var(--panel-solid); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: var(--shadow-lg); } .profile-modal { width: 420px; max-width: calc(100vw - 32px); padding: 22px; border-radius: 24px; } .auto-insight-panel { width: min(520px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); overflow: auto; border-radius: 18px; padding: 18px; display: grid; gap: 14px; } .profile-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .profile-modal-header button, .share-modal-close { border: none; background: transparent; font-size: 24px; cursor: pointer; color: var(--text-muted); } .profile-row { margin-top: 14px; } .profile-row label { display: block; font-size: var(--font-sm); color: var(--text-muted); margin-bottom: 4px; } /* .share-modal-header { flex: 0 0 auto; padding: 20px 22px 16px; } .share-modal-body { flex: 1 1 auto; min-height: 0; padding: 0 22px 22px; overflow-y: auto; overscroll-behavior: contain; } .share-modal-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid rgba(15, 23, 42, 0.08); background: var(--panel-solid); } .share-link-list { display: grid; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 2px; } .share-history-list { display: grid; gap: 8px; max-height: 180px; overflow-y: auto; padding-right: 2px; } .share-modal-kicker { margin-bottom: 4px; color: #64748b; font-size: var(--font-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .share-modal h2 { margin: 0; color: var(--text-color); font-size: 20px; line-height: 1.2; letter-spacing: -0.03em; } .share-modal-note { margin: 14px 0 16px; color: #475569; font-size: var(--font-md); line-height: 1.45; } .theme-dark .share-modal-note { color: var(--text-muted); } .share-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; color: #334155; font-size: var(--font-md); line-height: 1.35; } .theme-dark .share-option { color: var(--text-muted); } .share-option input { margin-top: 2px; } .share-option-warning { color: #92400e; } .share-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .share-row-data-option { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fff7f7; color: #991b1b; cursor: pointer; } .share-row-data-option input { margin-top: 3px; accent-color: #dc2626; } .share-row-data-option span { display: grid; gap: 3px; } .share-row-data-option strong { font-size: 12px; } .share-row-data-option small { color: #b91c1c; line-height: 1.4; } .share-data-note { margin-top: 10px; color: var(--text-muted, #64748b); font-size: 11px; line-height: 1.45; }*/ .share-create-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; } .share-create-spinner { width: 14px; height: 14px; display: none; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: share-spinner 700ms linear infinite; } .share-create-btn.is-loading .share-create-spinner { display: block; } .share-create-btn.is-loading { cursor: wait; } @keyframes share-spinner { to { transform: rotate(360deg); } } .share-modal-backdrop.is-busy .share-modal-body { pointer-events: none; } .share-modal-backdrop.is-busy .share-modal-body { opacity: 0.82; } /* SHARE MODAL*/ .share-modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.28); backdrop-filter: blur(5px); z-index: 1000; } .share-modal { width: min(620px, calc(100vw - 40px)); max-height: min(820px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; background: var(--panel-solid); border: 1px solid var(--accent-border); border-radius: 18px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18); } /* Header */ .share-modal-header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 22px 24px 17px; } .share-modal-kicker { margin-bottom: 3px; color: #94a3b8; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .share-modal h2 { margin: 0; color: var(--text-color); font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; } .share-modal-subtitle { margin: 5px 0 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; } .share-modal-close { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer; } .share-modal-close:hover { background: rgba(15, 23, 42, 0.05); color: var(--text-color); } /* Scrollable body */ .share-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 22px; } /* Sections */ .share-section { padding: 2px 0; } .share-modal-section-title { margin-bottom: 10px; color: var(--text-color); font-size: 11px; font-weight: 700; } .share-modal-divider { height: 1px; margin: 17px 0; background: rgba(15, 23, 42, 0.07); } .share-viewer-section { margin-top: 17px; } .share-section+.share-section { margin-top: 17px; } /* Active share links */ .share-link-list, .share-history-list { display: grid; } .share-link-list { min-height: 120px; max-height: 200px; overflow-y: auto; padding-right: 3px; } .share-link-card { padding: 11px 2px; border: 0; border-bottom: 1px solid rgba(15, 23, 42, 0.065); background: transparent; } .share-link-card:first-child { padding-top: 2px; } .share-link-card:last-child { border-bottom: 0; } .share-link-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .share-link-title { color: var(--text-color); font-size: 11px; font-weight: 650; } .share-link-meta { margin-top: 3px; color: #94a3b8; font-size: 10px; } .share-link-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 700; } .share-link-status.is-active { color: #15803d; background: rgba(22, 163, 74, 0.09); } .share-link-status.is-revoked { color: #64748b; background: rgba(100, 116, 139, 0.10); } .share-link-card.is-revoked { opacity: 0.62; } .share-link-actions { display: flex; align-items: center; gap: 12px; margin-top: 5px; } .share-link-action { padding: 1px 8px; border: 0; border-radius: 2px 0px; background: #2563eb; color: var(--text-inverse); font-size: 10px; font-weight: 600; cursor: pointer; } .share-link-action:hover { text-decoration: underline; transform: scale(1.05); transition: all 0.1s ease-in; } .share-link-action.is-danger { margin-left: auto; background: #dc2626; color: var(--text-inverse); padding: 1px 8px; border-radius: 2px 0px; } .share-history-toggle { margin-top: 7px; padding: 0; border: 0; background: transparent; color: #64748b; font-size: 10px; font-weight: 600; cursor: pointer; } .share-history-toggle:hover { color: var(--text-color); } .share-history-section { margin-top: 7px; } .share-empty { padding: 6px 0; color: #94a3b8; font-size: 9.5px; } .share-link-list .share-empty { min-height: 120px; display: grid; place-items: center; padding: 0; } /* New link */ .share-setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .share-setting-group { display: grid; gap: 5px; } .share-setting-group label { color: #64748b; font-size: 10.5px; font-weight: 600; } .share-setting-group input { width: 100%; height: 35px; padding: 0 10px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; background: var(--panel-solid); color: var(--text-color); font: inherit; font-size: 10.5px; outline: none; } .share-setting-group select { width: 100%; height: 35px; padding: 0 30px 0 10px; appearance: none; -webkit-appearance: none; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; background: var(--panel-solid); color: var(--text-color); font: inherit; font-size: 10.5px; outline: none; cursor: pointer; } .share-setting-group select:focus, .share-setting-group input:focus { border-color: rgba(30, 133, 251, 0.55); box-shadow: 0 0 0 3px rgba(30, 133, 251, 0.10); } .share-password-section { margin-top: 10px; } /* Viewer access */ .share-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; } .share-option { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; color: var(--text-color); cursor: pointer; } .share-option input { margin-top: 2px; } .share-option span { display: grid; gap: 1px; } .share-option strong { font-size: 11px; font-weight: 600; } .share-option small { color: #94a3b8; font-size: 9.5px; line-height: 1.35; } /* Shared data */ .share-data-summary { margin: 0 0 9px; color: #64748b; font-size: 10px; line-height: 1.5; } .share-row-data-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 11px; background: #fff7f7; color: #991b1b; cursor: pointer; } .share-row-data-option span:first-child { display: grid; gap: 2px; } .share-row-data-option strong { font-size: 11px; font-weight: 650; } .share-row-data-option small { color: #b91c1c; font-size: 9.5px; line-height: 1.4; } /* Apple-style switch */ .share-switch { position: relative; flex: 0 0 auto; } .share-switch input { position: absolute; opacity: 0; pointer-events: none; } .share-switch-track { width: 38px; height: 22px; display: block; padding: 2px; border-radius: 999px; background: #cbd5e1; transition: background 160ms ease-in, box-shadow 160ms ease-in; } .share-switch-thumb { width: 18px; height: 18px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24); transition: transform 160ms ease; } .share-switch input:checked+.share-switch-track { background: #dc2626; } .share-switch input:checked+.share-switch-track .share-switch-thumb { transform: translateX(16px); } .share-switch input:focus-visible+.share-switch-track { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14); } /* Footer */ .share-modal-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 24px; border-top: 1px solid rgba(15, 23, 42, 0.07); background: var(--panel-solid); } .share-modal select { transition: none !important; animation: none !important; } .share-setting-group select { appearance: auto; } /* END of SHARE MODAL*/ .auto-insight-section { display: grid; gap: 8px; } .auto-insight-label, .auto-insight-field span { font-size: var(--font-sm); font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; } .auto-insight-column-table { display: grid; gap: 4px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 12px; } .auto-insight-column-header, .auto-insight-column-row { display: grid; grid-template-columns: 70px 120px 1fr; align-items: center; gap: 8px; } .auto-insight-column-header { font-size: var(--font-xs); font-weight: 700; color: #64748b; text-transform: uppercase; } .auto-insight-column-row { font-size: var(--font-md); padding: 4px 0; } .auto-insight-field select { padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.45); border-radius: 10px; background: var(--panel-solid); color: var(--text-main); } .auto-insight-outcome-area[hidden], .auto-insight-predictor-picker-field[hidden] { display: none; } .auto-insight-predictors { min-height: 8rem; } .auto-insight-goal-section { border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.18)); padding-bottom: 0.75rem; margin-bottom: 0.75rem; } .pattern-card--empty { cursor: default; opacity: 0.9; } .pattern-card--empty .pattern-card-title { color: var(--text-strong); } .pattern-card-caution { margin-top: 0.35rem; font-size: 0.72rem; line-height: 1.35; color: var(--accent); } .pattern-card-reason { display: grid; gap: 2px; margin-top: 0.35rem; padding: 0.45rem 0.55rem; border-radius: 0.7rem; background: rgba(139, 167, 255, 0.07); border: 1px solid rgba(139, 167, 255, 0.12); } .pattern-card-reason-label { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.02em; color: var(--text-strong); } .pattern-card-reason-text { font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); } .pattern-card-empty-tips { margin: 0.45rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); } .pattern-card--empty { cursor: default; opacity: 0.95; } /* ========================================================================== 16. LEGACY-SAFE HELPERS These keep older code paths from looking broken while you remove them. ========================================================================== */ .upload-card { display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 82px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 250, 255, 0.95) 100%); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .upload-card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .upload-icon-wrap { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .upload-icon { width: 22px; height: 22px; } .upload-text-group { min-width: 0; caret-color: transparent; } .upload-title { font-size: 0.93rem; font-weight: 650; } .upload-subtitle { margin-top: 2px; font-size: 0.8rem; color: var(--muted); } .column-chip-list, .column-search, .analysis-shortcuts-list, .dataset-dock, .dataset-list-panel { /* Old UI. Keep hidden so accidental old DOM does not pollute the new layout. */ display: none !important; } /* ========================================================================== 16.1 ALERTS ========================================================================== */ .telene-toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; } .telene-toast { pointer-events: auto; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: start; gap: 10px; padding: 12px 12px; border-radius: 16px; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 160ms ease, transform 160ms ease; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .8)); color: #172033; border: 1px solid rgba(148, 163, 184, 0.36); box-shadow: 0 18px 55px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.72) inset; backdrop-filter: blur(14px); } .telene-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .telene-toast.is-leaving { opacity: 0; transform: translateY(6px) scale(0.98); } .telene-toast-icon { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: rgba(99, 102, 241, 0.12); color: #4f46e5; } .telene-toast-success .telene-toast-icon { background: rgba(34, 197, 94, 0.13); color: #15803d; } .telene-toast-warning .telene-toast-icon { background: rgba(245, 158, 11, 0.16); color: #b45309; } .telene-toast-error .telene-toast-icon { background: rgba(239, 68, 68, 0.13); color: #dc2626; } .telene-toast-content { min-width: 0; } .telene-toast-title { display: block; font-size: 13px; font-weight: 750; letter-spacing: -0.01em; margin-top: 1px; } .telene-toast-message { margin-top: 2px; font-size: 12.5px; line-height: 1.42; color: rgba(51, 65, 85, 0.82); } .telene-toast-action, .telene-toast-close { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; } .telene-toast-action { padding: 5px 7px; border-radius: 999px; color: #4f46e5; font-size: 12px; font-weight: 750; white-space: nowrap; } .telene-toast-action:hover { background: rgba(99, 102, 241, 0.09); } .telene-toast-close { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; opacity: 0.58; font-size: 18px; line-height: 1; } .telene-toast-close:hover { opacity: 1; background: rgba(15, 23, 42, 0.07); } .telene-dialog-open { overflow: hidden; } #telene-dialog-root { position: relative; z-index: 10000; } .telene-dialog-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 18px; opacity: 0; background: rgba(15, 23, 42, 0.38); backdrop-filter: blur(7px); transition: opacity 140ms ease; } .telene-dialog-overlay-soft { background: rgba(15, 23, 42, 0.08); backdrop-filter: none; place-items: start center; align-items: start; padding-top: 92px; } .telene-dialog-overlay.is-visible { opacity: 1; } .telene-dialog-overlay.is-leaving { opacity: 0; } .telene-dialog { width: min(440px, 100%); border-radius: 22px; padding: 18px; background: radial-gradient(circle at top left, rgba(139, 167, 255, 0.15), transparent 18rem), linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)); color: #111827; border: 1px solid rgba(148, 163, 184, 0.38); box-shadow: 0 28px 90px rgba(15, 23, 42, 0.32), 0 1px 0 rgba(255, 255, 255, 0.8) inset; transform: translateY(8px) scale(0.98); transition: transform 140ms ease, opacity 140ms ease; } .telene-dialog-overlay.is-visible .telene-dialog { transform: translateY(0) scale(1); } .telene-dialog-top { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; } .telene-dialog-icon { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; font-size: 17px; font-weight: 850; color: #4f46e5; background: rgba(99, 102, 241, 0.12); } .telene-dialog-warning .telene-dialog-icon { color: #b45309; background: rgba(245, 158, 11, 0.16); } .telene-dialog-danger .telene-dialog-icon { color: #dc2626; background: rgba(239, 68, 68, 0.13); } .telene-dialog-success .telene-dialog-icon { color: #15803d; background: rgba(34, 197, 94, 0.13); } .telene-dialog-copy h2 { margin: 1px 0 0; font-size: 17px; line-height: 1.25; letter-spacing: -0.02em; } .telene-dialog-copy p { margin: 7px 0 0; color: rgba(51, 65, 85, 0.84); font-size: 13.5px; line-height: 1.48; } .telene-dialog-detail { margin-top: 10px; padding: 10px 11px; border-radius: 13px; background: rgba(148, 163, 184, 0.11); color: rgba(51, 65, 85, 0.9); font-size: 12.5px; line-height: 1.45; white-space: pre-line; } .telene-dialog-field { margin-top: 16px; } .telene-dialog-input { width: 100%; box-sizing: border-box; border: 1px solid rgba(148, 163, 184, 0.52); border-radius: 13px; padding: 10px 11px; outline: none; font: inherit; font-size: 14px; background: rgba(255, 255, 255, 0.86); color: #111827; } .telene-dialog-input:focus { border-color: rgba(99, 102, 241, 0.72); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.13); } .telene-dialog-error { min-height: 18px; margin-top: 6px; color: #dc2626; font-size: 12px; } .telene-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; } .telene-dialog-btn { appearance: none; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 760; } .telene-dialog-cancel { color: #334155; background: rgba(148, 163, 184, 0.16); } .telene-dialog-cancel:hover { background: rgba(148, 163, 184, 0.24); } .telene-dialog-confirm { color: #ffffff; background: #4f46e5; box-shadow: 0 8px 22px rgba(79, 70, 229, 0.24); } .telene-dialog-confirm:hover { background: #4338ca; } .telene-dialog-danger .telene-dialog-confirm { background: #dc2626; box-shadow: 0 8px 22px rgba(220, 38, 38, 0.22); } .telene-dialog-danger .telene-dialog-confirm:hover { background: #b91c1c; } .telene-dialog-btn:focus-visible, .telene-toast-action:focus-visible, .telene-toast-close:focus-visible { outline: 3px solid rgba(99, 102, 241, 0.3); outline-offset: 2px; } @media (prefers-color-scheme: dark) { .telene-toast { background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94)); color: #e5e7eb; border-color: rgba(148, 163, 184, 0.22); } .telene-toast-message { color: rgba(203, 213, 225, 0.78); } .telene-toast-close:hover { background: rgba(255, 255, 255, 0.08); } .telene-dialog { background: radial-gradient(circle at top left, rgba(139, 167, 255, 0.13), transparent 18rem), linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)); color: #f8fafc; border-color: rgba(148, 163, 184, 0.24); } .telene-dialog-copy p, .telene-dialog-detail { color: rgba(203, 213, 225, 0.8); } .telene-dialog-detail { background: rgba(148, 163, 184, 0.12); } .telene-dialog-input { background: rgba(15, 23, 42, 0.74); border-color: rgba(148, 163, 184, 0.35); color: #f8fafc; } .telene-dialog-cancel { color: #e5e7eb; background: rgba(148, 163, 184, 0.16); } .telene-dialog-cancel:hover { background: rgba(148, 163, 184, 0.25); } } @media (max-width: 640px) { .telene-toast-region { left: 12px; right: 12px; bottom: 12px; width: auto; } .telene-toast { grid-template-columns: 28px minmax(0, 1fr) auto; } .telene-toast-action { grid-column: 2 / 3; justify-self: start; padding-left: 0; } .telene-dialog { border-radius: 20px; } } @media (prefers-reduced-motion: reduce) { .telene-toast, .telene-dialog, .telene-dialog-overlay { transition: none; } } /* ========================================================================== 16.2. UI LOADING OPERATION STATUS ========================================================================== */ .telene-operation-status { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; max-width: 280px; padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-color, rgba(255, 255, 255, 0.08)); font-size: 12px; color: var(--text-secondary, #94a3b8); white-space: nowrap; } .telene-operation-status[hidden] { display: none; } .telene-operation-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; } .telene-operation-status-text { overflow: hidden; text-overflow: ellipsis; } .telene-operation-status.is-loading, .telene-operation-status.is-saving, .telene-operation-status.is-syncing { color: #4f8cff; } .telene-operation-status.is-saved { color: #20a464; } .telene-operation-status.is-error { color: #d97706; } .telene-operation-status.is-offline { color: #b45309; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.28); } .telene-operation-status.is-offline .telene-operation-status-dot { background: #f59e0b; } .theme-dark .telene-operation-status.is-offline { color: #fbbf24; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.32); } .telene-operation-status.is-loading .telene-operation-status-dot, .telene-operation-status.is-saving .telene-operation-status-dot, .telene-operation-status.is-syncing .telene-operation-status-dot { animation: telene-operation-pulse 1s ease-in-out infinite; } /* ================================ BLOCKING LOADING OVERLAY ================================ */ .telene-operation-overlay { position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; background: rgba(8, 15, 28, 0.38); backdrop-filter: blur(3px); } .telene-operation-overlay[hidden] { display: none; } .telene-operation-overlay-card { display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 14px 18px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 16px; background: var(--surface-color, #111827); color: var(--text-primary, #f8fafc); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32); } .telene-operation-spinner { width: 40px; height: 40px; flex: 0 0 auto; border: 2px solid rgba(148, 163, 184, 0.35); border-top-color: currentColor; border-radius: 50%; animation: telene-operation-spin 0.8s linear infinite; } .telene-operation-overlay-text { font-size: 13px; font-weight: 600; } @keyframes telene-operation-spin { to { transform: rotate(360deg); } } @keyframes telene-operation-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* ========================================================================== 16.3. SHARED WORKSPACE VIEW ========================================================================== */ /* Shared workspace page should behave like the full Grid workspace shell. */ .share-viewer-body { min-height: 100vh; height: 100vh; margin: 0; display: flex; flex-direction: column; overflow: hidden; } .share-viewer-header { flex: 0 0 auto; } .share-viewer-body #workspace-view { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; overflow: hidden; } .share-viewer-body #workspace-canvas { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; height: 100%; overflow: auto; } /* Important: give the board a scrollable surface larger than the viewport. */ .share-viewer-body .workspace-board { position: relative; min-width: 2200px; min-height: 1400px; } /* ========================================================================== 16.4.LEGAL WELCOME GATE ========================================================================== */ .legal-welcome-gate { position: fixed; inset: 0; z-index: 12000; display: flex; justify-content: flex-end; font-family: var(--font-ui); } .legal-welcome-gate[hidden] { display: none !important; } .legal-welcome-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.22); /*backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);*/ } .theme-dark .legal-welcome-scrim { background: rgba(0, 0, 0, 0.48); } .legal-welcome-sheet { position: relative; z-index: 1; width: clamp(620px, 42vw, 760px); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--border-color-soft); background: var(--panel-solid); box-shadow: -24px 0 70px rgba(15, 23, 42, 0.16); } .theme-dark .legal-welcome-sheet { box-shadow: -24px 0 70px rgba(0, 0, 0, 0.42); } .legal-welcome-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 34px 38px 22px; } .legal-welcome-brand { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .legal-welcome-logo { width: 132px; height: auto; display: block; } .legal-welcome-beta { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--accent-border); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .legal-welcome-header { margin-bottom: 14px; } .legal-welcome-header h1 { margin: 0; color: var(--text-main); font-size: 30px; line-height: 1.15; font-weight: 760; letter-spacing: -0.025em; } .legal-welcome-header p { margin: 12px 0 0; max-width: 44ch; color: var(--text-muted); font-size: 14px; line-height: 1.65; } .legal-welcome-section { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-color-soft); } .legal-welcome-section-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-border); border-radius: 11px; background: var(--accent-soft); color: var(--accent); } .legal-welcome-section-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .legal-welcome-section h2 { margin: 1px 0 7px; color: var(--text-main); font-size: 15px; line-height: 1.3; font-weight: 700; } .legal-welcome-section p { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; line-height: 1.62; } .legal-welcome-section p:last-child { margin-bottom: 0; } .legal-welcome-footer { flex: 0 0 auto; padding: 20px 38px 26px; border-top: 1px solid var(--border-color-soft); background: var(--panel-solid); box-shadow: 0 -14px 30px rgba(15, 23, 42, 0.035); } .theme-dark .legal-welcome-footer { box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.14); } .legal-welcome-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--text-main); font-size: 12px; line-height: 1.55; cursor: pointer; } .legal-welcome-consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; } .legal-welcome-consent a, .legal-welcome-links a { color: var(--accent-strong); text-decoration: none; } .legal-welcome-consent a:hover, .legal-welcome-links a:hover { text-decoration: underline; text-underline-offset: 2px; } .legal-welcome-links { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 14px; color: var(--text-muted); font-size: var(--font-xs); } .legal-welcome-links span { opacity: 0.45; } .legal-welcome-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; } #legal-welcome-continue { min-width: 154px; } #legal-welcome-continue:disabled { opacity: 0.48; cursor: not-allowed; } @media (max-width: 760px) { .legal-welcome-sheet { width: 100%; border-left: 0; } .legal-welcome-scrim { display: none; } .legal-welcome-scroll { padding: 28px 24px 18px; } .legal-welcome-footer { padding: 18px 24px 22px; } .legal-welcome-header h1 { font-size: 27px; } } /* ========================================================================== 17. RESPONSIVE ========================================================================== */ @media (max-width: 1200px) { :root { --right-palette-w: 280px; } } @media (max-width: 980px) { /* #app-container { grid-template-columns: 1fr; grid-template-areas: "top" "main"; } #sidebar { display: none; } #main-content.workspace-layout { grid-template-columns: minmax(0, 1fr); } #right-palette { display: none; }*/ .workspace-control-bar { flex-wrap: wrap; } } /* Inspector Block for Shared Workspaces*/ .share-inspector-panel { /*position: absolute; top: 0; right: 0;*/ width: 360px; height: 100%; /*z-index: 40;*/ background: var(--surface, #fff); border-left: 1px solid var(--border, #ddd); box-shadow: -12px 0 30px rgba(0, 0, 0, 0.08); overflow-y: auto; } .share-inspector-panel[hidden] { display: none; } .share-inspector-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px; background: inherit; border-bottom: 1px solid var(--border, #ddd); } .share-viewer-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); height: 100vh; margin: 0; overflow: hidden; } .share-viewer-header { grid-column: 1 / -1; grid-row: 1; } .share-viewer-body>#workspace-view { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; } .share-inspector-panel { grid-column: 2; grid-row: 2; width: 360px; min-width: 360px; height: 100%; overflow-y: auto; background: var(--surface, #fff); border-left: 1px solid var(--border, #ddd); } .share-inspector-panel[hidden] { display: none; } .share-inspector-close { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; } .share-inspector-panel .palette-panel { display: block; padding: 16px; } /* ========================================================================== 18. CURSOR STYLES OVERRIDES ========================================================================== */ .palette-resize-handle, .table-col-resize-handle, th[data-column-id][draggable="true"] .table-col-resize-handle, .data-table-header-cell[draggable="true"] .table-col-resize-handle { cursor: var(--cursor-col-resize) !important; } body.is-resizing-table-col, body.is-resizing-table-col * { cursor: var(--cursor-col-resize) !important; user-select: none; } .is-chart-inspectable { cursor: var(--cursor-zoom-in); } .pattern-card, .palette-column-card, .table-th-label, .table-th-reorder-handle, .formula-top-tools .formula-operator-grid button, .formula-chip[draggable="true"], .formula-operator-grid button[draggable="true"], .formula-token[draggable="true"], .formula-token-group[draggable="true"] { cursor: var(--cursor-grab); } .pattern-card:active, .palette-column-card:active, .palette-column-card.is-dragging, .table-th-label:active, .table-th-reorder-handle:active, .formula-top-tools .formula-operator-grid button:active, .formula-chip[draggable="true"]:active, .formula-operator-grid button[draggable="true"]:active, .formula-token[draggable="true"]:active, .formula-token-group[draggable="true"]:active { cursor: var(--cursor-grabbing); }