@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=Cascadia+Code:wght@400;500;600;700&display=swap");
/* ─────────────── tokens ───────────────
Marketing/legal pages rely on the bare :root palette so the public
surface stays black-on-white. App pages declare data-theme on
and pick up the warm cream / warm dark scheme below. */
:root {
color-scheme: light dark;
--fg: #111;
--fg-muted: #6b6b6b;
--fg-faint: #9a9a9a;
--fg-strong: #000;
--bg: #fff;
--bg-elev: #fafafa;
--bg-elev-2: #fff;
--line: rgba(0,0,0,.10);
--line-strong: rgba(0,0,0,.22);
--border: rgba(0,0,0,.12);
--border-soft: rgba(0,0,0,.06);
--rule: rgba(0,0,0,.10);
--accent: #111;
--accent-fg: #fff;
--accent-ink: #fff;
--accent-soft: rgba(0,0,0,.06);
--mem: #3a6b3e;
--mem-soft: rgba(58,107,62,.10);
--tbl: #2a5a8c;
--tbl-soft: rgba(42,90,140,.10);
--warn: #b86b2e;
--selection: rgba(0,0,0,.10);
--btn-bg: #111;
--btn-fg: #fff;
--btn-border: #111;
--btn-hover-bg: #000;
--danger: #b00020;
--tag-bg: rgba(0,0,0,.06);
--shadow: 0 1px 0 rgba(0,0,0,.04);
--font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-mono: "Cascadia Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--radius: 4px;
--container: 920px;
--topbar-h: 55px;
}
/* Font preferences (Settings → Appearance). Defaults above = Bricolage +
Cascadia; these only re-point the existing vars to already-loaded or
system stacks, so switching never triggers a new font download. */
html[data-font="system"] { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }
html[data-font="serif"] { --font-sans: ui-serif, Georgia, Cambria, "Times New Roman", serif; }
html[data-font="mono"] { --font-sans: var(--font-mono); }
html[data-font-mono="system"] { --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
/* Marketing dark mode (only fires when no data-theme is set, i.e. on the
public site). App pages set data-theme explicitly and ignore this. */
@media (prefers-color-scheme: dark) {
:root {
--fg: #ececec;
--fg-muted: #8d8d8d;
--fg-faint: #595959;
--fg-strong: #fff;
--bg: #0e0e0e;
--bg-elev: #161616;
--bg-elev-2: #1c1c1c;
--line: rgba(255,255,255,.10);
--line-strong: rgba(255,255,255,.22);
--border: rgba(255,255,255,.14);
--border-soft: rgba(255,255,255,.06);
--accent: #ececec;
--accent-fg: #0e0e0e;
--accent-soft: rgba(255,255,255,.08);
--btn-bg: #1f1f1f;
--btn-fg: #ececec;
--btn-border: #2e2e2e;
--btn-hover-bg:#262626;
--danger: #ff6679;
--tag-bg: rgba(255,255,255,.08);
--shadow: none;
}
}
/* App light — warm cream. */
:root[data-theme="light"] {
--bg: #f4f0e6;
--bg-elev: #fbf8f0;
--bg-elev-2: #ffffff;
--fg: #18160f;
--fg-strong: #000000;
--fg-muted: #6b6457;
--fg-faint: #9a9384;
--border: #d6cfbd;
--border-soft: #e5dfce;
--line: rgba(24,22,16,.10);
--line-strong: rgba(24,22,16,.22);
--rule: rgba(24,22,16,.10);
--accent: #b84a2e;
--accent-fg: #ffffff;
--accent-ink: #ffffff;
--accent-soft: #efd7c7;
--mem: #5a7a3e;
--mem-soft: #dde7cc;
--tbl: #2f6b8c;
--tbl-soft: #cddde7;
--warn: #b8862e;
--selection: #f0dacf;
--btn-bg: #18160f;
--btn-fg: #fbf8f0;
--btn-border: #18160f;
--btn-hover-bg: #b84a2e;
--danger: #b00020;
--tag-bg: rgba(24,22,16,.06);
--shadow: 0 8px 24px -10px rgba(24,22,15,.12);
}
/* App dark — warm dark. */
:root[data-theme="dark"] {
--bg: #161410;
--bg-elev: #1e1b14;
--bg-elev-2: #25211a;
--fg: #e8e2d2;
--fg-strong: #ffffff;
--fg-muted: #8a8378;
--fg-faint: #5a554a;
--border: #3a352b;
--border-soft: #2a261f;
--line: rgba(232,226,210,.10);
--line-strong: rgba(232,226,210,.22);
--rule: rgba(232,226,210,.10);
--accent: #e58468;
--accent-fg: #16140f;
--accent-ink: #16140f;
--accent-soft: #3a2419;
--mem: #9fb87a;
--mem-soft: #2a3520;
--tbl: #78b5d4;
--tbl-soft: #1f303b;
--warn: #d9a852;
--selection: #3a2419;
--btn-bg: #f1ead8;
--btn-fg: #16140f;
--btn-border: #f1ead8;
--btn-hover-bg: #e58468;
--danger: #ff6679;
--tag-bg: rgba(232,226,210,.10);
--shadow: 0 8px 30px -10px rgba(0,0,0,.6);
}
/* ─────────────── base ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-feature-settings: "ss01", "ss02";
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
::selection { background: var(--selection); color: var(--fg-strong); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 {
font-family: var(--font-sans);
font-weight: 600;
color: var(--fg-strong);
margin: 0;
}
.muted { color: var(--fg-muted); }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "ss19"; }
.small { font-size: .85rem; }
/* ─────────────── app shell ─────────────── */
.shell {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 1fr 28px;
min-height: 100vh;
}
.shell > .sidebar {
grid-row: 1 / 3;
border-right: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.shell > .main { grid-row: 1; min-width: 0; }
.shell > .statusbar {
grid-column: 2;
grid-row: 2;
border-top: 1px solid var(--border);
}
/* ─────────────── sidebar ─────────────── */
.sidebar { display: flex; flex-direction: column; }
/* brand + Workspace stay pinned at the top, Access + user stay pinned at the
bottom; only the collection list between them scrolls when it overflows. */
.sidebar > .brand,
.sidebar > .nav-group,
.sidebar > .user-pod { flex: 0 0 auto; }
.nav-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar,
.nav-scroll::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb,
.nav-scroll::-webkit-scrollbar-thumb { background: var(--border); }
.sidebar .brand {
height: var(--topbar-h);
box-sizing: border-box;
padding: 0 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 7px;
}
.sidebar .brand .wordmark {
font-weight: 600;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--fg-strong);
}
.sidebar .brand .tld {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
}
.sidebar .brand .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--accent);
margin-right: 2px;
transform: translateY(-2px);
}
.nav-group { padding: 14px 12px 4px; }
.nav-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-faint);
padding: 0 10px 6px;
}
.nav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 10px;
color: var(--fg);
border-radius: 4px;
cursor: pointer;
font-size: 13.5px;
position: relative;
transition: background-color .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--border-soft); color: var(--fg); }
.nav-item.active { background: var(--bg-elev); color: var(--fg-strong); font-weight: 500; }
.nav-item.active::before {
content: "";
position: absolute;
left: -12px;
top: 5px;
bottom: 5px;
width: 2px;
background: var(--accent);
}
.nav-item .glyph {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
width: 14px;
display: inline-flex;
justify-content: center;
}
.nav-item.active .glyph { color: var(--accent); }
.nav-item .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.nav-item .badge {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-faint);
padding-left: 4px;
}
.nav-coll .text { font-family: var(--font-mono); font-size: 12.5px; }
.nav-add { margin-top: 4px; }
.nav-add .glyph { color: var(--fg-faint); }
.nav-add .text { color: var(--fg-muted); }
/* ── collection rows: drag-to-reorder + pin ── */
.nav-coll-list { display: flex; flex-direction: column; }
.nav-coll-row { position: relative; border-radius: 4px; }
.nav-coll-row.dragging { opacity: .35; }
.nav-coll-row .nav-item { padding-right: 26px; }
/* drag grip — slides in on hover so the resting row stays clean */
.nav-coll .grip {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
color: var(--fg-faint);
width: 0;
overflow: hidden;
opacity: 0;
cursor: grab;
transition: opacity .12s ease, width .12s ease, margin .12s ease;
}
.nav-coll-row:hover .grip { width: 11px; opacity: .6; margin-right: -2px; }
.nav-coll-row.dragging .grip { cursor: grabbing; }
/* pin toggle — hidden until hover, but stays lit when the row is pinned */
.nav-coll-pin {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
display: flex;
}
.nav-coll-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: transparent;
color: var(--fg-faint);
border-radius: 3px;
cursor: pointer;
opacity: 0;
transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}
.nav-coll-row:hover .nav-coll-btn { opacity: .7; }
.nav-coll-btn:hover { color: var(--accent); background: var(--border-soft); opacity: 1; }
.nav-coll-btn.on { opacity: 1; color: var(--accent); }
/* ── trash page rows ── */
.trash-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px dashed var(--border-soft);
}
.trash-row:last-child { border-bottom: none; }
.trash-row-main {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
flex: 1;
}
.trash-row-main .glyph { color: var(--fg-muted); font-size: 12px; }
.trash-name {
font-size: 13px;
color: var(--fg-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trash-meta { font-size: 11px; color: var(--fg-faint); white-space: nowrap; }
.trash-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn.danger, .btn.danger:hover { color: var(--danger); }
.btn.danger { color: var(--fg-muted); }
/* ── archived state ── */
.archived-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
margin-bottom: 18px;
border: 1px solid var(--border);
border-left: 2px solid var(--warn);
border-radius: 4px;
background: var(--bg-elev);
}
.archived-banner-text {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--fg-muted);
}
.archived-banner-text svg { color: var(--warn); flex-shrink: 0; }
.organize { margin-top: 32px; }
.organize p a { border-bottom: 1px solid currentColor; }
.sidebar .user-pod {
border-top: 1px solid var(--border);
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
}
.user-pod .avatar {
width: 28px;
height: 28px;
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
border-radius: 4px;
text-transform: uppercase;
}
.user-pod .who {
line-height: 1.2;
min-width: 0;
flex: 1;
}
.user-pod .who .email {
font-size: 13px;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-pod .who .plan {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.user-pod form { display: inline; margin: 0; padding: 0; }
.user-pod .menu-link {
color: var(--fg-faint);
font-family: var(--font-mono);
cursor: pointer;
padding: 4px;
background: none;
border: 0;
font-size: 14px;
line-height: 1;
}
.user-pod .menu-link:hover { color: var(--accent); }
/* ─────────────── app topbar ─────────────── */
.shell .topbar {
display: flex;
align-items: center;
gap: 8px;
height: var(--topbar-h);
box-sizing: border-box;
padding: 0 32px;
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 10;
}
.crumbs {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg-muted);
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.crumbs .sep { color: var(--fg-faint); margin: 0 4px; }
.crumbs .here { color: var(--fg-strong); }
.crumbs a { cursor: pointer; }
.crumbs a:hover { color: var(--accent); }
.copy-btn {
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
color: var(--fg-faint);
display: inline-flex;
align-items: center;
border-radius: 4px;
transition: color .12s ease, background-color .12s ease;
}
.copy-btn:hover { color: var(--accent); background: var(--accent-soft); }
.copy-btn.copied { color: var(--mem); }
.topbar-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.icon-btn {
height: 30px;
min-width: 30px;
padding: 0 9px;
border: 1px solid var(--border);
background: var(--bg-elev);
color: var(--fg);
border-radius: 4px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
text-decoration: none;
transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.icon-btn:hover { border-color: var(--fg-muted); color: var(--fg-strong); }
.icon-btn.small { height: 24px; padding: 0 6px; }
.icon-btn:disabled, .icon-btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn .kbd-hint { color: var(--fg-faint); margin-left: 12px; }
.text-btn {
background: none;
border: 0;
padding: 4px 6px;
cursor: pointer;
color: var(--fg-muted);
font-family: var(--font-mono);
font-size: 12px;
border-radius: 4px;
}
.text-btn:hover { color: var(--accent); }
.btn-primary {
height: 30px;
padding: 0 12px;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-border);
border-radius: 4px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.btn-primary:disabled, .btn-primary[disabled] {
opacity: .4;
cursor: not-allowed;
background: var(--fg-muted);
border-color: var(--fg-muted);
}
/* ─────────────── page wrappers ─────────────── */
.page { padding: 32px 32px 56px; max-width: 1240px; margin-inline: auto; }
.page-wide { max-width: 1480px; }
.page-doc { max-width: 1080px; }
.page-head { margin-bottom: 28px; }
.page-head h1 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 36px;
letter-spacing: -0.025em;
margin: 0 0 6px;
color: var(--fg-strong);
}
.page-head .sub {
color: var(--fg-muted);
font-size: 14px;
max-width: 70ch;
}
.page-head .sub b, .page-head .sub strong {
color: var(--fg);
font-weight: 500;
}
.page-head-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
.page-head-row > .page-head-main { min-width: 0; flex: 1 1 280px; }
.page-head-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
white-space: nowrap;
flex-wrap: wrap;
}
.page-head-meta .sep { color: var(--fg-faint); }
.page-head-meta .accent-mem { color: var(--mem); }
.page-head-meta .accent-tbl { color: var(--tbl); }
.page-head-meta .accent-notes { color: var(--accent); }
.title-with-icon {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* The collection name title is smaller than a plain page heading. */
.page-head h1.title-with-icon { font-size: 26px; letter-spacing: -0.02em; }
.page-head h1.title-with-icon svg { width: 22px; height: 22px; }
.key-name-big {
font-family: var(--font-mono);
font-size: 26px;
color: var(--fg-strong);
letter-spacing: -0.01em;
}
/* ─────────────── section heads ─────────────── */
.section { margin-top: 36px; }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
gap: 16px;
}
.section-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-muted);
display: flex;
align-items: baseline;
gap: 8px;
}
.section-title .sigil { color: var(--accent); }
.section-title .count { color: var(--fg-faint); }
.section-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.section-link {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.section-link:hover { color: var(--accent); }
.section-link.arrowed::after { content: " →"; }
/* ─────────────── KPI strip ─────────────── */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: 10px;
}
.kpi {
padding: 22px 24px 24px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi .spark {
position: absolute;
right: 18px;
top: 22px;
opacity: 0.85;
}
.kpi .spark path {
fill: none;
stroke: var(--fg-faint);
stroke-width: 1.25;
}
.kpi .spark.accent path { stroke: var(--accent); }
.kpi .delta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mem);
display: inline-flex;
align-items: center;
gap: 4px;
}
.kpi .delta.flat { color: var(--fg-faint); }
.kpi .delta.down { color: var(--accent); }
.kpi .num {
font-family: var(--font-mono);
font-size: 44px;
line-height: 1;
font-weight: 500;
color: var(--fg-strong);
letter-spacing: -0.02em;
}
.kpi .num .unit {
font-size: 18px;
color: var(--fg-muted);
font-weight: 400;
margin-left: 4px;
}
.kpi .label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-muted);
}
@media (max-width: 900px) {
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.kpi:nth-child(2n) { border-right: 0; }
.kpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
.kpi-row { grid-template-columns: 1fr; }
.kpi { border-right: 0; border-bottom: 1px solid var(--border); }
.kpi:last-child { border-bottom: 0; }
}
/* ─────────────── collections list ─────────────── */
.col-list { margin-top: 0; }
.col-row {
display: grid;
grid-template-columns: 44px 1fr 110px 80px 100px 32px;
gap: 16px;
padding: 14px 4px;
border-bottom: 1px solid var(--border-soft);
align-items: center;
cursor: pointer;
color: inherit;
text-decoration: none;
transition: background-color .12s ease;
}
.col-row:hover { background: var(--bg-elev); }
.col-row.head {
cursor: default;
padding: 10px 4px;
border-bottom: 1px solid var(--border);
background: transparent;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-faint);
}
.col-row.head:hover { background: transparent; }
.col-row .name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.col-row .name .n {
font-family: var(--font-mono);
font-size: 14px;
color: var(--fg-strong);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.col-row .name .d {
color: var(--fg-muted);
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.col-row .uc-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
}
.col-row .docs {
font-family: var(--font-mono);
color: var(--fg);
font-size: 13px;
}
.col-row .upd {
font-family: var(--font-mono);
color: var(--fg-muted);
font-size: 12px;
}
.col-row .open {
text-align: right;
color: var(--fg-faint);
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.col-row:hover .open { color: var(--accent); }
.schema-keys {
display: inline-flex;
gap: 5px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
}
.schema-keys .k {
background: var(--bg-elev);
border: 1px solid var(--border-soft);
padding: 1px 5px;
border-radius: 3px;
}
/* ─────────────── use-case chip ─────────────── */
.uc-chip {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 4px;
}
.uc-chip.uc-notes { color: var(--accent); background: var(--accent-soft); }
.uc-chip.uc-tasks { color: var(--mem); background: var(--mem-soft); }
.uc-chip.uc-data { color: var(--tbl); background: var(--tbl-soft); }
.uc-chip svg { display: block; }
/* ─────────────── two-col / access grids ─────────────── */
.two-col, .access-grid {
display: grid;
gap: 32px;
margin-top: 36px;
}
.two-col { grid-template-columns: 1.4fr 1fr; }
.access-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
.two-col, .access-grid { grid-template-columns: 1fr; }
}
/* ─────────────── activity feed ─────────────── */
.activity { margin-top: 4px; }
.activity-item {
display: grid;
grid-template-columns: 64px 110px 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed var(--border-soft);
align-items: baseline;
text-decoration: none;
color: inherit;
transition: background-color .12s ease;
}
.activity-item:hover { background: var(--bg-elev); }
.activity-item:last-child { border-bottom: 0; }
.activity-item .t {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-faint);
}
.activity-item .op {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--fg);
}
.activity-item .op.put { color: var(--mem); }
.activity-item .op.get { color: var(--tbl); }
.activity-item .op.del { color: var(--accent); }
.activity-item .op.tog { color: var(--warn); }
.activity-item .op.qry { color: var(--fg-muted); }
.activity-item .body {
font-size: 13px;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.activity-item .body .col-name {
font-family: var(--font-mono);
color: var(--fg-muted);
}
.activity-item .body .key {
font-family: var(--font-mono);
color: var(--fg-strong);
}
.activity-item .body .sep { color: var(--fg-faint); margin: 0 4px; }
.activity-item .body .src {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-faint);
margin-left: 8px;
}
/* ─────────────── access (api keys / oauth) ─────────────── */
.key-row {
display: grid;
grid-template-columns: 1fr 110px 90px 32px;
gap: 12px;
padding: 12px 0;
align-items: center;
border-bottom: 1px solid var(--border-soft);
}
.key-row:last-child { border-bottom: 0; }
.key-label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.key-label .name {
font-size: 14px;
color: var(--fg);
font-weight: 500;
display: flex;
align-items: center;
}
.key-label .mask {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.key-row .meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
}
.key-row .row-end {
text-align: right;
}
.key-row form { display: inline; margin: 0; padding: 0; }
.status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mem);
margin-right: 6px;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mem) 20%, transparent);
flex-shrink: 0;
}
.status-dot.idle {
background: var(--fg-faint);
box-shadow: none;
}
/* ─────────────── plan usage ─────────────── */
.usage-box { padding-top: 8px; }
.usage-row { margin-top: 16px; }
.usage-row:first-child { margin-top: 4px; }
.usage-row .label {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
margin-bottom: 6px;
}
.usage-row .label .v { color: var(--fg); }
.bar {
height: 6px;
background: var(--border-soft);
border-radius: 2px;
overflow: hidden;
}
.bar > i {
display: block;
height: 100%;
background: var(--fg-strong);
border-radius: 2px;
}
.bar > i.accent { background: var(--accent); }
.bar > i.warn { background: var(--warn); }
.plan-footer {
margin-top: 22px;
padding-top: 16px;
border-top: 1px dashed var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.plan-footer .left { font-size: 13px; color: var(--fg-muted); }
.plan-footer .left b { color: var(--fg-strong); font-weight: 600; }
/* ─────────────── status bar ─────────────── */
.statusbar {
display: flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
background: var(--bg-elev);
color: var(--fg-muted);
padding: 0 16px;
height: 28px;
}
.statusbar .seg {
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 6px;
border-right: 1px solid var(--border);
height: 100%;
}
.statusbar .seg:first-child { padding-left: 0; }
.statusbar .seg.right {
margin-left: auto;
border-right: 0;
border-left: 1px solid var(--border);
}
.statusbar .seg .k { color: var(--fg-faint); }
.statusbar .seg .v { color: var(--fg); }
.statusbar .seg .ok { color: var(--mem); }
.statusbar .seg .idle { color: var(--fg-faint); }
.statusbar .blink {
animation: blink 1.4s steps(2) infinite;
color: var(--accent);
}
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 760px) {
.statusbar .seg.opt { display: none; }
}
/* ─────────────── split view (notes/tasks collection) ─────────────── */
.split-view {
display: grid;
grid-template-columns: 380px 1fr;
gap: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
/* The document body flows naturally and the page scrolls; the list column
sticks in place (align-items:start lets it be shorter than the body). */
align-items: start;
transition: grid-template-columns .18s ease;
}
.split-left {
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
min-width: 0;
position: sticky;
top: calc(var(--topbar-h) + 14px);
align-self: start;
max-height: calc(100vh - var(--topbar-h) - 28px);
border-bottom-left-radius: 4px;
overflow: hidden;
}
.split-right {
min-width: 0;
background: var(--bg-elev-2);
}
/* Collapsed: the document list is hidden entirely (no leftover rail) and the
document body takes the full width. A small expand affordance lives inside
the document pane on the right. */
.split-view.split-collapsed { grid-template-columns: 1fr; }
.split-collapsed .split-left { display: none; }
.split-collapse-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
color: var(--fg-muted);
cursor: pointer;
flex-shrink: 0;
}
.split-collapse-btn:hover { color: var(--fg-strong); border-color: var(--fg-faint); }
/* The expand button (in the doc pane) only shows when the list is collapsed. */
.doc-pane-expand { display: none; }
.split-collapsed .doc-pane-expand { display: inline-flex; }
@media (max-width: 900px) {
.split-view { grid-template-columns: 1fr; min-height: 0; height: auto; }
.split-view.split-collapsed { grid-template-columns: 1fr; }
.split-left {
border-right: 0;
border-bottom: 1px solid var(--border);
position: static;
max-height: 50vh;
}
.doc-pane-header { position: static; }
}
.split-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
gap: 8px;
}
/* inline visibility control in the collection page header */
.vis-form { display: inline; margin: 0; padding: 0; }
.vis-select {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: 4px;
padding: 1px 4px;
cursor: pointer;
}
.vis-select:hover { color: var(--fg-strong); border-color: var(--fg-faint); }
.doc-sort {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 8px 14px;
border-bottom: 1px solid var(--border-soft);
}
.doc-sort .filter-pill { font-size: 10px; padding: 3px 8px; }
.doc-list { overflow-y: auto; flex: 1; }
.doc-row {
display: grid;
grid-template-columns: 1fr auto;
padding: 12px 14px;
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
gap: 12px;
align-items: center;
text-decoration: none;
color: inherit;
transition: background-color .12s ease;
}
.doc-row:hover { background: var(--bg); }
.doc-row.selected {
background: var(--bg);
border-left: 2px solid var(--accent);
padding-left: 12px;
}
.doc-row.selected .doc-key { color: var(--accent); }
.doc-row-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.doc-key {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
color: var(--fg-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-preview {
font-size: 12.5px;
color: var(--fg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-row-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
color: var(--fg-faint);
}
.doc-version {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
white-space: nowrap;
}
.task-progress {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.task-bar {
width: 60px;
height: 4px;
background: var(--border-soft);
border-radius: 2px;
overflow: hidden;
}
.task-bar > i {
display: block;
height: 100%;
background: var(--mem);
border-radius: 2px;
}
.task-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mem);
}
/* ─────────────── doc pane (inline preview) ─────────────── */
.doc-pane {
display: flex;
flex-direction: column;
}
.doc-pane-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 14px;
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
gap: 10px;
flex-wrap: wrap;
/* Stays pinned while the long preview scrolls past, so the mode toggle and
the expand button remain reachable. */
position: sticky;
top: var(--topbar-h);
z-index: 5;
}
.doc-pane-title {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
margin-right: auto; /* hug the left next to the expand button; actions stay right */
}
.doc-pane-title .key-name {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg-strong);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-pane-actions {
display: flex;
align-items: center;
gap: 6px;
}
.doc-pane-actions form { display: inline; margin: 0; padding: 0; }
.doc-pane-meta {
padding: 5px 14px;
border-bottom: 1px solid var(--border-soft);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--fg-muted);
display: flex;
gap: 6px;
align-items: baseline;
flex-wrap: wrap;
}
.doc-pane-meta .sep { color: var(--fg-faint); }
.doc-pane-meta .ok { color: var(--mem); }
.doc-pane-body {
padding: 20px 28px 24px;
flex: 1;
}
.doc-pane-footer {
padding: 10px 18px;
border-top: 1px solid var(--border-soft);
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-faint);
}
.doc-pane-footer b { color: var(--fg-muted); font-weight: 500; }
/* seg toggle */
.seg-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: var(--bg-elev-2);
}
.seg-toggle button, .seg-toggle a {
background: transparent;
border: 0;
padding: 0 12px;
height: 28px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
cursor: pointer;
border-right: 1px solid var(--border);
display: inline-flex;
align-items: center;
gap: 5px;
text-decoration: none;
}
.seg-toggle button:last-child, .seg-toggle a:last-child { border-right: 0; }
.seg-toggle button:hover, .seg-toggle a:hover { color: var(--fg-strong); }
.seg-toggle button.on, .seg-toggle a.on {
background: var(--fg-strong);
color: var(--bg);
}
/* ─────────────── markdown ─────────────── */
.md {
font-size: 14.5px;
line-height: 1.65;
color: var(--fg);
}
.md h1, .md h2, .md h3, .md h4 {
font-family: var(--font-sans);
color: var(--fg-strong);
margin: 1.5em 0 0.5em;
line-height: 1.2;
}
.md h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 0; }
.md h2 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.015em;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.md h3 { font-size: 17px; font-weight: 600; }
.md h4 { font-size: 14px; font-weight: 600; }
.md p { margin: 0.7em 0; text-wrap: pretty; }
.md ul, .md ol { margin: 0.5em 0; padding-left: 22px; }
.md li { margin: 0.25em 0; }
.md li > p { margin: 0.25em 0; }
.md code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
padding: 1px 5px;
border-radius: 3px;
}
.md pre {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px 16px;
overflow: auto;
font-size: 12.5px;
line-height: 1.55;
}
.md pre code { background: transparent; border: 0; padding: 0; }
.md blockquote {
border-left: 3px solid var(--accent);
margin: 1em 0;
padding: 4px 14px;
color: var(--fg-muted);
background: var(--accent-soft);
border-radius: 0 4px 4px 0;
}
.md blockquote p { margin: 0.25em 0; }
.md a { color: var(--accent); border-bottom: 1px solid currentColor; }
.md a:hover { color: var(--accent); }
.md b, .md strong { color: var(--fg-strong); font-weight: 600; }
.md hr {
border: 0;
border-top: 1px solid var(--border);
margin: 1.5em 0;
}
.md img { max-width: 100%; height: auto; }
.md table {
border-collapse: collapse;
margin: 1em 0;
font-size: 0.92em;
}
.md table th, .md table td {
border: 1px solid var(--border);
padding: 6px 10px;
}
/* GFM tasks — goldmark emits ``. */
.md ul li:has(> input.task-checkbox:first-child) {
list-style: none;
padding-left: 0;
}
/* Negative margin only on the top-level task list; nested task lists keep
their indent (see the .markdown-body rule for the rationale). */
.md > ul > li:has(> input.task-checkbox:first-child) {
margin-left: -22px;
}
.md ul li:has(> input.task-checkbox:checked) > * {
color: var(--fg-muted);
}
.md ul li:has(> input.task-checkbox:checked) {
text-decoration: line-through;
text-decoration-color: var(--fg-faint);
}
/* House checkbox look (see .nl-check). Markdown task lists emit a bare
, so the box + check are drawn on the input itself rather than the
wrapped .nl-check markup — same visual language, "Tasks" green tone. */
.md input.task-checkbox,
.todo-item input.task-checkbox {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev-2);
position: relative;
cursor: pointer;
flex-shrink: 0;
margin: 0 9px 0 0;
transform: translateY(2px);
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.md input.task-checkbox:hover,
.todo-item input.task-checkbox:hover { border-color: var(--fg-muted); }
.md input.task-checkbox:focus-visible,
.todo-item input.task-checkbox:focus-visible {
outline: none;
border-color: var(--mem);
box-shadow: 0 0 0 3px var(--mem-soft);
}
.md input.task-checkbox:checked,
.todo-item input.task-checkbox:checked {
background: var(--mem);
border-color: var(--mem);
}
.md input.task-checkbox:checked::after,
.todo-item input.task-checkbox:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--bg-elev-2);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.md input.task-checkbox:disabled,
.todo-item input.task-checkbox:disabled { cursor: default; opacity: 0.7; }
.raw-md {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.55;
color: var(--fg);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
padding: 18px 20px;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
}
.edit-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
min-height: 50vh;
}
.edit-split.tall { min-height: 70vh; }
.md-editor {
width: 100%;
height: 100%;
min-height: 50vh;
border: 1px solid var(--border);
border-radius: 4px;
padding: 16px 18px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
resize: vertical;
background: var(--bg-elev);
color: var(--fg);
}
.md-editor:focus { outline: none; border-color: var(--accent); }
.md-preview {
border: 1px solid var(--border-soft);
border-radius: 4px;
padding: 16px 20px;
overflow: auto;
background: var(--bg-elev-2);
}
@media (max-width: 900px) {
.edit-split { grid-template-columns: 1fr; }
.md-editor { min-height: 320px; }
}
/* ─────────────── data table ─────────────── */
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: 20px;
gap: 12px;
flex-wrap: wrap;
}
.filter-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--fg);
background: var(--bg-elev);
border: 1px solid var(--border);
padding: 4px 8px;
border-radius: 4px;
}
.filter-chip .x {
color: var(--fg-faint);
cursor: pointer;
font-size: 14px;
}
.schema-preview {
display: inline-flex;
align-items: center;
gap: 5px;
padding-left: 8px;
border-left: 1px solid var(--border);
font-family: var(--font-mono);
}
.schema-preview .k {
font-size: 11px;
padding: 1px 5px;
border-radius: 3px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
color: var(--fg-muted);
}
.schema-preview .k.req { color: var(--fg); border-color: var(--border); }
.table-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.data-table-wrap {
border: 1px solid var(--border);
border-top: 0;
border-radius: 0 0 4px 4px;
overflow: auto;
max-width: 100%;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
background: var(--bg-elev-2);
}
.data-table th {
text-align: left;
padding: 10px 12px;
background: var(--bg-elev);
border-bottom: 1px solid var(--border);
color: var(--fg-muted);
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.05em;
cursor: pointer;
position: sticky;
top: 0;
white-space: nowrap;
}
.data-table th a, .data-table th a:hover {
color: inherit;
text-decoration: none;
}
.data-table th .th-inner {
display: flex;
align-items: baseline;
gap: 8px;
}
.data-table th .th-name {
color: var(--fg);
text-transform: lowercase;
font-size: 12.5px;
letter-spacing: 0;
}
.data-table th .th-type {
font-family: var(--font-mono);
color: var(--fg-faint);
font-size: 10px;
padding: 1px 5px;
background: var(--bg-elev-2);
border-radius: 3px;
}
.data-table th .th-sort {
margin-left: auto;
color: var(--fg-faint);
}
.data-table th.sorted { color: var(--accent); background: var(--accent-soft); }
.data-table th.sorted .th-sort { color: var(--accent); }
.data-table th.check-col { width: 32px; padding-left: 12px; }
.data-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--border-soft);
color: var(--fg);
vertical-align: top;
font-size: 13px;
}
.data-table tr:hover td { background: var(--bg-elev); }
.data-table tr.selected td { background: var(--accent-soft); }
.data-table td.check-col { width: 32px; }
.data-table td.key-cell {
color: var(--accent);
font-family: var(--font-mono);
font-size: 12.5px;
}
.data-table td.key-cell a {
color: inherit;
border-bottom: 0;
}
.data-table td.key-cell a:hover { color: var(--accent); }
.data-table td .cell-val.num {
font-family: var(--font-mono);
text-align: right;
display: inline-block;
min-width: 40px;
}
.data-table td .cell-val.mono { font-family: var(--font-mono); }
.data-table td .null {
color: var(--fg-faint);
font-family: var(--font-mono);
font-style: italic;
}
.cell-input {
width: 100%;
border: 1px solid var(--accent);
border-radius: 3px;
padding: 4px 7px;
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--bg-elev-2);
color: var(--fg-strong);
}
.cell-input:focus {
outline: none;
box-shadow: 0 0 0 2px var(--accent-soft);
}
input[type="checkbox"] {
accent-color: var(--accent);
width: 14px;
height: 14px;
cursor: pointer;
}
.table-footer {
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.table-footer .sep { color: var(--fg-faint); }
.table-footer .right { margin-left: auto; }
/* ─────────────── document page meta bar ─────────────── */
.doc-actions-top {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.doc-actions-top form { display: inline; margin: 0; padding: 0; }
.doc-meta-bar {
display: flex;
flex-wrap: wrap;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 0 0 28px;
padding: 0;
}
.doc-meta-bar .seg {
padding: 10px 16px;
border-right: 1px solid var(--border-soft);
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
}
.doc-meta-bar .seg:last-child { border-right: 0; }
.doc-meta-bar .seg .k {
color: var(--fg-faint);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.doc-meta-bar .seg .v { color: var(--fg); }
.doc-meta-bar .seg .ok { color: var(--mem); }
.doc-body { min-height: 50vh; }
.doc-footer {
margin-top: 36px;
padding-top: 16px;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-muted);
display: flex;
gap: 6px;
align-items: baseline;
flex-wrap: wrap;
}
.doc-footer .sep { color: var(--fg-faint); }
.doc-footer a { color: var(--accent); }
/* ─────────────── data row detail ─────────────── */
.row-detail {
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
}
.row-detail-item {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
padding: 14px 20px;
border-bottom: 1px solid var(--border-soft);
}
.row-detail-item:last-child { border-bottom: 0; }
.row-detail-key {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-mono);
}
.row-detail-key .name {
color: var(--fg);
font-weight: 500;
font-size: 13px;
}
.row-detail-key .type {
color: var(--fg-faint);
font-size: 11px;
}
.row-detail-val {
color: var(--fg-strong);
font-size: 14px;
font-family: var(--font-mono);
overflow-wrap: anywhere;
}
@media (max-width: 720px) {
.row-detail-item { grid-template-columns: 1fr; gap: 8px; }
}
/* ─────────────── search page ─────────────── */
.search-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
margin-top: 8px;
}
.search-input-wrap > svg, .search-input-wrap > .icon { color: var(--fg-muted); }
.search-input {
flex: 1;
border: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 18px;
color: var(--fg-strong);
padding: 0;
margin: 0;
}
.search-input::placeholder { color: var(--fg-faint); }
.search-input:focus { outline: none; }
.kbd {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 3px;
color: var(--fg-muted);
background: var(--bg-elev-2);
}
.search-filters {
display: flex;
gap: 6px;
margin: 18px 0 24px;
flex-wrap: wrap;
}
.filter-pill {
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--bg-elev);
color: var(--fg-muted);
cursor: pointer;
letter-spacing: 0.04em;
text-decoration: none;
}
.filter-pill:hover {
color: var(--fg-strong);
border-color: var(--fg-muted);
}
.filter-pill.on {
background: var(--fg-strong);
color: var(--bg);
border-color: var(--fg-strong);
}
.filter-pill.disabled {
opacity: 0.4;
pointer-events: none;
}
/* ── workspace todos ──────────────────────────────────────────────── */
.todo-doc {
margin-bottom: 16px;
}
.todo-doc-key {
display: inline-block;
font-size: 12px;
color: var(--fg-muted);
text-decoration: none;
margin-bottom: 4px;
border-bottom: 1px solid transparent;
}
.todo-doc-key:hover {
color: var(--accent);
border-bottom-color: currentColor;
}
.todo-list {
list-style: none;
margin: 0;
padding: 0;
}
.todo-item label {
display: flex;
align-items: flex-start;
cursor: pointer;
padding: 3px 0;
line-height: 1.5;
}
.todo-item.done > label > span {
color: var(--fg-muted);
text-decoration: line-through;
text-decoration-color: var(--fg-faint);
}
.search-results {
display: flex;
flex-direction: column;
gap: 28px;
}
.search-group-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.search-group-name {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--fg-strong);
font-weight: 500;
}
.search-group-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-faint);
}
.search-result {
padding: 12px 4px;
border-bottom: 1px dashed var(--border-soft);
cursor: pointer;
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
color: inherit;
}
.search-result:hover { background: var(--bg-elev); }
.search-result-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.search-result-head .key-name {
font-family: var(--font-mono);
color: var(--accent);
font-weight: 500;
font-size: 13px;
}
.search-result-meta {
font-family: var(--font-mono);
color: var(--fg-faint);
font-size: 11px;
}
.search-result-snippet {
color: var(--fg-muted);
font-size: 13px;
line-height: 1.5;
}
.search-result-snippet mark {
background: var(--accent-soft);
color: var(--fg-strong);
padding: 0 1px;
border-radius: 2px;
}
.search-empty {
padding: 60px 20px;
text-align: center;
}
.search-empty-title {
font-family: var(--font-sans);
font-size: 20px;
color: var(--fg);
margin-bottom: 12px;
}
.search-empty-sub {
color: var(--fg-muted);
font-size: 12px;
font-family: var(--font-mono);
display: inline-flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
letter-spacing: 0.08em;
}
.search-empty-sub .example {
background: var(--bg-elev);
border: 1px solid var(--border-soft);
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
color: var(--accent);
letter-spacing: 0;
text-decoration: none;
}
.search-empty-sub .example:hover { background: var(--accent-soft); }
/* ─────────────── use-case picker grid ─────────────── */
.usecase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 900px) {
.usecase-grid { grid-template-columns: 1fr; }
}
.uc-card {
text-align: left;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
padding: 18px 16px 16px;
cursor: pointer;
font-family: inherit;
color: inherit;
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
transition: border-color .12s ease, transform .12s ease;
}
.uc-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.uc-card.selected { border-color: var(--accent); background: var(--bg-elev-2); }
.uc-card-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 4px;
}
.uc-card.uc-card-notes .uc-card-icon { color: var(--accent); background: var(--accent-soft); }
.uc-card.uc-card-tasks .uc-card-icon { color: var(--mem); background: var(--mem-soft); }
.uc-card.uc-card-data .uc-card-icon { color: var(--tbl); background: var(--tbl-soft); }
.uc-card-title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--fg-strong);
}
.uc-card-desc {
font-size: 12.5px;
color: var(--fg-muted);
line-height: 1.5;
min-height: 4em;
}
.uc-card-examples {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 8px;
border-top: 1px dashed var(--border-soft);
}
.uc-card-examples span {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--fg-faint);
}
.uc-card-examples span::before { content: "› "; color: var(--fg-faint); }
/* selected use-case banner on step 2 */
.uc-summary {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
margin-bottom: 20px;
}
.uc-summary .icon { color: var(--accent); flex-shrink: 0; }
.uc-summary-title {
font-size: 14px;
font-weight: 500;
color: var(--fg-strong);
}
.uc-summary-sub {
font-size: 11.5px;
color: var(--fg-muted);
}
.uc-summary .right { margin-left: auto; }
/* ─────────────── form fields (modal-style) ─────────────── */
.form-field {
margin-bottom: 18px;
display: block;
}
.input-with-action {
display: flex;
gap: 8px;
align-items: stretch;
}
.input-with-action .form-input { flex: 1; }
.form-field > label, .form-field .field-label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--fg-muted);
margin-bottom: 6px;
text-transform: uppercase;
}
.form-field .opt {
color: var(--fg-faint);
text-transform: none;
letter-spacing: 0;
font-size: 11px;
margin-left: 4px;
}
.form-input {
width: 100%;
height: 36px;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0 12px;
background: var(--bg-elev-2);
color: var(--fg-strong);
font-family: var(--font-sans);
font-size: 14px;
}
.form-input.mono { font-family: var(--font-mono); font-size: 13px; }
.form-input.small { height: 28px; font-size: 12px; padding: 0 8px; }
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.form-input {
height: auto;
min-height: 80px;
padding: 9px 12px;
resize: vertical;
}
select.form-input {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
background-position: right 14px top 16px, right 9px top 16px;
background-size: 5px 5px;
background-repeat: no-repeat;
padding-right: 28px;
}
.form-hint {
margin-top: 5px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-faint);
}
.form-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 22px;
flex-wrap: wrap;
}
.form-actions .spacer { flex: 1; }
/* ─────────────── editor formatting toolbar ─────────────── */
.editor-toolbar {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.editor-tool {
height: 26px;
min-width: 26px;
padding: 0 8px;
border: 1px solid var(--border);
background: var(--bg-elev);
color: var(--fg-muted);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.editor-tool:hover { color: var(--fg-strong); border-color: var(--fg-muted); }
.editor-tool.on { color: var(--fg-strong); border-color: var(--accent); background: var(--accent-soft); }
.editor-modes { display: inline-flex; gap: 4px; margin-left: auto; }
/* Editor split: code on the left, live server-rendered preview on the right.
The mode toggle on the toolbar flips which pane(s) show. */
.editor-split { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.editor-split .preview-pane { display: none; }
.editor-split[data-mode="split"] { grid-template-columns: 1fr 1fr; }
.editor-split[data-mode="split"] .preview-pane { display: block; }
.editor-split[data-mode="preview"] .editor-pane { display: none; }
.editor-split[data-mode="preview"] { grid-template-columns: 1fr; }
.editor-split[data-mode="preview"] .preview-pane { display: block; }
.preview-pane {
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
padding: 14px 18px;
min-height: 380px;
overflow: auto;
}
.preview-pane .markdown-body { margin: 0; }
@media (max-width: 720px) {
/* No room for two columns on a phone — split collapses to stacked. */
.editor-split[data-mode="split"] { grid-template-columns: 1fr; }
}
/* ─────────────── schema builder ─────────────── */
.schema-builder-wrap {
border-top: 1px dashed var(--border);
padding-top: 18px;
margin-top: 6px;
}
.schema-toggle {
width: 100%;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
padding: 9px 12px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg);
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.schema-toggle .hint {
margin-left: auto;
color: var(--fg-faint);
}
.schema-fields {
margin-top: 12px;
padding: 12px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: 4px;
}
.sf-head, .schema-row {
display: grid;
grid-template-columns: 1.4fr 1fr 90px 32px;
gap: 8px;
align-items: center;
padding: 4px 0;
}
.sf-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-faint);
padding-bottom: 8px;
border-bottom: 1px dashed var(--border-soft);
margin-bottom: 6px;
}
.schema-row .schema-row-required {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
white-space: nowrap;
}
.schema-row [data-remove] {
font-size: 0;
background: var(--bg-elev-2);
color: var(--fg-faint);
border: 1px solid var(--border-soft);
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
}
.schema-row [data-remove]::before {
content: "✕";
font-size: 12px;
font-family: var(--font-mono);
}
.schema-row [data-remove]:hover { color: var(--accent); border-color: var(--accent); }
.schema-pane[hidden] { display: none; }
.schema-pane textarea.form-input {
min-height: 180px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.5;
}
.tabs {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin: 4px 0 14px;
background: var(--bg-elev-2);
}
.tabs .tab {
background: transparent;
border: 0;
padding: 0 14px;
height: 28px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-muted);
cursor: pointer;
border-right: 1px solid var(--border);
}
.tabs .tab:last-child { border-right: 0; }
.tabs .tab.active, .tabs .tab[aria-selected="true"] {
background: var(--fg-strong);
color: var(--bg);
}
/* width-aware new-collection form */
.collection-form { display: block; max-width: 460px; }
.collection-form.is-table-mode {
display: grid;
grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
column-gap: 32px;
align-items: start;
max-width: none;
}
.collection-form.is-table-mode > * { grid-column: 1; }
.collection-form.is-table-mode > .schema-builder-wrap {
grid-column: 2;
grid-row: 1 / span 100;
margin: 0;
border-top: 0;
padding-top: 0;
align-self: start;
}
@media (max-width: 760px) {
.collection-form.is-table-mode {
display: block;
max-width: 460px;
}
.collection-form.is-table-mode > .schema-builder-wrap {
grid-row: auto;
border-top: 1px dashed var(--border);
padding-top: 18px;
}
}
/* ─────────────── onboarding ─────────────── */
.onboarding-pick { margin-top: 36px; }
.onboarding-pick-head {
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.onboarding-pick-sub {
color: var(--fg-muted);
font-size: 13px;
}
.onboarding-cta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 20px;
}
.onboarding-mcp {
margin-top: 36px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev);
padding: 16px 20px;
font-family: var(--font-mono);
}
.omcp-row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed var(--border-soft);
font-size: 12.5px;
}
.omcp-row:last-child { border-bottom: 0; }
.omcp-row .k {
color: var(--fg-faint);
width: 110px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.omcp-row .v {
color: var(--fg-strong);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.omcp-row .v.link {
color: var(--accent);
cursor: pointer;
}
.omcp-row .v.link:hover { text-decoration: underline; }
/* ─────────────── card / kv / flash / etc ─────────────── */
.card {
border: 1px solid var(--border);
border-radius: 4px;
padding: 20px 22px;
margin: 16px 0;
background: var(--bg-elev);
}
.card.highlight { border-color: var(--accent); }
.card h2 {
margin-top: 0;
font-size: 1.05rem;
font-weight: 600;
}
.card h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.card .plan-label {
font-family: var(--font-mono);
font-size: 1.4rem;
letter-spacing: -0.01em;
margin: 4px 0 12px;
color: var(--fg-strong);
}
.kv {
display: grid;
grid-template-columns: 120px 1fr;
gap: 6px 16px;
margin: 0;
}
.kv dt {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-faint);
}
.kv dd {
margin: 0;
font-family: var(--font-mono);
color: var(--fg);
font-size: 13px;
}
.flash {
border: 1px solid var(--border);
background: var(--bg-elev);
padding: 10px 14px;
border-radius: 4px;
margin-bottom: 18px;
font-size: 13px;
}
.flash.error { border-color: var(--danger); color: var(--danger); }
.flash code {
font-family: var(--font-mono);
background: var(--tag-bg);
padding: 1px 5px;
border-radius: 3px;
}
.flash .inline { margin-left: 8px; }
.flash form.inline { display: inline; }
.tag {
display: inline-block;
font-family: var(--font-mono);
font-size: .75rem;
padding: 1px 7px;
border-radius: 999px;
background: var(--tag-bg);
color: var(--fg-muted);
letter-spacing: 0.02em;
}
.tag.active { color: var(--fg); }
.tag.muted { opacity: .7; }
/* ─────────────── danger zone ─────────────── */
.danger {
margin-top: 40px;
border-top: 1px dashed var(--border);
padding-top: 20px;
}
.danger summary {
cursor: pointer;
padding: 6px 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted);
}
.danger summary:hover { color: var(--accent); }
.danger form { margin-top: 12px; }
/* ─────────────── btn (kept for compatibility) ─────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
height: 30px;
font: inherit;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-border);
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.btn.ghost {
background: var(--bg-elev);
color: var(--fg);
border-color: var(--border);
}
.btn.ghost:hover {
background: var(--bg-elev);
border-color: var(--fg-muted);
color: var(--fg-strong);
}
.btn.small { height: 24px; padding: 0 8px; font-size: 12px; }
.btn.danger {
background: transparent;
color: var(--danger);
border-color: var(--danger);
}
.btn.danger:hover {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
.btn:disabled, .btn[disabled] {
opacity: .55;
cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover {
background: var(--btn-bg);
color: var(--btn-fg);
border-color: var(--btn-border);
}
.linklike {
background: none;
border: 0;
padding: 0;
font: inherit;
cursor: pointer;
color: var(--fg-muted);
font-family: var(--font-mono);
font-size: 12px;
}
.linklike:hover { color: var(--accent); }
.linklike.danger { color: var(--danger); }
.linklike.danger:hover { color: var(--danger); opacity: .8; }
/* Auth / status / forgot / verify / signup */
.form-card {
max-width: 420px;
margin: 48px auto;
}
.form-card h1 {
font-size: 28px;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.form-card .sub {
color: var(--fg-muted);
font-size: 14px;
margin-bottom: 24px;
}
.form-card form label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--fg-muted);
margin: 14px 0 6px;
text-transform: uppercase;
}
.form-card form input[type="email"],
.form-card form input[type="password"],
.form-card form input[type="text"] {
width: 100%;
height: 36px;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0 12px;
background: var(--bg-elev-2);
color: var(--fg-strong);
font: inherit;
font-size: 14px;
}
.form-card form input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-card form .form-actions { margin-top: 22px; }
.form-card .alt-link {
margin-top: 20px;
font-size: 13px;
color: var(--fg-muted);
text-align: center;
}
.form-card .alt-link a {
color: var(--accent);
border-bottom: 1px solid currentColor;
}
/* Prose (connect, etc.) */
.prose {
max-width: 760px;
font-size: 14px;
line-height: 1.65;
}
.prose h2, .prose h3 {
margin: 1.5em 0 .5em;
font-family: var(--font-sans);
font-weight: 600;
}
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 17px; }
.prose p { margin: .7em 0; }
.prose code {
font-family: var(--font-mono);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
padding: 1px 5px;
border-radius: 3px;
font-size: .9em;
}
.prose pre.code, .prose pre.json {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px 16px;
overflow: auto;
font-size: 12.5px;
line-height: 1.55;
font-family: var(--font-mono);
margin: .75em 0;
}
.prose pre.code code, .prose pre.json code {
background: transparent;
border: 0;
padding: 0;
}
.prose ul.tool-list { padding-left: 18px; margin: .5em 0; }
.prose ul.tool-list li { margin: 4px 0; color: var(--fg-muted); }
.prose ul.tool-list code { color: var(--fg); }
/* ─────────────── modal ─────────────── */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: grid;
place-items: center;
z-index: 100;
animation: fadeIn 0.12s ease-out;
padding: 24px;
}
.modal-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
width: 760px;
max-width: 100%;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
animation: slideUp 0.18s ease-out;
}
@keyframes slideUp {
from { transform: translateY(8px); opacity: 0.6; }
to { transform: none; opacity: 1; }
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px 18px;
border-bottom: 1px solid var(--border);
gap: 12px;
}
.modal-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--fg-faint);
margin-bottom: 4px;
text-transform: uppercase;
}
.modal-title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
color: var(--fg-strong);
margin: 0;
letter-spacing: -0.015em;
}
.modal-body {
padding: 22px 26px;
overflow-y: auto;
}
.modal-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-top: 1px solid var(--border);
background: var(--bg-elev);
}
.modal-footer .spacer { flex: 1; }
body.modal-open { overflow: hidden; }
/* uc-card as button/label inside the modal — pure radio-driven select state */
.uc-card { position: relative; }
.uc-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.uc-card:has(input[type="radio"]:checked) {
border-color: var(--accent);
background: var(--bg-elev-2);
box-shadow: 0 0 0 1px var(--accent) inset;
}
/* Global scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
/* ─────────────── markdown body shared (document_view) ─────────────── */
.markdown-body {
font-size: 14.5px;
line-height: 1.65;
color: var(--fg);
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
font-family: var(--font-sans);
color: var(--fg-strong);
letter-spacing: -0.01em;
margin: 28px 0 10px;
}
.markdown-body h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 0; }
.markdown-body h2 {
font-size: 22px;
font-weight: 600;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.markdown-body h3 { font-size: 17px; font-weight: 600; }
.markdown-body p { margin: 10px 0; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; margin: 10px 0; }
.markdown-body li { margin: 4px 0; }
.markdown-body code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
padding: 1px 5px;
border-radius: 3px;
}
.markdown-body pre {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 4px;
padding: 14px 16px;
overflow-x: auto;
font-size: 12.5px;
line-height: 1.55;
}
.markdown-body pre code { background: none; padding: 0; border: 0; }
.markdown-body blockquote {
border-left: 3px solid var(--accent);
margin: 10px 0;
padding: 4px 14px;
color: var(--fg-muted);
background: var(--accent-soft);
border-radius: 0 4px 4px 0;
}
.markdown-body a {
color: var(--accent);
border-bottom: 1px solid currentColor;
}
.markdown-body hr {
border: 0;
border-top: 1px solid var(--border);
margin: 24px 0;
}
.markdown-body table {
border-collapse: collapse;
margin: 12px 0;
font-size: .92rem;
}
.markdown-body table th, .markdown-body table td {
border: 1px solid var(--border);
padding: 6px 10px;
}
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body ul li:has(> input.task-checkbox:first-child) {
list-style: none;
padding-left: 0;
}
/* The negative margin pulls only the TOP-LEVEL task list flush with body
text; nested task lists keep their parent's indent so subtasks read as
nested (the parent ul's 22px padding is the indent step). */
.markdown-body > ul > li:has(> input.task-checkbox:first-child) {
margin-left: -22px;
}
.markdown-body input.task-checkbox {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-elev-2);
position: relative;
cursor: pointer;
margin: 0 9px 0 0;
transform: translateY(2px);
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.markdown-body input.task-checkbox:hover { border-color: var(--fg-muted); }
.markdown-body input.task-checkbox:focus-visible {
outline: none;
border-color: var(--mem);
box-shadow: 0 0 0 3px var(--mem-soft);
}
.markdown-body input.task-checkbox:checked {
background: var(--mem);
border-color: var(--mem);
}
.markdown-body input.task-checkbox:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--bg-elev-2);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.markdown-body input.task-checkbox:disabled { cursor: default; opacity: .7; }
/* mermaid diagram block — rendered to SVG by app.js with a token-derived
theme. Pre-render the raw source shows as a readable centered fallback. */
.markdown-body pre.mermaid {
background: none;
border: 0;
padding: 0;
margin: 16px 0;
text-align: center;
overflow-x: auto;
white-space: pre;
color: var(--fg-muted);
line-height: 1.4;
}
/* once rendered, frame it like the rest of the site's content cards */
.markdown-body pre.mermaid[data-processed] {
white-space: normal;
color: inherit;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: 4px;
padding: 22px 16px;
}
.markdown-body pre.mermaid svg { max-width: 100%; height: auto; }
/* honour the one-radius (4px) rule on rectangular nodes */
.markdown-body pre.mermaid .node rect { rx: 4px; ry: 4px; }
/* edge labels as mono micro-labels on the card, not grey chips */
.markdown-body pre.mermaid .edgeLabel,
.markdown-body pre.mermaid .edgeLabel p {
background: var(--bg-elev) !important;
color: var(--fg-muted) !important;
font-family: var(--font-mono);
font-size: 11px;
}
/* fenced code block wrapper — hosts the hover copy button (see render.go) */
.code-block { position: relative; }
.code-block > pre { margin: 12px 0; }
.code-block .code-copy {
position: absolute; top: 8px; right: 8px;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0;
border: 1px solid var(--border); border-radius: 4px;
background: var(--bg-elev); color: var(--fg-muted);
cursor: pointer; opacity: .5;
transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.code-block:hover .code-copy,
.code-block .code-copy:focus-visible { opacity: 1; }
.code-block .code-copy:hover { color: var(--fg-strong); border-color: var(--fg-muted); }
.code-block .code-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.code-block .code-copy.copied { color: var(--mem); border-color: var(--mem); opacity: 1; }
/* ─────────────── JSON / code syntax highlight ─────────────── */
:root[data-theme="light"] {
--syn-key: #2f6b8c;
--syn-string: #5a7a3e;
--syn-number: #b8862e;
--syn-const: #8a3ab9;
--syn-punct: var(--fg-muted);
--syn-err: var(--danger);
}
:root[data-theme="dark"] {
--syn-key: #78b5d4;
--syn-string: #9fb87a;
--syn-number: #d9a852;
--syn-const: #c792ea;
--syn-punct: var(--fg-muted);
--syn-err: var(--danger);
}
:root:not([data-theme]) {
--syn-key: #1f5fb2;
--syn-string: #2a7a3d;
--syn-number: #b06800;
--syn-const: #8a3ab9;
--syn-punct: var(--fg-muted);
--syn-err: var(--danger);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--syn-key: #82aaff;
--syn-string: #c3e88d;
--syn-number: #f7b76b;
--syn-const: #c792ea;
--syn-punct: var(--fg-muted);
--syn-err: var(--danger);
}
}
pre .nt, pre .na { color: var(--syn-key); }
pre .s, pre .s1, pre .s2, pre .sb,
pre .sc, pre .se, pre .si, pre .sd { color: var(--syn-string); }
pre .m, pre .mf, pre .mh, pre .mi,
pre .mo, pre .il { color: var(--syn-number); }
pre .kc, pre .k, pre .kt, pre .kd, pre .kn, pre .kr, pre .kp { color: var(--syn-const); font-weight: 500; }
pre .nb, pre .nf, pre .nv, pre .vg, pre .vi { color: var(--syn-key); }
pre .o, pre .ow { color: var(--syn-const); }
pre .c, pre .c1, pre .cm, pre .cs, pre .cp { color: var(--fg-muted); font-style: italic; }
pre .p { color: var(--syn-punct); }
pre .err { color: var(--syn-err); text-decoration: underline dotted; }
/* ─────────────── unauth / plain shell (landing, login, signup, …) ───────────────
The simple topbar+container+footer layout used when a user is not logged
in or on the public landing page. The app-shell overrides win via the
more-specific `.shell .topbar` selector. */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
border-bottom: 1px solid var(--line);
background: var(--bg);
position: sticky;
top: 0;
z-index: 10;
}
.brand {
display: inline-flex;
align-items: center;
border-bottom: none;
line-height: 0;
}
.brand-wordmark { display: block; height: 22px; width: auto; }
.footer-wordmark { height: 26px; margin-bottom: 6px; }
.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a, .topbar nav .linklike {
font-size: .92rem;
color: var(--fg-muted);
border-bottom: none;
font-family: var(--font-sans);
}
.topbar nav a:hover, .topbar nav .linklike:hover { color: var(--fg); }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 28px 24px 80px;
}
.footer {
border-top: 1px solid var(--line);
text-align: center;
font-size: .82rem;
color: var(--fg-muted);
padding: 18px;
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.footer .footer-links { display: inline-flex; gap: 14px; }
.footer .footer-links a {
color: var(--fg-muted);
border-bottom: 0;
}
.footer .footer-links a:hover { color: var(--fg); }
.hero { padding: 64px 0 32px; text-align: center; }
.hero h1 {
font-family: var(--font-mono);
font-size: 2.4rem;
letter-spacing: -0.03em;
}
.hero .lede {
max-width: 560px;
margin: 1rem auto;
color: var(--fg-muted);
font-size: 1.05rem;
}
.cta { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
/* Shared `.features` 3-up grid (unauth landing + marketing land). The
app-side dashboard uses different markup so it doesn't reach this rule. */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 48px 0;
}
.features > div {
border: 1px solid var(--line);
border-radius: 4px;
padding: 18px 20px;
background: var(--bg-elev);
}
.features h3 { margin: 0 0 6px; font-family: var(--font-mono); }
.features p { color: var(--fg-muted); font-size: .92rem; margin: 0; }
@media (max-width: 720px) {
.features { grid-template-columns: 1fr; }
}
/* Auth-page forms use the same surface as logged-in form-card. */
.form-card form input[type="email"],
.form-card form input[type="password"],
.form-card form input[type="text"],
form.inline-form input[type="text"],
form.inline-form input[type="email"] {
background: var(--bg-elev-2);
}
/* ─────────────── marketing site ─────────────── */
body.marketing { font-family: var(--font-sans); }
body.marketing main { display: block; }
.marketing-hero {
padding: 96px 24px 56px;
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.marketing-hero h1 {
font-family: var(--font-mono);
font-size: clamp(2.2rem, 5vw, 3.6rem);
letter-spacing: -0.035em;
line-height: 1.05;
}
.marketing-hero .lede {
font-size: 1.1rem;
max-width: 620px;
margin: 24px auto;
color: var(--fg-muted);
}
.marketing-hero .cta {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 28px;
flex-wrap: wrap;
}
/* Promo video — click-to-load YouTube facade on the landing page. */
.promo {
max-width: 920px;
margin: 8px auto 56px;
padding: 0 24px;
}
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--bg-elev);
box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .5);
}
.video-frame iframe,
.video-frame .yt-facade {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.yt-facade {
padding: 0;
cursor: pointer;
background: #000;
display: grid;
place-items: center;
}
.yt-facade img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease, opacity .2s ease;
}
.yt-facade:hover img { transform: scale(1.03); opacity: .92; }
.yt-play {
position: relative;
z-index: 1;
display: inline-flex;
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
transition: transform .15s ease;
}
.yt-play svg { width: 74px; height: 52px; }
.yt-facade:hover .yt-play { transform: scale(1.08); }
.yt-facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band {
background: var(--bg-elev);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 56px 24px;
}
.band-inner { max-width: 920px; margin: 0 auto; }
.band-inner h2 {
font-family: var(--font-mono);
font-size: 1.6rem;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.band-inner h3 { margin-top: 28px; margin-bottom: 6px; font-size: 1rem; }
.band-inner p { color: var(--fg-muted); margin-top: 4px; }
.band.howto ol { padding-left: 20px; font-size: 1rem; }
.band.howto ol li { margin: 10px 0; color: var(--fg-muted); }
.band.howto ol li code {
display: inline-block;
margin-top: 6px;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 4px;
font-size: .82rem;
white-space: pre-wrap;
font-family: var(--font-mono);
}
.use-cases {
margin: 0;
padding: 0;
list-style: none;
}
.use-cases li {
padding: 14px 0;
border-bottom: 1px solid var(--line);
color: var(--fg-muted);
}
.use-cases li:last-child { border-bottom: 0; }
.use-cases li strong { color: var(--fg); margin-right: 6px; }
body.marketing .features {
max-width: 920px;
margin: 56px auto;
padding: 0 24px;
}
.marketing-page-head {
text-align: center;
max-width: 760px;
margin: 64px auto 32px;
padding: 0 24px;
border-bottom: 0;
}
.marketing-page-head h1 {
font-family: var(--font-mono);
font-size: 2.4rem;
letter-spacing: -0.03em;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
max-width: 980px;
margin: 0 auto 56px;
padding: 0 24px;
}
.pricing-grid.two-up {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 660px;
margin: 0 0 56px;
padding: 0;
}
@media (max-width: 820px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
.pricing-grid.two-up { grid-template-columns: 1fr; max-width: 420px; }
}
.pricing-card {
position: relative;
border: 1px solid var(--border);
border-radius: 4px;
padding: 28px 24px;
background: var(--bg-elev);
display: flex;
flex-direction: column;
}
.pricing-card.featured {
border-color: var(--accent);
background: var(--bg-elev-2);
}
.pricing-card .badge {
position: absolute;
top: -10px;
right: 14px;
background: var(--accent);
color: var(--accent-ink);
font-family: var(--font-mono);
font-size: .7rem;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pricing-card h2 {
margin: 0;
font-family: var(--font-mono);
font-size: 1.3rem;
}
.pricing-card .price {
margin: 14px 0 4px;
font-family: var(--font-mono);
}
.pricing-card .price .amount {
font-size: 2.2rem;
letter-spacing: -0.02em;
}
.pricing-card .price .period {
color: var(--fg-muted);
margin-left: 6px;
font-size: .9rem;
}
.pricing-card .tagline {
color: var(--fg-muted);
font-size: .9rem;
margin: 12px 0;
min-height: 1.35em;
}
.pricing-card .price-sub {
margin: 6px 0 0;
text-align: center;
font-size: .82rem;
color: var(--fg-muted);
}
.pricing-card .plan-features {
display: block;
list-style: none;
padding: 0;
margin: 16px 0 24px;
flex: 1;
}
.pricing-card .plan-features li {
padding: 8px 0;
border-bottom: 1px solid var(--line);
font-size: .92rem;
color: var(--fg);
}
.pricing-card .plan-features li:last-child { border-bottom: 0; }
.pricing-card .btn { width: 100%; justify-content: center; }
.marketing-footer {
border-top: 1px solid var(--line);
background: var(--bg);
padding: 48px 24px 24px;
}
.footer-inner {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
max-width: 920px;
margin: 0 auto 32px;
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-inner h4 {
font-family: var(--font-mono);
font-size: .82rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-muted);
margin: 0 0 10px;
}
.footer-inner a {
display: block;
font-size: .92rem;
color: var(--fg);
border-bottom: 0;
margin: 4px 0;
}
.footer-inner a:hover { color: var(--fg-muted); }
.footer-bottom {
text-align: center;
padding-top: 16px;
border-top: 1px solid var(--line);
}
/* Legal */
.legal-prose {
max-width: 760px;
margin: 0 auto 80px;
padding: 0 24px;
font-size: .98rem;
line-height: 1.65;
color: var(--fg);
}
.legal-prose h2 {
font-family: var(--font-mono);
font-size: 1.15rem;
letter-spacing: -0.01em;
margin: 44px 0 12px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.legal-prose h2:first-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.legal-prose h3 {
font-size: 1rem;
font-weight: 600;
margin: 24px 0 8px;
color: var(--fg);
}
.legal-prose p { margin: 10px 0; }
.legal-prose ul, .legal-prose ol { padding-left: 22px; margin: 10px 0; }
.legal-prose li { margin: 6px 0; }
.legal-prose code {
font-family: var(--font-mono);
background: var(--bg-elev);
padding: 1px 5px;
border-radius: 4px;
font-size: .88em;
}
.legal-prose a { color: var(--accent); }
.legal-table {
width: 100%;
border-collapse: collapse;
margin: 14px 0 20px;
font-size: .9rem;
}
.legal-table th, .legal-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.legal-table th {
font-family: var(--font-mono);
font-weight: 600;
color: var(--fg-muted);
background: var(--bg-elev);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ─────────────── documentation site (docs.nolyo.net) ───────────────
Shares the bare :root palette with marketing/legal (black-on-white, no
data-theme). A fixed sidebar nav on the left, prose + doc components on
the right. Reuses .prose, .btn, .topbar from above. */
body.docs { font-family: var(--font-sans); }
.docs-topbar { gap: 16px; }
.docs-topbar-left { display: inline-flex; align-items: center; gap: 10px; }
.docs-badge {
font-family: var(--font-mono);
font-size: .68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 1px 8px;
}
.docs-shell {
display: grid;
grid-template-columns: 248px minmax(0, 1fr);
gap: 0;
max-width: 1180px;
margin: 0 auto;
align-items: start;
}
.docs-sidebar {
position: sticky;
top: var(--topbar-h);
align-self: start;
height: calc(100vh - var(--topbar-h));
overflow-y: auto;
padding: 28px 20px 40px;
border-right: 1px solid var(--line);
}
.docs-nav-group { margin-bottom: 22px; }
.docs-nav-group h4 {
font-family: var(--font-mono);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--fg-faint);
margin: 0 0 8px;
padding-left: 10px;
}
.docs-nav-group a {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 4px;
color: var(--fg-muted);
font-size: .92rem;
border-bottom: 0;
line-height: 1.35;
}
.docs-nav-group a:hover { color: var(--fg); background: var(--bg-elev); }
.docs-nav-group a.active {
color: var(--fg-strong);
background: var(--bg-elev);
box-shadow: inset 2px 0 0 var(--accent);
}
.docs-nav-tag {
font-family: var(--font-mono);
font-size: .6rem;
letter-spacing: 0.05em;
color: var(--fg-faint);
border: 1px solid var(--border-soft);
border-radius: 3px;
padding: 0 4px;
}
.docs-main { min-width: 0; padding: 40px 48px 64px; }
.docs-article { max-width: 760px; }
.docs-head { margin-bottom: 28px; }
.docs-eyebrow {
font-family: var(--font-mono);
font-size: .76rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin: 0 0 8px;
}
.docs-head h1 {
font-family: var(--font-mono);
font-size: 2rem;
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0;
}
.docs-lede {
margin: 14px 0 0;
color: var(--fg-muted);
font-size: 1.08rem;
line-height: 1.55;
max-width: 640px;
}
/* Prose tuning on top of the shared .prose rules. */
.docs-prose { font-size: 15px; }
.docs-prose h2 {
font-family: var(--font-mono);
letter-spacing: -0.01em;
font-size: 1.25rem;
margin-top: 2em;
padding-top: 1em;
border-top: 1px solid var(--line);
}
.docs-prose a { color: var(--accent); border-bottom: 1px solid var(--border); }
.docs-prose a:hover { border-bottom-color: currentColor; }
.docs-prose blockquote.docs-quote {
margin: 1em 0;
padding: 12px 16px;
border-left: 3px solid var(--accent);
background: var(--bg-elev);
border-radius: 0 4px 4px 0;
color: var(--fg);
font-style: normal;
}
.docs-prose blockquote.docs-quote code { background: var(--bg); }
/* Numbered step list. */
ol.docs-steps {
list-style: none;
counter-reset: step;
padding: 0;
margin: 24px 0;
}
ol.docs-steps > li {
position: relative;
counter-increment: step;
padding: 0 0 24px 52px;
margin: 0;
}
ol.docs-steps > li::before {
content: counter(step);
position: absolute;
left: 0;
top: -2px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: .95rem;
color: var(--accent-fg);
background: var(--accent);
border-radius: 999px;
}
ol.docs-steps > li:not(:last-child)::after {
content: "";
position: absolute;
left: 16px;
top: 38px;
bottom: 6px;
width: 1px;
background: var(--line);
}
ol.docs-steps > li > h3 {
margin: 4px 0 6px;
font-size: 1.05rem;
font-weight: 600;
}
ol.docs-steps > li > h3:first-child { margin-top: 4px; }
/* Simple ordered "flow" list (round-trip). */
ol.docs-flow {
padding-left: 20px;
margin: 16px 0;
}
ol.docs-flow li { margin: 8px 0; color: var(--fg-muted); }
ol.docs-flow li strong { color: var(--fg); }
/* Callouts. */
.docs-callout {
display: flex;
flex-direction: column;
gap: 4px;
margin: 20px 0;
padding: 14px 16px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-left: 3px solid var(--mem);
border-radius: 4px;
}
.docs-callout.warn { border-left-color: var(--warn); }
.docs-callout p { margin: 0; color: var(--fg-muted); font-size: .95em; }
.docs-callout-label {
font-family: var(--font-mono);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg);
}
/* Card grids (next-steps, two-up explainers). */
.docs-grid {
display: grid;
gap: 14px;
margin: 18px 0;
}
.docs-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-card {
border: 1px solid var(--border);
border-radius: 4px;
padding: 16px 18px;
background: var(--bg-elev);
}
.docs-card h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
.docs-card p { margin: 0; color: var(--fg-muted); font-size: .92rem; line-height: 1.5; }
a.docs-card.link { display: block; border-bottom: 1px solid var(--border); transition: border-color .12s, background .12s; }
a.docs-card.link:hover { border-color: var(--accent); background: var(--bg-elev-2); }
a.docs-card.link h3 { color: var(--accent); }
.docs-card-glyph {
font-family: var(--font-mono);
font-size: 1.3rem;
color: var(--accent);
margin-bottom: 6px;
}
/* Definition list of connector fields. */
dl.docs-fields {
margin: 18px 0;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
dl.docs-fields dt {
font-family: var(--font-mono);
font-size: .82rem;
color: var(--fg);
background: var(--bg-elev);
padding: 8px 14px;
border-top: 1px solid var(--border);
}
dl.docs-fields dt:first-child { border-top: 0; }
dl.docs-fields dd { margin: 0; padding: 8px 14px 12px; color: var(--fg-muted); font-size: .92rem; }
.docs-kbd {
font-family: var(--font-mono);
font-size: .8em;
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
padding: 0 6px;
background: var(--bg-elev);
color: var(--fg);
}
/* MCP tools reference table. */
table.docs-tools {
width: 100%;
border-collapse: collapse;
margin: 8px 0 20px;
font-size: .92rem;
}
table.docs-tools td {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
table.docs-tools td:first-child { width: 200px; white-space: nowrap; }
table.docs-tools td:first-child code { color: var(--fg); }
table.docs-tools td:last-child { color: var(--fg-muted); }
/* ── Mock "Add custom connector" dialog (Claude Desktop guide) ── */
.docs-mock-figure { margin: 22px 0; }
.docs-mock-figure figcaption {
margin-top: 10px;
text-align: center;
font-size: .85rem;
color: var(--fg-muted);
}
.mock-window {
max-width: 460px;
margin: 0 auto;
background: #2c2b28;
color: #ECE9E3;
border: 1px solid #3a3935;
border-radius: 14px;
padding: 22px 22px 18px;
box-shadow: 0 18px 50px -16px rgba(0,0,0,.6);
font-family: var(--font-sans);
}
.mock-window-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.mock-title { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mock-beta {
font-size: .62rem;
letter-spacing: 0.06em;
font-weight: 600;
color: #b8b4ab;
border: 1px solid #54524c;
border-radius: 5px;
padding: 1px 5px;
}
.mock-close { color: #b8b4ab; font-size: 1.2rem; line-height: 1; }
.mock-help { font-size: .82rem; color: #b8b4ab; line-height: 1.45; margin: 0 0 14px; }
.mock-link { color: #8aa9d6; }
.mock-field { display: block; margin-bottom: 10px; }
.mock-field-label { display: block; font-size: .72rem; color: #98948b; margin: 0 0 4px; }
.mock-input {
display: block;
background: #232220;
border: 1px solid #403e39;
border-radius: 8px;
padding: 9px 12px;
font-size: .85rem;
color: #ECE9E3;
}
.mock-input.mono { font-family: var(--font-mono); font-size: .78rem; word-break: break-all; }
.mock-input.placeholder { color: #6e6b64; }
.mock-advanced { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: #cbc7be; margin: 14px 0 10px; }
.mock-chevron { color: #98948b; }
.mock-fine { font-size: .72rem; color: #807c74; margin: 12px 0 14px; line-height: 1.4; }
.mock-actions { display: flex; justify-content: flex-end; gap: 10px; }
.mock-btn {
display: inline-block;
font-size: .85rem;
font-weight: 500;
border-radius: 8px;
padding: 7px 16px;
}
.mock-btn.ghost { background: #38362f; color: #ECE9E3; }
.mock-btn.primary { background: #d9d4c8; color: #2c2b28; }
/* Docs page footer (inside the content column). */
.docs-footer {
max-width: 760px;
margin-top: 56px;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.docs-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.docs-footer-links a { color: var(--fg-muted); border-bottom: 0; font-size: .88rem; }
.docs-footer-links a:hover { color: var(--fg); }
@media (max-width: 860px) {
.docs-shell { grid-template-columns: 1fr; }
.docs-sidebar {
position: static;
height: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 16px 20px;
}
.docs-nav { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.docs-nav-group { margin-bottom: 0; }
.docs-main { padding: 28px 22px 56px; }
.docs-grid.two { grid-template-columns: 1fr; }
table.docs-tools td:first-child { width: auto; white-space: normal; }
}
/* ═══════════════════════════════════════════════════════════════
MOBILE — responsive overrides for the app shell
≤880px : single column, sidebar becomes off-canvas drawer.
≤480px : tighter padding, type, and stacking for phones.
Desktop chrome above the breakpoint is untouched.
═══════════════════════════════════════════════════════════════ */
/* Drawer controls hidden on desktop; surface only at narrow widths. */
.nav-toggle,
.nav-close,
.shell > .nav-backdrop { display: none; }
.nav-toggle,
.nav-close {
background: transparent;
border: 0;
padding: 6px;
color: var(--fg);
cursor: pointer;
border-radius: 4px;
align-items: center;
justify-content: center;
}
.nav-toggle:hover,
.nav-close:hover { background: var(--border-soft); color: var(--accent); }
/* Desktop sidebar collapse toggle — hidden on mobile (drawer takes over). */
.sidebar-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 6px;
margin-right: 4px;
color: var(--fg-muted);
cursor: pointer;
border-radius: 4px;
}
.sidebar-toggle:hover { background: var(--border-soft); color: var(--accent); }
html.sidebar-collapsed .shell { grid-template-columns: 1fr; }
html.sidebar-collapsed .shell > .sidebar { display: none; }
html.sidebar-collapsed .shell > .statusbar { grid-column: 1; }
/* With the sidebar gone, let content reclaim the freed width instead of
leaving a wide empty gutter. */
html.sidebar-collapsed .page { max-width: 1560px; }
html.sidebar-collapsed .page-wide { max-width: 1760px; }
@media (max-width: 880px) {
/* Drawer mode owns the sidebar; neutralise the desktop collapse. */
.sidebar-toggle { display: none; }
html.sidebar-collapsed .shell > .sidebar { display: flex; }
html.sidebar-collapsed .shell > .statusbar { grid-column: 1; }
/* ── shell: single column, sidebar slides over content ── */
.shell {
grid-template-columns: 1fr;
grid-template-rows: 1fr 32px;
}
.shell > .sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 282px;
max-width: 86vw;
height: 100vh;
height: 100dvh;
z-index: 200;
transform: translateX(-102%);
transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
border-right: 1px solid var(--border);
padding-top: env(safe-area-inset-top, 0);
}
body.nav-open .shell > .sidebar { transform: translateX(0); }
.shell > .main { grid-row: 1; grid-column: 1; min-width: 0; }
.shell > .statusbar { grid-column: 1; grid-row: 2; }
.shell > .nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 180;
background: color-mix(in srgb, var(--fg-strong) 36%, transparent);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out;
}
body.nav-open .shell > .nav-backdrop { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }
/* sidebar close button — pinned to the top-right of the drawer */
.sidebar .nav-close {
display: inline-flex;
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
}
.sidebar .brand { padding-right: 48px; }
/* ── topbar: hamburger first, breadcrumb shrinks, actions stay icon-only ── */
.shell .topbar {
padding: 10px 14px;
gap: 10px;
z-index: 50;
}
.shell .topbar .nav-toggle { display: inline-flex; }
.shell .topbar .crumbs {
font-size: 12px;
flex: 1;
min-width: 0;
overflow: hidden;
flex-wrap: nowrap;
}
/* keep just the home tilde, the current page, and the copy button */
.shell .topbar .crumbs > *:not(.here):not(.copy-btn):not(:first-child) { display: none; }
.shell .topbar .crumbs > :first-child { color: var(--fg-faint); margin-right: 4px; }
.shell .topbar .crumbs .here {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
.shell .topbar-actions { gap: 4px; }
.shell .topbar-actions .icon-btn { padding: 0 8px; min-width: 32px; }
/* hide labels only on anchors with span-wrapped text (Search…/⌘K).
Theme toggle is a