/* Maximus — base element defaults + link styling. Applied when a page opts in with class="maximus" on (or any ancestor), so tokens don't leak onto unrelated host pages. */ .maximus, body.maximus { background: var(--surface-app); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .maximus a { color: var(--text-accent); text-decoration: none; } .maximus a:hover { color: var(--action-primary-hover); text-decoration: underline; } .maximus ::selection { background: var(--clr-primary-a25); } /* ---- Component interaction states ---- Inline styles can't express :hover/:active, so the shipped components carry stable class names and these rules provide the web hover/press feedback. The native app has no hover (touch); press is a brief ripple/darken. */ .mx-btn--primary:hover:not(:disabled) { background: var(--action-primary-hover) !important; } .mx-btn--primary:active:not(:disabled) { background: var(--action-primary-press) !important; } .mx-btn--secondary:hover:not(:disabled), .mx-btn--ghost:hover:not(:disabled), .mx-btn--danger:hover:not(:disabled) { filter: brightness(1.12); } .mx-iconbtn:hover { background: var(--surface-inset) !important; } .mx-iconbtn:active { background: var(--surface-card) !important; } .mx-card--interactive:hover { background: var(--surface-inset) !important; } .mx-input:focus, .mx-select:focus { box-shadow: inset 0 0 0 1px var(--border-emphasis); } .mx-input::placeholder { color: var(--text-muted); } /* Material Symbols baseline */ .maximus .material-symbols-outlined, .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; display: inline-block; white-space: nowrap; direction: ltr; }