/* Material Symbols — icon font guarantee. The app serves these fonts locally so first paint, offline loading, and visual tests never depend on Google Fonts being reachable. font-display:block keeps ligature text such as "rocket_launch" hidden until the icon font is ready. */ @font-face { font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 400; font-display: block; src: url('/assets/fonts/material-symbols-rounded.ttf') format('truetype'); } @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: block; src: url('/assets/fonts/material-symbols-outlined.ttf') format('truetype'); } /* Standard icon classes — ensure letter-spacing=0 so ligatures form, text is transparent in case font-display:block permanently fails (e.g. offline + uncached), and size is reasonable by default. */ .material-symbols-rounded { font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', 'Material Icons', sans-serif; } .material-symbols-outlined { font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Icons', sans-serif; } .material-symbols-rounded, .material-symbols-outlined { font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Ultimate safety net: if the font somehow never loads (CDN blocked, offline first visit), the raw ligature text won't flash. The :not() trick uses font-loaded detection via a helper class — see boot.js / landing_boot.js which add .fonts-ready to when document.fonts.ready resolves. */ html:not(.fonts-ready) .material-symbols-rounded, html:not(.fonts-ready) .material-symbols-outlined { visibility: hidden; /* Clamp the layout box too — `visibility:hidden` keeps the element's intrinsic width, so a 129px-wide ligature like "psychology" still overflows narrow buttons until the font swaps in. Lock width:1em so the box matches the eventual icon glyph and never spills. */ max-width: 1em; overflow: hidden; } html.fonts-ready .material-symbols-rounded, html.fonts-ready .material-symbols-outlined { visibility: visible; } html.icons-unavailable .material-symbols-rounded, html.icons-unavailable .material-symbols-outlined, body.mso-unavailable .material-symbols-rounded, body.mso-unavailable .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; font-size: 0 !important; visibility: visible; } html.icons-unavailable .material-symbols-rounded::before, html.icons-unavailable .material-symbols-outlined::before, body.mso-unavailable .material-symbols-rounded::before, body.mso-unavailable .material-symbols-outlined::before { content: "\2022"; font: 700 1.15rem/1 ui-sans-serif, system-ui, sans-serif; color: currentColor; }