/* Branding mirrors Levirge Command (assets/css/ui/_ui-theme.css) — "Claude Desktop dark" warm clay chrome so Brain reads as one product with Command. BASE LAYER ONLY: reset, page grid, header/footer shell, nav, and shared primitives. Everything component-specific lives in assets/components//_.css, inlined by the @imports at the end of this file (CssBuilder resolves relative @imports at build time). Design tokens are NOT defined here — they come from _tokens.css, a copy of the canonical design/tokens.css. Do not add a :root block to this file; add the token to design/tokens.css and re-copy. See design/STYLE-GUIDE.md. */ /* ─── Levirge canonical design tokens ───────────────────────────────────────── Single source of truth for all 5 UIs: app, admin, command, brain, agent-search. See design/STYLE-GUIDE.md for the name map, collisions, and adoption steps. Derived from app/assets/css/_ui-theme.css (the richest set — only one with a light mode, type scale, and dual shadows), with neutrals warmed to hue 48–60 to match brain / command / agent-search. Values equal brain's hexes where the two families already agreed. Dark is default. Light via [data-theme="light"] on . ponytail: no build step — repos copy this file and @import it. */ :root { /* ─── Neutrals — 3 required tiers + sidebar/hover/inset ───────────── */ --bg-base: hsl(60 2% 12%); /* page canvas */ --bg-sidebar: hsl(60 3% 10%); /* nav rail — below the canvas */ --bg-surface: hsl(0 0% 15%); /* cards, panels */ --bg-raised: hsl(60 3% 17%); /* selected rows, dropdowns */ --bg-hover: hsl(60 3% 21%); /* one shade above resting */ --bg-inset: hsl(60 3% 6%); /* tables, inputs, code blocks */ /* ─── Borders — alpha overlays, so they work on any tier ──────────── */ --line-1: hsl(0 0% 100% / 0.06); /* hairline, same-tier division */ --line-2: hsl(0 0% 100% / 0.10); /* default border */ --line-3: hsl(0 0% 100% / 0.18); /* emphasis / focus ring base */ --top-highlight: hsl(0 0% 100% / 0.06); /* top edge of raised surfaces */ /* ─── Foreground — 4 steps ────────────────────────────────────────── */ --fg-0: hsl(48 12% 92%); /* headings */ --fg-1: hsl(43 7% 70%); /* body */ --fg-2: hsl(44 5% 52%); /* secondary / captions */ --fg-3: hsl(44 4% 36%); /* disabled */ /* ─── Brand accent — amber ────────────────────────────────────────── */ --accent: oklch(0.731 0.132 73.9); --accent-hi: oklch(0.8 0.132 73.9); /* hover */ --accent-soft: oklch(0.731 0.132 73.9 / 0.18); /* tinted fill */ --accent-line: oklch(0.731 0.132 73.9 / 0.42); /* tinted border */ /* Text/icon ON an accent fill. Tracks the canvas, so it stays readable in both modes: near-black on bright amber (dark), white on deep amber (light). */ --accent-fg: var(--bg-base); --link: oklch(0.72 0.13 250); /* ─── Semantic status ─────────────────────────────────────────────── */ --ok: oklch(0.74 0.13 150); /* was brain/command `--accent` */ --warn: oklch(0.78 0.14 75); --error: oklch(0.7 0.18 18); --idle: hsl(44 4% 38%); --status-online: var(--ok); --status-degraded: var(--warn); --status-error: var(--error); --status-offline: var(--idle); --status-unknown: transparent; /* ─── Environment palette — 6 assignable hues ─────────────────────── */ --env-slate: oklch(0.72 0.02 270); --env-cyan: oklch(0.72 0.13 220); --env-mint: oklch(0.78 0.14 160); --env-amber: oklch(0.8 0.14 78); --env-rose: oklch(0.7 0.18 18); --env-iris: oklch(0.74 0.13 290); --env-slate-soft: oklch(0.72 0.02 270 / 0.2); --env-cyan-soft: oklch(0.72 0.13 220 / 0.22); --env-mint-soft: oklch(0.78 0.14 160 / 0.22); --env-amber-soft: oklch(0.8 0.14 78 / 0.22); --env-rose-soft: oklch(0.7 0.18 18 / 0.22); --env-iris-soft: oklch(0.74 0.13 290 / 0.22); --env-slate-line: oklch(0.72 0.02 270 / 0.55); --env-cyan-line: oklch(0.72 0.13 220 / 0.6); --env-mint-line: oklch(0.78 0.14 160 / 0.6); --env-amber-line: oklch(0.8 0.14 78 / 0.6); --env-rose-line: oklch(0.7 0.18 18 / 0.6); --env-iris-line: oklch(0.74 0.13 290 / 0.6); /* ─── Syntax highlighting ─────────────────────────────────────────── */ --syn-keyword: oklch(0.78 0.13 290); --syn-string: oklch(0.78 0.1 145); --syn-number: oklch(0.8 0.13 75); --syn-ident: var(--fg-0); --syn-comment: hsl(44 5% 44%); --syn-fn: oklch(0.82 0.1 290); /* ─── Shadows — always two layers: contact + ambient ──────────────── */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4), 0 4px 12px hsl(0 0% 0% / 0.22); --shadow-md: 0 1px 3px hsl(0 0% 0% / 0.45), 0 8px 24px hsl(0 0% 0% / 0.28); --shadow-lg: 0 2px 4px hsl(0 0% 0% / 0.5), 0 16px 40px hsl(0 0% 0% / 0.34); --shadow-inset: inset 0 2px 4px hsl(0 0% 0% / 0.32), inset 0 -1px 1px hsl(0 0% 100% / 0.04); --shadow-selected: inset 0 1px 0 hsl(0 0% 100% / 0.06), inset 0 -1px 0 hsl(0 0% 0% / 0.18); /* ─── Typography ──────────────────────────────────────────────────── */ /* system-ui + "Segoe UI" are load-bearing on Windows — brain and agent-search both had them; app's stack did not. Superset of all three. */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Size scale — t-N = Npx / 16 rem */ --t-11: 0.6875rem; --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; /* default body */ --t-16: 1rem; --t-20: 1.25rem; --t-28: 1.75rem; /* ─── Radii ───────────────────────────────────────────────────────── */ --r-2: 0.125rem; --r-4: 0.25rem; --r-6: 0.375rem; --r-8: 0.5rem; --r-12: 0.75rem; /* dialogs and large cards — .ui-dialog, onboarding panels */ --r-pill: 624.9375rem; /* ─── Row heights — dense-UI rhythm ───────────────────────────────── */ --row-tight: 1.5rem; --row: 1.75rem; --row-loose: 2rem; } /* ─── LIGHT MODE — white canvas, warm grey chrome ──────────────────────── */ [data-theme="light"] { --bg-base: hsl(0 0% 100%); --bg-sidebar: hsl(36 12% 95%); --bg-surface: hsl(36 12% 97%); --bg-raised: hsl(0 0% 100%); --bg-hover: hsl(36 16% 93%); --bg-inset: hsl(36 12% 91%); --line-1: hsl(30 18% 16% / 0.07); --line-2: hsl(30 18% 16% / 0.13); --line-3: hsl(30 18% 16% / 0.22); --top-highlight: hsl(0 0% 100% / 0.85); --fg-0: hsl(30 18% 10%); --fg-1: hsl(30 12% 24%); --fg-2: hsl(30 8% 40%); --fg-3: hsl(30 6% 56%); --accent: oklch(0.56 0.132 73.9); --accent-hi: oklch(0.48 0.14 73.9); --accent-soft: oklch(0.56 0.132 73.9 / 0.14); --accent-line: oklch(0.56 0.132 73.9 / 0.42); --link: oklch(0.52 0.15 250); --ok: oklch(0.55 0.15 150); --warn: oklch(0.62 0.15 68); --error: oklch(0.55 0.2 18); --idle: hsl(30 6% 60%); --env-slate: oklch(0.5 0.02 270); --env-cyan: oklch(0.55 0.14 220); --env-mint: oklch(0.55 0.15 155); --env-amber: oklch(0.62 0.16 72); --env-rose: oklch(0.55 0.2 18); --env-iris: oklch(0.5 0.16 290); --env-slate-soft: oklch(0.5 0.02 270 / 0.14); --env-cyan-soft: oklch(0.55 0.14 220 / 0.14); --env-mint-soft: oklch(0.55 0.15 155 / 0.14); --env-amber-soft: oklch(0.62 0.16 72 / 0.16); --env-rose-soft: oklch(0.55 0.2 18 / 0.14); --env-iris-soft: oklch(0.5 0.16 290 / 0.14); --env-slate-line: oklch(0.5 0.02 270 / 0.55); --env-cyan-line: oklch(0.55 0.14 220 / 0.55); --env-mint-line: oklch(0.55 0.15 155 / 0.55); --env-amber-line: oklch(0.62 0.16 72 / 0.6); --env-rose-line: oklch(0.55 0.2 18 / 0.55); --env-iris-line: oklch(0.5 0.16 290 / 0.55); --syn-keyword: oklch(0.5 0.16 290); --syn-string: oklch(0.45 0.13 150); --syn-number: oklch(0.55 0.14 60); --syn-comment: hsl(30 6% 56%); --syn-fn: oklch(0.42 0.18 290); --shadow-sm: 0 1px 2px hsl(30 18% 16% / 0.06), 0 6px 18px hsl(30 18% 16% / 0.06); --shadow-md: 0 1px 3px hsl(30 18% 16% / 0.08), 0 12px 32px hsl(30 18% 16% / 0.08); --shadow-lg: 0 2px 6px hsl(30 18% 16% / 0.1), 0 20px 48px hsl(30 18% 16% / 0.1); --shadow-inset: inset 0 2px 4px hsl(30 18% 16% / 0.1), inset 0 -1px 1px hsl(0 0% 100% / 0.5); --shadow-selected: inset 0 1px 0 hsl(0 0% 100% / 0.6), inset 0 -1px 0 hsl(30 18% 16% / 0.06); } /* ─── Icon filters — theme-aware tint for -based SVG icons ────────── */ :root { --icon-filter-0: brightness(0) invert(1); --icon-filter-1: brightness(0) invert(1) opacity(0.74); --icon-filter-2: brightness(0) invert(1) opacity(0.51); --icon-filter-3: brightness(0) invert(1) opacity(0.34); } [data-theme="light"] { --icon-filter-0: brightness(0); --icon-filter-1: brightness(0) opacity(0.7); --icon-filter-2: brightness(0) opacity(0.48); --icon-filter-3: brightness(0) opacity(0.28); } /* ─── LEGACY ALIASES ────────────────────────────────────────────────────── Compatibility shims so an existing UI can adopt this file without a rewrite. MUST NOT be used in new code. Delete a block once its repo's CSS has been sed'd to canonical names. Two names could NOT be aliased — they mean different things in the two families and must be renamed at the call site on adoption: • `--accent` — amber in app/admin, GREEN in brain/command/agent-search. Green is now `--ok`. • `--line-2` — mid border in app, STRONG border in brain/command/ agent-search. Their `--line-2` is now `--line-3`. */ :root { /* app */ --bg-0: var(--bg-base); --bg-1: var(--bg-surface); --bg-2: var(--bg-raised); --bg-3: var(--bg-hover); --font-size-xs: var(--t-11); --font-size-sm: var(--t-12); --font-size-md: var(--t-14); --font-size-base: var(--t-16); --font-size-lg: var(--t-16); --font-size-xl: var(--t-20); --font-size-2xl: var(--t-28); --radius-xs: var(--r-2); --radius-sm: var(--r-4); --radius-md: var(--r-6); --radius-lg: var(--r-8); --radius-pill: var(--r-pill); --row-height-tight: var(--row-tight); --row-height: var(--row); --row-height-loose: var(--row-loose); --border-color: var(--line-2); --border-width: 0.0625rem; --border-radius: var(--r-8); --button-border-radius: var(--r-8); --icon-filter-primary: var(--icon-filter-0); --icon-filter-secondary: var(--icon-filter-1); --icon-filter-muted: var(--icon-filter-2); --icon-filter-disabled: var(--icon-filter-3); /* brain / command / agent-search */ --bg: var(--bg-base); --sidebar: var(--bg-sidebar); --panel: var(--bg-surface); --panel-2: var(--bg-raised); --raised: var(--bg-raised); --code-bg: var(--bg-inset); --line: var(--line-2); --text: var(--fg-0); --muted: var(--fg-1); --faint: var(--fg-2); --brand: var(--accent); --clay: var(--accent-hi); --clay-soft: var(--accent-soft); --stuck: var(--error); --question: var(--link); /* agent-search — already aliased onto canonical semantics */ --text-primary: var(--fg-0); --text-muted: var(--fg-1); --border: var(--line-2); --highlight: var(--accent); } /* NOT here, deliberately — product-specific semantic palettes stay in their own repo, because canonical cannot know how many values must stay mutually distinguishable: • command `--st-*` (issue statuses) — these render as ADJACENT kanban column borders and status buttons, so `planning` and `in_review` must not collapse to one hue. Canonical has a single violet (`--env-iris`); command needs two. • command `--agent`, brain `--km-*` (knowledge-map hues), admin `--topbar-h` / `--nav-w` (layout constants). Each lives in its own repo's CSS and may reference canonical tokens. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font: 1rem ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); display: grid; grid-template-columns: 20rem 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "header header" "sidebar main" "drawer main" "footer footer"; gap: 0.5rem; padding: 0.5rem; height: 100vh; overflow: hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; } .app-header { grid-area: header; display: grid; grid-template-columns: subgrid; align-items: center; gap: 0.45rem; padding: 0.2rem 0.5rem; /* Column 1 of the header subgrid (sidebar width): logo left, the Help and Settings icons right-aligned at its edge. */ .brand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-width: 0; } .brand-actions { display: grid; grid-auto-flow: column; align-items: center; gap: 0.15rem; a { display: grid; place-items: center; padding: 0.3rem; border-radius: 0.375rem; color: var(--muted); opacity: 0.5; transition: opacity 0.15s, color 0.15s, background 0.15s; &:hover { opacity: 1; color: var(--text); background: var(--raised); } &.active { opacity: 1; color: var(--text); } } .icon { display: block; width: 1.2rem; height: 1.2rem; background: currentColor; mask: no-repeat center / contain; &.icon-help { mask-image: url("/img/help.svg"); } &.icon-settings { mask-image: url("/img/settings.svg"); } &.icon-add { mask-image: url("/img/add.svg"); } } } .brand { text-decoration: none; display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: 0.5rem; & > span { display: grid; grid-template-columns: auto 1fr; & > img { margin-top: 0.2rem; } } } & > section { display: grid; grid-template-columns: 1fr auto; justify-content: space-between; align-items: center; gap: 2rem; } } .app-header .brand-mark { height: 2rem; width: auto; } .app-header .brand-wordmark { display: grid; grid-template-columns: auto auto; height: 1.6rem; width: auto; font-size: 1.5rem; img { margin-top: 0.2rem; height: 1.6rem; } } .app-header .brand-sub { color: var(--muted); font-weight: 500; font-size: 1.4rem; line-height: 1.2; opacity: 0.5; } .app-footer { grid-area: footer; /* auto columns + space-between: children stay content-sized (a 1fr track would stretch ui-conn-status and spread its dot from its label). */ display: grid; grid-auto-flow: column; justify-content: space-between; align-items: center; padding: 0.1rem 0.75rem; font-size: 0.72rem; color: var(--faint); .footer-link { color: var(--faint); text-decoration: none; &:hover { color: var(--clay); } } } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 3px; } #sidebar { grid-area: sidebar; min-width: 16px; background: var(--panel); border: 1px solid var(--line); /* bottom is closed by the flush ui-account-drawer below it */ border-bottom: none; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; /* Stacked rows; the LAST child fills so its list scrolls internally. Sidebars hold 1–3 children (a component, or header + nav + component), hence the ladder — grid can't say "last row gets 1fr" without knowing the count. */ display: grid; grid-template-rows: minmax(0, 1fr); &:has(> :nth-child(2)) { grid-template-rows: auto minmax(0, 1fr); } &:has(> :nth-child(3)) { grid-template-rows: auto auto minmax(0, 1fr); } } /* Primary nav — lives in the header (Skills · Entities · Docs · Metrics). */ #page-nav { display: grid; grid-auto-flow: column; justify-content: end; align-items: center; gap: 0.15rem; a { padding: 0.4rem 0.8rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); text-decoration: none; border-radius: 0.375rem; border-bottom: 2px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; &:hover { color: var(--text); background: var(--raised); } &.active { color: var(--text); border-bottom-color: var(--brand); } /* Icon-only nav entries (Help, Settings). The SVG is applied as a CSS mask so the glyph inherits the link's currentColor for hover/active states (Material Symbols, vendored in assets/img/ — no icon fonts). */ &.nav-icon { padding: 0.4rem 0.5rem; } .icon { display: block; width: 1.2rem; height: 1.2rem; background: currentColor; mask: no-repeat center / contain; &.icon-settings { mask-image: url("/img/settings.svg"); } &.icon-help { mask-image: url("/img/help.svg"); } &.icon-hub { mask-image: url("/img/hub.svg"); } &.icon-cached { mask-image: url("/img/cached.svg"); } } } } #main { grid-area: main; overflow-y: auto; padding: 1.5rem 2rem; } /* Shared primitives — any component may render these states. */ .loading { color: var(--faint); font-size: 0.85rem; padding: 2rem 0; } .error { color: var(--stuck); font-size: 0.85rem; padding: 1rem 0; } /* Sidebar placeholder for pages with no list (Metrics, Ask) — page templates render this directly; no component owns it. */ .sidebar-empty { padding: 1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); } /* Settings page wrapper — lives on
in the _page-settings-* templates. Left-aligned (not centred) and wider than before, but still capped: long measure hurts the link-card and metrics grids more than the extra room helps. */ .settings-page { max-width: 84rem; margin: 0; padding: 1.5rem; display: grid; gap: 1.5rem; } /* Sign-in page — standalone SSR template (templates/login.eta), no app chrome. The .brand styles above are scoped to .app-header, so the card carries its own sizing for the same marks. */ #login-page { min-height: 100vh; display: grid; /* The base `body` rule is the app-shell grid (20rem sidebar + named areas); this page has no chrome, so reset all three template axes or the card lands in the sidebar column. */ grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: none; place-items: center; background: var(--bg); .login-card { display: grid; justify-items: center; gap: 0.75rem; width: 24rem; max-width: 92vw; padding: 2.5rem 2rem 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.75rem; } .login-logo { height: 3rem; width: auto; margin-bottom: 0.35rem; } h1 { font-size: 1.15rem; font-weight: 600; color: var(--text); } .login-providers { display: grid; gap: 0.6rem; width: 100%; } .login-provider { display: grid; grid-auto-flow: column; justify-content: center; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; border: 1px solid var(--line-2); border-radius: 0.45rem; background: var(--raised); color: var(--text); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; &:hover { border-color: var(--brand); background: var(--panel); } .provider-logo { height: 1.15rem; width: 1.15rem; } } .login-foot { font-size: 0.85rem; color: var(--muted); a { color: var(--brand); text-decoration: underline dotted; &:hover { text-decoration: underline; } } } /* Mirrors the Levirge Search sign-in footer: product + version left, © right. */ .login-footer { justify-self: stretch; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0.5rem 1rem; font-size: 0.8rem; color: var(--muted); a { color: var(--muted); text-decoration: none; &:hover { color: var(--brand); } } } } /* Section sidebar navs — SSR partials (_settings-nav.eta, _profile-nav.eta, _help-nav.eta), mirroring the main sidebar list look. */ #settings-nav-header, #profile-nav-header, #help-nav-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 1rem 1rem 0.5rem; color: var(--faint); } #settings-nav, #profile-nav, #help-nav { display: grid; align-content: start; padding: 0.25rem 0; a { padding: 0.45rem 1rem; border-left: 3px solid transparent; font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: all 0.15s ease; &:hover { background: var(--raised); color: var(--text); } &.active { background: var(--raised); border-left-color: var(--brand); color: var(--text); } /* Nested nav entries (e.g. per-agent MCP pages under "MCP Setup"). */ &.sub { padding-left: 2rem; font-size: 0.82rem; color: var(--faint); &:hover, &.active { color: var(--text); } } } } /* Help page body — static SSR content. */ #help-body { max-width: 720px; a { color: var(--link); } /* Agent picker cards on the MCP Setup landing. */ .help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0.5rem 0 1rem; a { display: grid; gap: 0.25rem; padding: 0.9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem; text-decoration: none; transition: background 0.15s, border-color 0.15s; &:hover { background: var(--raised); border-color: var(--line-3); } strong { color: var(--text); font-size: 0.95rem; } span { color: var(--muted); font-size: 0.8rem; } } } h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; color: var(--text); } p, li { color: var(--muted); } ul, ol { margin: 0 0 0.75rem 1.25rem; } li { margin-bottom: 0.35rem; } .first-steps { display: grid; gap: 0.45rem; margin-left: 0; list-style-position: inside; li { border: 1px solid var(--line); border-radius: 0.4rem; background: var(--panel); padding: 0.55rem 0.7rem; } } strong { color: var(--text); } table { width: 100%; border-collapse: collapse; margin: 0 0 0.75rem; font-size: 0.85rem; th { text-align: left; color: var(--text); font-weight: 600; } th, td { padding: 0.4rem 0.6rem; border: 1px solid var(--line); color: var(--muted); vertical-align: top; } } code { background: var(--raised); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.85em; font-family: "SF Mono", "Fira Code", monospace; color: var(--clay); } pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.75rem 1rem; overflow-x: auto; margin: 0 0 0.75rem; font-size: 0.82rem; line-height: 1.5; code { background: none; padding: 0; color: var(--text); } } } @media (max-width: 640px) { body { grid-template-columns: 180px 1fr; } #sidebar { width: auto; min-width: 0; } #main { padding: 1rem; } } /* Shared primitive: YAML frontmatter block emitted by renderMarkdown() (assets/js/lib/_markdown.ts) — appears wherever markdown renders (docs, skills, entities, ask answers), so it lives in the base layer. Inset like code blocks: bg-base tier + inset shadow, no outer elevation. */ .md-frontmatter { display: grid; grid-template-columns: max-content 1fr; gap: 0.125rem 0.75rem; margin: 0 0 1rem; padding: 0.6rem 0.8rem; background: var(--code-bg); border: 1px solid var(--line); border-radius: 0.375rem; box-shadow: inset 0 1px 3px hsl(0 0% 0% / 0.25); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; line-height: 1.5; } .md-frontmatter .fm-key { color: var(--brand); white-space: nowrap; } .md-frontmatter .fm-val { color: var(--muted); overflow-wrap: anywhere; } .md-frontmatter .fm-raw { grid-column: 1 / -1; color: var(--muted); white-space: pre-wrap; } /* Home landing hero (placeholder main; sidebar is the vault-nav rail). */ .home-hero { max-width: 48rem; margin: 0 auto; padding-top: 2rem; } .home-hero h1 { font-size: 1.6rem; font-weight: 650; } .home-hero p { color: var(--muted); font-size: 0.95rem; margin-top: 0.5rem; line-height: 1.6; } /* ── Components (inlined by CssBuilder at build time) ─────────────────── */ /* ui-table — shared results-table pattern, ported from the app repo's ui-table component (app/assets/components/ui-table). CSS-only: consumers put class="ui-table" on a container, declare grid-template-columns ONCE on it, and use this structure:
…
…
…
…
(optional)
Columns flow to every row via subgrid, so header and body can never drift. The table is a rows grid (auto 1fr auto): it fills its container and ONLY the body scrolls. */ .ui-table { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; .ui-table-header, .ui-table-body, .ui-table-footer, .row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } .ui-table-header { color: var(--faint); font-weight: 500; border-bottom: 1px solid var(--line); } .ui-table-body { align-content: start; overflow-y: auto; min-height: 0; .row { border-bottom: 1px solid var(--line); } &.rows-zebra .row:nth-child(even) { background: hsl(0 0% 100% / 0.03); } } .row { align-items: center; .cell { padding: 0.4rem 0.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; &.num { text-align: right; font-variant-numeric: tabular-nums; } &.actions { text-align: right; } } } } /* Header query bar. Customized built-in (
) — scoped under form[is=…] per the component convention. The form IS the single bordered element: [mode | input | vault | submit] read as one control, divided by internal hairlines rather than four separate outlines. */ form[is="ui-search-bar"] { display: grid; /* mode | input | ⌘K hint | vault | submit */ grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-radius: 0.375rem; overflow: hidden; /* clips child corners to the shared radius */ &:focus-within { border-color: var(--brand); } /* Segments: no own border/radius/background — the form owns those. */ input[type="text"], select { min-width: 0; background: transparent; color: var(--text); border: none; border-radius: 0; font-family: inherit; &:focus { outline: none; } } input[type="text"] { padding: 0.5rem 0.9rem; font-size: 1rem; border-left: 1px solid var(--line); /* divider: mode | input */ } select { padding: 0.5rem 0.6rem; font-size: 0.85rem; cursor: pointer; } /* ⌘K affordance. Hidden once the bar has focus — you are already here, and it would sit under the caret on a long query. */ .query-hint { align-self: center; margin-right: 0.4rem; padding: 0.1rem 0.35rem; border: 1px solid var(--line); border-radius: 0.25rem; color: var(--faint); background: var(--bg); font-family: inherit; font-size: 0.68rem; white-space: nowrap; pointer-events: none; } &:focus-within .query-hint { visibility: hidden; } /* Mode picker — customizable