/* Marginly brand-applied stylesheet. Replaces the prior system-ui
light/dark baseline. The landing page (mg-landing class on )
carries its own inline brand layer in index.html; this file is
what every signed-in SPA page inherits.
Brand tokens mirror marginly-logo-font-kit.html:
- Ink #0A0A0A surface, Chalk #FAFAFA text, MG-green #00C853 accent
- Instrument Serif for display, DM Sans for body, JetBrains Mono
for numbers and code. Brand-fonts loaded via index.html
so the cache hit is
shared with the landing render. System-stack fallbacks pin the
look when the network is cold. */
:root {
--mg-ink: #0A0A0A;
--mg-surface: #111111;
--mg-card: #1A1A1A;
--mg-card-hover: #1F1F1F;
--mg-border: #2A2A2A;
--mg-border-strong: #3A3A3A;
--mg-green: #00C853;
--mg-green-hover: #33D375;
--mg-red: #FF3D00;
--mg-chalk: #FAFAFA;
--mg-warm: #E8E6E3;
--mg-muted: #9E9E9E;
--mg-subtle: #6B6B6B;
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
/* legacy tokens preserved so any unaudited class selector still
reads a sensible value rather than the unstyled browser default. */
--fg: var(--mg-chalk);
--bg: var(--mg-ink);
--muted: var(--mg-muted);
--border: var(--mg-border);
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--mg-ink); color: var(--mg-warm); }
body {
font-family: var(--font-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
padding: 0;
max-width: none;
}
.mg-app-shell {
max-width: 1100px;
margin: 0 auto;
padding: 24px 32px 72px;
}
a { color: var(--mg-chalk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mg-green); }
/* Header. Slim brand bar with wordmark + nav. Replaces the plain
baseline. */
body > header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px;
border-bottom: 1px solid var(--mg-border);
background: var(--mg-ink);
margin: 0;
font-family: var(--font-mono);
font-size: 13px;
color: var(--mg-muted);
}
body > header h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--mg-chalk);
margin: 0;
}
body > header h1 .mg-period { color: var(--mg-green); }
body > header nav { display: flex; gap: 20px; align-items: center; }
body > header nav a {
font-family: var(--font-mono);
font-size: 13px;
color: var(--mg-muted);
text-decoration: none;
letter-spacing: 0.02em;
}
body > header nav a:hover { color: var(--mg-chalk); }
body > header nav a.mg-active { color: var(--mg-chalk); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--mg-chalk);
}
h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.05; margin: 0 0 12px; }
h2 { font-size: clamp(28px, 3.5vw, 36px); line-height: 1.1; margin: 24px 0 12px; }
h3 { font-size: 20px; line-height: 1.2; margin: 16px 0 8px; }
h4 { font-size: 16px; font-family: var(--font-body); font-weight: 600; margin: 12px 0 6px; }
.placeholder { color: var(--mg-muted); font-size: 15px; }
section { margin: 32px 0; }
code, .mono {
font-family: var(--font-mono);
font-size: 13px;
background: var(--mg-card);
color: var(--mg-chalk);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--mg-border);
}
/* Buttons. Primary = green CTA, secondary = bordered ghost. */
button, input[type="submit"] {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
padding: 10px 18px;
cursor: pointer;
border: 1px solid var(--mg-border-strong);
background: var(--mg-card);
color: var(--mg-chalk);
border-radius: 4px;
transition: background 0.15s, border-color 0.15s;
}
button:hover, input[type="submit"]:hover { background: var(--mg-card-hover); border-color: var(--mg-green); }
button[disabled] { opacity: 0.5; cursor: progress; }
.mg-cta {
background: var(--mg-green);
color: var(--mg-ink);
border: 0;
font-weight: 600;
}
.mg-cta:hover { background: var(--mg-green-hover); }
input, select, textarea {
font-family: var(--font-body);
font-size: 14px;
padding: 8px 10px;
background: var(--mg-card);
color: var(--mg-chalk);
border: 1px solid var(--mg-border-strong);
border-radius: 4px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mg-green); }
/* App home nav cards (renderHome). Three cards mirroring the landing
feature grid so signed-in users land in a recognizable layout. */
.mg-home-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 32px;
}
.mg-home-card {
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-radius: 6px;
padding: 24px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.15s, background 0.15s;
}
.mg-home-card:hover { border-color: var(--mg-green); background: var(--mg-card); }
.mg-home-card .mg-home-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
color: var(--mg-green);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mg-home-card h3 { margin: 0; color: var(--mg-chalk); }
.mg-home-card h3 .mg-period { color: var(--mg-green); }
.mg-home-card p { margin: 0; color: var(--mg-warm); font-size: 14px; }
.mg-home-status {
font-family: var(--font-mono);
font-size: 12px;
color: var(--mg-muted);
margin-top: 8px;
}
.mg-home-status.mg-status-ok { color: var(--mg-green); }
.mg-home-status.mg-status-pending { color: var(--mg-muted); }
/* Onboarding. Form + connections list. */
.onboarding form { display: grid; gap: 12px; max-width: 28rem; margin-top: 16px; }
.onboarding label { font-weight: 500; color: var(--mg-chalk); }
.onboarding ul.connections { list-style: none; padding: 0; }
.onboarding ul.connections li { padding: 10px 0; border-bottom: 1px solid var(--mg-border); }
.mg-coming-soon {
background: var(--mg-surface);
border: 1px solid var(--mg-border);
border-left: 3px solid var(--mg-green);
border-radius: 4px;
padding: 20px 24px;
margin-top: 16px;
}
.mg-coming-soon h3 { margin: 0 0 8px; }
.mg-coming-soon p { margin: 4px 0; color: var(--mg-warm); }
.mg-coming-soon .mg-coming-soon-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--mg-muted);
margin-top: 10px;
}
/* Formula builder (S-082). */
.formulas ul.formula-list { list-style: none; padding: 0; }
.formulas ul.formula-list li { padding: 8px 0; border-bottom: 1px solid var(--mg-border); }
.formula-new { display: grid; gap: 8px; max-width: 24rem; margin-top: 16px; }
.formula-editor .formula-grid {
display: grid;
grid-template-columns: 12rem 1fr;
gap: 16px;
margin: 16px 0;
}
.formula-editor .palette ul { list-style: none; padding: 0; }
.formula-editor .palette li {
border: 1px solid var(--mg-border);
padding: 6px 8px;
margin-bottom: 6px;
cursor: grab;
background: var(--mg-card);
border-radius: 3px;
font-family: var(--font-mono);
font-size: 12px;
}
.formula-editor .canvas {
min-height: 18rem;
border: 1px dashed var(--mg-border);
padding: 12px;
display: grid;
gap: 10px;
border-radius: 4px;
}
.formula-editor .node {
border: 1px solid var(--mg-border);
padding: 10px;
background: var(--mg-card);
border-radius: 4px;
}
.formula-editor .node-bad { border-color: var(--mg-red); }
.formula-editor .node-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.formula-editor .node-delete { background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--mg-muted); padding: 0; }
.formula-editor .node-delete:hover { color: var(--mg-red); background: none; }
.formula-editor .badge {
background: var(--mg-border);
padding: 1px 6px;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--mg-chalk);
}
.formula-editor .node-field { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.formula-editor .node-arg { display: grid; grid-template-columns: 4rem 1fr auto; gap: 8px; align-items: center; margin-top: 6px; }
.formula-editor .formula-issues { border-left: 3px solid var(--mg-red); padding-left: 14px; margin-top: 16px; }
.formula-editor .formula-issues ul { padding-left: 16px; color: var(--mg-warm); }
.formula-editor .formula-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.formula-editor .human-expression {
background: var(--mg-card);
border: 1px solid var(--mg-border);
padding: 12px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 13px;
border-radius: 3px;
}
.muted { color: var(--mg-muted); }
/* Settings */
.settings .settings-panel { border: 1px solid var(--mg-border); padding: 20px; margin-top: 16px; border-radius: 4px; background: var(--mg-surface); }
.settings .settings-panel h3 { margin: 0 0 12px; font-size: 22px; }
.settings .settings-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0; font-family: var(--font-mono); font-size: 13px; }
.settings .settings-kv dt { font-weight: 500; color: var(--mg-muted); }
.settings .settings-kv dd { margin: 0; color: var(--mg-chalk); }
.settings .settings-features { list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: 13px; }
.settings .settings-features li { padding: 4px 0; color: var(--mg-warm); }
.settings .access-granted { color: var(--mg-green); font-weight: 500; }
.settings .access-revoked { color: var(--mg-red); font-weight: 500; }
.settings .pref-list { display: grid; gap: 12px; }
.settings .pref-row { padding: 12px 0; border-top: 1px solid var(--mg-border); }
.settings .pref-row:first-child { border-top: 0; }
.settings .pref-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--mg-chalk); }
.settings .pref-label { font-weight: 500; }
.settings .pref-description { margin: 6px 0 0; color: var(--mg-muted); font-size: 14px; }
.settings .pref-status { color: var(--mg-muted); margin-top: 10px; font-family: var(--font-mono); font-size: 12px; }
/* Beta Program panel (S-206e, ADR-031). */
.settings .settings-beta-row { padding: 12px 0; border-top: 1px solid var(--mg-border); }
.settings .settings-beta-row:first-of-type { border-top: 0; }
.settings .settings-beta-status { color: var(--mg-green); margin-top: 10px; font-family: var(--font-mono); font-size: 12px; }
.settings .settings-error { color: var(--mg-red); margin: 8px 0; font-family: var(--font-mono); font-size: 13px; }
.settings .settings-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.settings .settings-modal {
background: var(--mg-card);
border: 1px solid var(--mg-border);
border-radius: 6px;
padding: 24px;
max-width: 36rem;
width: calc(100% - 32px);
display: grid;
gap: 12px;
}
.settings .settings-modal h4 { margin: 0; }
.settings .settings-modal-version { color: var(--mg-muted); font-size: 12px; margin: 0; }
.settings .settings-modal-body { margin: 0; color: var(--mg-warm); }
.settings .settings-modal-label { font-weight: 500; color: var(--mg-chalk); }
.settings .settings-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* Developer chrome (S-206e, ADR-031): persistent red banner painted
at the top of whenever the session is impersonating, plus a
switch-context picker injected into the header nav for developer
sessions. */
.mg-impersonation-banner {
background: var(--mg-red);
color: var(--mg-chalk);
padding: 10px 16px;
text-align: center;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.02em;
border-bottom: 2px solid #B22D00;
position: sticky;
top: 0;
z-index: 100;
}
.mg-impersonation-banner strong { color: var(--mg-chalk); font-weight: 700; letter-spacing: 0.04em; }
.mg-impersonation-banner .mg-impersonation-icon { margin-right: 6px; }
.mg-impersonation-banner .mg-impersonation-exit {
color: var(--mg-chalk);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
margin-left: 4px;
}
.mg-impersonation-banner .mg-impersonation-exit:hover { color: var(--mg-warm); }
.mg-developer-switch-picker {
font-family: var(--font-mono);
font-size: 12px;
padding: 6px 8px;
background: var(--mg-card);
color: var(--mg-chalk);
border: 1px solid var(--mg-border-strong);
border-radius: 4px;
max-width: 14rem;
}
/* Feedback */
.feedback .feedback-panel { border: 1px solid var(--mg-border); padding: 20px; margin-top: 16px; border-radius: 4px; background: var(--mg-surface); }
.feedback .feedback-panel h3 { margin: 0 0 12px; font-size: 22px; }
.feedback .feedback-panel h4 { margin: 16px 0 6px; font-size: 15px; }
.feedback form { display: grid; gap: 8px; max-width: 36rem; }
.feedback label { font-weight: 500; color: var(--mg-chalk); }
.feedback .feedback-feature-description { margin: 2px 0 8px; color: var(--mg-warm); }
.feedback .feedback-rating-current { font-weight: 500; color: var(--mg-chalk); }
.feedback .feedback-rating-error { color: var(--mg-red); }
.feedback .feedback-score-row { display: flex; gap: 8px; margin: 8px 0; }
.feedback .feedback-score {
padding: 8px 12px;
border: 1px solid var(--mg-border-strong);
background: var(--mg-card);
color: var(--mg-warm);
cursor: pointer;
border-radius: 3px;
font-family: var(--font-mono);
}
.feedback .feedback-score-on { background: var(--mg-green); color: var(--mg-ink); border-color: var(--mg-green); }
.feedback .feedback-status { color: var(--mg-muted); margin-top: 6px; }
.feedback .feedback-ideas { list-style: none; padding: 0; margin: 10px 0; }
.feedback .feedback-idea { border-top: 1px solid var(--mg-border); padding: 12px 0; }
.feedback .feedback-idea:first-child { border-top: 0; }
.feedback .feedback-idea h4 { margin: 0 0 4px; }
.feedback .feedback-idea-body { margin: 4px 0; white-space: pre-wrap; color: var(--mg-warm); }
.feedback .feedback-idea-actions { display: flex; align-items: center; gap: 12px; }
.feedback .feedback-upvote-count { color: var(--mg-muted); font-family: var(--font-mono); font-size: 12px; }
.feedback .feedback-upvote { padding: 6px 12px; cursor: pointer; }