/* ============================================================================ app.css — EDITOR CHROME ONLY Interactive HTML Document Builder This stylesheet styles the APPLICATION UI around the document: - the top app bar / toolbar - the mode toggle segmented control - the document workspace background (muted canvas behind the .document sheet) - per-block editing chrome (.block-shell + .block-toolbar) - the settings modal/dialog + backdrop - the add-block / import dropdown menus - file inputs It MUST NOT restyle the document's own internals (.document, .doc-meta, .statement, .pill, table, .chart, components, …) — those live in document.css. Editor chrome is fully hidden for printing (body.printing and @media print) so PDF export is clean even though this sheet is editor-only. ============================================================================ */ /* --------------------------------------------------------------------------- Editor-chrome design tokens. Kept INDEPENDENT of document.css so load order never matters. We loosely coordinate with the document accent via a fallback chain: if document.css is present its --accent wins; otherwise we fall back to our own value. --------------------------------------------------------------------------- */ :root { /* App-chrome palette */ --app-accent: var(--accent, #2f6df6); --app-accent-deep: var(--accent-deep, #1f4fc4); --app-accent-soft: var(--accent-soft, #e7efff); --app-bg: #eef0f4; /* muted workspace canvas behind the sheet */ --app-surface: #ffffff; /* bars, menus, dialogs */ --app-surface-2: #f6f7f9; /* subtle raised/hover fills */ --app-surface-3: #eceef2; /* pressed / active fills */ --app-ink: #1d2129; /* primary chrome text */ --app-ink-soft: #5a6473; /* secondary chrome text */ --app-ink-faint: #8a94a6; /* tertiary / icon text */ --app-line: #dfe3ea; /* hairline borders */ --app-line-strong: #c7cdd8; /* stronger borders */ --app-danger: #d6453d; /* destructive actions */ --app-danger-soft: #fbe8e7; --app-focus: #2f6df6; /* focus ring color */ --app-focus-ring: 0 0 0 3px rgba(47, 109, 246, 0.35); /* Elevation */ --app-shadow-1: 0 1px 2px rgba(20, 28, 45, 0.06), 0 1px 1px rgba(20, 28, 45, 0.04); --app-shadow-2: 0 6px 18px rgba(20, 28, 45, 0.12), 0 2px 6px rgba(20, 28, 45, 0.08); --app-shadow-3: 0 18px 48px rgba(20, 28, 45, 0.24), 0 6px 16px rgba(20, 28, 45, 0.16); /* Geometry */ --app-radius: 8px; --app-radius-sm: 6px; --app-radius-lg: 12px; /* Layout metrics */ --app-bar-h: 56px; /* Motion */ --app-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --app-fast: 120ms; --app-med: 180ms; /* Editor chrome fonts (independent of document fonts) */ --app-sans: var(--sans, "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --app-mono: var(--mono, "JetBrains Mono", "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); } /* --------------------------------------------------------------------------- App shell / global page frame (chrome only — NOT the document sheet) --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } /* Use min-height (not height) so grows with its content. A hard height:100% would pin to one viewport, and a position:sticky child (.app-bar) can only stay stuck within its parent's box — so the toolbar would scroll out of view once you scrolled past the first screenful. */ body { min-height: 100%; } body { margin: 0; font-family: var(--app-sans); color: var(--app-ink); background: var(--app-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Workspace canvas — the area that scrolls behind/around the document sheet. */ main { display: block; min-height: calc(100vh - var(--app-bar-h)); background: var(--app-bg); /* subtle dotted texture to read as a "canvas" without distracting */ background-image: radial-gradient(rgba(20, 28, 45, 0.05) 1px, transparent 1px); background-size: 22px 22px; padding: 32px 24px 96px; } /* The wrapper that centers the document sheet. The .document sheet itself is styled in document.css; here we only give it a comfortable max width and an editor-context drop shadow / sheet feel. */ #doc-root { max-width: 920px; margin: 0 auto; } /* Give the document a "sheet on a desk" elevation while editing. This targets the .document element only for its OUTER framing (shadow / rounding); its internals remain owned by document.css. */ #doc-root > .document { box-shadow: var(--app-shadow-2); border-radius: var(--app-radius-lg); } /* --------------------------------------------------------------------------- App bar (top toolbar) — sticky --------------------------------------------------------------------------- */ .app-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 14px; height: var(--app-bar-h); padding: 0 16px; background: var(--app-surface); border-bottom: 1px solid var(--app-line); box-shadow: var(--app-shadow-1); } .app-bar .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; color: var(--app-ink); white-space: nowrap; user-select: none; } .app-bar .brand .brand-mark, .app-bar .brand svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--app-accent); } /* Slot that main.js injects the mode toggle into */ .app-bar .mode-toggle-slot { display: inline-flex; align-items: center; } /* Toolbar groups push to the right; a flexible spacer separates brand/toggle from the action cluster. */ .app-bar .spacer { flex: 1 1 auto; } .app-bar .toolbar, .app-bar .toolbar-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .app-bar .toolbar-sep { width: 1px; align-self: stretch; margin: 10px 4px; background: var(--app-line); } /* --------------------------------------------------------------------------- Buttons (editor chrome) .btn is the base; modifiers tune intent/emphasis. These are application controls, NOT document .action buttons. --------------------------------------------------------------------------- */ .btn, .app-bar button, .menu-trigger { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--app-ink); background: var(--app-surface); border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-sm); cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--app-fast) var(--app-ease), border-color var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease), box-shadow var(--app-fast) var(--app-ease); } .btn:hover, .app-bar button:hover, .menu-trigger:hover { background: var(--app-surface-2); border-color: var(--app-line-strong); } .btn:active, .app-bar button:active, .menu-trigger:active { background: var(--app-surface-3); } .btn:disabled, .app-bar button:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } /* Primary / accent button */ .btn-primary { color: #fff; background: var(--app-accent); border-color: var(--app-accent); } .btn-primary:hover { background: var(--app-accent-deep); border-color: var(--app-accent-deep); } .btn-primary:active { background: var(--app-accent-deep); } /* Ghost / borderless icon-ish button */ .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--app-surface-2); border-color: transparent; } /* Destructive button */ .btn-danger { color: var(--app-danger); background: var(--app-surface); border-color: var(--app-line-strong); } .btn-danger:hover { color: #fff; background: var(--app-danger); border-color: var(--app-danger); } /* Small / icon-only button */ .btn-icon { width: 34px; padding: 0; } .btn-sm { height: 28px; padding: 0 9px; font-size: 12px; } /* --------------------------------------------------------------------------- Inline text-formatting group (Bold / Italic / Underline / color / highlight) --------------------------------------------------------------------------- */ .fmt-group { display: inline-flex; align-items: center; gap: 3px; } .fmt-group .btn-icon { width: 30px; } .fmt-group .fmt-b { font-weight: 800; } .fmt-group .fmt-i { font-style: italic; font-family: Georgia, "Times New Roman", serif; } .fmt-group .fmt-u { text-decoration: underline; } .fmt-group .fmt-eyedropper { display: inline-flex; align-items: center; justify-content: center; } .fmt-group .fmt-eyedropper svg { display: block; } /* A class selector's `display` would otherwise override the UA `[hidden]` rule, leaving a visible-but-dead control. Keep hidden meaning hidden. */ .fmt-group [hidden] { display: none !important; } /* Color/highlight: a compact swatch label wrapping a native color input. The glyph sits above a thin underline tinted to the picked color. */ .fmt-color { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; border-radius: var(--app-radius); cursor: pointer; } .fmt-color:hover { background: var(--app-surface-2); } .fmt-color .fmt-color-glyph { font-size: 14px; font-weight: 700; line-height: 1; pointer-events: none; color: var(--app-ink); } .fmt-color.fmt-hl .fmt-color-glyph { color: var(--app-ink-soft); } /* The native color input fills the swatch but is visually hidden; its own value is reflected by the bottom border so the user sees the current color. */ .fmt-color input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .fmt-color::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 3px; border-radius: 2px; background: currentColor; pointer-events: none; } .fmt-color:focus-within { outline: none; box-shadow: var(--app-focus-ring); } /* Caret affordance on dropdown triggers */ .menu-trigger .caret, .btn .caret { font-size: 10px; line-height: 1; opacity: 0.7; } /* Unified focus treatment for all chrome controls */ .btn:focus-visible, .app-bar button:focus-visible, .menu-trigger:focus-visible, .block-toolbar button:focus-visible, .mode-toggle button:focus-visible, .menu [role="menuitem"]:focus-visible, .menu button:focus-visible, .dialog button:focus-visible, .dialog [tabindex]:focus-visible { outline: 2px solid transparent; box-shadow: var(--app-focus-ring); } /* Remove default outline only where we provide a ring; keep it everywhere else */ .btn:focus, .app-bar button:focus, .menu-trigger:focus { outline: none; } /* --------------------------------------------------------------------------- Mode toggle — segmented control (Edit / Run) modes.js builds two real The .menu is shown when not [hidden] / when .is-open is present. --------------------------------------------------------------------------- */ .menu-wrap { position: relative; display: inline-flex; } .menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; min-width: 200px; max-height: min(60vh, 420px); overflow: auto; padding: 6px; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: var(--app-radius); box-shadow: var(--app-shadow-2); } /* Right-aligned menus (e.g. export/open near the right edge) */ .menu.menu-right { left: auto; right: 0; } /* Hidden state — support both [hidden] and an .is-open convention */ .menu[hidden] { display: none; } .menu-wrap:not(.is-open) > .menu:not([open]):not(.is-open) { /* no-op guard; visibility is primarily driven by [hidden] from main.js */ } .menu .menu-section-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-ink-faint); } .menu [role="menuitem"], .menu button.menu-item, .menu .menu-item { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; font-family: inherit; font-size: 13px; font-weight: 500; text-align: left; color: var(--app-ink); background: transparent; border: 0; border-radius: var(--app-radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease); } .menu [role="menuitem"]:hover, .menu .menu-item:hover, .menu [role="menuitem"][data-active="true"] { background: var(--app-accent-soft); color: var(--app-accent-deep); } .menu [role="menuitem"]:focus-visible, .menu .menu-item:focus-visible { outline: none; box-shadow: var(--app-focus-ring); } .menu .menu-item .item-icon { flex: 0 0 auto; width: 18px; text-align: center; color: var(--app-ink-faint); } .menu .menu-item .item-desc { margin-left: auto; padding-left: 16px; font-size: 11px; color: var(--app-ink-faint); } .menu .menu-divider { height: 1px; margin: 6px 4px; background: var(--app-line); } /* Named-doc rows in the Open menu often pair a label + a delete button */ .menu .doc-row { display: flex; align-items: center; gap: 6px; } .menu .doc-row .doc-open { flex: 1 1 auto; } .menu .doc-row .doc-delete { flex: 0 0 auto; width: 26px; height: 26px; color: var(--app-ink-faint); } .menu .doc-row .doc-delete:hover { color: #fff; background: var(--app-danger); } .menu .doc-meta-line { font-size: 11px; color: var(--app-ink-faint); } .menu .menu-empty { padding: 12px 10px; font-size: 12.5px; color: var(--app-ink-faint); text-align: center; } /* --------------------------------------------------------------------------- File inputs — hidden native input + styled label/button pattern. import.js / main.js trigger the hidden input; we style any visible variant. --------------------------------------------------------------------------- */ .file-input { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* If a visible file input is shown inside a dialog, give it a tidy look */ .dialog input[type="file"] { font-family: inherit; font-size: 13px; color: var(--app-ink-soft); } .dialog input[type="file"]::file-selector-button { margin-right: 10px; height: 30px; padding: 0 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--app-ink); background: var(--app-surface-2); border: 1px solid var(--app-line-strong); border-radius: var(--app-radius-sm); cursor: pointer; } .dialog input[type="file"]::file-selector-button:hover { background: var(--app-surface-3); } /* --------------------------------------------------------------------------- Settings dialog / modal + backdrop Used for component editorPanel (and any other editor settings). Structure (built by edit.js):

Works whether implemented as a div overlay OR a native