@font-face { font-family: 'Google Sans'; src: url('../fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Google Sans'; src: url('../fonts/GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* Flat 2D theme — white surface everywhere, no drop shadows on page-level elements. Floating elements (modals, popovers, FAB) keep their own inline shadows defined on each rule. */ --bg: #ffffff; --surface: #ffffff; --primary: #2563eb; --primary-dark: #1d4ed8; --secondary: #64748b; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --border: #cbd5e1; --text: #1e293b; --text-muted: #64748b; --radius: 8px; --shadow: none; --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { /* Lock the page to the visual viewport so iOS Safari's address bar * doesn't cause the whole HTML to scroll/inset. The inner panes * (#content, sidebar nav, etc.) own their own scrolling. */ height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } body { font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } /* Layout */ /* Use dynamic viewport units so the app fits exactly the visible area * on mobile browsers where the toolbar grows/shrinks. Falls back to * 100vh on browsers that don't support dvh. */ #app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } #sidebar { width: var(--sidebar-width, 220px); background: #111827; color: #cbd5e1; display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.2s ease; overflow: hidden; position: relative; height: 100vh; height: 100dvh; } #sidebar.collapsed { width: 48px; } #sidebar.resizing { transition: none; } #sidebar-resizer { position: absolute; right: 0; top: 0; height: 100%; width: 5px; cursor: col-resize; z-index: 20; background: transparent; } #sidebar-resizer:hover, #sidebar-resizer.dragging { background: rgba(255,255,255,0.15); } #sidebar .logo { padding: 12px 14px; min-height: 60px; font-size: 17px; font-weight: 700; color: #fff; border-bottom: 1px solid #1f2937; display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; transition: background 0.15s; } #sidebar .logo:hover { background: #1f2937; } #sidebar .logo .logo-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } #sidebar .logo .logo-mark svg { display: block; } #sidebar .logo .logo-text { white-space: nowrap; overflow: hidden; letter-spacing: -0.01em; } #sidebar .logo .logo-text span { color: #60a5fa; } #sidebar.collapsed .logo .logo-text { display: none; } #sidebar nav { padding: 8px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #374151 transparent; } #sidebar nav::-webkit-scrollbar { width: 6px; } #sidebar nav::-webkit-scrollbar-track { background: transparent; } #sidebar nav::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; } #sidebar nav::-webkit-scrollbar-thumb:hover { background: #4b5563; } .nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #475569; padding: 8px 8px 4px; white-space: nowrap; overflow: hidden; } #sidebar.collapsed .nav-section { opacity: 0; height: 0; padding: 0; margin: 8px 12px; border-top: 1px solid #1f2937; } #sidebar.collapsed .nav-section:first-of-type { display: none; } #sidebar.collapsed .logo { padding: 12px 0; justify-content: center; } #sidebar.collapsed nav { padding: 12px 0; } #sidebar.collapsed .nav-item { padding: 8px 14px; gap: 0; font-size: 0; } #sidebar.collapsed .nav-item .icon { width: 20px; margin: 0; font-size: 16px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; margin-bottom: 2px; transition: background 0.15s; white-space: nowrap; } .nav-item:hover { background: #1f2937; color: #f1f5f9; } .nav-item.active { background: #2563eb; color: #fff; } /* Entity-count chip on the right side of nav items. At-a-glance "how much do I have of each thing" without opening every page. Updated on each navigate() so the count stays fresh. Hidden on collapsed sidebar (no room) and when the count is 0 (would just be noise). */ .nav-item .nav-count { margin-left: auto; font-size: 10.5px; font-variant-numeric: tabular-nums; color: #64748b; background: rgba(148, 163, 184, 0.12); border-radius: 9999px; padding: 1px 7px; min-width: 18px; text-align: center; flex-shrink: 0; transition: color 0.15s, background 0.15s; } .nav-item:hover .nav-count { color: #cbd5e1; background: rgba(148, 163, 184, 0.2); } .nav-item.active .nav-count { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.18); } #sidebar.collapsed .nav-count { display: none; } .nav-item .icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .nav-item .icon img { width: 18px; height: 18px; object-fit: contain; } .btn .print-icon { width: 14px; height: 14px; vertical-align: -2px; object-fit: contain; display: inline-block; padding: 0; } .btn .dl-icon { width: 14px; height: 14px; vertical-align: -2px; object-fit: contain; display: inline-block; padding: 0; } .btn .search-icon { width: 13px; height: 13px; vertical-align: -2px; object-fit: contain; display: inline-block; padding: 0; } /* Sort icon — pair of up/down arrows on the toolbar Sort button. Slightly taller than .dl-icon because the glyph is vertical. */ .btn .sort-icon { width: 12px; height: 14px; vertical-align: -2px; object-fit: contain; display: inline-block; padding: 0; } /* Formula reference inside a list cell — reads as text by default, only adopts link styling on hover. Reduces "every cell looks clickable" visual noise in dense tables while keeping one-click drill-in for users who deliberately want it. */ .formula-cell-link { color: var(--text); cursor: pointer; text-decoration: none; border-bottom: 1px dotted transparent; transition: color 0.12s, border-color 0.12s; } .formula-cell-link:hover { color: var(--primary); border-bottom-color: var(--primary); } /* Hover-popover preview card — single global element re-used for every formula-cell-link. Positioned via JS, fades in/out. */ .formula-popover { position: fixed; z-index: 200; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 12px 14px; width: 280px; font-size: 12.5px; line-height: 1.45; color: var(--text); opacity: 0; pointer-events: none; transition: opacity 0.15s; } .formula-popover.on { opacity: 1; pointer-events: auto; } .formula-popover-title { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; color: #0f172a; word-break: break-word; } .formula-popover-meta { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .formula-popover-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11.5px; color: #64748b; margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid #f1f5f9; } .formula-popover-stats strong { color: var(--text); font-weight: 600; } .formula-popover-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; font-size: 12px; } .formula-popover-footer a { color: var(--primary); text-decoration: none; cursor: pointer; } .formula-popover-footer a:hover { text-decoration: underline; } /* Inline replacement for an emoji glyph in body text — same visual weight as a 13-14px emoji. Used wherever we swap 🧪 / 📊 / 📈 etc. for a proper PNG (card-view counts, section headers, workspace buttons). The smaller .emoji-icon-sm version matches 11.5-12px text contexts (card-view badge rows). */ .emoji-icon { width: 14px; height: 14px; vertical-align: -3px; object-fit: contain; display: inline-block; } .emoji-icon-sm { width: 12px; height: 12px; vertical-align: -2px; object-fit: contain; display: inline-block; } /* The h2 section headers (16px) deserve a slightly larger glyph */ .emoji-icon-lg { width: 18px; height: 18px; vertical-align: -4px; object-fit: contain; display: inline-block; margin-right: 4px; } /* clipboard.png and file.png are intentionally WHITE-on-transparent (their primary use is the dark navy sidebar nav icons). When re-used as inline .emoji-icon* glyphs on light-background buttons / headers / dropdowns, they'd be invisible without inversion. filter: brightness(0) knocks all luminosity to zero, turning the white pixels black while leaving the transparent background alone. Sidebar usage is bare with no .emoji-icon* class so this selector doesn't touch it. */ .emoji-icon[src$="clipboard.png"], .emoji-icon-sm[src$="clipboard.png"], .emoji-icon-lg[src$="clipboard.png"], .emoji-icon[src$="file.png"], .emoji-icon-sm[src$="file.png"], .emoji-icon-lg[src$="file.png"] { filter: brightness(0); } /* Column-header sort indicators — three states (none/up/down). Sized to match the height of the header text so they sit on the baseline. */ .th-sort-icon { width: 12px; height: 14px; vertical-align: -3px; object-fit: contain; display: inline-block; margin-left: 4px; flex-shrink: 0; } /* The printer / download PNG assets are dark-on-transparent (designed */ /* for light .btn-secondary backgrounds). On .btn-print (dark navy bg) */ /* the dark icon was invisible. Invert to white in that context so the */ /* icon shows on the dark button. Same trick for .dl-icon in case any */ /* download buttons ever pair with .btn-print. */ .btn-print .print-icon, .btn-print .dl-icon, .btn-print .sort-icon { filter: brightness(0) invert(1); } /* Inline SVG icons — uses stroke:currentColor so they adapt to text */ /* color (dark-mode aware for free). 14px matches the PNG icon size. */ .svg-icon { width: 14px; height: 14px; vertical-align: -3px; display: inline-block; flex-shrink: 0; } .btn .svg-icon { width: 14px; height: 14px; vertical-align: -3px; } /* Sidebar nav uses a larger icon to match the 18px PNG nav glyphs. */ .nav-item .icon .svg-icon { width: 18px; height: 18px; vertical-align: middle; } /* Card kebab menu items have a touch more breathing room. */ .ing-card-kebab-menu .svg-icon { margin-right: 4px; } #sidebar .sidebar-footer { padding: 8px; border-top: 1px solid #1f2937; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; } #sidebar.collapsed .sidebar-footer { justify-content: center; padding: 8px 0; flex-direction: column; gap: 6px; } #sidebar .sidebar-footer .sidebar-toggle { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 1; border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } #sidebar .sidebar-footer .sidebar-toggle:hover { color: #fff; background: #1f2937; } #sidebar .sidebar-footer .sidebar-account { background: none; border: none; color: #cbd5e1; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-family: inherit; font-size: 13px; min-width: 0; flex: 1 1 auto; transition: background 0.15s, color 0.15s; } #sidebar .sidebar-footer .sidebar-account:hover { background: #1f2937; color: #fff; } .sidebar-account-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .sidebar-account-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sidebar.collapsed .sidebar-account-label { display: none; } #sidebar.collapsed .sidebar-account { padding: 4px; } /* ============================================================ * DOE Matrix toolbar — grouped, workflow-ordered controls * ============================================================ */ /* Top-of-page tab bar for the DOE Matrix view — switches between * the Analyze (matrix table) and Generate (design generator) modes. * Two big peer buttons with icon, label, and a one-line subtitle. */ .asm-matrix-tabs { display: flex; gap: 6px; /* Tab bar bottoms out flush against the colored accent strip below. * No bottom border, no rounded bottom corners — accent strip takes * over so the active tab's color "flows" into the page area. */ margin-bottom: 0; padding: 4px; background: #f1f5f9; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; } /* Thin colored strip rendered immediately after the tab bar. Picks * up the active tab's color so the eye connects "this page belongs * to that tab". Stands alone so anything below (guide, toolbar card, * Generate page) can render normally without needing accent-aware * classes of their own. */ .asm-matrix-page-accent { height: 4px; margin-bottom: 12px; background: var(--border); border-radius: 0 0 6px 6px; } .asm-matrix-page-accent.analyze { background: var(--primary); } .asm-matrix-page-accent.generate { background: #059669; } .asm-matrix-tab { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; background: transparent; color: #475569; border: 1px solid transparent; border-radius: 7px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.12s, color 0.12s, box-shadow 0.12s; } .asm-matrix-tab:hover { background: rgba(255,255,255,0.6); color: #0f172a; } /* Per-tab active colors — blue for Analyze, emerald for Generate. * Mirrors the headline-CTA palette so the same visual identity * follows each mode whether it's an active button or an active tab. */ .asm-matrix-tab-analyze.on { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 1px 3px rgba(37, 99, 235, 0.28); } .asm-matrix-tab-generate.on { background: #059669; color: #fff; border-color: #059669; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.30); } .asm-matrix-tab-icon { font-size: 16px; line-height: 1; } .asm-matrix-tab-label { font-size: 14px; font-weight: 700; } .asm-matrix-tab-sub { font-size: 11px; font-weight: 400; color: #94a3b8; } .asm-matrix-tab.on .asm-matrix-tab-sub { color: rgba(255, 255, 255, 0.82); } /* Dismiss button on the DOE Matrix "HOW TO BUILD" guide banner. */ /* Made more discoverable than a plain text × with no affordance: rest */ /* state shows a subtle 1px border so it reads as a button, hover */ /* brightens it to make the click target obvious. Recovery is via the */ /* "? Help" button that appears in the topbar after dismiss. */ .asm-guide-dismiss { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.5); border: 1px solid #c7d2fe; color: #4338ca; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s; } .asm-guide-dismiss:hover { background: #fff; border-color: #6366f1; color: #312e81; transform: translateY(-1px); } .asm-toolbar-card { margin-bottom: 12px; padding: 12px 16px; } .asm-toolbar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .asm-toolbar-left { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; row-gap: 10px; flex: 1; min-width: 0; } .asm-toolbar-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } /* Each workflow step row: [step] [LABEL] [controls] * Step + label have fixed widths so the controls start at the same X * position across every row when the toolbar wraps vertically. */ .asm-toolbar-group { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 34px; } .asm-toolbar-group:first-child { padding-left: 0; } .asm-toolbar-divider { width: 1px; background: var(--border); margin: 4px 0; align-self: stretch; flex-shrink: 0; } .asm-toolbar-step { font-size: 11px; font-weight: 700; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #64748b; border-radius: 50%; font-variant-numeric: tabular-nums; flex-shrink: 0; } .asm-toolbar-grouplbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #475569; flex-shrink: 0; } .asm-toolbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } /* Beat the global "input, select, textarea { width: 100% }" rule */ .asm-toolbar select.asm-toolbar-select, .asm-toolbar-controls select.asm-toolbar-select { width: auto; max-width: 280px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12.5px; background: #fff; font-family: inherit; color: var(--text); text-transform: none; letter-spacing: normal; min-height: 28px; } /* When toolbar wraps to stacked vertical rows, align every row's * controls at the same X by giving step+label a fixed reserved width. */ @media (min-width: 769px) { .asm-toolbar-left { flex-direction: column; align-items: stretch; } .asm-toolbar-group { width: 100%; padding: 0; display: grid; grid-template-columns: 26px 88px 1fr; gap: 8px; align-items: center; } .asm-toolbar-divider { display: none; } } .asm-toolbar-toggle.on { background: #dbeafe !important; border-color: #3b82f6 !important; color: #1d4ed8 !important; } /* The headline Analyze CTA — primary-colored, with subtitle, prominent */ .btn-doe-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--primary); color: #fff; border: none; border-radius: 7px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25), 0 0 0 0 rgba(37, 99, 235, 0); transition: background 0.15s, transform 0.1s, box-shadow 0.15s; position: relative; } .btn-doe-cta:hover { background: var(--primary-dark); box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35), 0 0 0 4px rgba(37, 99, 235, 0.10); transform: translateY(-1px); } .btn-doe-cta:active { transform: translateY(0); } .btn-doe-cta-icon { font-size: 16px; line-height: 1; } .btn-doe-cta-sub { font-size: 10px; font-weight: 500; opacity: 0.85; margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.3); } /* Alt variant — paired with the primary Analyze CTA. Same shape + * elevation so it reads as a peer action, but emerald-green to * differentiate "generate a new experiment" from "analyze results". */ .btn-doe-cta-alt { background: #059669; /* emerald-600 */ box-shadow: 0 1px 3px rgba(5, 150, 105, 0.28), 0 0 0 0 rgba(5, 150, 105, 0); } .btn-doe-cta-alt:hover { background: #047857; /* emerald-700 */ box-shadow: 0 3px 8px rgba(5, 150, 105, 0.38), 0 0 0 4px rgba(5, 150, 105, 0.12); } /* Zoom pill */ .asm-zoom-pill { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; } .asm-zoom-btn { background: none; border: none; cursor: pointer; padding: 2px 6px; font-size: 14px; line-height: 1; color: #64748b; font-weight: 600; font-family: inherit; } .asm-zoom-btn:hover { color: var(--primary); } .asm-zoom-range { width: 90px; cursor: pointer; } .asm-zoom-reset { background: none; border: none; cursor: pointer; padding: 2px 6px; font-size: 11px; line-height: 1; color: #64748b; border-left: 1px solid var(--border); font-family: inherit; min-width: 42px; } .asm-zoom-reset:hover { color: var(--primary); } @media (max-width: 1100px) { /* On medium screens, hide subtitles to keep CTA compact */ .btn-doe-cta-sub { display: none; } .asm-toolbar-grouplbl { display: none; } } @media (max-width: 768px) { .asm-toolbar-divider { display: none; } .asm-toolbar-group { padding: 0; width: 100%; flex-wrap: wrap; } .asm-toolbar-step { display: none; } } /* ============================================================ * DOE Matrix status bar — bottom strip with counts + zoom + export * ============================================================ */ .asm-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px; background: #f8fafc; border: 1px solid var(--border); border-top: 1px solid #e2e8f0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; font-size: 11.5px; color: #475569; } .asm-statusbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .asm-statusbar-left strong { color: #0f172a; font-weight: 600; } .asm-statusbar-sep { color: #cbd5e1; } .asm-statusbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Mini dot-plot strip rendered inside the column header band when the * "Distributions" toolbar toggle is on. One dot per row at its value's * relative position along the column's min–max range. */ .asm-col-dist { margin-top: 6px; padding-top: 4px; border-top: 1px dashed rgba(0, 0, 0, 0.08); user-select: none; } .asm-col-dist-empty { height: 24px; } .asm-col-dist-track { position: relative; height: 12px; background: rgba(0, 0, 0, 0.03); border-radius: 2px; } .asm-col-dist-dot { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.7; } .asm-col-dist-dot:hover { opacity: 1; outline: 1.5px solid #0f172a; } .asm-col-dist-range { display: flex; justify-content: space-between; font-size: 9.5px; color: rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; font-weight: 500; margin-top: 2px; padding: 0 1px; text-transform: none; letter-spacing: normal; } .asm-col-dist-nodata { font-size: 9.5px; color: #cbd5e1; font-weight: 500; font-style: italic; } /* ============================================================ * DOE Matrix table — user-resizable column widths * ============================================================ */ .asm-col-resizer { position: absolute; top: 0; bottom: 0; right: -3px; width: 6px; cursor: col-resize; z-index: 4; background: transparent; transition: background 0.12s ease; } .asm-col-resizer:hover, .asm-col-resizer:active { background: rgba(37, 99, 235, 0.35); } /* While a drag is in progress, lock everyone to the resize cursor */ body.asm-resizing, body.asm-resizing * { cursor: col-resize !important; user-select: none !important; } /* ============================================================ * DOE Filter-by-Formula modal — same workflow numbering as the * toolbar: ① Find → ② Filter → ③ Select * ============================================================ */ .asm-filter-grid { display: grid; grid-template-columns: 26px 88px 1fr; gap: 10px 12px; align-items: start; } .asm-filter-step { font-size: 11px; font-weight: 700; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #64748b; border-radius: 50%; font-variant-numeric: tabular-nums; margin-top: 2px; } .asm-filter-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #475569; padding-top: 4px; } .asm-filter-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* Step ① row: search input + group dropdown side-by-side */ .asm-filter-body .asm-filter-search, .asm-filter-grid input.asm-filter-search { flex: 1; min-width: 200px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; width: auto; } .asm-filter-body > .asm-filter-search { flex: 0 0 auto; } .asm-filter-grid .asm-filter-body:first-of-type { /* The Find row is single-line: search input + group label inline */ flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } .asm-filter-inline-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; white-space: nowrap; } .asm-filter-grid select.asm-filter-mini-select { width: auto; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12.5px; background: #fff; font-family: inherit; color: var(--text); text-transform: none; letter-spacing: normal; } /* Step ② sub-rows: PROJECT / TYPE / DOE FACTOR / RANGE labels in a sub-grid */ .asm-filter-subrow { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: start; } .asm-filter-subrow-range { padding-top: 8px; border-top: 1px dashed var(--border); } .asm-filter-sublbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; padding-top: 5px; } .asm-filter-subchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .asm-filter-grid select.asm-filter-range-col { width: auto; max-width: 240px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; font-family: inherit; background: #fff; text-transform: none; letter-spacing: normal; } .asm-filter-grid input.asm-filter-range-num { width: 70px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; font-family: inherit; text-transform: none; letter-spacing: normal; } .asm-filter-similar-banner { display: flex; align-items: center; gap: 8px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; font-size: 12px; grid-column: 1 / -1; /* span all columns when inside the subrows body */ } /* Step ③: bulk action row + list */ .asm-filter-bulk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .asm-filter-count { font-size: 11.5px; color: #64748b; margin-left: auto; } .asm-filter-list { max-height: 440px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: #fafafa; padding: 6px; } @media (max-width: 600px) { .asm-filter-grid { grid-template-columns: 22px 1fr; } .asm-filter-title { grid-column: 2; } .asm-filter-body { grid-column: 1 / -1; } .asm-filter-subrow { grid-template-columns: 1fr; } .asm-filter-sublbl { padding-top: 0; } } /* ============================================================ * DOE Analyze workspace — full-screen overlay with chart + stats * ============================================================ */ .asm-analyze-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; } .asm-analyze-panel { background: #fff; width: 100%; max-width: 1400px; height: 92vh; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); border: 1px solid var(--border); } .asm-analyze-header { padding: 12px 16px; background: #f8fafc; color: #0f172a; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid var(--border); } .asm-analyze-header strong { color: #0f172a; } .asm-analyze-tabs { display: flex; gap: 4px; } .asm-analyze-tabs .asm-tab { background: transparent; color: #475569; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit; } .asm-analyze-tabs .asm-tab:hover { background: #e2e8f0; color: #0f172a; } .asm-analyze-tabs .asm-tab.on { background: #0f172a; color: #fff; border-color: #0f172a; } .asm-analyze-close { background: transparent; color: #475569; border: none; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .asm-analyze-close:hover { background: #e2e8f0; color: #0f172a; } /* Presentation-mode toggles in the workspace header (top-right). * Available from any tab — dark mode and color-blind palette. */ .asm-header-toggle { background: transparent; color: #475569; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s, border-color 0.15s; } .asm-header-toggle:hover { background: #e2e8f0; color: #0f172a; } .asm-header-toggle.on { background: #0f172a; color: #fff; border-color: #0f172a; } .asm-analyze-body { flex: 1; display: flex; min-height: 0; } .asm-analyze-sidebar { position: relative; width: 260px; flex-shrink: 0; background: #f8fafc; border-right: 1px solid var(--border); /* Extra bottom padding so the last section (currently Diagnostics) doesn't butt against the scroll edge — gives a comfortable breathing room at the end of the scrollable area. */ padding: 12px 14px 32px 14px; overflow-y: auto; transition: width 0.18s ease, padding 0.18s ease; } /* Collapse-to-strip: keeps the toggle button visible so the panel * stays discoverable instead of disappearing entirely. The contents * stay in the DOM (just hidden) so the mobile breakpoint can re-show * them without re-rendering. */ .asm-analyze-sidebar.asm-sidebar-collapsed { width: 36px; padding: 10px 0; overflow: hidden; } .asm-analyze-sidebar.asm-sidebar-collapsed .asm-sidebar-contents { display: none; } /* Toggle button — small chevron floating at top-right of the sidebar * when expanded; centers in the strip when collapsed. */ .asm-sidebar-toggle { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: #475569; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; z-index: 2; font-family: inherit; transition: background 0.15s, color 0.15s; } .asm-sidebar-toggle:hover { background: #e2e8f0; color: #0f172a; } .asm-sidebar-collapsed .asm-sidebar-toggle { position: static; margin: 0 auto; } body.asm-darkplots .asm-sidebar-toggle { background: #1f2937; border-color: #374151; color: #cbd5e1; } body.asm-darkplots .asm-sidebar-toggle:hover { background: #374151; color: #fff; } .asm-analyze-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px; background: #fff; overflow: hidden; } /* When the heatmap view is showing, allow the main pane to scroll so the * correlations list below the grid is reachable. (Scatter view stays * non-scrolling because its chart sizes to flex available space.) */ .asm-analyze-main:has(#asm-heatmap-wrap), .asm-analyze-main:has(.asm-heatmap-wrap) { overflow-y: auto; } .asm-side-section { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--border); } .asm-side-section:last-child { border-bottom: none; } .asm-side-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 8px; } /* Field labels: keep uppercase styling that matches the global label rule, * but lock down the size + spacing so they fit our narrow sidebar. */ .asm-analyze-sidebar label.asm-side-label { display: block; font-size: 11px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } /* Select inside a labelled field — beat the global input/select rule */ .asm-analyze-sidebar .asm-side-label select, .asm-analyze-sidebar select.asm-side-select { width: 100%; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12.5px; font-family: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--text); background: #fff; } /* Numeric inputs (X min, X max, …) — also beat the global rule */ .asm-analyze-sidebar input.asm-side-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; font-family: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; } .asm-analyze-sidebar input.asm-side-input::placeholder { text-transform: none; letter-spacing: normal; color: #94a3b8; } /* Inline checkbox labels: keep them sentence case so the checkbox reads * naturally next to its text. Also constrain the checkbox to its native * size — the global input rule was stretching it to 100% width. */ .asm-analyze-sidebar label.asm-side-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; cursor: pointer; margin-top: 6px; font-weight: 500; text-transform: none; letter-spacing: normal; white-space: nowrap; } .asm-analyze-sidebar label.asm-side-check input[type="checkbox"] { width: 14px; height: 14px; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--primary); } /* Range-input grids (X min/max, Y min/max) — make sure the two columns * actually let inputs shrink to fit instead of overflowing. */ .asm-analyze-sidebar .asm-side-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } /* Help text boxes — same recessed-card design as the 3D stats panel * (same bg, border, radius, padding) so the sidebar reads consistently. */ .asm-side-help { font-size: 11.5px; color: #475569; line-height: 1.45; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; } .asm-toggle-group { display: flex; gap: 4px; margin-bottom: 8px; border: 1px solid var(--border); background: #f8fafc; border-radius: 6px; padding: 2px; } .asm-toggle { flex: 1; background: transparent; border: none; padding: 5px 8px; font-size: 11.5px; font-weight: 500; cursor: pointer; border-radius: 4px; color: #475569; font-family: inherit; } .asm-toggle:hover:not(.on) { background: #f1f5f9; } .asm-toggle.on { background: var(--primary); color: #fff; } /* Chart + stats */ .asm-chart-wrap { flex: 1; min-height: 0; position: relative; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px; } .asm-stats-panel { flex-shrink: 0; max-height: 38%; overflow-y: auto; margin-top: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: #1e293b; } .asm-stats-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 6px; } .asm-stat-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0; } .asm-stat-chip { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: 11.5px; font-variant-numeric: tabular-nums; } .asm-series-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* 3D-surface canvas fills the wrap exactly via absolute inset. The * absolute positioning decouples the canvas display-size from the * wrap's own layout so the canvas can't push the wrap taller (the * hand-rolled 3D canvas hit this feedback loop; Chart.js handles * its own sizing for the scatter view). */ .asm-3d-wrap { overflow: hidden; } .asm-3d-canvas { position: absolute; top: 8px; left: 8px; /* width/height in pixels minus the 8px padding on each side. Canvas * elements don't stretch with width/height: auto + inset because their * intrinsic 300x150 size acts as the default. Explicit calc() wins. */ width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; display: block; } /* Axis-range sliders (X / Y in the scatter sidebar) */ .asm-range-group { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); } .asm-range-label { font-size: 11px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .asm-range-reset { background: none; border: none; cursor: pointer; font-size: 14px; color: #94a3b8; padding: 0 4px; font-family: inherit; } .asm-range-reset:hover { color: var(--primary); } .asm-range-row { display: grid; grid-template-columns: 28px 1fr 56px; align-items: center; gap: 6px; margin-bottom: 4px; } .asm-range-handle-label { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .asm-range-slider { width: 100%; padding: 0; min-height: 0; cursor: pointer; } .asm-range-num { width: 56px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-family: inherit; text-transform: none; letter-spacing: normal; } /* Sidebar slider rows (3D rotation/tilt/zoom) */ .asm-side-slider-row { display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11.5px; color: #475569; } .asm-side-slider-label { font-size: 10.5px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; } .asm-side-slider { width: 100%; padding: 0; min-height: 0; cursor: pointer; } .asm-side-slider-val { font-size: 11px; color: #0f172a; font-variant-numeric: tabular-nums; text-align: right; } /* Dark mode for plots — toggled via body.asm-darkplots class. Applies to * the analyze workspace only so the rest of the app stays light. * Window/header/sidebar all match FormLab's main sidebar (#111827). * Inner cards/panels step up one shade (#1f2937) so they pop without * fighting the window. Text uses lighter slate-200 / slate-300. */ body.asm-darkplots .asm-analyze-panel, body.asm-darkplots .asm-analyze-header, body.asm-darkplots .asm-analyze-sidebar, body.asm-darkplots .asm-analyze-main, body.asm-darkplots .asm-chart-wrap, body.asm-darkplots .asm-hm-scroll, body.asm-darkplots .asm-hm-grid, body.asm-darkplots .asm-3d-wrap { background: #111827 !important; color: #f1f5f9; } body.asm-darkplots .asm-chart-wrap, body.asm-darkplots .asm-hm-scroll { border-color: #374151 !important; } body.asm-darkplots .asm-hm-corner, body.asm-darkplots .asm-hm-rowhdr, body.asm-darkplots .asm-hm-colhdr-bot { background: #1f2937 !important; color: #e5e7eb !important; border-color: #374151 !important; } body.asm-darkplots .asm-hm-title, body.asm-darkplots .asm-hm-subtitle, body.asm-darkplots .asm-hm-notes { color: #f1f5f9; } body.asm-darkplots .asm-hm-titlebar { border-bottom-color: #374151; } body.asm-darkplots .asm-stats-panel { background: #1f2937 !important; color: #e5e7eb; border-color: #374151 !important; } body.asm-darkplots .asm-stats-panel strong { color: #fff; } body.asm-darkplots .asm-stat-chip { background: #111827 !important; border-color: #374151 !important; color: #e5e7eb; } /* Workspace header — dark-mode tabs / close / toggles. Header itself is * the same dark as the panel; tab styles flip back to dark-on-fill. */ body.asm-darkplots .asm-analyze-header { border-bottom-color: #1f2937; color: #f1f5f9; } body.asm-darkplots .asm-analyze-header strong { color: #fff; } body.asm-darkplots .asm-analyze-tabs .asm-tab { color: #e5e7eb; border-color: #374151; } body.asm-darkplots .asm-analyze-tabs .asm-tab:hover { background: #1f2937; color: #fff; border-color: #4b5563; } body.asm-darkplots .asm-analyze-tabs .asm-tab.on { background: #fff; color: #0f172a; border-color: #fff; } body.asm-darkplots .asm-analyze-close { color: #e5e7eb; } body.asm-darkplots .asm-analyze-close:hover { background: #1f2937; color: #fff; } body.asm-darkplots .asm-header-toggle { color: #e5e7eb; border-color: #374151; } body.asm-darkplots .asm-header-toggle:hover { background: #1f2937; color: #fff; border-color: #4b5563; } body.asm-darkplots .asm-header-toggle.on { background: #fff; color: #0f172a; border-color: #fff; } /* Analyze sidebar — gets dark theme too. Same window color, separated * from main by a subtle border; controls inside get dark-mode fills. */ body.asm-darkplots .asm-analyze-sidebar { border-right-color: #1f2937; color: #e5e7eb; } body.asm-darkplots .asm-side-section { border-bottom-color: #1f2937; } body.asm-darkplots .asm-side-title { color: #cbd5e1; } /* Scoped to the analyze sidebar so this dark fill doesn't bleed into * modals (DOE generator etc.) that reuse .asm-side-help but render * outside the analyze workspace context. */ body.asm-darkplots .asm-analyze-sidebar .asm-side-help { background: #1f2937; border-color: #374151; color: #cbd5e1; } body.asm-darkplots .asm-analyze-sidebar .asm-side-help strong { color: #f1f5f9; } body.asm-darkplots .asm-toggle-group { background: #1f2937; border-color: #374151; } body.asm-darkplots .asm-analyze-sidebar label.asm-side-label { color: #e5e7eb; } body.asm-darkplots .asm-analyze-sidebar label.asm-side-check { color: #e5e7eb; } body.asm-darkplots .asm-analyze-sidebar select, body.asm-darkplots .asm-analyze-sidebar input[type="text"], body.asm-darkplots .asm-analyze-sidebar input[type="number"], body.asm-darkplots .asm-analyze-sidebar input.asm-side-input, body.asm-darkplots .asm-analyze-sidebar input.asm-toolbar-select, body.asm-darkplots .asm-analyze-sidebar textarea { background: #1f2937 !important; border-color: #374151 !important; color: #f1f5f9 !important; } body.asm-darkplots .asm-analyze-sidebar input::placeholder, body.asm-darkplots .asm-analyze-sidebar textarea::placeholder { color: #94a3b8; } body.asm-darkplots .asm-analyze-sidebar .asm-toggle { background: #1f2937; color: #e5e7eb; border-color: #374151; } body.asm-darkplots .asm-analyze-sidebar .asm-toggle:hover:not(.on) { background: #374151; color: #fff; } body.asm-darkplots .asm-analyze-sidebar .asm-toggle.on { background: var(--primary); color: #fff; border-color: var(--primary); } /* Slider rows in sidebar (3D rotation, etc.) */ body.asm-darkplots .asm-side-slider-label { color: #cbd5e1; } body.asm-darkplots .asm-side-slider-val { color: #cbd5e1; } /* Buttons inside the analyze sidebar — dark theme so they blend */ body.asm-darkplots .asm-analyze-sidebar .btn-secondary { background: #1f2937; color: #e5e7eb; border-color: #374151; } body.asm-darkplots .asm-analyze-sidebar .btn-secondary:hover { background: #374151; color: #fff; } /* Same dark treatment for the analyze HEADER action buttons (Add note, Save image) so they blend with the dark page background instead of popping as bright white chips. Print PDF already uses .btn-print (dark navy bg) so it's unaffected by this rule. */ body.asm-darkplots .asm-hm-actions .btn-secondary:not(.btn-print) { background: #1f2937; color: #e5e7eb; border-color: #374151; } body.asm-darkplots .asm-hm-actions .btn-secondary:not(.btn-print):hover { background: #374151; color: #fff; } /* Equation pill overlay on the scatter canvas — replaces the * canvas-drawn version so it can have proper padding and be dragged. */ .asm-eq-overlay { position: absolute; z-index: 6; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(15, 23, 42, 0.18); border-radius: 6px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); cursor: grab; font-size: 12px; line-height: 1.4; user-select: none; max-width: 360px; display: flex; align-items: flex-start; gap: 6px; } .asm-eq-overlay.asm-eq-dragging { cursor: grabbing; box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .asm-eq-body { flex: 1; min-width: 0; } .asm-eq-line { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; } .asm-eq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .asm-eq-text { color: #0f172a; } /* Minimize / expand toggle (top-right of the equation pill). */ .asm-eq-toggle { background: rgba(0, 0, 0, 0.06); border: none; border-radius: 4px; padding: 0 6px; font-size: 14px; font-family: inherit; color: #475569; cursor: pointer; line-height: 1.4; margin-left: 2px; flex-shrink: 0; } .asm-eq-toggle:hover { background: rgba(0, 0, 0, 0.12); color: #0f172a; } .asm-eq-toggle-mini { font-weight: 700; font-style: italic; font-size: 13px; padding: 2px 8px; background: transparent; } .asm-eq-overlay.asm-eq-minimized { padding: 2px 4px; cursor: grab; } body.asm-darkplots .asm-eq-overlay { background: rgba(15, 23, 42, 0.85); border-color: rgba(226, 232, 240, 0.25); } body.asm-darkplots .asm-eq-text { color: #e2e8f0; } body.asm-darkplots .asm-eq-toggle { background: rgba(255,255,255,0.10); color: #cbd5e1; } body.asm-darkplots .asm-eq-toggle:hover { background: rgba(255,255,255,0.18); color: #fff; } /* Annotation overlay on top of the scatter canvas / 3D wrap. The layer * itself is absolutely positioned to fill the chart-wrap; each note is * an absolutely-positioned div inside. */ .asm-annot-layer { position: absolute; inset: 8px; /* matches chart-wrap padding */ pointer-events: none; z-index: 7; } .asm-annot { position: absolute; transform: translate(-50%, -50%); font-size: 12px; color: #0f172a; line-height: 1.35; font-family: inherit; max-width: 260px; max-height: 200px; overflow: hidden; padding: 4px 8px; border-radius: 4px; pointer-events: auto; cursor: grab; user-select: none; word-break: break-word; overflow-wrap: anywhere; } /* Render rich text consistently with the editor — bullets stay inside the box, paragraphs/lists get sensible spacing, inline color and font-size from execCommand are preserved. */ .asm-annot p { margin: 0 0 4px; } .asm-annot p:last-child { margin-bottom: 0; } .asm-annot ul, .asm-annot ol { margin: 2px 0; padding-left: 18px; } .asm-annot li { margin: 1px 0; } .asm-annot b, .asm-annot strong { font-weight: 700; } .asm-annot i, .asm-annot em { font-style: italic; } .asm-annot u { text-decoration: underline; } .asm-annot:hover { outline: 1.5px dashed var(--primary); outline-offset: 2px; } .asm-annot.asm-annot-dragging { cursor: grabbing; opacity: 0.9; box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .asm-annot-bg { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .asm-annot-transparent { background: transparent; } body.asm-darkplots .asm-annot { color: #e2e8f0; } body.asm-darkplots .asm-annot-bg { background: rgba(15, 23, 42, 0.85); border-color: #334155; } /* Placement mode — show crosshair on hovered chart */ .asm-chart-wrap.asm-annot-placing { cursor: crosshair !important; } .asm-chart-wrap.asm-annot-placing canvas { cursor: crosshair !important; } .asm-annot-editor { font-family: inherit; } .asm-annot-editor:focus { outline: 2px solid var(--primary); outline-offset: -2px; } /* Keep bullets / numbered lists inside the editor's padding box — default