/* Bundled Inter (latin, variable weight axis) — the typographic backbone of the Notion-leaning look. Self-hosted (no external font CDN, sovereign) at dist/assets/inter.woff2 (copied from ui/assets via the trunk copy-dir). The `--y-font` stack lists "Inter" first, then system fallbacks while it loads. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/inter.woff2") format("woff2"); } /* ============================================================================ ycell design system A cohesive, modern, Office-grade look. Everything is driven by CSS custom properties so theming is one place. The old UI was "vraiment moche"; this is the antidote: restrained palette, crisp 1px borders, real depth on focus, tight typographic rhythm. THEMING ------- All colours are CSS custom properties. The *default* (:root) values are the Light theme. A `data-theme="dark"` attribute on overrides the colour tokens for Dark. A `data-accent="…"` attribute on overrides the accent ramp (blue is the default / built into :root). Switching themes is therefore a single attribute flip on document.documentElement (see ui/src/theme.rs). NB: non-colour tokens (radii, spacing, type, metrics) are theme-independent and live only in :root. Dark/accent blocks override colours *only*. ========================================================================== */ :root { /* --- brand & accent (Blue — refined, restrained à la Notion) --- */ --y-accent: #2383e2; /* clean, calmer blue */ --y-accent-hover: #1a6fc4; --y-accent-soft: #e8f1fb; --y-accent-ring: rgba(35, 131, 226, 0.26); --y-accent-ink: #ffffff; /* text drawn on top of a solid accent fill */ /* --- surfaces (warm, content-first whites) --- */ --y-bg: #f7f7f5; /* warm app shell behind everything */ --y-surface: #ffffff; /* panels, ribbon, cards */ --y-surface-2: #f6f5f3; /* subtle raised rows */ --y-surface-3: #efeeec; /* headers, inert chips */ /* --- ink (warm near-black, not cold) --- */ --y-ink: #37352f; /* primary text */ --y-ink-soft: #6b6a66; /* secondary text */ --y-ink-faint: #9b9a97; /* hints, placeholders */ --y-ink-invert: #ffffff; /* --- lines (soft + warm, hairline) --- */ --y-border: #ebebea; --y-border-strong: #dcdbd7; --y-grid-line: #ececeb; --y-grid-header: #f7f7f5; /* --- semantic --- */ --y-ok: #2c8c5a; --y-warn: #b7791f; --y-error: #e0564b; --y-stale: #b7791f; /* --- titlebar (LIGHT + calm — no more Office navy bar) --- */ --y-titlebar-from: #ffffff; --y-titlebar-to: #ffffff; --y-titlebar-ink: #37352f; --y-titlebar-doc: #9b9a97; /* --- assorted derived / component-local colours (hoisted out of rules) --- */ --y-hover-veil: rgba(55, 53, 47, .055); /* warm Notion-style hover wash */ --y-active-veil: rgba(55, 53, 47, .09); --y-danger-soft: #fdecea; /* danger button hover bg */ --y-danger-line: #f5c6c0; /* danger button hover border */ --y-code-bg: #1e1e1a; /* SQL / code block background */ --y-code-ink: #e7e6e1; /* SQL / code block text */ --y-aihead-from: #fbfbfa; /* AI panel header gradient */ --y-aihead-to: #f6f5f3; --y-stale-bg: #fbf3e0; /* stale pill */ --y-stale-line: #ecd9b0; --y-scrim: rgba(15, 15, 14, .32); /* soft modal backdrop */ --y-cell-editor-bg:#ffffff; /* floating cell editor */ /* --- elevation — soft, warm, subtle (Notion-like, not heavy). --- */ --y-shadow-tint: 15, 15, 14; /* rgb channels used by the shadows */ --y-shadow-1: 0 1px 2px rgba(var(--y-shadow-tint),.06), 0 1px 2px rgba(var(--y-shadow-tint),.08); --y-shadow-2: 0 4px 14px rgba(var(--y-shadow-tint),.10), 0 1px 4px rgba(var(--y-shadow-tint),.07); --y-shadow-3: 0 14px 44px rgba(var(--y-shadow-tint),.16), 0 4px 12px rgba(var(--y-shadow-tint),.10); /* --- radii --- subtle (modern, not bubbly) --- */ --y-r-sm: 5px; --y-r-md: 7px; --y-r-lg: 10px; --y-r-xl: 13px; /* modals & large cards */ /* --- spacing scale --- */ --y-s1: 4px; --y-s2: 8px; --y-s3: 12px; --y-s4: 16px; --y-s5: 24px; /* --- type --- */ --y-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --y-mono: "Cascadia Code", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; --y-fs-xs: 11px; --y-fs-sm: 12px; --y-fs-md: 13px; --y-fs-lg: 15px; --y-fs-xl: 18px; /* --- chrome metrics, shared with the canvas grid via JS reads --- */ /* Slim single-row toolbar (was 92px Office ribbon). The tab strip + a 40px control row ≈ 44px total; the canvas grid is a flex sibling and re-fits its CSS box automatically, but the token is kept truthful for any JS read. */ --y-ribbon-h: 44px; --y-formula-h: 34px; --y-status-h: 24px; --y-ai-w: 320px; } /* ============================================================================ DARK THEME — colour token overrides only. Tuned to feel as crafted as Light: near-black (not pure black) surfaces with a faint blue cast, layered elevation via lighter surfaces, softened borders, and a slightly brighter accent so it pops on dark. ========================================================================== */ :root[data-theme="dark"] { --y-accent-soft: #1a2b46; --y-accent-ring: rgba(74, 150, 255, 0.40); --y-accent-ink: #ffffff; --y-bg: #15171c; --y-surface: #1d2026; --y-surface-2: #23272f; --y-surface-3: #2a2f38; --y-ink: #e7eaee; --y-ink-soft: #aab2bd; --y-ink-faint: #8e95a0; /* AA on dark surfaces */ --y-ink-invert: #15171c; --y-border: #343a44; --y-border-strong: #454c58; --y-grid-line: #2c313a; --y-grid-header: #23272f; --y-ok: #3fbf75; --y-warn: #e0a13c; --y-error: #f06a6e; --y-stale: #e0a13c; --y-titlebar-from: #1d2026; --y-titlebar-to: #1d2026; --y-titlebar-ink: #e7eaee; --y-titlebar-doc: #8e95a0; --y-hover-veil: rgba(255, 255, 255, .06); --y-active-veil: rgba(255, 255, 255, .10); --y-danger-soft: #3a1f21; --y-danger-line: #5e3034; --y-code-bg: #0b1018; --y-code-ink: #cfe3ff; --y-aihead-from: #20242c; --y-aihead-to: #1a1e25; --y-stale-bg: #2e2716; --y-stale-line: #4a3d1c; --y-scrim: rgba(0, 0, 0, .60); --y-cell-editor-bg:#23272f; /* deeper, darker shadows so elevation still reads on dark surfaces */ --y-shadow-tint: 0, 0, 0; --y-shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.50); --y-shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.40); --y-shadow-3: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.45); } /* ============================================================================ ACCENT PRESETS — override the accent ramp only. Blue is the :root default, so `data-accent="blue"` (or no attribute) needs nothing extra. These work on top of either theme; the soft/ring tints are deliberately separate per theme via the dark block above only for the *default* blue — for the alternative accents we provide both a light and a dark soft value. ========================================================================== */ :root[data-accent="green"] { --y-accent: #1c8a4d; --y-accent-hover: #166f3e; --y-accent-soft: #e4f4ea; --y-accent-ring: rgba(28, 138, 77, 0.32); } :root[data-theme="dark"][data-accent="green"] { --y-accent: #36b56e; --y-accent-hover: #2c9d5e; --y-accent-soft: #16301f; --y-accent-ring: rgba(54, 181, 110, 0.40); } :root[data-accent="violet"] { --y-accent: #6d3fd1; --y-accent-hover: #5a31b3; --y-accent-soft: #efe9fb; --y-accent-ring: rgba(109, 63, 209, 0.32); } :root[data-theme="dark"][data-accent="violet"] { --y-accent: #9168ec; --y-accent-hover: #7d52df; --y-accent-soft: #271a44; --y-accent-ring: rgba(145, 104, 236, 0.42); } :root[data-accent="amber"] { --y-accent: #c2710d; --y-accent-hover: #a35e0a; --y-accent-soft: #fbeed6; --y-accent-ring: rgba(194, 113, 13, 0.32); } :root[data-theme="dark"][data-accent="amber"] { --y-accent: #e2962f; --y-accent-hover: #cd8221; --y-accent-soft: #392a12; --y-accent-ring: rgba(226, 150, 47, 0.42); } :root[data-accent="rose"] { --y-accent: #c2255c; --y-accent-hover: #a31d4d; --y-accent-soft: #fbe4ec; --y-accent-ring: rgba(194, 37, 92, 0.32); } :root[data-theme="dark"][data-accent="rose"] { --y-accent: #e85084; --y-accent-hover: #d63f73; --y-accent-soft: #3a1722; --y-accent-ring: rgba(232, 80, 132, 0.42); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: var(--y-font); font-size: var(--y-fs-md); color: var(--y-ink); background: var(--y-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================================ This is an APPLICATION, not a document: the chrome (ribbon, labels, buttons, panels, menus) is NOT text-selectable — drag-selecting UI text feels broken. Only real CONTENT is selectable/copyable: form fields, editable areas, code/values (ids, links, mono), and the genuine content panels (AI answers, report preview, cell-explain). The grid cells live on a and handle their own range selection, so they're unaffected. Add `.y-selectable` to opt any other text block back in. ========================================================================== */ body { -webkit-user-select: none; user-select: none; } input, textarea, select, [contenteditable="true"], code, pre, .y-fingerprint, .y-aipanel, .y-report-preview-wrap, .y-explain, .y-selectable, .y-selectable * { -webkit-user-select: text; user-select: text; } /* ============================================================================ ACCESSIBILITY — a single, consistent keyboard focus ring. Only `:focus-visible` (keyboard / programmatic focus) draws the ring, so a mouse click never leaves a lingering halo, but every interactive control — buttons, tabs, list rows, menu items, links — gets a clear, theme-aware indicator. Inputs keep their richer border+ring treatment below; this is the baseline for everything that doesn't define its own. ========================================================================== */ :focus-visible { outline: 2px solid var(--y-accent); outline-offset: 2px; border-radius: var(--y-r-sm); } /* Controls that sit flush against an edge (tabs, segmented rows, list rows) read better with the ring tucked just inside rather than floating outside. */ .y-tab:focus-visible, .y-sheet-tab:focus-visible, .y-ctx-item:focus-visible, .y-menu-item:focus-visible, .y-filter-row:focus-visible, .y-ac-item:focus-visible, .y-ds-item:focus-visible, .y-home-recent:focus-visible { outline-offset: -2px; } /* Inputs already render an accent border + ring on focus; suppress the generic outline so they don't get a doubled indicator. */ .y-input:focus-visible, .y-select:focus-visible, .y-textarea:focus-visible { outline: none; } /* Honour users who ask the OS to minimise motion: drop the decorative transitions/animations the chrome uses, keeping the UI fully functional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Smooth the theme flip so it doesn't feel like a hard cut. */ html, body, .y-ribbon, .y-titlebar, .y-formulabar, .y-sidepanel, .y-aipanel, .y-status, .y-modal, .y-ctx-menu, .y-btn, .y-input, .y-select, .y-textarea { transition: background-color .15s ease, color .15s ease, border-color .15s ease; } #root, .y-app { height: 100%; } /* ============================ App shell ================================== */ .y-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .y-titlebar { display: flex; align-items: center; gap: var(--y-s3); height: 36px; padding: 0 var(--y-s4); background: linear-gradient(180deg, var(--y-titlebar-from) 0%, var(--y-titlebar-to) 100%); color: var(--y-titlebar-ink); border-bottom: 1px solid var(--y-border); flex: 0 0 auto; } .y-titlebar .y-logo { font-weight: 700; letter-spacing: .3px; font-size: var(--y-fs-lg); display: flex; align-items: center; gap: 7px; } .y-titlebar .y-logo .y-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--y-accent); color: var(--y-accent-ink); border-radius: var(--y-r-sm); font-weight: 800; } .y-titlebar .y-doc { color: var(--y-titlebar-doc); font-size: var(--y-fs-sm); } .y-titlebar .y-spacer { flex: 1; } /* Discreet "Éditions / À propos" link in the title bar (informational only). */ .y-titlebar-link { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--y-titlebar-doc); font: inherit; font-size: var(--y-fs-sm); padding: 4px 10px; border-radius: 6px; opacity: 0.85; } .y-titlebar-link:hover { opacity: 1; background: var(--y-hover-veil); } /* ⌘K command-palette affordance in the title bar — a subtle pill with a key chip. */ .y-titlebar-cmdk { appearance: none; cursor: pointer; font: inherit; font-size: var(--y-fs-sm); display: inline-flex; align-items: center; gap: 7px; color: var(--y-titlebar-ink, var(--y-titlebar-doc)); background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); border-radius: 999px; padding: 3px 10px 3px 8px; opacity: .92; } .y-titlebar-cmdk:hover { opacity: 1; background: rgba(255, 255, 255, .18); } .y-titlebar-cmdk .y-cmdk-chip { font-size: var(--y-fs-xs); font-weight: 600; letter-spacing: .02em; padding: 1px 6px; border-radius: 5px; line-height: 1.4; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); } /* 🎥 Live-conference primary action in the title bar — the obvious, one-click way to start a live collaboration session (was buried in the Partager menu). A filled accent pill so it reads as the primary call-to-action up here. */ .y-titlebar-conf { appearance: none; cursor: pointer; font: inherit; font-size: var(--y-fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--y-accent-ink); background: var(--y-accent); border: 1px solid var(--y-accent); border-radius: 999px; padding: 4px 12px; box-shadow: var(--y-shadow-1); transition: background .1s, box-shadow .12s, transform .06s; } .y-titlebar-conf:hover { background: var(--y-accent-hover); box-shadow: var(--y-shadow-2); } .y-titlebar-conf:active { transform: translateY(.5px); box-shadow: var(--y-shadow-1); } /* "Session en cours": switch to a calm green-lit state so the live status reads at a glance (matches the 🟢 presence chip language). */ .y-titlebar-conf.is-live { background: var(--y-ok); border-color: var(--y-ok); color: #fff; animation: y-conf-pulse 2.4s ease-in-out infinite; } @keyframes y-conf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 191, 117, .45); } 50% { box-shadow: 0 0 0 4px rgba(63, 191, 117, 0); } } /* "À propos / Éditions" modal body. */ .y-about-intro { margin: 0 0 12px; } .y-about-list { margin: 0 0 12px; padding-left: 18px; } .y-about-list li { margin: 6px 0; } /* compact theme controls that can live in the title bar */ .y-titlebar .y-theme-controls { display: flex; align-items: center; gap: var(--y-s2); } .y-theme-toggle { appearance: none; cursor: pointer; font: inherit; font-size: var(--y-fs-sm); display: inline-flex; align-items: center; gap: 6px; color: var(--y-titlebar-ink); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--y-r-sm); padding: 3px 9px; } .y-theme-toggle:hover { background: rgba(255, 255, 255, .20); } /* ============================ Ribbon ==================================== */ .y-ribbon { flex: 0 0 auto; background: var(--y-surface); border-bottom: 1px solid var(--y-border); } .y-ribbon-tabs { display: flex; gap: 2px; padding: 0 var(--y-s4); background: var(--y-surface); border-bottom: 1px solid var(--y-border); } .y-tab { appearance: none; border: 0; background: transparent; padding: 8px var(--y-s4) 7px; font: inherit; font-size: var(--y-fs-md); color: var(--y-ink-soft); cursor: pointer; border-radius: var(--y-r-sm) var(--y-r-sm) 0 0; border-bottom: 2px solid transparent; } .y-tab:hover { background: var(--y-hover-veil); color: var(--y-ink); } .y-tab.is-active { background: var(--y-surface); color: var(--y-accent); border-bottom-color: var(--y-accent); font-weight: 600; } /* Compact WRAPPING toolbar (Notion/Linear style): a tab's groups flow left to right and WRAP onto 2–3 short rows instead of scrolling off-screen on one endless horizontal line. Captions are gone (the button `title=`/`aria-label` carry the meaning as tooltips); clusters are separated by a single hairline. The ⌘K palette still covers the long tail. */ .y-ribbon-body { display: flex; align-items: center; gap: 0 2px; flex-wrap: wrap; row-gap: 3px; padding: 5px var(--y-s3); justify-content: flex-start; } .y-group { display: inline-flex; flex-direction: row; align-items: center; gap: var(--y-s2); padding: 0 var(--y-s3); position: relative; flex: 0 0 auto; } /* A single faint hairline between clusters (not an "Office wall of separators"): one per group except the first in its row. */ .y-group + .y-group { border-left: 1px solid var(--y-border); } .y-group-controls { display: inline-flex; align-items: center; gap: var(--y-s2); } /* Captions are now tooltips — hide the inline label entirely to reclaim the vertical space that made the old ribbon feel dense-yet-empty. */ .y-group-label { display: none; } /* In the slim bar, the toggle-button clusters sit inline (side by side) rather than stacked, and any block/margin a group used for the old tall layout is neutralised so the whole tab stays on one 32px-tall line. */ .y-ribbon-body .y-toggle-row { display: inline-flex; vertical-align: middle; } .y-ribbon-body .y-group-controls > label[style*="block"], .y-ribbon-body .y-group-controls > .y-muted[style*="block"] { display: none !important; } .y-ribbon-body .y-group-controls [style*="margin-top"] { margin-top: 0 !important; } /* The verbose, rarely-used custom-number-format input + live preview is dropped from the bar (it lives in the Format-Cells dialog "Plus de formats…" + ⌘K). Detect it by its free-text input and hide that sub-row + the preview muted text, keeping the quick presets/toggles/steppers that people actually click. */ .y-ribbon-body .y-group-controls > .y-toggle-row:has(> input.y-input) { display: none; } /* Advisory muted text (the Insertion "astuce" tip, the Options tagline) is pure chrome noise on a slim bar — hide whole groups whose only content is a caption span (and thus their separator), keeping every actual control. */ .y-ribbon-body .y-group:has(> .y-group-controls > .y-muted:only-child) { display: none; } /* Keep icon-buttons tight in the bar. */ .y-ribbon-body .y-btn { padding: 4px 7px; } .y-ribbon-body .y-btn.y-icon { padding: 4px 6px; min-width: 28px; } .y-ribbon-body .y-select { padding: 3px 6px; } /* buttons & inputs shared */ .y-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; padding: 5px 9px; border-radius: var(--y-r-sm); font: inherit; font-size: var(--y-fs-md); color: var(--y-ink); cursor: pointer; transition: background .08s, border-color .08s, box-shadow .12s, transform .06s; } .y-btn:hover { background: var(--y-hover-veil); border-color: transparent; } .y-btn:active { background: var(--y-active-veil); transform: none; } .y-btn.is-active { background: var(--y-accent-soft); border-color: var(--y-accent); color: var(--y-accent); } .y-btn.y-icon { padding: 5px 7px; min-width: 30px; justify-content: center; } .y-btn.y-primary { background: var(--y-accent); color: var(--y-accent-ink); border-color: var(--y-accent); font-weight: 600; box-shadow: var(--y-shadow-1); } .y-btn.y-primary:hover { background: var(--y-accent-hover); border-color: var(--y-accent-hover); box-shadow: var(--y-shadow-2); } .y-btn.y-primary:active { box-shadow: var(--y-shadow-1); } .y-btn.y-danger { color: var(--y-error); } .y-btn.y-danger:hover { background: var(--y-danger-soft); border-color: var(--y-danger-line); } /* Disabled controls: clearly inert — no hover/active affordance, no pointer. */ .y-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .y-btn:disabled:hover { background: transparent; border-color: transparent; } .y-btn.y-primary:disabled:hover { background: var(--y-accent); border-color: var(--y-accent); } .y-btn:disabled:active { transform: none; } .y-toggle-row { display: inline-flex; } .y-toggle-row .y-btn { border-radius: 0; border-left-width: 0; } .y-toggle-row .y-btn:first-child { border-radius: var(--y-r-sm) 0 0 var(--y-r-sm); border-left-width: 1px; } .y-toggle-row .y-btn:last-child { border-radius: 0 var(--y-r-sm) var(--y-r-sm) 0; } .y-toggle-row .y-btn { border-color: var(--y-border); } .y-input, .y-select, .y-textarea { font: inherit; font-size: var(--y-fs-md); color: var(--y-ink); background: var(--y-surface); border: 1px solid var(--y-border); border-radius: var(--y-r-sm); padding: 5px 8px; outline: none; transition: border-color .1s, box-shadow .1s; } .y-input:focus, .y-select:focus, .y-textarea:focus { border-color: var(--y-accent); box-shadow: 0 0 0 3px var(--y-accent-ring); } .y-textarea { font-family: var(--y-mono); font-size: var(--y-fs-sm); resize: vertical; min-height: 64px; width: 100%; } .y-color-swatch { width: 22px; height: 22px; border-radius: var(--y-r-sm); border: 1px solid var(--y-border-strong); padding: 0; cursor: pointer; } .y-label { font-size: var(--y-fs-sm); color: var(--y-ink-soft); display: block; margin-bottom: 3px; } /* ====================== Theme switcher (Options tab) ==================== */ .y-swatch-row { display: inline-flex; gap: 6px; align-items: center; } .y-accent-swatch { appearance: none; width: 24px; height: 24px; padding: 0; cursor: pointer; border-radius: 50%; border: 2px solid var(--y-border); box-shadow: var(--y-shadow-1); } .y-accent-swatch:hover { transform: translateY(-1px); } .y-accent-swatch.is-active { border-color: var(--y-ink); box-shadow: 0 0 0 3px var(--y-accent-ring); } /* ====================== Formula bar / name box ========================== */ .y-formulabar { display: flex; align-items: stretch; gap: var(--y-s2); flex: 0 0 auto; height: var(--y-formula-h); padding: 0 var(--y-s2); background: var(--y-surface); border-bottom: 1px solid var(--y-border); } .y-namebox { width: 96px; flex: 0 0 auto; font-family: var(--y-mono); text-align: left; border-radius: var(--y-r-sm); align-self: center; } .y-ybtn { align-self: center; font-weight: 800; font-style: italic; width: 30px; height: 24px; border-radius: var(--y-r-sm); background: var(--y-accent); color: var(--y-accent-ink); border: 0; cursor: pointer; font-size: var(--y-fs-lg); line-height: 1; } .y-ybtn:hover { background: var(--y-accent-hover); } .y-fx { align-self: center; color: var(--y-ink-faint); font-style: italic; font-family: var(--y-mono); padding: 0 4px; } .y-formula-input { flex: 1; align-self: center; font-family: var(--y-mono); } /* ====================== Work area (grid + panels) ======================= */ .y-work { display: flex; flex: 1; min-height: 0; } .y-center { display: flex; flex-direction: column; flex: 1; min-width: 0; position: relative; } .y-gridwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--y-surface); } .y-grid-canvas { display: block; width: 100%; height: 100%; } /* Custom scrollbars for the canvas grid (it has no native scroll). The horizontal bar is deliberately thick/easy to grab; both overlay the far edges and sit above the canvas but below the editor/overlays. */ .y-sb { position: absolute; z-index: 30; background: var(--y-surface-2); } .y-sb-h { left: 0; right: 14px; bottom: 0; height: 14px; border-top: 1px solid var(--y-border); } .y-sb-v { top: 0; bottom: 14px; right: 0; width: 14px; border-left: 1px solid var(--y-border); } .y-sb-thumb { position: absolute; background: var(--y-border-strong); border-radius: 7px; transition: background .12s ease; } .y-sb-h .y-sb-thumb { top: 2px; bottom: 2px; min-width: 28px; cursor: ew-resize; } .y-sb-v .y-sb-thumb { left: 2px; right: 2px; min-height: 28px; cursor: ns-resize; } .y-sb-thumb:hover { background: var(--y-ink-soft); } /* the live cell editor floats over the canvas at the active cell */ .y-cell-editor { position: absolute; z-index: 20; font-family: var(--y-font); font-size: var(--y-fs-md); border: 2px solid var(--y-accent); background: var(--y-cell-editor-bg); color: var(--y-ink); padding: 1px 4px; outline: none; box-shadow: var(--y-shadow-2); } /* ====================== Left data panel (Données) ======================= */ .y-sidepanel { width: 300px; flex: 0 0 auto; background: var(--y-surface); border-right: 1px solid var(--y-border); display: flex; flex-direction: column; min-height: 0; } .y-sidepanel.is-collapsed { width: 0; overflow: hidden; border: 0; } .y-panel-head { display: flex; align-items: center; justify-content: space-between; padding: var(--y-s2) var(--y-s3); border-bottom: 1px solid var(--y-border); } .y-panel-title { font-weight: 600; font-size: var(--y-fs-md); } .y-panel-body { flex: 1; overflow: auto; padding: var(--y-s3); } .y-ds-list { display: flex; flex-direction: column; gap: 5px; } .y-ds-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--y-border); border-radius: var(--y-r-md); cursor: pointer; background: var(--y-surface-2); transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; } .y-ds-item:hover { border-color: var(--y-border-strong); box-shadow: var(--y-shadow-1); } .y-ds-item.is-active { border-color: var(--y-accent); background: var(--y-accent-soft); box-shadow: none; } .y-ds-item .y-ds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--y-ok); flex: 0 0 auto; box-shadow: 0 0 0 0 color-mix(in srgb, var(--y-ok) 50%, transparent); } /* The active source's live dot gets a soft, slow halo — a calm "this is live" cue. */ .y-ds-item.is-active .y-ds-dot { animation: y-ds-pulse 2.4s ease-in-out infinite; } @keyframes y-ds-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--y-ok) 45%, transparent); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--y-ok) 0%, transparent); } } /* Source name stays on one line and ellipsizes — never wraps to a tall row. */ .y-ds-item .y-ds-name { flex: 1 1 auto; min-width: 0; font-weight: 500; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Add-source actions: full-width, stacked, never wrapping. Primary "add" + a quiet "browse the catalogue". */ .y-ds-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .y-ds-actions .y-btn { width: 100%; white-space: nowrap; justify-content: center; } .y-ds-browse { background: transparent; border: 1px solid var(--y-border); color: var(--y-ink-soft); } .y-ds-browse:hover { border-color: var(--y-accent); color: var(--y-accent); background: var(--y-accent-soft); } .y-ds-item .y-ds-kind { flex: 0 0 auto; font-size: var(--y-fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--y-ink-faint); border: 1px solid var(--y-border); border-radius: var(--y-r-sm); padding: 1px 6px; } .y-ds-item .y-ds-del { flex: 0 0 auto; opacity: 0; transition: opacity .12s ease; } .y-ds-item:hover .y-ds-del, .y-ds-item:focus-within .y-ds-del { opacity: .65; } .y-ds-item .y-ds-del:hover, .y-ds-item .y-ds-del:focus-visible { opacity: 1; } /* Per-source AI access toggle: ✦ when allowed (accent), ⊘ when blocked (faint). Quiet by default (revealed like the delete affordance), but a BLOCKED source always shows its ⊘ so the off state is never hidden. */ .y-ds-item .y-ds-ai { flex: 0 0 auto; opacity: 0; color: var(--y-accent); transition: opacity .12s ease; } .y-ds-item:hover .y-ds-ai, .y-ds-item:focus-within .y-ds-ai { opacity: .75; } .y-ds-item .y-ds-ai:hover, .y-ds-item .y-ds-ai:focus-visible { opacity: 1; } .y-ds-item .y-ds-ai.is-off { opacity: .85; color: var(--y-ink-faint); } .y-ds-item .y-ds-ai.is-off:hover, .y-ds-item .y-ds-ai.is-off:focus-visible { opacity: 1; } /* Step 2b: an INCOMPLETE source (travelled secret-free) — greyed, with a "compléter" affordance. Scoped to .y-ds-incomplete so it never affects live sources. */ .y-ds-item.y-ds-incomplete { opacity: 0.6; border-style: dashed; } .y-ds-item.y-ds-incomplete .y-ds-name { font-style: italic; cursor: default; } .y-ds-item.y-ds-incomplete .y-ds-complete { flex: 0 0 auto; white-space: nowrap; font-size: var(--y-fs-xs); color: var(--y-warn, #b8860b); width: auto; padding: 0 6px; } /* Source list grouped by kind: a small header per group, items nested below. */ .y-ds-group { display: flex; flex-direction: column; gap: 6px; } .y-ds-group + .y-ds-group { margin-top: 10px; } .y-ds-group-title { display: flex; align-items: center; gap: 6px; font-size: var(--y-fs-xs); font-weight: 600; color: var(--y-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } /* Add-source kind picker: wrap the segmented buttons so all four kinds fit. */ .y-ds-kinds { display: flex; flex-wrap: wrap; } .y-ds-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; background: var(--y-surface-3); border-radius: var(--y-r-sm); padding: 0 3px; margin-right: 2px; } /* Key/value (headers) editor in the add-source form. */ .y-kv { display: flex; flex-direction: column; gap: 4px; } .y-tree { list-style: none; margin: 0; padding: 0; font-family: var(--y-mono); font-size: var(--y-fs-sm); } .y-tree li { padding: 3px 6px; border-radius: var(--y-r-sm); cursor: pointer; } .y-tree li:hover { background: var(--y-surface-3); } .y-tree .y-tree-table { font-weight: 600; } .y-tree .y-tree-col { padding-left: 20px; color: var(--y-ink-soft); } .y-tree .y-tree-col .y-coltype { color: var(--y-ink-faint); } /* WYSIWYG field picker (schema tree). Each row shows a label, a type chip and a muted sample on the right. Leaf rows are clickable (bind to the active cell); parent (object/array) rows are non-interactive headers. */ .y-field-tree { font-family: inherit; } /* A field row is three tidy columns: label (flexes, ellipsis), a quiet type tag (fixed), and the sample value (fixed, right-aligned) — so types and samples line up vertically instead of floating mid-row. */ .y-field-row-item { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: var(--y-r-sm); } .y-field-row-item.is-leaf { cursor: pointer; } .y-field-row-item.is-leaf:hover { background: var(--y-accent-soft); } .y-field-row-item.is-parent { cursor: default; color: var(--y-ink-soft); font-weight: 600; } .y-field-row-item.is-parent:hover { background: transparent; } .y-field-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .y-type-chip { flex: 0 0 40px; text-align: right; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--y-ink-faint); background: transparent; padding: 0; } .y-field-sample { flex: 0 0 76px; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--y-mono); font-size: var(--y-fs-xs); color: var(--y-ink-soft); } /* Visual query builder ("blindé ergonomique", no hand-typed queries): an entity search list, a typed field list (checkbox = include as column, ⧩ = filter), click-built filter rows, selected-column chips, and a sort/limit row. Reuses the design tokens + .y-tree / .y-field-row-item / .y-chip primitives. */ .y-qb-entities, .y-qb-fields { max-height: 168px; overflow-y: auto; } .y-qb-entities .y-tree-table { cursor: pointer; } .y-qb-entities .y-tree-table.is-active, .y-qb-fields .y-field-row-item.is-active { background: var(--y-accent-soft); } .y-qb-field { gap: 6px; } .y-qb-col-toggle { flex: 0 0 auto; display: flex; align-items: center; cursor: pointer; } .y-qb-flt-add { flex: 0 0 auto; padding: 0 5px; line-height: 1.4; opacity: .65; } .y-qb-field:hover .y-qb-flt-add { opacity: 1; } .y-qb-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; border-radius: var(--y-r-sm); background: var(--y-surface-sunken); margin-bottom: 4px; } .y-qb-filter .y-field-label { flex: 0 1 auto; font-weight: 600; } .y-qb-val { flex: 1 1 70px; min-width: 60px; } .y-qb-limit { flex: 0 0 64px; width: 64px; } .y-qb-col-chips { display: flex; flex-wrap: wrap; gap: 4px; } .y-qb-error { display: flex; flex-direction: column; gap: 6px; } .y-qb-error-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .y-qb-retry { flex: 0 0 auto; } /* Semantic browser: role-grouped, unit-aware field picker (prefers the /api/metamodel view). Reuses .y-field-tree / .y-field-row-item rows; adds a role glyph, a role-group header, a quiet unit chip and a muted stat hint. */ .y-sem-coll { margin-bottom: var(--y-s2); } .y-sem-coll-title { font-size: var(--y-fs-sm); font-weight: 600; color: var(--y-ink); padding: 2px 6px; margin-bottom: 2px; } .y-sem-group { margin-bottom: 6px; } .y-sem-group-title { display: flex; align-items: center; gap: 6px; padding: 0 6px; margin-bottom: 1px; } .y-sem-group-label { font-size: var(--y-fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--y-ink-faint); font-weight: 600; } .y-sem-group-count { font-size: 9px; color: var(--y-ink-faint); border: 1px solid var(--y-border); border-radius: 999px; padding: 0 5px; line-height: 14px; } /* The role glyph: fixed, dim, centred so labels align across rows. */ .y-sem-role-icon { flex: 0 0 16px; text-align: center; color: var(--y-ink-faint); font-size: var(--y-fs-xs); } .y-sem-group-title .y-sem-role-icon { color: var(--y-accent); } /* Quiet unit chip (e.g. €, °C) — a tasteful pill next to the label. */ .y-unit-chip { flex: 0 0 auto; font-size: 9px; font-weight: 600; color: var(--y-ink-soft); background: var(--y-accent-soft); border-radius: var(--y-r-sm); padding: 0 5px; line-height: 15px; } /* Muted tabular stat hint (min–max / n distinct). */ .y-field-hint { flex: 0 0 auto; font-size: 9px; color: var(--y-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; } /* Relations footnote (foreign keys). */ .y-sem-relations { margin-top: 6px; padding: 6px; border-top: 1px solid var(--y-border); } .y-sem-rel { font-family: var(--y-mono); font-size: var(--y-fs-xs); color: var(--y-ink-soft); padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .y-results { width: 100%; border-collapse: collapse; font-size: var(--y-fs-sm); } .y-results th, .y-results td { border: 1px solid var(--y-border); padding: 4px 7px; text-align: left; white-space: nowrap; } .y-results th { background: var(--y-surface-3); position: sticky; top: 0; } .y-section { margin-bottom: var(--y-s4); } .y-section-title { font-size: var(--y-fs-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--y-ink-faint); margin-bottom: 6px; } /* ============== Contextual cell inspector (top of Données) ============== */ /* Leads the panel with "what is this cell": Format + Provenance, reacting to every selection change. */ .y-cellctx { border-bottom: 1px solid var(--y-border); } .y-cellctx-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .y-cellctx-addr { font-family: var(--y-mono); text-transform: none; letter-spacing: 0; font-size: var(--y-fs-xs); } .y-cellctx-grid { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .y-cellctx-row { display: flex; align-items: baseline; gap: 8px; font-size: var(--y-fs-sm); } .y-cellctx-key { flex: 0 0 38%; font-size: var(--y-fs-xs); } .y-cellctx-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .y-cellctx-fill { display: inline-flex; align-items: center; gap: 6px; } .y-cellctx-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--y-border); display: inline-block; } .y-cellctx-empty { padding: 2px 0; } .y-cellctx-edit, .y-cellctx-explain { margin-top: 2px; font-size: var(--y-fs-xs); } /* Contextual cell error readout. */ .y-cellctx-errcode { font-family: var(--y-mono); font-size: var(--y-fs-xs); color: var(--y-error); font-weight: 700; } .y-cellctx-errmsg { font-size: var(--y-fs-sm); color: var(--y-ink); line-height: 1.45; margin: 2px 0 4px; } /* Source-management blocks live in the left panel only on a ⚡ source sheet. */ .y-hide-unless-source { display: none !important; } /* Generic hide utility (e.g. the AI compose box when no provider is set up). */ .y-hidden { display: none !important; } .y-cellctx-prov { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .y-cellctx-prov-row { display: flex; align-items: center; gap: 6px; font-size: var(--y-fs-sm); } .y-cellctx-prov-val { font-family: var(--y-mono); font-size: var(--y-fs-xs); margin-left: auto; } .y-cellctx-formula { display: block; font-family: var(--y-mono); font-size: var(--y-fs-xs); color: var(--y-ink-soft); background: var(--y-surface-2, rgba(0,0,0,.03)); border-radius: 4px; padding: 4px 6px; max-height: 64px; overflow: auto; white-space: pre-wrap; } .y-cellctx-deps { display: flex; flex-direction: column; gap: 4px; } .y-cellctx-dep-list { display: flex; flex-wrap: wrap; gap: 4px; } .y-cellctx-dep { font-family: var(--y-mono); font-size: var(--y-fs-xs); cursor: pointer; border: 1px solid var(--y-border); border-radius: 3px; padding: 0 5px; line-height: 1.6; background: transparent; color: var(--y-ink-soft); } .y-cellctx-dep:hover { border-color: var(--y-accent, #4c6ef5); color: var(--y-ink); } /* ====================== Cell flow inspector ============================= */ /* A vertical pipeline of labelled chips connected by a thin accent line, revealing the live source behind the active cell. */ .y-flow-section { border-top: 1px solid var(--y-border); padding-top: var(--y-s3); margin-top: var(--y-s2); } .y-flow-empty { font-size: var(--y-fs-xs); line-height: 1.4; } .y-flow { display: flex; flex-direction: column; align-items: stretch; } .y-flow-node { position: relative; background: var(--y-surface-2); border: 1px solid var(--y-border); border-radius: var(--y-r-md); padding: 6px 10px 7px; display: flex; flex-direction: column; gap: 2px; } /* A subtle accent rail down the left edge ties the nodes together. */ .y-flow-node::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--y-r-md) 0 0 var(--y-r-md); background: var(--y-accent); } .y-flow-node-label { font-size: var(--y-fs-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--y-ink-faint); } .y-flow-node-body { display: flex; align-items: center; gap: 6px; min-width: 0; } .y-flow-node-main { font-weight: 600; color: var(--y-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .y-flow-glyph { color: var(--y-accent); font-size: 11px; flex: 0 0 auto; } .y-flow-query { font-family: var(--y-mono); font-size: var(--y-fs-xs); color: var(--y-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; width: 100%; } .y-flow-value { font-weight: 700; color: var(--y-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .y-flow-ref { margin-left: auto; flex: 0 0 auto; font-size: var(--y-fs-xs); color: var(--y-ink-faint); background: var(--y-surface); border: 1px solid var(--y-border); border-radius: var(--y-r-sm); padding: 0 5px; } .y-flow-refresh-body { justify-content: space-between; gap: 8px; } .y-flow-refresh { font-size: var(--y-fs-xs); color: var(--y-ink-soft); } /* The fresh/stale pill reuses .y-pill; the "ok" variant tints it green. */ .y-pill.y-flow-ok { color: var(--y-ok); border-color: var(--y-ok); } .y-flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--y-ok); flex: 0 0 auto; /* A calm, slow breathing halo so the "live" indicator reads as flowing, not static. Low-amplitude + slow (matches .y-ds-dot); auto-suppressed by the prefers-reduced-motion rule above. */ animation: y-ds-pulse 2.4s ease-in-out infinite; } /* Stale data: no breathing — it isn't flowing — and a muted colour. */ .y-flow-dot.is-stale { background: var(--y-stale); animation: none; } /* The downward connector between nodes: a thin centred line with an arrow. */ .y-flow-connector { width: 0; height: 14px; margin: 0 auto; border-left: 2px solid var(--y-border-strong); position: relative; } .y-flow-connector::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--y-border-strong); } /* ---- Temporal sparkline node ("magic v2": the series behind the cell) ---- */ .y-spark-body { flex-direction: column; align-items: stretch; gap: 4px; } .y-spark-measure { font-weight: 600; color: var(--y-ink); font-size: var(--y-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .y-spark { width: 100%; height: 40px; display: block; overflow: visible; } .y-spark-line { fill: none; stroke: var(--y-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .y-spark-base { stroke: var(--y-border); stroke-width: 1; vector-effect: non-scaling-stroke; } .y-spark-mark { fill: var(--y-accent); stroke: var(--y-surface-2); stroke-width: 1; } .y-spark-stats { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--y-fs-xs); color: var(--y-ink-soft); } .y-spark-agg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .y-spark-count { flex: 0 0 auto; color: var(--y-ink-faint); } /* ============== Flux reveal (magic v3): the flipping floating card ======= */ /* * The overlay layer fills `.y-gridwrap` and is click-through (pointer-events: * none) so the canvas keeps receiving clicks; only the card's own controls * re-enable pointer events. Each child is absolutely positioned in gridwrap- * local px by the component. The card lies flat on the cell then tilts up to * face the viewer. */ .y-flow-reveal-layer { position: absolute; inset: 0; z-index: 35; pointer-events: none; /* never intercept grid clicks */ overflow: visible; } /* The 3D stage: perspective makes the flip read as depth. The card stands up * from the cell — origin at the bottom when above the cell, top when below. */ .y-flow-reveal { position: absolute; perspective: 1200px; pointer-events: none; /* keep the card above the connector/pin */ z-index: 2; } .y-flow-reveal-card { pointer-events: auto; /* the card itself is interactive */ background: var(--y-surface); border: 1px solid var(--y-border); border-radius: var(--y-r-lg); box-shadow: var(--y-shadow-3); padding: 10px 12px 12px; max-height: 232px; overflow: hidden; transform-origin: bottom center; /* start lying flat on the cell, invisible, then flip up */ animation: y-flow-flip 260ms cubic-bezier(.22,.68,.32,1.2) both; /* a thin accent hairline along the top sells the "screen" feel */ border-top: 2px solid var(--y-accent); } /* When the card sits below the cell it pivots from its top edge instead. */ .y-flow-reveal.is-below .y-flow-reveal-card { transform-origin: top center; animation-name: y-flow-flip-below; } @keyframes y-flow-flip { from { transform: rotateX(-78deg); opacity: 0; } to { transform: rotateX(0deg); opacity: 1; } } @keyframes y-flow-flip-below { from { transform: rotateX(78deg); opacity: 0; } to { transform: rotateX(0deg); opacity: 1; } } /* The card reuses the side-panel flow nodes verbatim; tighten spacing a touch * for the floating, compact context. */ .y-flow-reveal-card .y-flow-node { padding: 5px 9px 6px; } .y-flow-reveal-card .y-flow-connector { height: 12px; } /* Thin connector line from the cell up/down to the card. */ .y-flow-reveal-connector { position: absolute; width: 2px; transform: translateX(-1px); background: linear-gradient(to bottom, var(--y-accent), color-mix(in srgb, var(--y-accent) 25%, transparent)); pointer-events: none; z-index: 1; border-radius: 2px; } /* The pin where the flow emerges from the cell. */ .y-flow-reveal-pin { position: absolute; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--y-accent); box-shadow: 0 0 0 3px var(--y-accent-ring); pointer-events: none; z-index: 1; } /* magic v4: secondary (non-active) cards are dimmed + scaled down a touch so the * active cell's card stays the hero. They still flip up and stay upright/legible; * z-index (set inline, staggered by row) handles their cascade. */ .y-flow-reveal.is-secondary { opacity: .82; } .y-flow-reveal.is-secondary .y-flow-reveal-card { transform-origin: bottom center; scale: .92; /* slightly smaller than the active card */ border-top-color: color-mix(in srgb, var(--y-accent) 55%, transparent); box-shadow: var(--y-shadow-2); } .y-flow-reveal.is-secondary:hover { opacity: 1; } /* lift on hover to read it */ .y-flow-reveal.is-active .y-flow-reveal-card { box-shadow: var(--y-shadow-3); } /* Secondary connectors/pins are quieter so the active flow's line reads first. */ .y-flow-reveal-connector.is-secondary { opacity: .5; } .y-flow-reveal-pin.is-secondary { opacity: .6; box-shadow: 0 0 0 2px var(--y-accent-ring); } /* "Pivoter" presentation tilt (magic v4): while BOTH Flux + Pivoter are on, the * gridwrap becomes a 3D stage and the CANVAS pivots back, so the upright flow * cards (in the overlay, NOT transformed) read as floating above a tilted grid. * CRITICAL: a transform on the canvas desyncs pointer hit-testing (the canvas * reads its transformed getBoundingClientRect), so this mode is view-only — the * editor is suppressed and a "présentation" hint is shown. Toggling off removes * the class → flat & fully interactive again. We never tilt unless on. */ .y-gridwrap.y-flow-pivot-on { perspective: 1400px; perspective-origin: 50% 0%; } .y-gridwrap.y-flow-pivot-on .y-grid-canvas { transform: rotateX(8deg) scale(.96); transform-origin: 50% 12%; transition: transform .35s cubic-bezier(.22,.68,.32,1.2); /* The 3D transform desyncs mouse->cell hit-testing, so pivot mode is honestly view-only: the canvas ignores pointer input (no misleading offset selection). Exit via the toggle. */ pointer-events: none; } /* The overlay (flow cards) is explicitly NOT tilted — it floats flat & upright * above the pivoted canvas. (It already sits above via its own z-index.) */ /* Présentation hint badge, pinned bottom-centre of the grid while pivoted. */ .y-flow-pivot-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1100; /* above all flow cards */ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--y-accent-soft); color: var(--y-accent); border: 1px solid var(--y-accent); box-shadow: var(--y-shadow-2); font-size: 12px; font-weight: 600; pointer-events: none; animation: y-flow-flip 220ms ease both; } .y-flow-pivot-hint-glyph { font-size: 11px; line-height: 1; } /* The status-bar Flux toggle. */ .y-flux-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: var(--y-surface-2); color: var(--y-ink-soft); transition: color .12s, border-color .12s, background .12s; } .y-flux-toggle:hover { border-color: var(--y-border-strong); color: var(--y-ink); } .y-flux-toggle.is-on { background: var(--y-accent-soft); color: var(--y-accent); border-color: var(--y-accent); } .y-flux-glyph { font-size: 11px; line-height: 1; } /* The status-bar Pivoter sub-toggle (only enabled while Flux is on). */ .y-pivot-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: var(--y-surface-2); color: var(--y-ink-soft); transition: color .12s, border-color .12s, background .12s; } .y-pivot-toggle:hover:not(:disabled) { border-color: var(--y-border-strong); color: var(--y-ink); } .y-pivot-toggle.is-on { background: var(--y-accent-soft); color: var(--y-accent); border-color: var(--y-accent); } .y-pivot-toggle:disabled { opacity: .45; cursor: default; } .y-pivot-glyph { font-size: 11px; line-height: 1; } /* ====================== Right AI panel ================================== */ .y-aipanel { width: var(--y-ai-w); flex: 0 0 auto; background: var(--y-surface); border-left: 1px solid var(--y-border); display: flex; flex-direction: column; min-height: 0; } .y-aipanel.is-collapsed { width: 36px; } .y-ai-head { display: flex; align-items: center; gap: 8px; padding: var(--y-s2) var(--y-s3); border-bottom: 1px solid var(--y-border); background: linear-gradient(180deg, var(--y-aihead-from), var(--y-aihead-to)); } .y-ai-head .y-ai-spark { color: var(--y-accent); font-size: var(--y-fs-lg); align-self: flex-start; margin-top: 1px; } .y-ai-head .y-ai-sub { font-size: var(--y-fs-xs); color: var(--y-ink-soft); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } /* Subtle running-engine label (provider · model) under the subtitle. */ .y-ai-head .y-ai-engine { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--y-fs-xs); color: var(--y-ink-faint); font-family: var(--y-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .y-ai-head .y-ai-engine-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--y-ok, #3ba776); box-shadow: 0 0 0 2px var(--y-accent-soft); } .y-ai-body { flex: 1; overflow: auto; padding: var(--y-s3); display: flex; flex-direction: column; gap: var(--y-s3); } .y-ai-card { border: 1px solid var(--y-border); border-radius: var(--y-r-md); padding: var(--y-s3); background: var(--y-surface-2); } .y-ai-sql { font-family: var(--y-mono); font-size: var(--y-fs-sm); white-space: pre-wrap; background: var(--y-code-bg); color: var(--y-code-ink); padding: 10px; border-radius: var(--y-r-sm); } .y-ai-provider { font-size: var(--y-fs-xs); color: var(--y-ink-faint); margin-top: 6px; } .y-collapse-tab { writing-mode: vertical-rl; text-orientation: mixed; cursor: pointer; padding: 10px 6px; color: var(--y-ink-soft); border-radius: var(--y-r-sm); transition: color .12s ease, background .12s ease; } .y-collapse-tab:hover { color: var(--y-accent); background: var(--y-accent-soft); } /* ---- agentic assistant (chat thread + compose) ---- */ .y-agent { min-height: 0; } /* scrollable message thread */ .y-ai-thread { flex: 1; min-height: 0; overflow-y: auto; padding: var(--y-s3); display: flex; flex-direction: column; gap: 10px; } .y-ai-empty { color: var(--y-ink-soft); font-size: var(--y-fs-sm); line-height: 1.55; padding: var(--y-s4) var(--y-s3); border: 1px dashed var(--y-border); border-radius: var(--y-r-md); background: var(--y-surface-2); text-align: center; } /* A friendly spark glyph leads the AI empty state. */ .y-ai-empty::before { content: "✦"; display: block; font-size: var(--y-fs-xl); color: var(--y-accent); margin-bottom: 6px; } .y-ai-msg { display: flex; } .y-ai-msg.y-ai-user { justify-content: flex-end; } .y-ai-msg.y-ai-asst { justify-content: flex-start; } .y-ai-bubble { max-width: 90%; padding: 8px 11px; border-radius: var(--y-r-md); font-size: var(--y-fs-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .y-ai-user .y-ai-bubble { background: var(--y-accent); color: var(--y-accent-ink); border-bottom-right-radius: 3px; } .y-ai-asst .y-ai-bubble { background: var(--y-surface-2); color: var(--y-ink); border: 1px solid var(--y-border); border-bottom-left-radius: 3px; } /* compact tool-action chip */ .y-ai-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--y-surface-2); border: 1px solid var(--y-border); color: var(--y-ink-soft); font-size: var(--y-fs-xs); } .y-ai-chip-icon { color: var(--y-accent); } .y-ai-chip-ref { font-family: var(--y-mono); color: var(--y-ink-faint); } /* Clickable cell citation inside an assistant reply: a subtle monospace accent link that jumps the grid to the cited cell/range. */ .y-cell-cite { font-family: var(--y-mono); color: var(--y-accent); cursor: pointer; border-radius: 4px; padding: 0 2px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; text-decoration-thickness: 1px; } .y-cell-cite:hover { background: var(--y-accent-soft); text-decoration-style: solid; } .y-cell-cite:focus-visible { outline: 2px solid var(--y-accent-ring); outline-offset: 1px; } .y-ai-notice { font-size: var(--y-fs-sm); line-height: 1.5; color: var(--y-ink); background: var(--y-accent-soft); border: 1px solid var(--y-accent); border-radius: var(--y-r-md); padding: 9px 11px; } /* thinking indicator */ .y-ai-thinking { display: flex; align-items: center; gap: 8px; color: var(--y-ink-soft); font-size: var(--y-fs-sm); } .y-ai-dots { display: inline-flex; gap: 3px; } .y-ai-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--y-accent); opacity: .35; animation: y-ai-blink 1.2s infinite; } .y-ai-dots i:nth-child(2) { animation-delay: .2s; } .y-ai-dots i:nth-child(3) { animation-delay: .4s; } @keyframes y-ai-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } } /* bottom compose box */ .y-ai-compose { flex: 0 0 auto; border-top: 1px solid var(--y-border); padding: var(--y-s3); display: flex; flex-direction: column; gap: var(--y-s2); background: var(--y-surface); } .y-ai-input { resize: vertical; min-height: 44px; max-height: 160px; } /* Compact per-conversation token counter, just above the compose box. */ .y-ai-tokens { flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px; padding: 2px var(--y-s3); font-size: var(--y-fs-xs); color: var(--y-ink-faint); } .y-ai-tokens .y-ai-tokens-n { font-weight: 600; color: var(--y-ink-soft); font-variant-numeric: tabular-nums; } .y-ai-tokens .y-ai-tokens-split { margin-left: auto; font-family: var(--y-mono); opacity: .8; } .y-ai-compose-row { display: flex; align-items: center; gap: var(--y-s2); } .y-ai-attach { flex: 0 0 auto; } .y-ai-send { flex: 1 1 auto; } /* attached-document chips, shown just above the compose box */ .y-ai-attachments { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: var(--y-s2) var(--y-s3) 0; background: var(--y-surface); } .y-ai-attach-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 9px; border-radius: 999px; background: var(--y-surface-2); border: 1px solid var(--y-border); color: var(--y-ink-soft); font-size: var(--y-fs-xs); max-width: 100%; } .y-ai-attach-icon { color: var(--y-accent); } .y-ai-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; } .y-ai-attach-x { border: none; background: transparent; cursor: pointer; color: var(--y-ink-faint); font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 4px; } .y-ai-attach-x:hover { color: var(--y-ink); background: var(--y-border); } /* ====================== Autocomplete popover ============================ */ .y-autocomplete { position: absolute; z-index: 40; min-width: 280px; max-height: 260px; overflow: auto; background: var(--y-surface); border: 1px solid var(--y-border-strong); border-radius: var(--y-r-md); box-shadow: var(--y-shadow-3); padding: 4px; /* Always drop BELOW the anchor (the formula bar, or the in-cell editor's zero-height wrapper) instead of overlapping it at the static position. */ top: 100%; left: 0; } .y-ac-item { display: flex; flex-direction: column; padding: 6px 9px; border-radius: var(--y-r-sm); cursor: pointer; transition: background .08s ease; } .y-ac-item:hover { background: var(--y-surface-2); } .y-ac-item.is-active { background: var(--y-accent-soft); } .y-ac-item.is-active .y-ac-summary { color: var(--y-ink-soft); } .y-ac-item .y-ac-name { font-family: var(--y-mono); font-weight: 600; color: var(--y-accent); } .y-ac-item .y-ac-sig { font-family: var(--y-mono); font-size: var(--y-fs-xs); color: var(--y-ink-soft); } .y-ac-item .y-ac-name-tag { margin-left: auto; font-family: inherit; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--y-accent); background: var(--y-accent-soft); padding: 0 5px; border-radius: var(--y-r-sm); align-self: center; } .y-ac-item .y-ac-summary { font-size: var(--y-fs-xs); color: var(--y-ink-faint); margin-top: 2px; } .y-ac-cat { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--y-ink-faint); padding: 4px 9px 2px; } /* ====================== Context menu =================================== */ .y-ctx-scrim { position: fixed; inset: 0; z-index: 90; } .y-ctx-menu { position: fixed; min-width: 220px; padding: 5px; background: var(--y-surface); border: 1px solid var(--y-border-strong); border-radius: var(--y-r-md); box-shadow: var(--y-shadow-3); font-size: var(--y-fs-md); color: var(--y-ink); } .y-ctx-item { appearance: none; width: 100%; display: flex; align-items: center; gap: var(--y-s4); border: 0; background: transparent; cursor: pointer; text-align: left; padding: 6px 10px; border-radius: var(--y-r-sm); font: inherit; color: inherit; } .y-ctx-item:hover:not(:disabled) { background: var(--y-accent-soft); } .y-ctx-item:disabled { color: var(--y-ink-faint); cursor: default; } .y-ctx-item .y-ctx-label { flex: 1; } .y-ctx-item .y-ctx-accel { color: var(--y-ink-faint); font-size: var(--y-fs-xs); font-family: var(--y-mono); } .y-ctx-sep { height: 1px; background: var(--y-border); margin: 4px 2px; } .y-ctx-heading { padding: 4px 10px 6px; font-size: var(--y-fs-xs); font-weight: 600; color: var(--y-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } /* ====================== Table AutoFilter popover ======================= */ .y-filter-popover { position: fixed; min-width: 220px; max-width: 280px; padding: 5px; background: var(--y-surface); border: 1px solid var(--y-border-strong); border-radius: var(--y-r-md); box-shadow: var(--y-shadow-3); font-size: var(--y-fs-md); color: var(--y-ink); z-index: 91; } .y-filter-list { max-height: 220px; overflow: auto; margin: 4px 0; } .y-filter-row { display: flex; align-items: center; gap: var(--y-s4); padding: 4px 8px; border-radius: var(--y-r-sm); cursor: pointer; } .y-filter-row:hover { background: var(--y-accent-soft); } .y-filter-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .y-filter-foot { display: flex; gap: var(--y-s4); justify-content: flex-end; margin-top: 4px; } /* ====================== Sheet tabs (bottom) ============================= */ .y-sheet-tabs { flex: 0 0 auto; display: flex; align-items: stretch; gap: var(--y-s2); height: 30px; padding: 0 var(--y-s3); background: var(--y-surface-3); border-top: 1px solid var(--y-border); overflow-x: auto; overflow-y: hidden; } .y-sheet-tablist { display: flex; align-items: stretch; gap: 2px; } .y-sheet-tab { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; max-width: 220px; cursor: pointer; user-select: none; font-size: var(--y-fs-sm); color: var(--y-ink-soft); background: var(--y-surface-2); border: 1px solid var(--y-border); border-bottom: none; border-radius: var(--y-r-sm) var(--y-r-sm) 0 0; margin-top: 4px; white-space: nowrap; } .y-sheet-tab:hover { background: var(--y-surface); } .y-sheet-tab.active { background: var(--y-surface); color: var(--y-ink); font-weight: 600; border-top: 2px solid var(--y-accent); margin-top: 3px; } .y-sheet-name { overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* Source sheets (materialised data sources) read distinctly from ordinary sheets: an accent-tinted tab + a ⚡ bolt glyph, so live-data sheets stand apart from the user's own sheets. Pushed to the right of the tab list. */ .y-sheet-tab.source { color: var(--y-accent); background: var(--y-accent-soft); border-color: var(--y-accent-ring); order: 1; } .y-sheet-tab.source.active { background: var(--y-accent-soft); color: var(--y-accent); border-top: 2px solid var(--y-accent); font-weight: 600; } .y-sheet-bolt { font-size: 12px; line-height: 1; color: var(--y-accent); } /* Source-sheet wizard (Données panel): a lightly-accented block so the "create a source sheet" affordance reads as the live-data action. */ .y-source-builder { border: 1px solid var(--y-accent-ring); border-radius: var(--y-r-sm); padding: 8px; background: var(--y-accent-soft); } .y-source-builder .y-section-title { color: var(--y-accent); } /* --- Source-sheet metamodel explorer (data_panel.rs SourceExplorer) --- */ .y-source-explorer { border: 1px solid var(--y-accent-ring); border-radius: var(--y-r-sm); padding: 8px; background: var(--y-accent-soft); } .y-source-explorer .y-section-title { color: var(--y-accent); } .y-source-rawsample { margin: 4px 0 6px; } .y-source-json { margin: 4px 0 0; padding: 6px 8px; max-height: 180px; overflow: auto; font-family: var(--y-mono, ui-monospace, monospace); font-size: var(--y-fs-xs); background: var(--y-surface); color: var(--y-ink-soft); border: 1px solid var(--y-border); border-radius: var(--y-r-sm); white-space: pre; } /* The "+" / "✓" add markers on a discovered-path row. */ .y-field-add-mark { margin-left: auto; color: var(--y-accent); font-weight: 700; } .y-field-added-mark { margin-left: auto; color: var(--y-ink-faint); } .y-field-row-item.is-added { opacity: 0.6; cursor: default; } .y-field-row-item.is-added:hover { background: transparent; } .y-field-row-item.is-leaf:focus-visible { outline: 2px solid var(--y-accent); outline-offset: -2px; border-radius: var(--y-r-sm); } /* Per-path config rows. The left data panel is narrow (~270px) and a path packs a lot (label · reference chip · depth · subsampling · window · chart · stats), so the row is a deliberate TWO-LINE layout that never overflows: line 1: [☑ label .......................... Binance_prix] line 2: [depth · subsampling · window ............ 📈 📊] Line 2 right-aligns its controls; everything wraps gracefully if narrower. */ .y-source-path-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 4px; padding: 4px 2px; border-top: 1px solid var(--y-border); } .y-source-path-toggle { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; cursor: pointer; } .y-source-path-toggle .y-field-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Reference chip ends line 1 (pushed to the right of the label). */ .y-source-path-row > .y-source-ref-chip { margin-left: auto; } /* Controls take their own line (right-aligned). Keep them on ONE line and let the subsampling select shrink rather than letting the 📈/📊 actions wrap off. */ .y-source-path-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; justify-content: flex-end; } .y-source-path-controls .y-source-sub-select { flex: 0 1 auto; min-width: 56px; } .y-source-path-controls .y-source-chart-btn { flex: 0 0 auto; } .y-source-path-depth { display: inline-flex; align-items: center; gap: 3px; font-size: var(--y-fs-xs); } .y-source-depth-input { width: 42px; padding: 1px 4px; text-align: right; } .y-source-sub-select { padding: 1px 4px; font-size: var(--y-fs-xs); max-width: 110px; } /* Click-to-copy formula reference name for a captured path (e.g. Binance_prix). */ .y-source-ref-chip { font-size: var(--y-fs-xs); padding: 0 5px; line-height: 16px; cursor: pointer; color: var(--y-accent); background: var(--y-accent-soft); border: 1px solid var(--y-accent-ring); border-radius: var(--y-r-sm); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--y-mono, ui-monospace, monospace); } .y-source-ref-chip:hover { background: var(--y-accent); color: var(--y-surface); } .y-source-ref-chip:focus-visible { outline: 2px solid var(--y-accent); outline-offset: 1px; } .y-source-chart-btn { font-size: 13px; padding: 0 3px; line-height: 18px; } /* Name manager table. */ .y-names-table { width: 100%; border-collapse: collapse; font-size: var(--y-fs-sm); } .y-names-table th { text-align: left; font-weight: 600; color: var(--y-ink-faint); font-size: var(--y-fs-xs); text-transform: uppercase; letter-spacing: .4px; padding: 2px 6px; border-bottom: 1px solid var(--y-border); } .y-names-table td { padding: 3px 6px; border-bottom: 1px solid var(--y-border-soft, var(--y-border)); vertical-align: middle; } .y-names-name code { font-family: var(--y-mono); color: var(--y-accent); font-weight: 600; } .y-names-target code { font-family: var(--y-mono); font-size: var(--y-fs-xs); } .y-names-actions { white-space: nowrap; text-align: right; } .y-names-actions .y-btn { padding: 0 5px; } .y-names-rename { width: 130px; padding: 1px 4px; font-family: var(--y-mono); } .y-names-auto-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--y-ink-faint); background: var(--y-surface-3); border: 1px solid var(--y-border); border-radius: var(--y-r-sm); padding: 0 5px; } .y-names-create { display: inline-flex; gap: 4px; align-items: center; margin-right: auto; } .y-names-create .y-input { width: 160px; } /* Inline spinner for async loading states. */ .y-spinner { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--y-accent-ring); border-top-color: var(--y-accent); border-radius: 50%; animation: y-spin 0.7s linear infinite; } @keyframes y-spin { to { transform: rotate(360deg); } } .y-sheet-rename { font: inherit; width: 110px; padding: 1px 3px; color: var(--y-ink); background: var(--y-surface); border: 1px solid var(--y-accent); border-radius: var(--y-r-sm); outline: none; } .y-sheet-actions { display: inline-flex; align-items: center; gap: 1px; } .y-sheet-mv, .y-sheet-del, .y-sheet-add { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--y-ink-faint); border-radius: var(--y-r-sm); font-size: 12px; line-height: 1; } .y-sheet-mv:hover, .y-sheet-del:hover, .y-sheet-add:hover { background: var(--y-accent-soft); color: var(--y-accent); } .y-sheet-add { align-self: center; width: 22px; height: 22px; font-size: 16px; color: var(--y-ink-soft); border: 1px solid transparent; } .y-sheet-add:hover { border-color: var(--y-border); } /* ====================== Status bar ====================================== */ .y-status { flex: 0 0 auto; height: var(--y-status-h); display: flex; align-items: center; gap: var(--y-s4); padding: 0 var(--y-s4); background: var(--y-surface-3); border-top: 1px solid var(--y-border); font-size: var(--y-fs-xs); color: var(--y-ink-soft); } .y-status .y-spacer { flex: 1; } .y-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: var(--y-surface); border: 1px solid var(--y-border); white-space: nowrap; } /* An empty status pill (no transient message) shouldn't show a bare chip. */ .y-status .y-pill:empty { display: none; } .y-pill.y-stale { color: var(--y-stale); border-color: var(--y-stale-line); background: var(--y-stale-bg); } /* Interactive status-bar pills (Flux toggle) get a clear hit affordance. */ .y-status button.y-pill { font: inherit; font-size: var(--y-fs-xs); } /* Assertions / invariants badge in the status bar. Always visible when ≥1 rule is pinned; colour encodes the worst current state, click opens the panel. */ .y-assert-badge { cursor: pointer; gap: 4px; font-weight: 600; } .y-assert-badge-ok { color: var(--y-ok); border-color: var(--y-ok); } .y-assert-badge-warn { color: var(--y-warn); border-color: var(--y-warn); } .y-assert-badge-grey { color: var(--y-muted, #888); border-color: var(--y-border); } .y-assert-badge-fail { color: #fff; background: var(--y-error); border-color: var(--y-error); /* a subtle pulse so a broken invariant flashes for attention */ animation: y-assert-pulse 1.4s ease-in-out infinite; } @keyframes y-assert-pulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } } /* Per-row status glyph colours inside the assertions panel. */ .y-assert-pass { color: var(--y-ok); } .y-assert-fail { color: var(--y-error); } .y-assert-err { color: var(--y-muted, #888); } /* Click-to-jump cell chips in an assertion row. */ .y-chip { border: 1px solid var(--y-border); background: var(--y-surface); border-radius: 999px; cursor: pointer; color: var(--y-ink, inherit); } .y-chip:hover { border-color: var(--y-accent, #1668e3); color: var(--y-accent, #1668e3); } /* ====================== Modal (Y editor / DS add) ======================= */ .y-modal-scrim { position: fixed; inset: 0; background: var(--y-scrim); display: grid; place-items: center; z-index: 100; animation: y-scrim-in .14s ease both; /* soften the backdrop so the dialog floats above a blurred page */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } @keyframes y-scrim-in { from { opacity: 0; } to { opacity: 1; } } .y-modal { width: min(560px, 92vw); background: var(--y-surface); border-radius: var(--y-r-xl); box-shadow: var(--y-shadow-3); border: 1px solid var(--y-border-soft, var(--y-border)); overflow: hidden; /* a subtle rise-in so the dialog feels presented, not popped */ animation: y-modal-in .18s cubic-bezier(.22,.68,.32,1.1) both; } @keyframes y-modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } .y-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--y-s3) var(--y-s4); border-bottom: 1px solid var(--y-border); background: linear-gradient(180deg, var(--y-aihead-from), var(--y-aihead-to)); } .y-modal-title { font-size: var(--y-fs-lg); font-weight: 600; } .y-modal-body { padding: var(--y-s4); display: flex; flex-direction: column; gap: var(--y-s3); max-height: 70vh; overflow: auto; } .y-modal-foot { display: flex; justify-content: flex-end; gap: var(--y-s2); padding: var(--y-s3) var(--y-s4); border-top: 1px solid var(--y-border); background: var(--y-surface-2); } /* In-app HTML-doc overlay (privacy policy etc.): a large near-fullscreen modal whose body is an