/* Monthfold design system components (project/components/bundle.css) from https://claude.ai/artifact/PDiHsvVQwLUtWZRCkhx8Mr, fetched 2026-09-25 (with Checkbox). Vendored unchanged; re-fetch to update. App-specific layout lives in app.css. */ @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,600&display=swap"); /* Base: apply .mf-app to of every Monthfold screen. */ .mf-app { margin: 0; padding: var(--space-4); background: var(--surface); color: var(--ink); font: 400 15px/24px var(--font-sans); -webkit-font-smoothing: antialiased; } .mf-app *, .mf-app *::before, .mf-app *::after { box-sizing: border-box; } .mf-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .mf-num--neg { color: var(--negative); } .mf-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .mf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .mf-stack { display: grid; gap: var(--space-4); } /* Logo */ .mf-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; } .mf-logo__mark { width: 28px; height: 28px; flex: none; } .mf-logo__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: -0.005em; } .mf-logo--lg .mf-logo__mark { width: 40px; height: 40px; } .mf-logo--lg .mf-logo__name { font-size: 30px; } .mf-logo__mark--dark { display: none; } [data-theme="dark"] .mf-logo__mark--light { display: none; } [data-theme="dark"] .mf-logo__mark--dark { display: block; } .mf-logo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Button */ .mf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); font: 600 14px/20px var(--font-sans); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color 0.12s ease, border-color 0.12s ease; } .mf-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-btn--primary { background: var(--brand); color: var(--on-brand); } .mf-btn--primary:hover { background: var(--brand-strong); } .mf-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); } .mf-btn--secondary:hover { background: var(--surface-sunken); } .mf-btn--quiet { background: transparent; color: var(--brand); } .mf-btn--quiet:hover { background: var(--brand-tint); } .mf-btn--sm { min-height: 32px; padding: 0 var(--space-3); font-size: 13px; } .mf-btn:disabled, .mf-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .mf-btn .mf-icon { width: 16px; height: 16px; } /* Field */ .mf-field { display: grid; gap: var(--space-2); max-width: 360px; } .mf-field__label { margin: 0; font: 600 13px/20px var(--font-sans); color: var(--ink); } .mf-input { width: 100%; padding: var(--space-2) var(--space-3); font: 400 15px/24px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .mf-input::placeholder { color: var(--ink-muted); } .mf-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-field__hint { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-field--error .mf-input { border-color: var(--negative); } .mf-field--error .mf-field__hint { color: var(--negative); } /* Checkbox: the native control in the brand color, so the browser draws a checkmark that contrasts with --brand in both themes and keeps its own keyboard and screen-reader behaviour. */ .mf-checks { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; } .mf-checks__legend { padding: 0; margin: 0 0 var(--space-1); font: 600 13px/20px var(--font-sans); color: var(--ink); } .mf-checks__hint { margin: 0 0 var(--space-1); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font: 400 15px/24px var(--font-sans); color: var(--ink); } .mf-check__input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); cursor: pointer; } [data-theme="dark"] .mf-check__input { color-scheme: dark; } .mf-check__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-check__text { display: grid; min-width: 0; } .mf-check__label { font-weight: 500; } .mf-check__hint { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; } .mf-check--disabled { cursor: default; color: var(--ink-muted); } .mf-check--disabled .mf-check__input { cursor: not-allowed; } /* FileDrop */ .mf-drop { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; background: var(--surface-sunken); color: var(--ink); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); cursor: pointer; } .mf-drop:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-drop__icon { width: 24px; height: 24px; color: var(--brand); } .mf-drop__title { font: 600 15px/24px var(--font-sans); margin: 0; } .mf-drop__browse { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .mf-drop__meta { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); margin: 0; } .mf-drop--active { border-style: solid; border-color: var(--brand); background: var(--brand-tint); } .mf-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-file .mf-icon { color: var(--brand); } .mf-file__name { font: 600 14px/20px var(--font-sans); overflow-wrap: anywhere; } .mf-file__meta { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-file__text { display: grid; flex: 1; min-width: 0; } /* StatusBadge */ .mf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font: 600 12px/16px var(--font-sans); border: 1px solid transparent; border-radius: var(--radius-pill); white-space: nowrap; } .mf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mf-badge--draft { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); } .mf-badge--ready { background: var(--brand-tint); color: var(--brand); } .mf-badge--sent { background: var(--positive-tint); color: var(--positive); } .mf-badge--review { background: var(--warning-tint); color: var(--warning); } /* Notice */ .mf-notice { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); font: 400 14px/20px var(--font-sans); color: var(--ink); border: 1px solid; border-radius: var(--radius-sm); } .mf-notice__title { display: block; font-weight: 600; margin-bottom: 2px; } .mf-notice p { margin: 0; } .mf-notice--warning { background: var(--warning-tint); border-color: var(--warning); } .mf-notice--warning .mf-icon, .mf-notice--warning .mf-notice__title { color: var(--warning); } .mf-notice--negative { background: var(--negative-tint); border-color: var(--negative); } .mf-notice--negative .mf-icon, .mf-notice--negative .mf-notice__title { color: var(--negative); } .mf-notice--positive { background: var(--positive-tint); border-color: var(--positive); } .mf-notice--positive .mf-icon, .mf-notice--positive .mf-notice__title { color: var(--positive); } /* KpiTile */ .mf-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); } .mf-kpi { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-kpi__label { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .mf-kpi__value { font: 600 32px/36px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); } .mf-kpi__delta { font: 500 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; } .mf-kpi__delta--favourable { color: var(--positive); } .mf-kpi__delta--unfavourable { color: var(--negative); } .mf-kpi__period { color: var(--ink-muted); font-weight: 400; } /* StatementTable */ .mf-statement-wrap { overflow-x: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-statement { width: 100%; min-width: 420px; border-collapse: collapse; font: 400 15px/24px var(--font-sans); color: var(--ink); } .mf-statement caption { text-align: left; padding: var(--space-4) var(--space-4) var(--space-2); font: 600 24px/30px var(--font-display); } .mf-statement caption span { display: block; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-statement th, .mf-statement td { padding: 6px var(--space-4); text-align: left; } .mf-statement thead th { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); } .mf-statement th.mf-num, .mf-statement td.mf-num { text-align: right; font-weight: 500; } .mf-statement__section th { padding-top: var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); } .mf-statement__line th { padding-left: var(--space-8); font-weight: 400; } .mf-statement__subtotal th, .mf-statement__subtotal td { font-weight: 600; } .mf-statement__subtotal td.mf-num { border-top: 1px solid var(--line-strong); } .mf-statement__total th, .mf-statement__total td { font-weight: 600; padding-top: var(--space-3); padding-bottom: var(--space-3); } .mf-statement__total td.mf-num { font-weight: 600; border-top: 1px solid var(--ink); border-bottom: 4px double var(--ink); } /* ReportHeader (white-label: set --firm-color and --on-firm-color per firm) */ .mf-report-sheet { overflow: hidden; padding: 0 var(--space-12) var(--space-8); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-paper); } .mf-report-header { display: grid; gap: var(--space-2); } .mf-report-header__band { height: 6px; margin: 0 calc(-1 * var(--space-12)) var(--space-6); background: var(--firm-color); } .mf-report-header__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .mf-report-header__firm { display: inline-flex; align-items: center; gap: var(--space-3); font: 600 15px/20px var(--font-sans); } .mf-report-header__monogram { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--firm-color); color: var(--on-firm-color); font: 600 15px/1 var(--font-sans); letter-spacing: 0.04em; border-radius: var(--radius-sm); } .mf-report-header__period { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .mf-report-header__title { margin: 0; font: 600 32px/38px var(--font-display); text-wrap: balance; } .mf-report-header__meta { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); } .mf-report-header__meta strong { color: var(--ink); font-weight: 600; } /* Firm-branded primary action (portal only) */ .mf-btn--firm { background: var(--firm-color); color: var(--on-firm-color); } .mf-btn--firm:hover { filter: brightness(0.92); } /* AppShell */ .mf-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .mf-shell__side { display: grid; align-content: start; gap: var(--space-6); padding: var(--space-4); background: var(--surface-raised); border-right: 1px solid var(--line); } .mf-shell__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .mf-shell__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font: 500 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; } .mf-shell__link .mf-icon { width: 18px; height: 18px; color: var(--ink-muted); } .mf-shell__link:hover { background: var(--surface-sunken); } .mf-shell__link[aria-current="page"] { background: var(--brand-tint); color: var(--brand); font-weight: 600; } .mf-shell__link[aria-current="page"] .mf-icon { color: var(--brand); } .mf-shell__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-shell__count { margin-left: auto; font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); } .mf-shell__main { display: grid; grid-template-rows: auto 1fr; min-width: 0; } .mf-shell__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); background: var(--surface-raised); border-bottom: 1px solid var(--line); } .mf-shell__firm { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; } .mf-shell__firm .mf-icon { width: 16px; height: 16px; } .mf-shell__user { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); } .mf-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink); font: 600 12px/1 var(--font-sans); } .mf-shell__content { padding: var(--space-6); } .mf-shell__content h1 { margin: 0 0 var(--space-2); font: 600 32px/38px var(--font-display); } @media (max-width: 640px) { .mf-shell { grid-template-columns: 1fr; } .mf-shell__side { border-right: 0; border-bottom: 1px solid var(--line); } .mf-shell__nav { display: flex; overflow-x: auto; } } /* ClientList */ .mf-table-wrap { overflow-x: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-table { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 14px/20px var(--font-sans); color: var(--ink); } .mf-table th, .mf-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .mf-table thead th { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); } .mf-table tbody tr:last-child th, .mf-table tbody tr:last-child td { border-bottom: 0; } .mf-table tbody tr:hover { background: var(--surface-sunken); } .mf-table__client { font-weight: 600; color: var(--ink); text-decoration: none; } .mf-table__client:hover { color: var(--brand); text-decoration: underline; } .mf-table__client:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-table__muted { color: var(--ink-muted); } .mf-sync-failed { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--warning); font-weight: 600; } .mf-sync-failed .mf-icon { width: 16px; height: 16px; } /* PortalHeader (firm-branded) */ .mf-portal-header { background: var(--surface-raised); border-bottom: 1px solid var(--line); border-top: 4px solid var(--firm-color); } .mf-portal-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); } .mf-portal-header__firm { display: inline-flex; align-items: center; gap: var(--space-3); font: 600 15px/20px var(--font-sans); color: var(--ink); } .mf-portal-header__user { display: inline-flex; align-items: center; gap: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); } .mf-portal-header__user strong { color: var(--ink); font-weight: 600; } .mf-portal-header__nav { display: flex; gap: var(--space-6); padding: 0 var(--space-6); overflow-x: auto; } .mf-portal-header__link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } .mf-portal-header__link:hover { color: var(--ink); } .mf-portal-header__link[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--firm-color); } .mf-portal-header__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .mf-portal-header__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--firm-color); color: var(--on-firm-color); font: 600 12px/1 var(--font-sans); } /* MessageThread */ .mf-thread { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-thread__day { justify-self: center; font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .mf-msg { display: grid; gap: var(--space-1); max-width: 72%; } .mf-msg--own { justify-self: end; } .mf-msg__meta { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); } .mf-msg__meta strong { color: var(--ink); font-weight: 600; } .mf-msg--own .mf-msg__meta { text-align: right; } .mf-msg__body { margin: 0; padding: var(--space-3) var(--space-4); font: 400 15px/22px var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-msg--own .mf-msg__body { background: var(--surface-sunken); } .mf-composer { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; padding-top: var(--space-4); border-top: 1px solid var(--line); } .mf-composer .mf-input { min-height: 72px; resize: vertical; } /* RequestChecklist */ .mf-request { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-request__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .mf-request__title { margin: 0; font: 600 18px/26px var(--font-sans); } .mf-request__progress { font: 500 13px/20px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); } .mf-request__items { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .mf-request__item { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); } .mf-request__name { font: 600 14px/20px var(--font-sans); color: var(--ink); } .mf-request__detail { display: block; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-request__state { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 13px/20px var(--font-sans); white-space: nowrap; } .mf-request__item--todo > .mf-icon { color: var(--ink-muted); } .mf-request__item--uploaded > .mf-icon, .mf-request__item--uploaded .mf-request__state { color: var(--positive); } .mf-request__item--overdue > .mf-icon, .mf-request__item--overdue .mf-request__state { color: var(--warning); } /* CommentaryEditor */ .mf-commentary { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-commentary__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .mf-commentary__title { margin: 0; font: 600 24px/30px var(--font-display); } .mf-commentary__text { min-height: 144px; padding: var(--space-4); font: 400 15px/24px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .mf-commentary__text:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mf-commentary__text p { margin: 0 0 var(--space-3); } .mf-commentary__text p:last-child { margin-bottom: 0; } .mf-commentary__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .mf-commentary__meta { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } /* BudgetVsActual (extends StatementTable) */ .mf-var--fav { color: var(--positive); } .mf-var--unfav { color: var(--negative); } /* CashForecast */ .mf-chart { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-chart__title { margin: 0; font: 600 24px/30px var(--font-display); } .mf-chart__sub { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-chart__plot { overflow-x: auto; } .mf-chart__plot svg { display: block; width: 100%; min-width: 520px; height: auto; } .mf-chart__grid { stroke: var(--line); stroke-width: 1; } .mf-chart__axis { fill: var(--ink-muted); font: 400 12px var(--font-sans); font-variant-numeric: tabular-nums; } .mf-chart__bar { fill: var(--brand); } .mf-chart__bar--low { fill: var(--warning); } .mf-chart__flag { fill: var(--on-brand); font: 700 13px var(--font-sans); } .mf-chart__threshold { stroke: var(--negative); stroke-width: 2; stroke-dasharray: 6 4; } .mf-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); } .mf-chart__legend li { display: inline-flex; align-items: center; gap: var(--space-2); } .mf-chart__key { width: 12px; height: 12px; border-radius: 2px; background: var(--brand); } .mf-chart__key--low { background: var(--warning); } .mf-chart__key--line { width: 20px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--negative); } /* AlertItem */ .mf-alerts { display: grid; margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .mf-alert { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); border-bottom: 1px solid var(--line); } .mf-alert:last-child { border-bottom: 0; } .mf-alert__severity { display: block; font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; } .mf-alert__title { display: block; margin-top: 2px; font: 600 15px/22px var(--font-sans); color: var(--ink); } .mf-alert__detail { display: block; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); } .mf-alert--warning > .mf-icon, .mf-alert--warning .mf-alert__severity { color: var(--warning); } .mf-alert--urgent > .mf-icon, .mf-alert--urgent .mf-alert__severity { color: var(--negative); } @media (max-width: 480px) { .mf-report-sheet { padding: 0 var(--space-6) var(--space-6); } .mf-report-header__band { margin: 0 calc(-1 * var(--space-6)) var(--space-6); } } @media (prefers-reduced-motion: reduce) { .mf-btn { transition: none; } }