/* ========================================================================== Lattice — the application shell around the embeddable component. Only the chrome lives here; everything inside .lat-root is styled by lattice.css and themed from its custom properties. ========================================================================== */ :root { --app-bg: #f7f8fa; --app-surface: #ffffff; --app-border: #d8dce3; --app-text: #14181f; --app-muted: #626b7a; --app-accent: #1a6dd8; --app-accent-soft: #e8f0fd; --app-ok: #1f8a4c; --app-warn: #a86200; --app-error: #c81e1e; color-scheme: light; } /* The shell mirrors the component's own theme switch: app.js copies .lat-root's data-theme onto , so an explicit choice wins over the OS in both directions and the chrome never disagrees with the grid. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-bg: #16181d; --app-surface: #1d2027; --app-border: #333944; --app-text: #e8ebf0; --app-muted: #98a2b3; --app-accent: #4a90ea; --app-accent-soft: #1e3252; --app-ok: #5ec98a; --app-warn: #e0a94a; --app-error: #f26b6b; color-scheme: dark; } } :root[data-theme="dark"] { --app-bg: #16181d; --app-surface: #1d2027; --app-border: #333944; --app-text: #e8ebf0; --app-muted: #98a2b3; --app-accent: #4a90ea; --app-accent-soft: #1e3252; --app-ok: #5ec98a; --app-warn: #e0a94a; --app-error: #f26b6b; color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--app-bg); color: var(--app-text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } .app-shell { display: flex; flex-direction: column; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ------------------------------------------------------------------- bar */ .app-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-bottom: 1px solid var(--app-border); background: var(--app-surface); } .app-brand { display: flex; align-items: center; gap: 7px; color: var(--app-accent); font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; } .app-brand span { color: var(--app-text); } .app-title { max-width: min(42vw, 460px); overflow: hidden; padding: 5px 9px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .app-title:hover { border-color: var(--app-border); background: var(--app-bg); } .app-title.is-untitled { color: var(--app-muted); font-weight: 500; } .app-state { min-width: 0; overflow: hidden; color: var(--app-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .app-state[data-tone="ok"] { color: var(--app-ok); } .app-state[data-tone="warn"] { color: var(--app-warn); } .app-state[data-tone="error"] { color: var(--app-error); } .app-state[data-tone="busy"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: app-spin 0.7s linear infinite; } @keyframes app-spin { to { transform: rotate(360deg); } } .app-bar-spacer { flex: 1; } .app-btn, .app-account { flex: none; padding: 6px 12px; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-surface); color: var(--app-text); font: inherit; font-size: 12.5px; cursor: pointer; } .app-btn:hover:not(:disabled), .app-account:hover { background: var(--app-accent-soft); border-color: var(--app-accent); } .app-btn:disabled { opacity: 0.55; cursor: default; } .app-btn-primary { border-color: var(--app-accent); background: var(--app-accent); color: #fff; } .app-btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--app-accent); } .app-account { display: flex; align-items: center; gap: 6px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-account.is-in::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--app-ok); } /* ------------------------------------------------------------------ grid */ .app-grid { flex: 1; min-height: 0; } .app-grid .lat-root { height: 100%; border: 0; border-radius: 0; } /* Narrow screens: the document name and state move onto their own line. */ @media (max-width: 700px) { .app-bar { flex-wrap: wrap; height: auto; padding: 7px 10px; row-gap: 4px; } .app-brand span { display: none; } .app-title { order: 3; max-width: 100%; flex: 1; } .app-state { order: 4; width: 100%; } .app-bar-spacer { display: none; } }