.mg-root { --mg-d-row: var(--mg-row-list); --mg-d-cell: var(--mg-table-row); --mg-d-pad: var(--mg-space-5); --mg-d-gap: var(--mg-space-6); --mg-d-avatar: 32px; --mg-d-note: block; font: 500 var(--mg-text-md)/1.5 var(--mg-font); font-feature-settings: "tnum" 1; color: var(--mg-ink); background: var(--mg-canvas); -webkit-font-smoothing: antialiased; color-scheme: light; letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: start; text-indent: 0; text-shadow: none; white-space: normal; }
[data-theme="dark"] .mg-root, [data-theme="dark"].mg-root { color-scheme: dark; }
[data-density="compact"] { --mg-d-row: var(--mg-row-list-compact); --mg-d-cell: var(--mg-row-tight); --mg-d-pad: var(--mg-space-3); --mg-d-gap: var(--mg-space-3); --mg-d-avatar: 22px; --mg-d-note: none; }
[data-density="comfy"] { --mg-d-row: var(--mg-row-list); --mg-d-cell: var(--mg-table-row); --mg-d-pad: var(--mg-space-5); --mg-d-gap: var(--mg-space-6); --mg-d-avatar: 32px; --mg-d-note: block; }
[data-density="spacious"] { --mg-d-row: var(--mg-row-list-spacious); --mg-d-cell: var(--mg-row-list); --mg-d-pad: var(--mg-space-6); --mg-d-gap: var(--mg-space-7); --mg-d-avatar: 36px; }
[data-surface="tv"] { --mg-text-xs: 16px; --mg-text-sm: 18px; --mg-text-md: 20px; --mg-text-lg: 24px; --mg-text-xl: 30px; --mg-text-2xl: 40px; --mg-text-3xl: 56px; --mg-stem: 6px; --mg-chart-stroke: var(--mg-chart-stroke-tv); }
.mg-tile, .mg-tv, .mg-moment { container-type: inline-size; }
.mg-root *, .mg-root *::before, .mg-root *::after { box-sizing: border-box; }

.mg-display { margin: 0; font: 800 var(--mg-text-display)/1 var(--mg-font); letter-spacing: -0.04em; }
.mg-title { margin: 0; font: 800 var(--mg-text-2xl)/1.15 var(--mg-font); letter-spacing: -0.025em; text-wrap: balance; }
.mg-figure { font: 800 var(--mg-text-3xl)/1.05 var(--mg-font); letter-spacing: -0.03em; }
.mg-heading { margin: 0; font: 700 var(--mg-text-lg)/1.3 var(--mg-font); letter-spacing: -0.01em; }
.mg-label { font: 700 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-small { font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-unit { margin-left: 0.15em; font-size: max(var(--mg-text-xs), 0.45em); font-weight: 700; letter-spacing: 0; color: var(--mg-ink-2); }
.mg-link { color: var(--mg-ink); font-weight: 700; text-decoration-line: underline; text-decoration-color: var(--mg-rule-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mg-link:hover, .mg-link:focus-visible { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.mg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.mg-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border: 1.5px solid currentColor; border-radius: var(--mg-radius-dot); opacity: 0.7; font: 700 var(--mg-text-xs)/1 var(--mg-font); }

:is(.mg-button, .mg-input, .mg-select, .mg-textarea, .mg-seg__opt, .mg-tab, .mg-nav__item, .mg-rail__fold, .mg-rail__product, .mg-rail__end, .mg-menu__item, .mg-check input, .mg-radio input, .mg-link, .mg-table-wrap):focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-toggle input:focus-visible + .mg-toggle__track { outline: 2px solid var(--mg-focus); outline-offset: 2px; }

.mg-punktum { white-space: nowrap; }
.mg-punktum::after { content: ""; display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.07em; border-radius: var(--mg-radius-dot); background: var(--mg-blue); vertical-align: 0; }

.mg-trappen { display: inline-flex; align-items: flex-end; gap: 0.5em; height: 0.8em; font-size: var(--mg-trappen-size, 16px); color: var(--mg-ink); }
.mg-trappen i { width: 0.42em; height: 0.42em; border-radius: var(--mg-radius-dot); background: currentColor; }
.mg-trappen i:nth-child(1) { margin-bottom: 0; }
.mg-trappen i:nth-child(2) { margin-bottom: max(0.09em, 2px); }
.mg-trappen i:nth-child(3) { margin-bottom: max(0.18em, var(--mg-space-1)); }
.mg-trappen--load i { animation: mg-step 1.2s ease-in-out infinite backwards; }
.mg-trappen--load i:nth-child(2) { animation-delay: 0.2s; }
.mg-trappen--load i:nth-child(3) { animation-delay: 0.4s; }
.mg-trappen--quiet { color: var(--mg-rule-strong); }
@keyframes mg-step { 0% { opacity: 0; transform: translateY(0.3em); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

.mg-status { display: inline-flex; align-items: center; gap: var(--mg-space-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-status::before { content: ""; flex: none; width: var(--mg-dot); height: var(--mg-dot); border-radius: var(--mg-radius-dot); background: var(--mg-ink-2); }
.mg-status--ok { color: var(--mg-ok-text); } .mg-status--ok::before { background: var(--mg-ok); }
.mg-status--warn { color: var(--mg-warn-text); } .mg-status--warn::before { background: var(--mg-warn); }
.mg-status--alarm { color: var(--mg-alarm-text); } .mg-status--alarm::before { background: var(--mg-alarm); }
.mg-status--blue { color: var(--mg-blue-text); } .mg-status--blue::before { background: var(--mg-blue); }
.mg-status--off::before { background: transparent; box-shadow: inset 0 0 0 2px var(--mg-rule-strong); }

.mg-live { display: inline-flex; align-items: center; gap: var(--mg-space-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink); white-space: nowrap; }
.mg-live { --mg-live-ink: currentColor; --mg-live-dot: var(--mg-blue); position: relative; }
.mg-live::before { content: ""; width: 6px; height: 6px; margin-right: 26px; border-radius: var(--mg-radius-dot); background: var(--mg-live-ink); box-shadow: 13px -2px 0 var(--mg-live-ink); }
.mg-live::after { content: ""; position: absolute; left: 26px; top: 50%; width: 6px; height: 6px; margin-top: -7px; border-radius: var(--mg-radius-dot); background: var(--mg-live-dot); animation: mg-live var(--mg-dur-live) ease-in-out infinite; }
.mg-live__time { font-weight: 500; color: var(--mg-ink-2); }
.mg-live--stale { --mg-live-ink: var(--mg-ink-2); }
.mg-live--stale { --mg-live-dot: var(--mg-warn); }
.mg-live--stale::after { animation: none; } .mg-live--stale { color: var(--mg-warn-text); }
.mg-live--down { --mg-live-ink: var(--mg-ink-2); }
.mg-live--down { --mg-live-dot: var(--mg-alarm); }
.mg-live--down::after { animation: none; } .mg-live--down { color: var(--mg-alarm-text); }
@keyframes mg-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

.mg-tick { animation: mg-tick 700ms var(--mg-ease-exit); border-radius: var(--mg-radius-field); }
@keyframes mg-tick { 0% { background: var(--mg-blue-tint); box-shadow: 0 0 0 4px var(--mg-blue-tint); } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }

.mg-avatar { display: inline-grid; place-items: center; flex: none; width: var(--mg-d-avatar); height: var(--mg-d-avatar); border-radius: var(--mg-avatar-radius); background: var(--mg-sunken); color: var(--mg-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); letter-spacing: 0.01em; overflow: hidden; }
[data-density="compact"] .mg-avatar { font-weight: 700; letter-spacing: -0.02em; }
.mg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mg-avatar--me { background: var(--mg-ink); color: var(--mg-on-ink); box-shadow: 0 0 0 2.5px var(--mg-surface), 0 0 0 4.5px var(--mg-blue); }

.mg-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--mg-space-2); height: var(--mg-button-height); padding: 0 var(--mg-button-pad-x); border: var(--mg-button-border) solid var(--mg-rule); border-radius: var(--mg-button-radius); background: var(--mg-surface); color: var(--mg-ink); font: var(--mg-button-weight) var(--mg-text-md)/1 var(--mg-font); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--mg-dur-instant) linear, border-color var(--mg-dur-instant) linear, transform var(--mg-motion-quick); }
.mg-button:hover { background: var(--mg-hover); border-color: var(--mg-hover); }
.mg-button:active { transform: scale(0.98); }
.mg-button svg { width: 18px; height: 18px; flex: none; }
.mg-button--primary { background: var(--mg-ink); border-color: var(--mg-ink); color: var(--mg-on-ink); }
.mg-button--primary:hover { background: var(--mg-ink-hover); border-color: var(--mg-ink-hover); }
.mg-button--ghost { background: transparent; border-color: transparent; }
.mg-button--alarm { background: var(--mg-alarm-text); border-color: var(--mg-alarm-text); color: var(--mg-on-alarm); }
.mg-button--alarm:hover { background: var(--mg-alarm-hover); border-color: var(--mg-alarm-hover); }
.mg-button--sm { height: var(--mg-button-height-sm); padding: 0 var(--mg-button-pad-x-sm); font-size: var(--mg-text-sm); }
.mg-button--icon { width: var(--mg-button-height); padding: 0; }
.mg-button--icon.mg-button--sm { width: var(--mg-control-sm); }
.mg-button[aria-pressed="true"], .mg-button[aria-pressed="true"]:hover { background: var(--mg-ink); border-color: var(--mg-ink); color: var(--mg-on-ink); }
.mg-button:disabled, .mg-button[aria-disabled="true"] { background: var(--mg-sunken); border-color: var(--mg-sunken); color: var(--mg-ink-2); cursor: not-allowed; transform: none; }
a.mg-button[aria-disabled="true"] { pointer-events: none; }
.mg-button[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.mg-button[aria-busy="true"] > .mg-trappen { position: absolute; color: var(--mg-ink); --mg-trappen-size: 14px; }
.mg-button--primary[aria-busy="true"] > .mg-trappen { color: var(--mg-on-ink); }
.mg-button__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--mg-badge-radius); background: var(--mg-ink); color: var(--mg-on-ink); font-size: var(--mg-text-xs); }
.mg-button--primary .mg-button__count { background: var(--mg-on-ink); color: var(--mg-ink); }

.mg-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--mg-seg-track-radius); background: var(--mg-sunken); }
.mg-seg__opt { display: inline-flex; align-items: center; gap: 7px; height: calc(var(--mg-control) - 6px); padding: 0 var(--mg-space-4); border: 0; border-radius: var(--mg-seg-radius); background: transparent; color: var(--mg-ink-2); font: 700 var(--mg-text-sm)/1 var(--mg-font); cursor: pointer; transition: background-color var(--mg-motion-quick), color var(--mg-motion-quick); }
.mg-seg__opt:hover { color: var(--mg-ink); }
.mg-seg__opt[aria-checked="true"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-seg__opt { position: relative; }
.mg-seg__opt > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
.mg-seg__opt:has(input:checked) { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-seg__opt.is-checked { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-seg__opt:has(input:focus-visible) { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-seg__opt.is-focus { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-seg__opt:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.mg-seg__opt.is-disabled { opacity: 0.5; cursor: not-allowed; }
@media (forced-colors: active) { .mg-seg__opt:has(input:checked), .mg-seg__opt.is-checked { outline: 2px solid Highlight; outline-offset: -2px; } }

.mg-date { display: inline-flex; align-items: center; gap: var(--mg-space-2); }
.mg-date__label { display: grid; gap: 2px; min-width: 20ch; text-align: center; }
.mg-date__day { font: 800 var(--mg-text-lg)/1.2 var(--mg-font); letter-spacing: -0.01em; }
.mg-date__meta { font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }

.mg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mg-field__label { font: 700 var(--mg-text-sm)/1.3 var(--mg-font); color: var(--mg-ink); }
.mg-field__label small { font-weight: 500; color: var(--mg-ink-2); }
.mg-field__help { margin: 0; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-field__error { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-alarm-text); }
.mg-field__error::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-alarm); }
.mg-control { position: relative; display: flex; align-items: center; }
.mg-input, .mg-select, .mg-textarea { width: 100%; height: var(--mg-field-height); padding: 0 var(--mg-field-pad-x); border: var(--mg-field-border) solid var(--mg-rule-strong); border-radius: var(--mg-field-radius); background: var(--mg-surface); color: var(--mg-ink); font: 500 var(--mg-text-md)/1.4 var(--mg-font); transition: border-color var(--mg-motion-quick), box-shadow var(--mg-motion-quick); }
.mg-input:hover, .mg-select:hover, .mg-textarea:hover { border-color: var(--mg-ink-2); }
.mg-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--mg-ink-2) 50%), linear-gradient(135deg, var(--mg-ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.mg-input:focus, .mg-select:focus, .mg-textarea:focus { border-color: var(--mg-blue); box-shadow: 0 0 0 4px var(--mg-blue-tint); outline: none; }
.mg-input--num { text-align: right; padding-right: 52px; font-weight: 700; }
.mg-control__unit { position: absolute; right: 14px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); pointer-events: none; }
.mg-control__icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--mg-ink-2); pointer-events: none; }
.mg-control__icon ~ .mg-input { padding-left: 42px; border-radius: var(--mg-radius-dot); }
.mg-textarea { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.mg-input::placeholder, .mg-textarea::placeholder { color: var(--mg-ink-2); opacity: 1; }
.mg-input:disabled, .mg-select:disabled, .mg-textarea:disabled { background: var(--mg-sunken); border-color: var(--mg-sunken); color: var(--mg-ink-2); cursor: not-allowed; }
.mg-input[aria-invalid="true"], .mg-select[aria-invalid="true"], .mg-textarea[aria-invalid="true"] { border-color: var(--mg-alarm); box-shadow: 0 0 0 4px var(--mg-alarm-tint); }

.mg-toggle, .mg-check, .mg-radio { display: flex; align-items: center; gap: var(--mg-space-3); min-height: var(--mg-control); font: 500 var(--mg-text-md)/1.4 var(--mg-font); cursor: pointer; }
.mg-toggle { position: relative; justify-content: space-between; }
.mg-toggle input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mg-toggle__track { flex: none; position: relative; width: 44px; height: 26px; border-radius: var(--mg-toggle-radius); background: var(--mg-rule-strong); transition: background-color var(--mg-motion-quick); }
.mg-toggle__track::before { content: ""; position: absolute; top: var(--mg-space-1); left: var(--mg-space-1); width: 18px; height: 18px; border-radius: var(--mg-toggle-radius); background: var(--mg-surface); transition: transform var(--mg-motion-quick), background-color var(--mg-motion-quick); }
.mg-toggle input:checked + .mg-toggle__track { background: var(--mg-ink); }
.mg-toggle input:checked + .mg-toggle__track::before { transform: translateX(18px); background: var(--mg-on-ink); }
.mg-toggle--disabled, .mg-check--disabled, .mg-radio--disabled { color: var(--mg-ink-2); cursor: not-allowed; }
.mg-toggle:has(input:disabled), .mg-check:has(input:disabled), .mg-radio:has(input:disabled) { color: var(--mg-ink-2); cursor: not-allowed; }
.mg-toggle input:disabled + .mg-toggle__track { background: var(--mg-sunken); }
.mg-check input, .mg-radio input { appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--mg-rule-strong); background: var(--mg-surface); cursor: pointer; }
.mg-check input { border-radius: calc(var(--mg-radius-field) / 2); }
.mg-radio input { border-radius: var(--mg-radius-dot); }
.mg-check input:checked, .mg-check input:indeterminate, .mg-radio input:checked { background: var(--mg-ink); border-color: var(--mg-ink); }
.mg-check input:checked::after { content: ""; width: 10px; height: 5px; border: 2px solid var(--mg-on-ink); border-top: 0; border-right: 0; border-radius: 1px; transform: translateY(-1px) rotate(-45deg); }
.mg-check input:indeterminate::after { content: ""; width: 9px; height: 2px; border-radius: 1px; background: var(--mg-on-ink); }
.mg-radio input:checked::after { content: ""; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-on-ink); }
.mg-check input:disabled, .mg-radio input:disabled { background: var(--mg-sunken); border-color: var(--mg-rule); }

.mg-card { min-width: 0; background: var(--mg-surface); border-radius: var(--mg-card-radius); box-shadow: var(--mg-card-shadow); }
.mg-card__head { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 56px; padding: var(--mg-space-4) var(--mg-d-pad) 0; }
.mg-card__title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-lg)/1.3 var(--mg-font); letter-spacing: -0.01em; }
.mg-card__sub { font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-card__tools { margin-left: auto; display: flex; align-items: center; gap: var(--mg-space-2); }
.mg-card__body { padding: var(--mg-space-4) var(--mg-d-pad) var(--mg-d-pad); }
.mg-card__foot { display: flex; justify-content: flex-end; gap: var(--mg-space-2); padding: 0 var(--mg-d-pad) var(--mg-d-pad); }
.mg-card--flush > .mg-card__body { padding: var(--mg-space-2) 0 var(--mg-space-3); }
.mg-card--navy { background: var(--mg-navy); color: var(--mg-on-navy); box-shadow: none; }
.mg-card--navy .mg-card__sub, .mg-card--navy .mg-label, .mg-card--navy .mg-small { color: var(--mg-on-navy-2); }
@media (max-width: 560px) { .mg-card__head { padding-left: var(--mg-space-4); } .mg-card__body { padding: var(--mg-space-3) var(--mg-space-4) var(--mg-space-4); } }

.mg-shell { display: grid; grid-template-columns: var(--mg-rail) minmax(0, 1fr); min-height: 100%; background: var(--mg-canvas); }
.mg-rail { position: sticky; top: 0; height: 100vh; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--mg-space-5) var(--mg-space-3); background: var(--mg-navy); color: var(--mg-on-navy); }
.mg-rail__logo { display: block; padding: 0 var(--mg-space-3) var(--mg-space-2); }
.mg-rail__logo img { display: block; height: 22px; width: auto; }
.mg-rail__product { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); margin: var(--mg-space-3) 0 var(--mg-space-4); padding: 10px var(--mg-space-3); border: 0; border-radius: var(--mg-radius-field); background: var(--mg-navy-hi); color: var(--mg-on-navy); font: 700 var(--mg-text-sm)/1 var(--mg-font); cursor: pointer; text-align: left; }
.mg-rail__product small { display: block; margin-bottom: 3px; font-weight: 500; font-size: var(--mg-text-xs); color: var(--mg-on-navy-2); }
.mg-rail__group { margin: var(--mg-space-4) var(--mg-space-3) var(--mg-space-1); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-nav__item { position: relative; display: flex; align-items: center; gap: var(--mg-space-3); height: 40px; padding: 0 var(--mg-space-3) 0 22px; border: 0; border-radius: var(--mg-nav-item-radius); background: transparent; color: var(--mg-on-navy-2); font: 700 var(--mg-text-md)/1 var(--mg-font); text-decoration: none; cursor: pointer; }
.mg-nav__item svg { width: 18px; height: 18px; flex: none; }
.mg-nav__item:hover { background: var(--mg-navy-hi); color: var(--mg-on-navy); }
.mg-nav__item[aria-current="page"] { background: var(--mg-navy-hi); color: var(--mg-on-navy); }
.mg-nav__item[aria-current="page"]::before { content: ""; position: absolute; left: var(--mg-space-2); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: var(--mg-radius-dot); background: var(--mg-on-navy); }
.mg-rail__chev { transform: rotate(90deg); }
.mg-nav__n { margin-left: auto; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-rail__end { margin-top: auto; display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-3); border-radius: var(--mg-radius-field); }
.mg-rail__end .mg-avatar { background: var(--mg-navy-hi); color: var(--mg-on-navy); }
.mg-rail__end span { display: grid; gap: 2px; font: 700 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-rail__end small { font-weight: 500; font-size: var(--mg-text-xs); color: var(--mg-on-navy-2); }
.mg-nav__more { display: none; }
.mg-rail__product small:last-child:not(:first-child) { margin: 3px 0 0; }
.mg-rail__fold { display: flex; align-items: center; gap: var(--mg-space-2); width: 100%; min-height: 32px; margin: var(--mg-space-3) 0 var(--mg-space-1); padding: 0 var(--mg-space-3); border: 0; border-radius: var(--mg-radius-dot); background: transparent; color: var(--mg-on-navy-2); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); text-align: left; cursor: pointer; }
.mg-rail__fold:hover { color: var(--mg-on-navy); }
.mg-rail__fold > span { flex: 1 1 auto; min-width: 0; }
.mg-rail__fold > svg { flex: none; width: 14px; height: 14px; transition: transform var(--mg-dur-quick) var(--mg-ease-standard); }
.mg-rail__fold[aria-expanded="false"] > svg { transform: rotate(-90deg); }
.mg-rail__items { display: flex; flex-direction: column; gap: 2px; }
.mg-rail__items[hidden] { display: none; }
.mg-rail__help { margin-bottom: var(--mg-space-1); }
.mg-rail__foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--mg-space-2); border-top: 1px solid var(--mg-navy-hi); }
.mg-rail__foot .mg-nav__item { height: 36px; font-size: var(--mg-text-sm); }
.mg-rail__foot ~ .mg-rail__end { margin-top: var(--mg-space-1); }
button.mg-rail__end { width: 100%; border: 0; background: transparent; color: var(--mg-on-navy); font: inherit; text-align: left; cursor: pointer; }
button.mg-rail__end:hover, button.mg-rail__end[aria-expanded="true"] { background: var(--mg-navy-hi); }
button.mg-rail__end:hover .mg-avatar { background: var(--mg-navy); }
.mg-rail__end > svg { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--mg-on-navy-2); transform: rotate(180deg); }
.mg-nav__dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: var(--mg-radius-dot); background: var(--mg-alarm); box-shadow: 0 0 0 2px var(--mg-navy); }
.mg-main { min-width: 0; padding: var(--mg-space-7) var(--mg-space-7) var(--mg-space-8); }
.mg-work { display: flex; flex-direction: column; min-width: 0; min-height: 100%; background: var(--mg-canvas); }
.mg-topbar { position: sticky; top: 0; z-index: var(--mg-z-sticky); display: flex; align-items: center; gap: var(--mg-space-3); min-height: 56px; padding: 0 var(--mg-space-7); border-bottom: 1px solid var(--mg-rule); background: var(--mg-canvas); color: var(--mg-ink); font-family: var(--mg-font); }
.mg-topbar__end { display: flex; align-items: center; gap: var(--mg-space-1); margin-left: auto; }
.mg-topbar .mg-button--icon { color: var(--mg-ink-2); }
.mg-topbar .mg-button--icon:hover, .mg-topbar .mg-button--icon[aria-expanded="true"] { background: var(--mg-hover); border-color: var(--mg-hover); color: var(--mg-ink); }
.mg-topbar .mg-button--icon[aria-pressed="true"] { background: var(--mg-hover); border-color: var(--mg-hover); color: var(--mg-ink); }
.mg-topbar .mg-bell__n { box-shadow: 0 0 0 2px var(--mg-canvas); }
.mg-chatlaunch { position: fixed; right: var(--mg-space-6); bottom: var(--mg-space-6); z-index: var(--mg-z-sticky); box-shadow: var(--mg-shadow-card); }
.mg-chatlaunch:hover, .mg-chatlaunch[aria-expanded="true"] { box-shadow: var(--mg-shadow-card); }
.mg-chatlaunch .mg-button__count { position: absolute; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--mg-canvas); }
.mg-pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-4); margin-bottom: var(--mg-space-6); }
.mg-pagehead__end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-4); }
.mg-rail--bar, .mg-topbar__chat { display: none; }
@media (max-width: 760px) {
  .mg-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .mg-rail { grid-row: 2; position: sticky; top: auto; bottom: 0; overflow: visible; z-index: var(--mg-z-sticky); height: auto; flex-direction: row; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .mg-rail__logo, .mg-rail__product, .mg-rail__group, .mg-rail__end, .mg-nav__n, .mg-rail__group ~ .mg-nav__item { display: none; }
  .mg-nav__more { display: flex; }
  .mg-rail__fold, .mg-rail__foot, .mg-rail__help, .mg-rail__items ~ .mg-rail__items { display: none; }
  .mg-rail__items { display: contents; }
  .mg-nav__item { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; height: auto; min-height: 54px; padding: 6px 2px; font-size: var(--mg-text-xs); border-radius: var(--mg-nav-item-radius); }
  .mg-nav__item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mg-nav__item[aria-current="page"]::before { left: 50%; top: var(--mg-space-1); margin: 0 0 0 -3.5px; }
  .mg-main { padding: var(--mg-space-5) var(--mg-space-4) var(--mg-space-6); }
  .mg-topbar { padding: 0 var(--mg-space-4); }
  .mg-topbar .mg-cmdk-trigger, .mg-topbar__end > .mg-button--icon:not(.mg-bell, .mg-topbar__chat) { display: none; }
  .mg-chatlaunch { display: none; }
  .mg-topbar__chat { display: inline-flex; }
  .mg-rail--bar { position: fixed; top: auto; right: 0; bottom: 0; left: 0; display: flex; max-height: none; }
  .mg-rail--bar .mg-nav__item { flex: 1 1 auto; justify-content: flex-end; padding: 13px var(--mg-space-1) 6px; }
  .mg-rail--bar .mg-nav__item[aria-expanded="true"] { background: var(--mg-navy-hi); color: var(--mg-on-navy); }
}

.mg-tabs { display: flex; gap: var(--mg-space-6); overflow-x: auto; border-bottom: 1.5px solid var(--mg-rule); }
.mg-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 48px; padding: var(--mg-space-2) 2px 0; border: 0; background: transparent; color: var(--mg-ink-2); font: 700 var(--mg-text-md)/1 var(--mg-font); cursor: pointer; }
.mg-tab:hover { color: var(--mg-ink); }
.mg-tab:focus-visible { outline-offset: -2px; border-radius: var(--mg-tab-radius); }
.mg-tab[aria-selected="true"] { color: var(--mg-ink); }
.mg-tab__label { position: relative; }
.mg-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 3px; border-radius: 3px 3px 0 0; background: var(--mg-ink); }
.mg-tab[aria-selected="true"] .mg-tab__label::before { content: ""; position: absolute; left: 50%; top: -11px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-tab__n { min-width: 22px; padding: 3px 7px; border-radius: var(--mg-badge-radius); background: var(--mg-sunken); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); text-align: center; }

.mg-menu { min-width: 240px; margin: 0; padding: 6px; list-style: none; background: var(--mg-raised); border-radius: var(--mg-menu-radius); box-shadow: var(--mg-shadow-float); }
.mg-menu__item { display: flex; align-items: center; gap: var(--mg-space-3); width: 100%; min-height: 38px; padding: 0 var(--mg-space-3); border: 0; border-radius: var(--mg-menu-item-radius); background: transparent; color: var(--mg-ink); font: 600 var(--mg-text-md)/1 var(--mg-font); text-align: left; cursor: pointer; }
.mg-menu__item svg { width: 18px; height: 18px; flex: none; color: var(--mg-ink-2); }
.mg-menu__item:hover, .mg-menu__item[data-active] { background: var(--mg-hover); }
.mg-menu__item .mg-small { margin-left: auto; }
.mg-menu__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; padding-block: var(--mg-space-2); line-height: 1.3; }
.mg-menu__help { color: var(--mg-ink-2); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); white-space: normal; overflow-wrap: anywhere; }
.mg-menu__item[aria-checked] svg { visibility: hidden; }
.mg-menu__item[aria-checked="true"] svg { visibility: visible; color: var(--mg-ink); }
.mg-menu__item--alarm, .mg-menu__item--alarm svg { color: var(--mg-alarm-text); }
.mg-menu__sep { height: 1.5px; margin: 6px var(--mg-space-1); background: var(--mg-rule); }
.mg-menu__label { padding: 10px var(--mg-space-3) 6px; font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }

.mg-goal { --value: 0; --plan: 0; display: grid; gap: var(--mg-space-3); }
.mg-goal__statement { margin: 0 0 var(--mg-space-1); font: 800 var(--mg-text-2xl)/1.1 var(--mg-font); letter-spacing: -0.025em; }
.mg-goal__read { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1) 10px; }
.mg-goal__num { font: 800 var(--mg-text-3xl)/1 var(--mg-font); letter-spacing: -0.03em; }
.mg-goal__of { font: 700 var(--mg-text-md)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-goal__note { margin-left: auto; }
.mg-goal__stem { position: relative; height: 22px; }
.mg-goal__stem::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-goal__fill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; width: min(var(--value) * 100%, 100%); border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: width var(--mg-motion-data); }
.mg-goal__dot { position: absolute; top: 50%; left: min(var(--value) * 100%, 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 4px var(--mg-surface); transition: left var(--mg-motion-data); }
.mg-goal__end { position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: inset 0 0 0 2.5px var(--mg-ink); }
.mg-goal__plan { position: absolute; top: -3px; bottom: -3px; left: calc(var(--plan) * 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--mg-ink-2); }
.mg-goal__scale { position: relative; height: 1em; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-goal__scale span { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); white-space: nowrap; }
.mg-goal__scale span:first-child { transform: none; }
.mg-goal__scale span:last-child { transform: translateX(-100%); }
.mg-goal--behind .mg-goal__dot { background: var(--mg-warn); }
.mg-goal--done .mg-goal__fill { background: var(--mg-ok); }
.mg-goal--done .mg-goal__dot { background: var(--mg-ok); }
.mg-goal--done .mg-goal__end { display: none; }
.mg-card--navy .mg-goal__stem::before { background: var(--mg-navy-hi); }
.mg-card--navy .mg-goal__fill { background: var(--mg-on-navy); }
.mg-card--navy .mg-goal__dot { box-shadow: 0 0 0 4px var(--mg-navy); }
.mg-card--navy .mg-goal__end { background: var(--mg-navy); box-shadow: inset 0 0 0 2.5px var(--mg-on-navy); }
.mg-card--navy .mg-goal__plan { background: var(--mg-on-navy-2); }
.mg-card--navy .mg-goal__of, .mg-card--navy .mg-goal__scale { color: var(--mg-on-navy-2); }
.mg-tv .mg-goal { gap: var(--mg-space-4); }
.mg-tv .mg-goal__num { font-size: var(--mg-tv-num); }
.mg-tv .mg-goal__of { font-size: var(--mg-tv-label); color: var(--mg-on-navy-2); }
.mg-tv .mg-goal__stem { height: clamp(28px, 2.4vw, 44px); }
.mg-tv .mg-goal__stem::before, .mg-tv .mg-goal__fill { height: clamp(8px, 0.8vw, 14px); margin-top: calc(clamp(var(--mg-space-2), 0.8vw, 14px) / -2); }
.mg-tv .mg-goal__stem::before { background: var(--mg-navy-hi); }
.mg-tv .mg-goal__fill { background: var(--mg-on-navy); }
.mg-tv .mg-goal__dot { width: clamp(28px, 2.4vw, 44px); height: clamp(28px, 2.4vw, 44px); margin: calc(clamp(28px, 2.4vw, 44px) / -2) 0 0 calc(clamp(28px, 2.4vw, 44px) / -2); box-shadow: 0 0 0 5px var(--mg-navy); }
.mg-tv .mg-goal__plan { background: var(--mg-on-navy-2); width: 3px; }
.mg-tv .mg-goal__end { background: var(--mg-navy); box-shadow: inset 0 0 0 3px var(--mg-on-navy); width: 20px; height: 20px; margin-top: -10px; }

.mg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mg-space-6); }
.mg-kpi { display: grid; align-content: space-between; gap: var(--mg-space-2); min-width: 0; padding: var(--mg-d-pad); background: var(--mg-surface); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); container-type: inline-size; }
.mg-kpi__value { font: 800 clamp(var(--mg-text-xl), 16cqi, var(--mg-text-3xl))/1.05 var(--mg-font); letter-spacing: -0.03em; white-space: nowrap; }
@supports not (width: 1cqi) { .mg-kpi__value { font: 800 clamp(var(--mg-text-xl), 3vw, var(--mg-text-3xl))/1.05 var(--mg-font); } }
.mg-kpi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-delta { display: inline-flex; align-items: center; gap: var(--mg-space-1); padding: 3px var(--mg-space-2) 3px 6px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); font: 800 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink); white-space: nowrap; }
.mg-delta--up::before, .mg-delta--down::before { content: ""; width: 8px; height: 7px; background: var(--mg-delta-tone, currentColor); }
.mg-delta--up::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mg-delta--down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mg-delta--good { --mg-delta-tone: var(--mg-ok-text); }
.mg-delta--bad { --mg-delta-tone: var(--mg-alarm-text); }
.mg-delta__word { font-weight: 600; color: var(--mg-delta-tone, var(--mg-ink-2)); }
.mg-card--navy .mg-delta { background: var(--mg-navy-hi); color: var(--mg-on-navy); --mg-delta-tone: var(--mg-on-navy); }

.mg-pins { --max: 10; display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-top: var(--mg-space-2); }
.mg-pins i { position: relative; flex: 1; max-width: 14px; height: calc(var(--v) / var(--max) * 100%); min-height: 6px; display: flex; justify-content: center; }
.mg-pins i::before { content: ""; width: 2px; height: 100%; border-radius: 1px; background: var(--mg-rule-strong); }
.mg-pins i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-pins i:last-child::before { background: var(--mg-blue); }
.mg-pins i:last-child::after { width: 9px; height: 9px; top: calc(-1 * var(--mg-space-1)); background: var(--mg-blue); }
.mg-pins--past i:last-child::before { background: var(--mg-rule-strong); }
.mg-pins--past i:last-child::after { width: 7px; height: 7px; top: -3px; background: var(--mg-ink); }

.mg-hours { --max: 40; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--mg-space-3); }
.mg-hours__axis { position: relative; min-width: 22px; height: 168px; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); text-align: right; }
.mg-hours__axis span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.mg-hours__plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; height: 168px; background: repeating-linear-gradient(to top, var(--mg-rule) 0 1.5px, transparent 1.5px 25%), linear-gradient(var(--mg-rule), var(--mg-rule)) top / 100% 1.5px no-repeat; }
.mg-hours__col { position: relative; height: 100%; display: flex; justify-content: center; }
.mg-hours__now { position: absolute; bottom: 0; width: 4px; height: calc(var(--v) / var(--max) * 100%); border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: height var(--mg-motion-data); }
.mg-hours__now::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-hours__prev { position: absolute; bottom: calc(var(--prev) / var(--max) * 100%); left: 50%; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: inset 0 0 0 2.5px var(--mg-chart-2); }
.mg-hours__col--live .mg-hours__now { background: var(--mg-blue); }
.mg-hours__col--live .mg-hours__now::after { background: var(--mg-blue); box-shadow: 0 0 0 4px var(--mg-blue-tint); }
.mg-hours__val { position: absolute; bottom: min(calc(max(var(--v), var(--prev, 0)) / var(--max) * 100% + var(--mg-space-4)), calc(100% - var(--mg-space-1))); left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1.2 var(--mg-font); white-space: nowrap; }
.mg-hours__x { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: 10px; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); text-align: center; }
.mg-legend { display: flex; flex-wrap: wrap; gap: var(--mg-space-4); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mg-legend i { width: 10px; height: 10px; border-radius: var(--mg-radius-dot); }
.mg-legend .now { background: var(--mg-ink); }
.mg-legend .live { background: var(--mg-blue); }
.mg-hours__col--near .mg-hours__prev { margin-left: 5px; }
.mg-legend .prev { box-shadow: inset 0 0 0 2.5px var(--mg-chart-2); }

.mg-board { --score-w: 3.6em; margin: 0; padding: 0; list-style: none; }
.mg-board__row { display: grid; grid-template-columns: 1.6em var(--mg-d-avatar) minmax(0, 0.9fr) minmax(60px, 1fr) var(--score-w); align-items: center; gap: var(--mg-space-3); min-height: var(--mg-d-row); padding: var(--mg-space-1) var(--mg-d-pad); }
.mg-board__rank { font: 800 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink-2); text-align: right; }
.mg-board__row--top .mg-board__rank { color: var(--mg-ink); }
.mg-board__who { min-width: 0; display: grid; gap: 2px; }
.mg-board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-md)/1.2 var(--mg-font); }
.mg-board__note { display: var(--mg-d-note); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-board__stem { position: relative; height: 14px; }
.mg-board__stem::before { content: ""; position: absolute; left: 0; top: 50%; height: var(--mg-stem); margin-top: calc(var(--mg-stem) / -2); width: calc(var(--share) * 1%); border-radius: var(--mg-radius-dot); background: var(--mg-rule-strong); transition: width var(--mg-motion-data); }
.mg-board__stem::after { content: ""; position: absolute; top: 0; left: calc(var(--share) * 1%); width: 14px; height: 14px; margin-left: -7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: left var(--mg-motion-data); }
.mg-board__row--top .mg-board__stem::before { background: var(--mg-ink); }
.mg-board__score { justify-self: end; font: 800 var(--mg-text-xl)/1 var(--mg-font); letter-spacing: -0.02em; padding: 2px var(--mg-space-1); }
.mg-board__row[aria-current="true"] { margin: 2px var(--mg-space-2); padding-inline: calc(var(--mg-space-5) - var(--mg-space-2)); border-radius: var(--mg-radius-dot); background: var(--mg-blue-tint); }
.mg-board__row[aria-current="true"] .mg-board__stem::before { background: var(--mg-blue); }
.mg-board__row[aria-current="true"] .mg-board__stem::after { background: var(--mg-blue); width: 18px; height: 18px; top: -2px; margin-left: -9px; box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-board__gap { display: flex; justify-content: center; padding: var(--mg-space-1) 0; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
@media (max-width: 520px) {
  .mg-board__row { grid-template-columns: 22px 32px minmax(0, 1fr) var(--score-w); grid-template-areas: "rank av who score" ". . stem stem"; row-gap: var(--mg-space-1); padding-inline: var(--mg-space-4); }
  .mg-board__rank { grid-area: rank; } .mg-board__row > .mg-avatar { grid-area: av; } .mg-board__who { grid-area: who; } .mg-board__score { grid-area: score; } .mg-board__stem { grid-area: stem; height: 10px; }
  .mg-board__stem::after { width: 10px; height: 10px; margin-left: -5px; }
  .mg-board__row[aria-current="true"] .mg-board__stem::after { width: 12px; height: 12px; top: -1px; margin-left: -6px; }
  .mg-board__row[aria-current="true"] { padding-inline: calc(var(--mg-space-4) - var(--mg-space-2)); }
}

.mg-feed { margin: 0; padding: 0; list-style: none; }
.mg-feed__item { display: grid; grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); min-height: calc(var(--mg-d-row) + 8px); padding: 6px var(--mg-d-pad); }
.mg-feed__text { min-width: 0; display: grid; gap: 2px; font: 500 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-feed__text b { font-weight: 800; }
.mg-feed__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-feed__end { display: grid; justify-items: end; gap: 3px; }
.mg-feed__amount { font: 800 var(--mg-text-md)/1 var(--mg-font); white-space: nowrap; }
.mg-feed__time { font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-feed__item--new { margin: 0 var(--mg-space-2); padding-inline: calc(var(--mg-space-5) - var(--mg-space-2)); border-radius: var(--mg-radius-field); animation: mg-arrive 2.6s ease-out; }
.mg-feed__item--goal .mg-feed__amount { padding: 5px 10px; border-radius: var(--mg-radius-dot); background: var(--mg-ok-tint); color: var(--mg-ok-text); font-size: var(--mg-text-xs); }
.mg-feed__item--record .mg-feed__amount { padding: 5px 10px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font-size: var(--mg-text-xs); }
@keyframes mg-arrive { 0%, 60% { background: var(--mg-blue-tint); } 100% { background: transparent; } }

.mg-table-wrap { max-width: 100%; max-height: var(--mg-table-max, 70vh); overflow: auto; }
.mg-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 var(--mg-text-md)/1.35 var(--mg-font); text-align: left; }
.mg-table th { position: sticky; top: 0; z-index: var(--mg-z-sticky); height: 38px; padding: 0 var(--mg-space-3); background: var(--mg-surface); box-shadow: inset 0 -1.5px 0 var(--mg-rule); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-table th:first-child, .mg-table td:first-child { padding-left: var(--mg-space-5); }
.mg-table th:last-child, .mg-table td:last-child { padding-right: var(--mg-space-5); }
.mg-table th[aria-sort="descending"], .mg-table th[aria-sort="ascending"] { color: var(--mg-ink); }
.mg-table th[aria-sort="descending"]::after, .mg-table th[aria-sort="ascending"]::after { content: ""; display: inline-block; width: 8px; height: 6px; margin-left: 6px; background: var(--mg-ink); vertical-align: middle; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mg-table th[aria-sort="ascending"]::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mg-table td { height: var(--mg-d-cell); padding: 0 var(--mg-space-3); border-bottom: 1px solid var(--mg-rule); }
.mg-table tbody tr:last-child td { border-bottom: 0; }
.mg-table tbody tr:hover td { background: var(--mg-hover); }
.mg-table tbody tr.is-selected td, .mg-table tbody tr[aria-selected="true"] td { background: var(--mg-hover); }
.mg-table tbody tr.is-selected td:first-child, .mg-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-table tbody tr.is-selected th[scope="row"], .mg-table tbody tr[aria-selected="true"] th[scope="row"] { background: var(--mg-hover); }
.mg-table tbody tr.is-selected th[scope="row"]:first-child, .mg-table tbody tr[aria-selected="true"] th[scope="row"]:first-child { box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-table [data-num] { text-align: right; font-weight: 700; }
.mg-table--tight td { height: var(--mg-row-tight); }
.mg-dim { color: var(--mg-ink-2); }

.mg-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--mg-space-3); padding: var(--mg-space-4) var(--mg-space-5); border-radius: var(--mg-radius-card); background: var(--mg-blue-tint); }
.mg-alert__dot { width: var(--mg-dot); height: var(--mg-dot); margin-top: 6px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); }
.mg-alert__title { margin: 0; font: 800 var(--mg-text-md)/1.45 var(--mg-font); }
.mg-alert__text { margin: 2px 0 0; font: 500 var(--mg-text-md)/1.45 var(--mg-font); color: var(--mg-ink); }
.mg-alert--ok { background: var(--mg-ok-tint); } .mg-alert--ok .mg-alert__dot { background: var(--mg-ok); }
.mg-alert--warn { background: var(--mg-warn-tint); } .mg-alert--warn .mg-alert__dot { background: var(--mg-warn); }
.mg-alert--alarm { background: var(--mg-alarm-tint); } .mg-alert--alarm .mg-alert__dot { background: var(--mg-alarm); }
@media (max-width: 560px) { .mg-alert { grid-template-columns: auto minmax(0, 1fr); } .mg-alert > .mg-button { grid-column: 2; justify-self: start; } }

.mg-toasts { position: fixed; right: var(--mg-space-5); bottom: calc(var(--mg-space-5) + env(safe-area-inset-bottom, 0px)); z-index: var(--mg-z-toast); display: grid; gap: var(--mg-space-2); width: min(420px, calc(100vw - 32px)); }
.mg-toast { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 52px; padding: 6px 6px 6px 18px; border-radius: var(--mg-radius-dot); background: var(--mg-navy); color: var(--mg-on-navy); box-shadow: var(--mg-shadow-float); font: 700 var(--mg-text-md)/1.3 var(--mg-font); animation: mg-enter var(--mg-motion-enter) both; }
.mg-toast::before { content: ""; flex: none; width: var(--mg-dot); height: var(--mg-dot); border-radius: var(--mg-radius-dot); background: var(--mg-ok); }
.mg-toast--alarm::before { background: var(--mg-alarm); }
.mg-toast__msg { flex: 1; min-width: 0; }
.mg-toast .mg-button { background: var(--mg-navy-hi); border-color: var(--mg-navy-hi); color: var(--mg-on-navy); }
.mg-toast .mg-button:hover { background: var(--mg-on-navy); border-color: var(--mg-on-navy); color: var(--mg-navy); }
@keyframes mg-enter { from { opacity: 0; transform: translateY(var(--mg-move-md)) scale(0.98); } }

.mg-dialog { inset: 0; width: min(480px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); margin: auto; overflow: auto; padding: 0; border: 0; border-radius: var(--mg-dialog-radius); background: var(--mg-raised); color: var(--mg-ink); box-shadow: var(--mg-shadow-float); }
.mg-dialog::backdrop { background: var(--mg-scrim); }
.mg-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); padding: var(--mg-space-6) var(--mg-space-4) 0 var(--mg-space-6); }
.mg-dialog__body { padding: var(--mg-space-2) var(--mg-space-6) var(--mg-space-5); }
.mg-dialog__text { margin: 0; color: var(--mg-ink-2); }
.mg-dialog__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mg-space-2); margin: var(--mg-space-5) 0 0; }
.mg-dialog__facts div { padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); }
.mg-dialog__facts dt { font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-dialog__facts dd { margin: 2px 0 0; font: 800 var(--mg-text-xl)/1.1 var(--mg-font); letter-spacing: -0.02em; }
.mg-dialog__foot { display: flex; justify-content: flex-end; gap: var(--mg-space-2); padding: 0 var(--mg-space-6) var(--mg-space-6); }
@media (max-width: 560px) { .mg-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .mg-dialog__foot .mg-button { flex: 1; } }

.mg-empty { display: grid; justify-items: center; gap: var(--mg-space-3); padding: var(--mg-space-8) var(--mg-space-5); text-align: center; }
.mg-empty .mg-trappen { --mg-trappen-size: 40px; margin-bottom: var(--mg-space-2); }
.mg-empty__title { margin: 0; font: 800 var(--mg-text-xl)/1.2 var(--mg-font); letter-spacing: -0.02em; }
.mg-empty__text { max-width: 40ch; margin: 0 0 var(--mg-space-2); color: var(--mg-ink-2); }
.mg-skel { display: block; height: 12px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); }

.mg-lane { --start: 480; --end: 1200; --mg-lane-who: 132px; position: relative; display: grid; grid-template-columns: var(--mg-lane-who) minmax(0, 1fr); font: 600 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-lane__ruler { position: relative; height: 32px; }
.mg-lane__hours { position: absolute; top: 0; right: 0; bottom: 10px; left: 0; display: flex; justify-content: space-between; align-items: flex-end; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-lane__hours span { width: 0; display: flex; justify-content: center; }
.mg-lane__who { display: flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-d-row); min-width: 0; padding-right: var(--mg-space-3); }
.mg-lane__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-lane__who--head { min-height: 32px; }
.mg-lane__track { position: relative; min-height: var(--mg-d-row); background: linear-gradient(var(--mg-rule), var(--mg-rule)) left center / 100% 1.5px no-repeat; }
.mg-shift { position: absolute; top: 9px; bottom: 9px; left: calc((var(--from) - var(--start)) / (var(--end) - var(--start)) * 100%); width: calc((var(--to) - var(--from)) / (var(--end) - var(--start)) * 100%); display: flex; align-items: center; gap: var(--mg-space-2); padding: 0 var(--mg-space-3); overflow: hidden; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); white-space: nowrap; }
.mg-shift small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; opacity: 0.8; }
.mg-shift--open { background: var(--mg-surface); color: var(--mg-ink); box-shadow: inset 0 0 0 2px var(--mg-rule-strong); }
.mg-shift--open small { opacity: 1; color: var(--mg-ink-2); }
.mg-shift--conflict { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); box-shadow: inset 0 0 0 2px var(--mg-alarm); }
.mg-shift--conflict small { opacity: 1; }
.mg-shift--absent { background: var(--mg-sunken); color: var(--mg-ink-2); }
.mg-shift--absent b { text-decoration: line-through; }
.mg-shift--absent small { opacity: 1; }
.mg-lane__now { position: absolute; top: var(--mg-space-6); bottom: 0; left: calc(var(--mg-lane-who) + (100% - var(--mg-lane-who)) * (var(--now) - var(--start)) / (var(--end) - var(--start))); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--mg-blue); pointer-events: none; }
.mg-lane__now::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-surface); }
@media (max-width: 600px) {
  .mg-lane { grid-template-columns: 1fr; }
  .mg-lane__ruler, .mg-lane__who--head, .mg-lane__now { display: none; }
  .mg-lane__who { min-height: 0; padding-top: var(--mg-space-3); }
  .mg-lane__track { min-height: 0; padding: 6px 0 var(--mg-space-2); background: none; }
  .mg-shift { position: static; width: auto; height: 36px; }
}

.mg-lane--calls { --mg-lane-who: 176px; }
.mg-lane--calls .mg-lane__who { gap: var(--mg-space-3); }
.mg-lane--calls .mg-lane__name { display: grid; min-width: 0; gap: 2px; }
.mg-lane--calls .mg-lane__name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mg-lane--calls .mg-lane__name .mg-status { font-size: var(--mg-text-xs); }
.mg-lane__block { position: absolute; top: calc(50% - var(--mg-space-1)); height: 8px; left: calc((var(--from) - var(--start)) / (var(--end) - var(--start)) * 100%); width: max(14px, calc((var(--to) - var(--from)) / (var(--end) - var(--start)) * 100%)); border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-lane__block--now::after { content: ""; position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 2px var(--mg-surface); }
.mg-lane__sale { position: absolute; top: calc(50% - var(--mg-space-4)); left: calc((var(--at) - var(--start)) / (var(--end) - var(--start)) * 100%); width: 7px; height: 7px; margin-left: -3.5px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-lane--calls[data-density="compact"] .mg-lane__sale, [data-density="compact"] .mg-lane--calls .mg-lane__sale { top: calc(50% - 13px); width: 6px; height: 6px; margin-left: -3px; }
.mg-lane--calls .mg-lane__track { overflow: visible; }
.mg-lane--calls .mg-lane__hours span:first-child { justify-content: flex-start; }
.mg-lane--calls .mg-lane__hours span:last-child { justify-content: flex-end; }
@media (max-width: 600px) {
  .mg-lane--calls .mg-lane__track { min-height: 40px; padding: 0; background: linear-gradient(var(--mg-rule), var(--mg-rule)) left 65% / 100% 1.5px no-repeat; }
  .mg-lane--calls .mg-lane__who { padding-top: var(--mg-space-3); }
  .mg-lane--calls .mg-lane__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--mg-space-2); }
  .mg-lane--calls .mg-lane__block { top: calc(65% - var(--mg-space-1)); }
  .mg-lane--calls .mg-lane__sale { top: calc(65% - var(--mg-space-4)); }
}
@container mg-view (max-width: 600px) {
  .mg-lane--calls { grid-template-columns: minmax(0, 1fr); }
  .mg-lane--calls .mg-lane__ruler, .mg-lane--calls .mg-lane__who--head, .mg-lane--calls .mg-lane__now { display: none; }
  .mg-lane--calls .mg-lane__who { min-height: 0; padding-top: var(--mg-space-3); }
  .mg-lane--calls .mg-lane__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--mg-space-2); }
  .mg-lane--calls .mg-lane__track { min-height: 40px; padding: 0; background: linear-gradient(var(--mg-rule), var(--mg-rule)) left 65% / 100% 1.5px no-repeat; }
  .mg-lane--calls .mg-lane__block { top: calc(65% - var(--mg-space-1)); }
  .mg-lane--calls .mg-lane__sale { top: calc(65% - var(--mg-space-4)); }
}

.mg-cel-micro .mg-avatar { position: relative; overflow: visible; }
.mg-cel-micro .mg-avatar::after { content: ""; position: absolute; top: calc(-1 * var(--mg-space-2)); right: calc(-1 * var(--mg-space-2)); bottom: calc(-1 * var(--mg-space-2)); left: calc(-1 * var(--mg-space-2)); border-radius: var(--mg-radius-dot); box-shadow: 0 0 0 2px var(--mg-blue); opacity: 0; pointer-events: none; animation: mg-ring-once 700ms var(--mg-ease-exit) both; }
.mg-cel-micro .mg-board__score { position: relative; }
.mg-cel-plus { position: absolute; right: calc(100% + 6px); top: calc(-1 * var(--mg-space-1)); font: 800 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-blue-text); white-space: nowrap; opacity: 0; pointer-events: none; animation: mg-float-up 700ms var(--mg-ease-exit) both; }
@media (prefers-reduced-motion: reduce) {
  .mg-cel-micro .mg-avatar::after { animation: none !important; opacity: 0 !important; }
  .mg-cel-plus { animation: none !important; opacity: 1 !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-cel-micro .mg-avatar::after { animation: none !important; opacity: 0 !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-cel-plus { animation: none !important; opacity: 1 !important; }
:is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root) :is(.mg-cel-micro .mg-avatar::after, .mg-cel-plus) { display: none !important; }

.mg-tv { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--mg-space-8); padding: var(--mg-space-8) var(--mg-space-9); background: var(--mg-navy); color: var(--mg-on-navy); overflow: hidden; }
.mg-tv__label { font: 700 var(--mg-tv-label)/1.2 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-tv__num { margin: 0.1em 0 0; font: 800 var(--mg-tv-display)/0.9 var(--mg-font); letter-spacing: -0.05em; }
.mg-tv__goal { margin-top: var(--mg-space-6); }
.mg-tv .mg-live { color: var(--mg-on-navy); font-size: var(--mg-tv-label); }
.mg-tv .mg-live__time { color: var(--mg-on-navy-2); }
.mg-podium { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--mg-space-5); height: 100%; min-height: 340px; }
.mg-podium__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.mg-podium__col > * + * { margin-top: var(--mg-space-3); }
.mg-podium__head { display: grid; place-items: center; width: clamp(56px, 6vw, 112px); height: clamp(56px, 6vw, 112px); border-radius: var(--mg-radius-dot); background: var(--mg-on-navy); color: var(--mg-navy); font: 800 var(--mg-tv-label)/1 var(--mg-font); }
.mg-podium__stem { flex: none; width: clamp(10px, 1vw, 18px); height: calc(var(--share) * 0.55%); min-height: 12px; border-radius: var(--mg-radius-dot); background: var(--mg-on-navy); transition: height var(--mg-motion-data); }
.mg-podium__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--mg-tv-body)/1.1 var(--mg-font); text-align: center; letter-spacing: -0.02em; }
.mg-podium__score { font: 800 var(--mg-tv-num)/1 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-podium__col--first .mg-podium__head { transform: scale(1.18); box-shadow: 0 0 0 6px var(--mg-navy), 0 0 0 9px var(--mg-on-navy); }
.mg-podium__col--first .mg-podium__score { color: var(--mg-on-navy); }

.mg-moment { --art-w: calc(4 * clamp(40px, 4.4vw, 84px) + 3 * clamp(44px, 5vw, 96px) + var(--mg-space-8)); position: relative; display: grid; align-content: center; gap: var(--mg-space-3); padding: var(--mg-space-8) var(--mg-space-9); background: var(--mg-navy); color: var(--mg-on-navy); overflow: hidden; }
.mg-moment__kicker { display: flex; align-items: center; gap: 0.5em; font: 800 var(--mg-tv-label)/1 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-moment__name { max-width: calc(100% - var(--art-w)); margin: 0; font: 800 var(--mg-tv-display)/0.92 var(--mg-font); letter-spacing: -0.05em; text-wrap: balance; }
.mg-moment__what, .mg-moment__stats { max-width: calc(100% - var(--art-w)); }
.mg-moment__what { margin: 0; font: 600 var(--mg-tv-body)/1.25 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-moment__stats { display: flex; flex-wrap: wrap; margin-top: var(--mg-space-5); margin-bottom: -0.5em; font: 800 var(--mg-tv-num)/1 var(--mg-font); }
.mg-moment__stats span { margin: 0 1.4em 0.5em 0; padding: 0.35em 0.7em; border-radius: var(--mg-radius-dot); background: var(--mg-navy-hi); }
.mg-moment__stats small { margin-left: 0.4em; font: 700 var(--mg-tv-label)/1 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-moment__art { position: absolute; right: var(--mg-space-9); bottom: var(--mg-space-8); display: flex; align-items: flex-end; }
.mg-moment__art i + i { margin-left: clamp(44px, 5vw, 96px); }
.mg-moment__art i { display: block; width: clamp(40px, 4.4vw, 84px); height: clamp(40px, 4.4vw, 84px); border-radius: var(--mg-radius-dot); background: var(--mg-on-navy-2); }
.mg-moment__art i:nth-child(1) { margin-bottom: 0; }
.mg-moment__art i:nth-child(2) { margin-bottom: clamp(var(--mg-space-2), 0.93vw, 18px); }
.mg-moment__art i:nth-child(3) { margin-bottom: clamp(17px, 1.86vw, 36px); }
.mg-moment__art i:nth-child(4) { margin-bottom: 0; background: var(--mg-blue); }
.mg-moment__timer { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: var(--mg-blue); transform-origin: left; }
.mg-moment--goal .mg-moment__art i:nth-child(-n+3) { background: var(--mg-on-navy); }
.mg-moment--goal .mg-moment__timer { background: var(--mg-ok); }
@keyframes mg-timer { to { transform: scaleX(0); } }

.mg-myday { display: grid; gap: var(--mg-space-3); max-width: 440px; padding: var(--mg-space-4); background: var(--mg-canvas); }
.mg-myday__hero { display: grid; gap: var(--mg-space-5); padding: var(--mg-space-6) var(--mg-space-5) var(--mg-space-5); border-radius: var(--mg-radius-sheet); background: var(--mg-navy); color: var(--mg-on-navy); }
.mg-myday__hello { margin: 0; font: 800 var(--mg-text-2xl)/1.1 var(--mg-font); letter-spacing: -0.03em; }
.mg-myday__top { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); }
.mg-myday__top .mg-live { color: var(--mg-on-navy); }
.mg-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-4); padding: var(--mg-space-4) var(--mg-space-5); }
.mg-next__big { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--mg-radius-dot); background: var(--mg-blue-tint); color: var(--mg-blue-text); font: 800 var(--mg-text-xl)/1 var(--mg-font); }
.mg-next__text { display: grid; gap: 2px; font: 800 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-next__text small { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }

@keyframes mg-in-rise { from { opacity: 0; transform: translateY(var(--mg-rise-d, var(--mg-move-sm))); } }
@keyframes mg-in-fade { from { opacity: 0; } }
@keyframes mg-out-fade { to { opacity: 0; } }
@keyframes mg-grow-x { from { transform: scaleX(0); } }
@keyframes mg-grow-y { from { transform: scaleY(0); } }
@keyframes mg-pop { from { transform: scale(0); } }
@keyframes mg-land {
  0% { opacity: 0; transform: translateY(calc(-1 * min(0.9em, var(--mg-move-lg)))); animation-timing-function: var(--mg-ease-exit); }
  25% { opacity: 1; }
  70% { opacity: 1; transform: translateY(0) scale(var(--mg-land-sx, 1.08), var(--mg-land-sy, 0.92)); animation-timing-function: var(--mg-ease-enter); }
  100% { transform: none; }
}
@keyframes mg-pop-in { from { opacity: 0; transform: translateY(var(--mg-move-sm)) scale(0.98); } }
@keyframes mg-pop-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes mg-sheet-in { from { transform: translateY(100%); } }
@keyframes mg-sheet-out { to { transform: translateY(100%); } }
@keyframes mg-menu-in { from { opacity: 0; transform: translateY(calc(var(--mg-move-sm) * -0.5)) scale(0.96); } }
@keyframes mg-toast-out { to { opacity: 0; transform: translateY(var(--mg-move-md)); } }
@keyframes mg-climb { from { box-shadow: 0 0 0 3px var(--mg-blue); } }

.mg-rise { animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: calc(min(var(--i, 0), 3) * var(--mg-stagger)); }
.mg-rise-group > * { animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-rise-group > :nth-child(2) { animation-delay: calc(1 * var(--mg-stagger)); }
.mg-rise-group > :nth-child(3) { animation-delay: calc(2 * var(--mg-stagger)); }
.mg-rise-group > :nth-child(n+4) { animation-delay: calc(3 * var(--mg-stagger)); }

.mg-reveal { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; }

.mg-grow .mg-board__row { --d: calc(min(var(--i, 0), 5) * var(--mg-stagger)); }
.mg-grow .mg-board__stem::before { transform-origin: left center; animation: mg-grow-x var(--mg-dur-rise) var(--mg-ease-standard) both; animation-delay: var(--d, 0ms); }
.mg-grow .mg-board__stem::after { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; animation-delay: calc(var(--d, 0ms) + var(--mg-dur-rise) * 0.6); }
.mg-grow .mg-hours__col { --d: calc(min(var(--i, 0), 11) * var(--mg-stagger) / 2); }
.mg-grow .mg-hours__now { transform-origin: bottom center; animation: mg-grow-y var(--mg-dur-rise) var(--mg-ease-standard) both; animation-delay: var(--d, 0ms); }
.mg-grow .mg-hours__now::after { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; animation-delay: calc(var(--d, 0ms) + var(--mg-dur-rise) * 0.6); }
.mg-grow .mg-hours__prev, .mg-grow .mg-hours__val { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: calc(var(--d, 0ms) + var(--mg-dur-rise)); }
.mg-grow .mg-goal__fill { transform-origin: left center; animation: mg-grow-x var(--mg-dur-story) var(--mg-ease-standard) both; }
.mg-grow .mg-goal__dot { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; animation-delay: calc(var(--mg-dur-story) * 0.85); }
.mg-grow .mg-pins i::before { transform-origin: bottom center; animation: mg-grow-y var(--mg-dur-rise) var(--mg-ease-standard) both; }
.mg-grow .mg-pins i::after { animation: mg-pop var(--mg-dur-base) var(--mg-ease-rise) both; animation-delay: calc(var(--mg-dur-rise) * 0.6); }
.mg-grow .mg-podium__col { --d: calc(min(var(--i, 0), 4) * var(--mg-stagger) * 1.5); }
.mg-grow .mg-podium__stem { transform-origin: bottom center; animation: mg-grow-y var(--mg-dur-story) var(--mg-ease-standard) both; animation-delay: var(--d, 0ms); }
.mg-grow .mg-podium__head { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; animation-delay: calc(var(--d, 0ms) + var(--mg-dur-story) * 0.7); }
.mg-grow .mg-podium__name, .mg-grow .mg-podium__score { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: calc(var(--d, 0ms) + var(--mg-dur-story)); }

.mg-punktum--land::after { transform-origin: 50% 100%; animation: mg-land var(--mg-dur-rise) linear both; animation-delay: var(--mg-land-delay, 240ms); }

.mg-count { font-feature-settings: "tnum" 1; }
.mg-flip { transition: transform var(--mg-dur-rise) var(--mg-ease-standard); }
.mg-board__row[aria-current="true"].mg-flip { position: relative; z-index: 1; }
.mg-count { display: inline-block; min-width: calc(var(--mg-count-ch, 3) * 1ch); text-align: right; }
.mg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mg-board__row--climb { animation: mg-climb var(--mg-dur-story) var(--mg-ease-exit); }

.mg-dialog[open] { animation: mg-pop-in var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-dialog[open]::backdrop { animation: mg-in-fade var(--mg-dur-base) linear both; }
.mg-dialog.is-closing, .mg-menu[data-state="closing"], .mg-toast.is-leaving { pointer-events: none; }
.mg-dialog.is-closing { animation: mg-pop-out var(--mg-dur-exit) var(--mg-ease-exit) both; }
.mg-dialog.is-closing::backdrop { animation: mg-out-fade var(--mg-dur-exit) linear both; }
@media (max-width: 560px) {
  .mg-dialog[open] { animation: mg-sheet-in var(--mg-dur-rise) var(--mg-ease-standard) both; }
  .mg-dialog.is-closing { animation: mg-sheet-out var(--mg-dur-base) var(--mg-ease-exit) both; }
}
.mg-menu { transform-origin: var(--mg-menu-origin, top left); }
.mg-menu[data-state="open"] { animation: mg-menu-in var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-menu[data-state="closing"] { animation: mg-out-fade var(--mg-dur-exit) var(--mg-ease-exit) both; }
.mg-toast { animation: mg-enter var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-toast.is-leaving { animation: mg-toast-out var(--mg-dur-exit) var(--mg-ease-exit) both; }
.mg-delay-show { animation: mg-in-fade var(--mg-dur-base) linear both; animation-delay: 300ms; }

.mg-moment__kicker, .mg-moment__name, .mg-moment__what, .mg-moment__stats { --mg-rise-d: var(--mg-move-lg); animation: mg-in-rise var(--mg-dur-rise) var(--mg-ease-standard) both; }
.mg-moment__name { animation-delay: 120ms; }
.mg-moment__what { animation-delay: 240ms; }
.mg-moment__stats { animation-delay: 360ms; }
.mg-moment__art i { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; }
.mg-moment__art i:nth-child(1) { animation-delay: 450ms; }
.mg-moment__art i:nth-child(2) { animation-delay: 520ms; }
.mg-moment__art i:nth-child(3) { animation-delay: 590ms; }
.mg-moment__art i:nth-child(4) { animation-delay: 800ms; }
.mg-moment .mg-punktum::after { transform-origin: 50% 100%; animation: mg-land var(--mg-dur-rise) linear both; animation-delay: 800ms; }
.mg-moment__timer { animation: mg-timer calc(var(--mg-dur-moment) - 300ms) linear both; animation-delay: 300ms; }
.mg-moment.is-leaving { animation: mg-out-fade 300ms var(--mg-ease-exit) both; }

@media (prefers-reduced-motion: reduce) {
.mg-root *, .mg-root *::before, .mg-root *::after { transition-property: opacity, background-color, border-color, color !important; }
.mg-rise,
.mg-rise-group > *,
.mg-moment__kicker,
.mg-moment__name,
.mg-moment__what,
.mg-moment__stats,
.mg-dialog[open],
.mg-menu[data-state="open"],
.mg-toast,
.mg-grow .mg-board__stem::before,
.mg-grow .mg-board__stem::after,
.mg-grow .mg-hours__now,
.mg-grow .mg-hours__now::after,
.mg-grow .mg-hours__prev,
.mg-grow .mg-hours__val,
.mg-grow .mg-goal__fill,
.mg-grow .mg-goal__dot,
.mg-grow .mg-pins i::before,
.mg-grow .mg-pins i::after,
.mg-grow .mg-podium__stem,
.mg-grow .mg-podium__head,
.mg-grow .mg-podium__name,
.mg-grow .mg-podium__score,
.mg-moment__art i,
.mg-punktum--land::after,
.mg-moment .mg-punktum::after { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
.mg-dialog.is-closing,
.mg-toast.is-leaving,
.mg-menu[data-state="closing"],
.mg-moment.is-leaving { animation-name: mg-out-fade !important; animation-duration: var(--mg-dur-exit) !important; }
.mg-live::after,
.mg-trappen--load i,
.mg-tick,
.mg-feed__item--new,
.mg-moment__timer,
.mg-board__row--climb { animation: none !important; }
.mg-flip,
.mg-goal__fill,
.mg-goal__dot,
.mg-board__stem::before,
.mg-board__stem::after,
.mg-hours__now,
.mg-podium__stem,
.mg-toggle__track::before { transition: none !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-rise,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-rise-group > *,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment__kicker,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment__name,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment__what,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment__stats,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-dialog[open],
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-menu[data-state="open"],
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-toast,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-board__stem::before,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-board__stem::after,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-hours__now,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-hours__now::after,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-hours__prev,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-hours__val,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-goal__fill,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-goal__dot,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-pins i::before,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-pins i::after,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-podium__stem,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-podium__head,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-podium__name,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-grow .mg-podium__score,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment__art i,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-punktum--land::after,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment .mg-punktum::after { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-dialog.is-closing,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-toast.is-leaving,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-menu[data-state="closing"],
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment.is-leaving { animation-name: mg-out-fade !important; animation-duration: var(--mg-dur-exit) !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-live::after,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-trappen--load i,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-tick,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-feed__item--new,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-moment__timer,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-board__row--climb { animation: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-flip,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-goal__fill,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-goal__dot,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-board__stem::before,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-board__stem::after,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-hours__now,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-podium__stem,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-toggle__track::before { transition: none !important; }
:is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root) *, :is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root) *::before, :is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root) *::after { animation: none !important; transition: none !important; }

@media (pointer: coarse) {
  .mg-button, .mg-input, .mg-select, .mg-seg__opt, .mg-tab, .mg-menu__item, .mg-nav__item { min-height: var(--mg-control-touch); }
  .mg-button--icon { min-width: var(--mg-control-touch); }
  .mg-input, .mg-select, .mg-textarea { font-size: 16px; }
}

@media (forced-colors: active) {
  .mg-button, .mg-input, .mg-select, .mg-seg, .mg-card, .mg-toggle__track, .mg-check input, .mg-radio input, .mg-shift, .mg-avatar { border: 1px solid CanvasText; }
  .mg-seg__opt[aria-checked="true"], .mg-nav__item[aria-current="page"], .mg-board__row[aria-current="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .mg-punktum::after, .mg-status::before, .mg-live::before, .mg-live::after, .mg-alert__dot, .mg-goal__dot, .mg-goal__fill, .mg-board__stem::before, .mg-board__stem::after, .mg-hours__now, .mg-tab[aria-selected="true"] .mg-tab__label::before, .mg-toggle__track::before, .mg-check input:checked, .mg-check input:indeterminate, .mg-radio input:checked::after, .mg-trappen i { forced-color-adjust: none; background: Highlight; }
  .mg-status--off::before, .mg-hours__prev, .mg-goal__end { forced-color-adjust: none; background: Canvas; box-shadow: none; border: 2px solid CanvasText; }
  .mg-goal__stem::before, .mg-lane__now, .mg-lane__now::before, .mg-hours__now::after, .mg-pins i::before, .mg-pins i::after, .mg-podium__stem, .mg-podium__head { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .mg-hours__plot { forced-color-adjust: none; background: none; border-bottom: 1px solid CanvasText; }
}

.mg-cal { width: 308px; padding: var(--mg-space-3) var(--mg-space-3) 10px; background: var(--mg-raised); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-float); }
.mg-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mg-cal__month { font: 800 var(--mg-text-md)/1 var(--mg-font); letter-spacing: -0.01em; }
.mg-cal__grid { display: grid; grid-template-columns: 32px repeat(7, 36px); row-gap: 2px; justify-content: space-between; }
.mg-cal__wd { display: grid; place-items: center; height: 28px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cal__wk { display: grid; place-items: center; height: 36px; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cal__day { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--mg-ink); font: 600 var(--mg-text-sm)/1 var(--mg-font); cursor: pointer; }
.mg-cal__day > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--mg-radius-dot); }
.mg-cal__day:hover > span { background: var(--mg-hover); }
.mg-cal__day:focus-visible { outline: none; }
.mg-cal__day:focus-visible > span { outline: 2px solid var(--mg-focus); outline-offset: 1px; }
.mg-cal__day[data-outside] { color: var(--mg-ink-2); opacity: 0.6; }
.mg-cal__day:disabled { color: var(--mg-rule-strong); opacity: 1; cursor: not-allowed; }
.mg-cal__day:disabled:hover > span { background: transparent; }
.mg-cal__day[aria-current="date"]::after { content: ""; position: absolute; left: 50%; bottom: var(--mg-space-1); width: 5px; height: 5px; margin-left: -2.5px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); }
.mg-cal__day[aria-selected="true"] > span { background: var(--mg-ink); color: var(--mg-on-ink); font-weight: 800; }
.mg-cal__day[data-range="mid"] { background: var(--mg-sunken); }
.mg-cal__day[data-range="start"] { background: linear-gradient(90deg, transparent 50%, var(--mg-sunken) 50%); }
.mg-cal__day[data-range="end"] { background: linear-gradient(90deg, var(--mg-sunken) 50%, transparent 50%); }
.mg-cal__day[data-range="mid"]:hover > span { background: var(--mg-rule); }
.mg-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); margin-top: var(--mg-space-2); padding-top: 10px; border-top: 1.5px solid var(--mg-rule); }
.mg-cal__foot > :only-child { margin-right: auto; }
.mg-cal__sum { color: var(--mg-ink); font-weight: 800; }

.mg-listbox { margin: var(--mg-space-2) 0 0; padding: 6px; list-style: none; max-height: 300px; overflow-y: auto; background: var(--mg-raised); border-radius: var(--mg-radius-field); box-shadow: var(--mg-shadow-float); }
.mg-listbox__label { padding: var(--mg-space-2) var(--mg-space-3) 6px; font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-listbox__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--mg-space-3); font: 500 var(--mg-text-sm)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-option { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 52px; padding: var(--mg-space-2) var(--mg-space-3); border-radius: calc(var(--mg-radius-field) - 4px); cursor: pointer; }
.mg-option[data-active] { background: var(--mg-hover); }
.mg-option__text { display: grid; gap: 2px; min-width: 0; font: 500 var(--mg-text-md)/1.25 var(--mg-font); }
.mg-option__text > span, .mg-option__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-option__text small { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-option mark { background: none; color: inherit; font-weight: 800; }
.mg-option__check { flex: none; margin-left: auto; color: var(--mg-ink); visibility: hidden; }
.mg-option[aria-selected="true"] .mg-option__check { visibility: visible; }

.mg-tagfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--mg-control); padding: 6px var(--mg-space-2); border: 1.5px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); background: var(--mg-surface); transition: border-color var(--mg-motion-quick), box-shadow var(--mg-motion-quick); }
.mg-tagfield:hover { border-color: var(--mg-ink-2); }
.mg-tagfield:focus-within { border-color: var(--mg-blue); box-shadow: 0 0 0 4px var(--mg-blue-tint); }
.mg-tagfield input { flex: 1 1 8ch; min-width: 8ch; height: 30px; padding: 0 6px; border: 0; outline: 0; background: transparent; color: var(--mg-ink); font: 500 var(--mg-text-md)/1 var(--mg-font); }
.mg-tagfield input::placeholder { color: var(--mg-ink-2); opacity: 1; }
.mg-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--mg-space-3); border-radius: var(--mg-chip-radius); background: var(--mg-sunken); color: var(--mg-ink); font: 700 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; }
.mg-chip button { display: grid; place-items: center; width: 22px; height: 22px; margin-right: calc(-1 * var(--mg-space-2)); padding: 0; border: 0; border-radius: var(--mg-chip-radius); background: transparent; color: var(--mg-ink-2); cursor: pointer; }
.mg-chip button:hover { background: var(--mg-rule); color: var(--mg-ink); }
.mg-chip button:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 1px; }

.mg-prose { max-width: var(--mg-measure); font: 500 var(--mg-text-md)/1.65 var(--mg-font); color: var(--mg-ink); }
.mg-prose > * { margin: 0 0 0.9em; }
.mg-prose > :last-child { margin-bottom: 0; }
.mg-prose h2, .mg-prose h3 { margin: 1.4em 0 0.5em; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.mg-prose h2 { font-size: var(--mg-text-lg); }
.mg-prose h3 { font-size: var(--mg-text-md); }
.mg-prose ul, .mg-prose ol { padding-left: 1.3em; }
.mg-prose li { margin: 0.25em 0; }
.mg-prose li::marker { color: var(--mg-ink-2); }
.mg-prose b, .mg-prose strong { font-weight: 800; }
.mg-prose a { color: var(--mg-ink); font-weight: 700; text-decoration-line: underline; text-decoration-color: var(--mg-rule-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mg-prose a:hover, .mg-prose a:focus-visible { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.mg-prose blockquote { margin-left: 0; padding: 2px 0 2px var(--mg-space-4); border-left: 3px solid var(--mg-rule-strong); color: var(--mg-ink-2); }

.mg-mail { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: var(--mg-mail-h, clamp(480px, 72vh, 860px)); overflow: hidden; background: var(--mg-surface); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); }
.mg-mail__list { display: flex; flex-direction: column; min-height: 0; border-right: 1.5px solid var(--mg-rule); }
.mg-mail__tools { display: grid; gap: 10px; padding: var(--mg-space-4); border-bottom: 1.5px solid var(--mg-rule); }
.mg-mail__tools .mg-control__icon ~ .mg-input { height: var(--mg-control-sm); }
.mg-mail__items { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.mg-mail__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px var(--mg-space-3); padding: 14px 18px 14px 28px; border-bottom: 1px solid var(--mg-rule); cursor: pointer; }
.mg-mail__item:hover { background: var(--mg-hover); }
.mg-mail__item[aria-current="true"] { background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-mail__item[data-unread]::before { content: ""; position: absolute; left: var(--mg-space-3); top: 21px; width: 7px; height: 7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-mail__from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-mail__time { font: 600 var(--mg-text-xs)/1.6 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-mail__subject { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--mg-text-sm)/1.35 var(--mg-font); }
.mg-mail__snippet { grid-column: 1 / -1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 var(--mg-text-sm)/1.45 var(--mg-font); color: var(--mg-ink-2); }
.mg-mail__item[data-unread] .mg-mail__from { font-weight: 800; }
.mg-mail__item[data-unread] .mg-mail__subject { font-weight: 800; }
.mg-mail__read { display: flex; flex-direction: column; gap: var(--mg-space-5); min-height: 0; padding: 26px 36px 30px; overflow-y: auto; }
.mg-mail__head { display: grid; gap: 14px; padding-bottom: 18px; border-bottom: 1.5px solid var(--mg-rule); }
.mg-mail__meta { display: flex; align-items: center; gap: var(--mg-space-3); flex-wrap: wrap; font: 500 var(--mg-text-md)/1.4 var(--mg-font); }
.mg-mail__meta b { font-weight: 800; }
.mg-attach { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
.mg-attach .mg-chip { gap: var(--mg-space-2); }
@media (max-width: 900px) {
  .mg-mail { grid-template-columns: 1fr; height: auto; }
  .mg-mail__list { border-right: 0; }
  .mg-mail__read { display: none; }
  .mg-mail[data-view="read"] .mg-mail__list { display: none; }
  .mg-mail[data-view="read"] .mg-mail__read { display: flex; padding: var(--mg-space-5); }
}

.mg-avatar--xl { width: 72px; height: 72px; font-size: var(--mg-text-lg); }
.mg-profile { overflow: hidden; background: var(--mg-surface); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); }
.mg-profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-5); padding: 28px 28px var(--mg-space-5); }
.mg-profile__who { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.mg-profile__who .mg-small { margin: 0; }
.mg-profile__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--mg-space-5); padding: var(--mg-space-6) 28px 28px; background: var(--mg-canvas); }
.mg-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--mg-space-3) 28px; margin: 0; }
.mg-dl dt { font: 600 var(--mg-text-sm)/1.45 var(--mg-font); color: var(--mg-ink-2); }
.mg-dl dd { margin: 0; overflow-wrap: anywhere; font: 700 var(--mg-text-sm)/1.45 var(--mg-font); }
.mg-meter { position: relative; height: 6px; margin: var(--mg-space-1) 7px 18px 0; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); }
.mg-meter > i { position: relative; display: block; width: var(--v, 0%); height: 100%; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-meter > i::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-checklist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mg-checklist li { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 36px; font: 600 var(--mg-text-sm)/1.35 var(--mg-font); color: var(--mg-ink); }
.mg-checklist li::before { content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--mg-rule-strong); border-radius: var(--mg-radius-dot); }
.mg-checklist li[data-done] { color: var(--mg-ink-2); }
.mg-checklist li[data-done]::before { border: 0; background: var(--mg-ink); }
.mg-checklist li { position: relative; }
.mg-checklist li[data-done]::after { content: ""; position: absolute; left: 2px; top: 50%; width: 16px; height: 16px; margin-top: calc(-1 * var(--mg-space-2)); background: var(--mg-on-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (forced-colors: active) {
  .mg-cal__day[aria-selected="true"] > span, .mg-meter > i, .mg-checklist li[data-done]::before { forced-color-adjust: none; background-color: Highlight; color: HighlightText; }
  .mg-mail__item[data-unread]::before { background: CanvasText; }
}
@media (pointer: coarse) {
  .mg-option, .mg-checklist li { min-height: var(--mg-control-touch); }
  .mg-cal__grid { grid-template-columns: 32px repeat(7, 40px); }
  .mg-cal__day { width: 40px; height: 40px; }
  .mg-cal { width: auto; }
}

.mg-goal--over .mg-goal__stem { margin-right: 26px; }
.mg-goal--over .mg-goal__fill { width: calc(100% + 26px); background: var(--mg-ok); }
.mg-goal--over .mg-goal__dot { left: calc(100% + 26px); background: var(--mg-ok); }
.mg-goal--over .mg-goal__end { background: var(--mg-ok); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-board--cols { display: grid; grid-template-rows: repeat(var(--mg-board-rows, 15), auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--mg-space-6); }
.mg-board--cols .mg-board__row:nth-child(odd) { background: transparent; }
.mg-shift[data-cat="1"], .mg-chip[data-cat="1"], .mg-legend i[data-cat="1"] { --cat: var(--mg-cat-1); --cat-tint: var(--mg-cat-1-tint); }
.mg-shift[data-cat="2"], .mg-chip[data-cat="2"], .mg-legend i[data-cat="2"] { --cat: var(--mg-cat-2); --cat-tint: var(--mg-cat-2-tint); }
.mg-shift[data-cat="3"], .mg-chip[data-cat="3"], .mg-legend i[data-cat="3"] { --cat: var(--mg-cat-3); --cat-tint: var(--mg-cat-3-tint); }
.mg-shift[data-cat="4"], .mg-chip[data-cat="4"], .mg-legend i[data-cat="4"] { --cat: var(--mg-cat-4); --cat-tint: var(--mg-cat-4-tint); }
.mg-shift[data-cat="5"], .mg-chip[data-cat="5"], .mg-legend i[data-cat="5"] { --cat: var(--mg-cat-5); --cat-tint: var(--mg-cat-5-tint); }
.mg-shift[data-cat="other"], .mg-chip[data-cat="other"] { --cat: var(--mg-cat-other); --cat-tint: var(--mg-cat-other-tint); }
.mg-chip[data-cat="other"]::before { background: repeating-linear-gradient(135deg, var(--cat) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px var(--cat); }
.mg-shift[data-cat] { background: var(--cat-tint); color: var(--mg-ink); }
.mg-shift[data-cat]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--mg-radius-dot); background: var(--cat); }
.mg-shift[data-cat] small { opacity: 1; color: var(--mg-ink-2); }
.mg-chip[data-cat] { background: var(--cat-tint); }
@supports (background: color-mix(in srgb, red, blue)) {
  .mg-shift[data-cat] { background: color-mix(in srgb, var(--cat) 14%, var(--mg-surface)); }
  .mg-chip[data-cat] { background: color-mix(in srgb, var(--cat) 16%, var(--mg-surface)); }
}
.mg-chip[data-cat]::before { content: ""; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--cat); }

.mg-week { display: grid; grid-template-columns: minmax(160px, 200px) repeat(7, minmax(0, 1fr)) 64px; max-height: var(--mg-week-h, 70vh); overflow: auto; font: 600 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-week > * { min-width: 0; border-bottom: 1px solid var(--mg-rule); }
.mg-week__head { position: sticky; top: 0; z-index: var(--mg-z-sticky); display: flex; align-items: center; height: 40px; padding: 0 var(--mg-space-2); background: var(--mg-surface); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); box-shadow: inset 0 -1.5px 0 var(--mg-rule); }
.mg-week__head[aria-current="date"] { color: var(--mg-ink); }
.mg-week__head[aria-current="date"]::after { content: ""; width: 6px; height: 6px; margin-left: 6px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); }
.mg-week__who { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: var(--mg-space-2); padding: 0 var(--mg-space-3) 0 var(--mg-d-pad); background: var(--mg-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-week__head.mg-week__who { z-index: calc(var(--mg-z-sticky) + 1); }
.mg-week__cell { position: relative; height: var(--mg-d-row); }
.mg-week__cell .mg-shift { left: 3px; right: 3px; width: auto; top: var(--mg-space-1); bottom: var(--mg-space-1); padding: 0 var(--mg-space-2); gap: 6px; font-size: var(--mg-text-xs); }
.mg-week__cell .mg-shift small { display: none; }
[data-density="compact"] .mg-week__who .mg-avatar { display: none; }
@container (min-width: 1400px) { .mg-week__cell .mg-shift[data-cat] small { display: inline; } }
.mg-week__cov { padding: 6px var(--mg-space-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-week__sum { display: flex; align-items: center; justify-content: flex-end; padding-right: var(--mg-d-pad); font: 700 var(--mg-text-sm)/1 var(--mg-font); font-feature-settings: "tnum" 1; }
.mg-week__sum--over { color: var(--mg-warn-text); }

.mg-legend .quiet { background: var(--mg-rule-strong); }
.mg-legend .cat1 { background: var(--mg-cat-1); }
.mg-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--mg-font); font-feature-settings: "tnum" 1; }
.mg-chart__grid { stroke: var(--mg-chart-grid); stroke-width: 1; }
.mg-chart__tick { fill: var(--mg-chart-axis); font: 600 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__tick--strong { fill: var(--mg-ink); font-weight: 700; }
.mg-chart__tick--cat { fill: var(--mg-cat-1); font-weight: 700; }
.mg-chart__line { fill: none; stroke: var(--mg-chart-3); stroke-width: var(--mg-chart-stroke); stroke-linecap: round; stroke-linejoin: round; }
.mg-chart__line--compare { stroke: var(--mg-chart-2); stroke-width: 1.5; }
.mg-chart__area { fill: var(--mg-chart-3); opacity: calc(var(--mg-chart-band) * 0.4); }
.mg-chart__point { fill: var(--mg-chart-3); }
.mg-chart__now { stroke: var(--mg-chart-1); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.mg-chart__dot { fill: var(--mg-chart-1); stroke: var(--mg-surface); stroke-width: 3; }
.mg-chart__goal { stroke: var(--mg-ink-2); stroke-width: 1.5; stroke-dasharray: 6 5; }
.mg-chart__goal-label { fill: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__tip rect { fill: var(--mg-raised); filter: drop-shadow(0 6px 14px rgba(20, 29, 58, 0.18)); }
.mg-chart__tip-title { fill: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__tip-num { fill: var(--mg-ink); font: 800 var(--mg-text-lg)/1 var(--mg-font); }
.mg-chart__tip-sub { fill: var(--mg-ink-2); font: 600 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__bar { fill: var(--mg-chart-3); }
.mg-chart__bar--me { fill: var(--mg-chart-1); }
.mg-chart__bar--quiet { fill: var(--mg-chart-2); }
.mg-chart__plan { stroke: var(--mg-ink-2); stroke-width: 2.5; stroke-linecap: round; }
.mg-chart__value { fill: var(--mg-ink); font: 800 var(--mg-text-md)/1 var(--mg-font); }
.mg-chart__seg-label { fill: var(--mg-surface); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__cell { fill: var(--mg-surface); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__donut { fill: none; }
.mg-chart__center { fill: var(--mg-ink); font: 800 40px/1 var(--mg-font); letter-spacing: -0.03em; }
.mg-chart__center-dot { fill: var(--mg-blue); }
.mg-chart__donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-7); }
.mg-chart__list { display: grid; gap: 10px; min-width: 200px; margin: 0; padding: 0; list-style: none; }
.mg-chart__list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.2em; align-items: center; gap: 10px; font: 600 var(--mg-text-md)/1.2 var(--mg-font); }
.mg-chart__list i { width: 12px; height: 12px; border-radius: var(--mg-radius-dot); }
.mg-chart__list b { font-weight: 800; text-align: right; }
.mg-chart__list small { color: var(--mg-ink-2); font-weight: 600; text-align: right; }
.mg-chart__gauge-track { fill: none; stroke: var(--mg-rule-strong); stroke-width: 5; stroke-linecap: round; }
.mg-chart__gauge-fill { fill: none; stroke: var(--mg-chart-3); stroke-width: 18; stroke-linecap: round; }
.mg-chart--gauge .mg-chart__dot { stroke-width: 4; }
.mg-chart--behind .mg-chart__dot { fill: var(--mg-warn); }
.mg-chart--done .mg-chart__gauge-fill { stroke: var(--mg-ok); }
.mg-chart--done .mg-chart__dot { fill: var(--mg-ok); }
.mg-chart--done .mg-chart__plan { display: none; }
[data-surface="tv"] .mg-chart__tick, [data-surface="tv"] .mg-chart__goal-label { font-size: var(--mg-tv-label); }
[data-surface="tv"] .mg-chart__value, [data-surface="tv"] .mg-chart__tip-num { font-size: var(--mg-tv-body); }
.mg-tv, .mg-moment, .mg-card--navy, [data-chart-bg="navy"] { --mg-chart-3: var(--mg-on-navy); --mg-chart-2: var(--mg-on-navy-2); --mg-chart-grid: var(--mg-navy-hi); --mg-chart-axis: var(--mg-on-navy-2); --mg-cat-1: var(--mg-cat-1-navy); --mg-cat-2: var(--mg-cat-2-navy); --mg-cat-3: var(--mg-cat-3-navy); --mg-cat-4: var(--mg-cat-4-navy); --mg-cat-5: var(--mg-cat-5-navy); }
.mg-chart__line--partial { stroke-dasharray: 3 5; }
.mg-chart__forecast { fill: none; stroke: var(--mg-chart-3); stroke-width: var(--mg-chart-stroke); stroke-dasharray: 6 6; stroke-linecap: round; opacity: 0.7; }
.mg-chart__band { fill: var(--mg-chart-3); opacity: var(--mg-chart-band); }
.mg-chart__anomaly { fill: none; stroke: var(--mg-warn); stroke-width: 2.5; }
.mg-chart__anomaly-label { fill: var(--mg-warn-text); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__status { font: 700 var(--mg-text-sm)/1 var(--mg-font); }
.mg-chart--behind .mg-chart__status { fill: var(--mg-warn-text); }
.mg-chart--done .mg-chart__status { fill: var(--mg-ok-text); }
.mg-chart--over-bad .mg-chart__gauge-fill { stroke: var(--mg-alarm); }
.mg-chart--over-bad .mg-chart__dot { fill: var(--mg-alarm); }
.mg-chart--over-bad .mg-chart__status { fill: var(--mg-alarm-text); }
.mg-legend .line { width: 16px; height: 3px; border-radius: 2px; background: var(--mg-chart-3); }
.mg-legend .line-prev { width: 16px; height: 0; border-radius: 0; border-top: 2px solid var(--mg-chart-2); }
.mg-legend .line-fc { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--mg-chart-3); }
.mg-chart__scen { fill: none; stroke-width: 1.75; stroke-linecap: round; }
.mg-chart__scen--a { stroke: var(--mg-cat-2); }
.mg-chart__scen--b { stroke: var(--mg-cat-3); }
.mg-chart__scen-label { fill: var(--mg-ink); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__gap { fill: var(--mg-warn-tint); stroke: var(--mg-warn); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mg-chart__gap-label { fill: var(--mg-warn-text); font: 800 var(--mg-text-sm)/1 var(--mg-font); }
.mg-chart__need { fill: none; stroke: var(--mg-ink-2); stroke-width: 2.5; stroke-linejoin: round; }
.mg-chart__span { stroke: var(--mg-rule-strong); stroke-width: 3; stroke-linecap: round; }
.mg-chart__team { fill: var(--mg-surface); stroke: var(--mg-chart-2); stroke-width: 2.5; }
.mg-legend .gap { border-radius: 3px; background: var(--mg-warn-tint); box-shadow: inset 0 0 0 1.5px var(--mg-warn); }
.mg-legend .team { box-shadow: inset 0 0 0 2.5px var(--mg-chart-2); }

.mg-pmark { flex: none; display: block; color: currentColor; }
.mg-rail__product > span { flex: 1 1 auto; min-width: 0; }
.mg-rail__product .mg-pmark { color: var(--mg-on-navy); }
.mg-product { display: inline-flex; align-items: center; gap: 10px; font: 800 var(--mg-text-md)/1.1 var(--mg-font); color: var(--mg-ink); }
.mg-product small { display: block; font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-product__tile { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--mg-radius-field); background: var(--mg-navy); color: var(--mg-on-navy); }
.mg-crumb { display: inline-flex; align-items: center; gap: var(--mg-space-2); margin-bottom: 6px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-crumb .mg-pmark { color: var(--mg-ink); }
.mg-menu__item .mg-pmark, .mg-menu__item[aria-checked] .mg-pmark { visibility: visible; color: var(--mg-ink); }

.mg-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: var(--mg-z-overlay); display: flex; flex-direction: column; width: min(400px, 100%); background: var(--mg-raised); border-radius: var(--mg-radius-sheet) 0 0 var(--mg-radius-sheet); box-shadow: var(--mg-shadow-float); }
.mg-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mg-space-3); padding: var(--mg-space-6) var(--mg-space-5) var(--mg-space-4) var(--mg-space-6); border-bottom: 1.5px solid var(--mg-rule); }
.mg-drawer__head .mg-heading { margin-top: var(--mg-space-1); }
.mg-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--mg-space-2) var(--mg-space-6); }
.mg-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); padding: var(--mg-space-4) var(--mg-space-6); border-top: 1.5px solid var(--mg-rule); }
@media (max-width: 720px) { .mg-drawer { top: auto; left: 0; width: 100%; max-height: 85%; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; } }
.mg-acc { border-bottom: 1.5px solid var(--mg-rule); }
.mg-acc:last-child { border-bottom: 0; }
.mg-acc > summary { display: flex; align-items: center; gap: var(--mg-space-2); min-height: 52px; list-style: none; cursor: pointer; font: 800 var(--mg-text-md)/1 var(--mg-font); color: var(--mg-ink); }
.mg-acc > summary::-webkit-details-marker { display: none; }
.mg-acc > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--mg-ink-2); border-bottom: 2px solid var(--mg-ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--mg-motion-quick); }
.mg-acc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mg-acc > summary:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; border-radius: 6px; }
.mg-acc__body { display: grid; gap: var(--mg-space-4); padding: 0 0 var(--mg-space-5); }

.mg-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mg-step { position: relative; flex: 1 1 0; display: grid; justify-items: center; gap: var(--mg-space-2); text-align: center; }
.mg-step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: var(--mg-stem); margin-top: calc(var(--mg-stem) / -2); background: var(--mg-rule); z-index: 0; }
.mg-step:first-child::before { display: none; }
.mg-step[data-state="done"]::before, .mg-step[data-state="current"]::before { background: var(--mg-ink); }
.mg-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: inset 0 0 0 2px var(--mg-rule-strong); color: var(--mg-ink-2); font: 800 var(--mg-text-xs)/1 var(--mg-font); }
.mg-step[data-state="done"] .mg-step__dot { background: var(--mg-ink); box-shadow: none; color: var(--mg-on-ink); }
.mg-step[data-state="current"] .mg-step__dot { box-shadow: inset 0 0 0 2.5px var(--mg-ink), 0 0 0 4px var(--mg-hover); color: var(--mg-ink); }
.mg-step__label { font: 600 var(--mg-text-sm)/1.25 var(--mg-font); color: var(--mg-ink-2); }
.mg-step[data-state="current"] .mg-step__label { color: var(--mg-ink); font-weight: 800; }
.mg-step[data-state="done"] .mg-step__label { color: var(--mg-ink); }
.mg-steps__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); margin-top: var(--mg-space-6); padding-top: var(--mg-space-4); border-top: 1.5px solid var(--mg-rule); }
@media (max-width: 560px) { .mg-step__label { display: none; } .mg-step[data-state="current"] .mg-step__label { display: block; } }

.mg-tooltip { position: relative; display: inline-block; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--mg-ink); color: var(--mg-on-ink); font: 600 var(--mg-text-xs)/1.35 var(--mg-font); }
.mg-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.mg-popover { position: relative; display: grid; gap: var(--mg-space-2); width: 280px; padding: var(--mg-space-4) 18px var(--mg-space-3); border-radius: var(--mg-popover-radius); background: var(--mg-raised); box-shadow: var(--mg-shadow-float); }
.mg-popover::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; box-shadow: 3px 3px 6px -3px rgba(20, 29, 58, 0.2); }
.mg-popover__title { margin: 0; font: 800 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-popover__text { margin: 0; font: 500 var(--mg-text-sm)/1.5 var(--mg-font); color: var(--mg-ink-2); }

.mg-tree, .mg-tree__group { margin: 0; padding: 0; list-style: none; }
.mg-tree__group { margin-left: 15px; padding-left: 14px; border-left: 1.5px solid var(--mg-rule); }
.mg-tree__item[aria-expanded="false"] > .mg-tree__group { display: none; }
.mg-tree__row { display: flex; align-items: center; gap: 10px; min-height: var(--mg-d-row); padding: var(--mg-space-1) 10px var(--mg-space-1) 0; border-radius: var(--mg-radius-field); }
.mg-tree__row:hover { background: var(--mg-hover); }
.mg-tree__item[aria-selected="true"] > .mg-tree__row, .mg-tree__item[aria-current="true"] > .mg-tree__row { background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-tree__toggle { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--mg-radius-dot); background: transparent; color: var(--mg-ink-2); cursor: pointer; }
.mg-tree__toggle svg { transition: transform var(--mg-motion-quick); }
.mg-tree__item[aria-expanded="true"] > .mg-tree__row .mg-tree__toggle svg { transform: rotate(90deg); }
.mg-tree__toggle:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 1px; }
.mg-tree__who { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; font: 700 var(--mg-text-md)/1.2 var(--mg-font); }
.mg-tree__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }

.mg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-3); font: 600 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-pager__pages { display: flex; align-items: center; gap: var(--mg-space-1); }
.mg-pager__p { display: grid; place-items: center; min-width: var(--mg-control-sm); height: var(--mg-control-sm); padding: 0 6px; border-radius: var(--mg-radius-dot); color: var(--mg-ink); text-decoration: none; font-weight: 700; font-feature-settings: "tnum" 1; }
.mg-pager__p:hover { background: var(--mg-hover); }
.mg-pager__p[aria-current="page"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-pager__p:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-pager__gap { padding: 0 var(--mg-space-1); }
.mg-pager__size { display: inline-flex; align-items: center; gap: var(--mg-space-2); }

.mg-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.mg-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--mg-radius-dot); background: linear-gradient(90deg, var(--mg-ink) var(--v, 0%), var(--mg-rule) var(--v, 0%)); }
.mg-slider::-moz-range-track { height: 6px; border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-slider::-moz-range-progress { height: 6px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: calc(-1 * var(--mg-space-2)); border-radius: var(--mg-radius-dot); background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-slider::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: var(--mg-radius-dot); background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-slider:focus-visible { outline: none; }
.mg-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--mg-surface), 0 0 0 5px var(--mg-focus); }
.mg-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--mg-surface), 0 0 0 5px var(--mg-focus); }
.mg-slider__out { margin-left: var(--mg-space-2); font-weight: 800; color: var(--mg-ink); font-feature-settings: "tnum" 1; }
.mg-slider__ends { display: flex; justify-content: space-between; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-swatch { position: relative; display: inline-grid; cursor: pointer; }
.mg-swatch input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; cursor: pointer; }
.mg-swatch span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--mg-radius-dot); background: var(--sw, var(--mg-sunken)); font: 800 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-swatch input:checked + span { box-shadow: 0 0 0 3px var(--mg-surface), 0 0 0 5px var(--mg-ink); }
.mg-swatch input:focus-visible + span { box-shadow: 0 0 0 3px var(--mg-surface), 0 0 0 5px var(--mg-focus); }
.mg-chart__target { stroke: var(--mg-ink-2); stroke-width: 1.5; }
.mg-chart__over-label { fill: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chart__delta { fill: var(--mg-ink-2); font-size: var(--mg-text-xs); font-weight: 700; }
.mg-legend .stem { width: 6px; height: 14px; border-radius: 3px; background: var(--mg-chart-3); }
.mg-legend .line-need { width: 16px; height: 0; border-radius: 0; border-top: 2.5px solid var(--mg-ink-2); }
.mg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mg-step__btn { display: grid; justify-items: center; gap: var(--mg-space-2); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--mg-radius-field); }
.mg-step__btn:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 4px; }
.mg-tree__item:focus-visible { outline: none; }
.mg-tree__item:focus-visible > .mg-tree__row { outline: 2px solid var(--mg-focus); outline-offset: -2px; }
.mg-tree__item[aria-selected="true"] > .mg-tree__row { background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-tree__more { padding: 6px 0 var(--mg-space-2) 38px; font: 600 var(--mg-text-sm)/1 var(--mg-font); }
.mg-swatch--auto span { box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); }
.mg-swatch input:checked:focus-visible + span { box-shadow: 0 0 0 3px var(--mg-surface), 0 0 0 5px var(--mg-ink), 0 0 0 8px var(--mg-focus); }
.mg-slider::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--mg-ink) var(--v, 0%), var(--mg-rule-strong) var(--v, 0%)); }
.mg-slider::-moz-range-track { background: var(--mg-rule-strong); }
.mg-button:disabled, .mg-button[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.mg-button--ghost:disabled { background: transparent; }
[data-theme="dark"] .mg-product__tile, [data-theme="dark"] .pi-fav { box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); }

.mg-cr { display: grid; margin: 0; padding: 0; list-style: none; }
.mg-cr__row { display: grid; grid-template-columns: var(--mg-d-avatar) minmax(120px, 1fr) 120px minmax(0, 1.4fr) 48px auto; align-items: center; gap: var(--mg-space-3); min-height: 60px; padding: var(--mg-space-2) 0; border-bottom: 1px solid var(--mg-rule); }
.mg-cr__row:last-child { border-bottom: 0; }
.mg-cr__who { display: grid; gap: 2px; min-width: 0; font: 700 var(--mg-text-md)/1.2 var(--mg-font); }
.mg-cr__who small { font: 500 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-cr__sig { position: relative; height: 14px; }
.mg-cr__sig::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--mg-rule); }
.mg-cr__sig i { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: var(--sig); border-radius: 2px; background: var(--tone); }
.mg-cr__sig i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; border-radius: var(--mg-radius-dot); background: var(--tone); }
.mg-cr__row[data-tone="alarm"] { --tone: var(--mg-alarm); }
.mg-cr__row[data-tone="warn"] { --tone: var(--mg-warn); }
.mg-cr__row[data-tone="mut"] { --tone: var(--mg-rule-strong); }
.mg-cr__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mg-cr__chip { display: inline-flex; align-items: center; gap: var(--mg-space-1); height: 26px; padding: 0 10px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink); white-space: nowrap; }
.mg-cr__chip[data-tone="alarm"] { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-cr__chip[data-tone="warn"] { background: var(--mg-warn-tint); color: var(--mg-warn-text); }
.mg-cr__chip b { font-weight: 800; }
.mg-cr__trend { width: 48px; height: 18px; }
.mg-cr__trend polyline { fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .mg-cr__row { grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr) auto; } .mg-cr__chips, .mg-cr__trend { grid-column: 2 / -1; } .mg-cr__sig { grid-column: 2 / -1; } }

[data-energy="stille"] { --mg-ease-rise: var(--mg-ease-standard); --mg-stagger: 0ms; --mg-dur-story: var(--mg-dur-base); --mg-move-sm: 4px; --mg-move-md: 8px; --mg-motion-rise: var(--mg-dur-rise) var(--mg-ease-standard); --mg-motion-enter: var(--mg-dur-base) var(--mg-ease-standard); --mg-land-sx: 1; --mg-land-sy: 1; }

.mg-splash { position: relative; display: grid; place-items: center; align-content: center; gap: var(--mg-space-6); min-height: 300px; border-radius: var(--mg-radius-card); background: var(--mg-navy); color: var(--mg-on-navy); overflow: hidden; }
.mg-splash__mark { display: flex; align-items: flex-end; gap: 18px; height: 64px; }
.mg-splash__mark i, .mg-splash__mark b { display: block; width: 26px; height: 26px; border-radius: var(--mg-radius-dot); background: var(--mg-on-navy); animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; }
.mg-splash__mark i:nth-child(2) { margin-bottom: 6px; animation-delay: var(--mg-stagger); }
.mg-splash__mark i:nth-child(3) { margin-bottom: var(--mg-space-3); animation-delay: calc(2 * var(--mg-stagger)); }
.mg-splash__mark b { margin-left: 6px; background: var(--mg-blue); animation: mg-land var(--mg-dur-rise) linear both; animation-delay: 280ms; }
.mg-splash__msg { margin: 0; font: 600 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-on-navy-2); animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: 2000ms; }
.mg-splash.is-leaving { animation: mg-out-fade var(--mg-dur-exit) var(--mg-ease-exit) both; }

.mg-skel { display: block; border-radius: 6px; background: var(--mg-sunken); animation: mg-skel var(--mg-dur-pulse) ease-in-out infinite; }
:is(.mg-tv, .mg-tv-mini, .mg-card--navy, .mg-splash) .mg-skel { background: var(--mg-navy-hi); }
.mg-skel--dot { width: 28px; height: 28px; border-radius: var(--mg-radius-dot); }
.mg-skel--stem { height: 6px; border-radius: var(--mg-radius-dot); }
.mg-skel--bar { width: 26px; border-radius: 13px 13px 4px 4px; }
@keyframes mg-skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.is-stale .mg-kpi__value, .is-stale .tvm-num { opacity: 0.7; }
.mg-stale { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-warn-text); }
.mg-stale::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-warn); }
.mg-live--off { color: var(--mg-ink-2); }
.mg-live--off::after { animation: none; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
:is(.mg-tv, .mg-tv-mini, .mg-card--navy, .mg-moment) .mg-live--off { color: var(--mg-on-navy-2); }
.mg-conn { display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-3) 18px; background: var(--mg-warn-tint); color: var(--mg-warn-text); font: 600 var(--mg-text-sm)/1.35 var(--mg-font); animation: mg-banner-in var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-conn b { font-weight: 800; }
.mg-conn__ring svg { display: block; width: 20px; height: 20px; transform: rotate(-90deg); }
.mg-conn__ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 50.3; stroke-dashoffset: 0; animation: mg-countdown var(--mg-conn-wait, 8s) linear both; }
.mg-conn.is-leaving { animation: mg-banner-out var(--mg-dur-exit) var(--mg-ease-exit) both; }
@keyframes mg-banner-out { to { transform: translateY(-100%); } }
@keyframes mg-banner-in { from { transform: translateY(-100%); } }
@keyframes mg-countdown { to { stroke-dashoffset: 50.3; } }
.mg-cardfail { display: grid; gap: 6px; justify-items: start; font: 500 var(--mg-text-sm)/1.4 var(--mg-font); }
.mg-cardfail b { font-weight: 800; }

.mg-tv-timer { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--mg-on-navy-2); opacity: 0.6; transform-origin: left; animation: mg-timer var(--mg-rotate, 20s) linear both; }
.mg-tv-timer__text { display: none; }

.mg-anim-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: mg-draw var(--mg-dur-story) var(--mg-ease-standard) both; }
.mg-anim-fade { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: calc(var(--mg-dur-story) * 0.6 + var(--i, 0) * 40ms); }
.mg-anim-pop { transform-box: fill-box; transform-origin: center; animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; animation-delay: var(--t, 0ms); }
.mg-anim-last { animation-delay: var(--mg-dur-story); }
.mg-anim-bar { animation: mg-reveal-up var(--mg-dur-rise) var(--mg-ease-standard) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes mg-reveal-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mg-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dashoffset: 0; } }

.cel-micro .mg-avatar { position: relative; overflow: visible; }
.cel-micro .mg-avatar::after { content: ""; position: absolute; top: calc(-1 * var(--mg-space-2)); right: calc(-1 * var(--mg-space-2)); bottom: calc(-1 * var(--mg-space-2)); left: calc(-1 * var(--mg-space-2)); border-radius: var(--mg-radius-dot); box-shadow: 0 0 0 2px var(--mg-blue); opacity: 0; animation: mg-ring-once 700ms var(--mg-ease-exit) both; }
.cel-micro .mg-board__score { position: relative; }
.cel-plus { position: absolute; right: calc(100% + 6px); top: 50%; margin-top: -0.5em; font: 800 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-blue-text); opacity: 0; animation: mg-float-up 700ms var(--mg-ease-exit) both; }
@keyframes mg-ring-once { 0% { opacity: 1; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes mg-float-up { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-1 * var(--mg-move-sm) - 4px)); } }
.cel-sheet { animation: mg-sheet-in var(--mg-dur-rise) var(--mg-ease-standard) both; }
.cel-goal .mg-goal__fill { animation: mg-grow-x var(--mg-dur-story) var(--mg-ease-standard) both; animation-delay: 300ms; transform-origin: left; }
.cel-goal .mg-goal__dot { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; animation-delay: 1100ms; }
.cel-title .mg-punktum::after { animation: mg-land var(--mg-dur-rise) linear both; animation-delay: 1200ms; }
.cel-coins { animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: 1300ms; }
.cel-tv { animation: mg-in-fade var(--mg-dur-base) linear both; }
.cel-rec { animation: mg-in-rise var(--mg-dur-rise) var(--mg-ease-enter) both; animation-delay: 120ms; }
.cel-rec .mg-punktum::after { animation: mg-land var(--mg-dur-rise) linear both; animation-delay: 1300ms; }
.cel-dots i, .cel-dots b { animation: mg-pop var(--mg-dur-rise) var(--mg-ease-rise) both; }
.cel-dots i:nth-child(1) { animation-delay: 450ms; } .cel-dots i:nth-child(2) { animation-delay: 520ms; } .cel-dots i:nth-child(3) { animation-delay: 590ms; }
.cel-dots b { animation: mg-land var(--mg-dur-rise) linear both; animation-delay: 800ms; }

:is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root) :is(.mg-splash__mark i, .mg-splash__mark b, .mg-splash__msg, .mg-skel, .mg-anim-draw, .mg-anim-pop, .mg-anim-bar, .mg-anim-fade, .cel-sheet, .cel-coins, .cel-rec, .cel-dots i, .cel-dots b, .mg-conn, .mg-tv-timer) { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  :is(.mg-splash__mark i, .mg-splash__mark b, .mg-anim-draw, .mg-anim-pop, .mg-anim-bar, .mg-anim-fade, .cel-sheet, .cel-goal .mg-goal__fill, .cel-goal .mg-goal__dot, .cel-title .mg-punktum::after, .cel-coins, .cel-rec, .cel-rec .mg-punktum::after, .cel-dots i, .cel-dots b, .mg-conn, .mg-confetti i) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; }
  :is(.mg-skel, .mg-conn__ring circle, .mg-tv-timer, .cel-micro .mg-avatar::after) { animation: none !important; }
  .cel-plus { animation: none !important; opacity: 1 !important; }
  .mg-tv-timer { display: none !important; } .mg-tv-timer__text { display: inline !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-splash__mark i, .mg-splash__mark b, .mg-anim-draw, .mg-anim-pop, .mg-anim-bar, .mg-anim-fade, .cel-sheet, .cel-goal .mg-goal__fill, .cel-goal .mg-goal__dot, .cel-title .mg-punktum::after, .cel-coins, .cel-rec, .cel-rec .mg-punktum::after, .cel-dots i, .cel-dots b, .mg-conn, .mg-confetti i) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-skel, .mg-conn__ring circle, .mg-tv-timer, .cel-micro .mg-avatar::after) { animation: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .cel-plus { animation: none !important; opacity: 1 !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-tv-timer { display: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-tv-timer__text { display: inline !important; }

.mg-confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.mg-confetti i { position: absolute; top: calc(-1 * var(--mg-space-5)); left: var(--x); width: var(--s); height: var(--s); border-radius: var(--mg-radius-dot); background: var(--mg-on-navy-2); opacity: 0; animation: mg-confetti var(--mg-dur-confetti) cubic-bezier(0.3, 0, 0.7, 1) both; animation-delay: var(--d, 0ms); }
.mg-confetti i.w { background: var(--mg-on-navy); }
.mg-confetti i.b { background: var(--mg-blue); }
@keyframes mg-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--mg-confetti-fall, 340px)) rotate(var(--r, 0deg)); } }
:is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root, [data-motion="off"].mg-root) .mg-confetti, :is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-confetti { display: none !important; }
@media (prefers-reduced-motion: reduce) { .mg-confetti { display: none !important; } }

.mg-hero { container: mg-hero / inline-size; border-radius: var(--mg-radius-sheet); }
.mg-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "top act" "score goal"; align-items: start; gap: var(--mg-space-6) var(--mg-space-8); padding: var(--mg-space-6) var(--mg-space-7) var(--mg-space-7); }
.mg-hero__top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-4); min-height: var(--mg-control-sm); }
.mg-hero__act { grid-area: act; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mg-space-2); }
.mg-hero .mg-live { color: var(--mg-on-navy); }
.mg-hero .mg-button--ghost { color: var(--mg-on-navy); }
.mg-hero .mg-button--ghost:hover { background: var(--mg-navy-hi); border-color: var(--mg-navy-hi); }
.mg-hero .mg-button:not(.mg-button--ghost) { background: var(--mg-navy-hi); border-color: var(--mg-navy-hi); color: var(--mg-on-navy); }
.mg-hero .mg-button:not(.mg-button--ghost):hover { background: var(--mg-navy); border-color: var(--mg-on-navy-2); }
.mg-hero__score { grid-area: score; display: grid; align-content: start; gap: var(--mg-space-2); min-width: 0; }
.mg-hero__num { margin: 0; font: 800 var(--mg-text-display)/0.95 var(--mg-font); letter-spacing: -0.04em; font-feature-settings: "tnum" 1; }
.mg-hero__say { margin: 0; font: 700 var(--mg-text-xl)/1.2 var(--mg-font); letter-spacing: -0.015em; text-wrap: balance; }
.mg-hero__delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin-top: var(--mg-space-1); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-hero .mg-delta { background: var(--mg-navy-hi); color: var(--mg-on-navy); font-feature-settings: "tnum" 1; --mg-delta-tone: var(--mg-on-navy); }
.mg-hero__goal { grid-area: goal; display: grid; gap: var(--mg-space-5); min-width: 0; padding-top: var(--mg-space-1); }
.mg-hero .mg-goal__num { font-feature-settings: "tnum" 1; }
.mg-hero__num .mg-count { min-width: calc(var(--mg-count-ch, 3) * (1ch - 0.04em)); }
.mg-hero .mg-goal__num .mg-count { min-width: calc(var(--mg-count-ch, 3) * (1ch - 0.03em)); }
.mg-hero .mg-goal__note.mg-status { color: var(--mg-on-navy); }
.mg-hero .mg-goal--over .mg-goal__end { box-shadow: 0 0 0 3px var(--mg-navy); }
.mg-hero__fc { position: absolute; top: 50%; left: calc(min(var(--value), 1) * 100%); width: calc(max(min(var(--fc, 0), 1) - min(var(--value), 1), 0) * 100%); height: 0; margin-top: -1px; border-top: 2px dashed var(--mg-on-navy-2); transition: left var(--mg-motion-data), width var(--mg-motion-data); }
.mg-hero__fc::after { content: ""; position: absolute; right: -5px; top: -6px; width: 10px; height: 10px; border-radius: var(--mg-radius-dot); background: var(--mg-navy); box-shadow: inset 0 0 0 2px var(--mg-on-navy-2); }
.mg-hero .mg-goal__scale { font-feature-settings: "tnum" 1; }
.mg-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-4); margin: 0; }
.mg-hero__facts > div { display: grid; align-content: start; gap: var(--mg-space-1); min-width: 0; }
.mg-hero__facts dt { font: 700 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-hero__facts dd { margin: 0; font: 800 var(--mg-text-xl)/1.1 var(--mg-font); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.mg-hero__facts dd small { margin-left: 0.25em; font: 700 var(--mg-text-sm)/1 var(--mg-font); letter-spacing: 0; color: var(--mg-on-navy-2); }
.mg-hero__facts p { margin: 0; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-hero__none { display: grid; gap: var(--mg-space-2); max-width: 46ch; font: 500 var(--mg-text-md)/1.5 var(--mg-font); color: var(--mg-on-navy-2); }
.mg-hero__none p { margin: 0; }
.mg-hero__none .mg-hero__say { color: var(--mg-on-navy); }

[data-density="compact"] .mg-hero__in { gap: var(--mg-space-3) var(--mg-space-6); padding: var(--mg-space-4) var(--mg-space-5); }
[data-density="compact"] .mg-hero__num { font-size: var(--mg-text-3xl); }
[data-density="compact"] .mg-hero__say { font-size: var(--mg-text-md); }
[data-density="compact"] .mg-hero__goal { gap: var(--mg-space-3); padding-top: 0; }
.mg-hero:is([data-density="compact"], [data-density="compact"] *) .mg-goal { gap: var(--mg-space-2); }
.mg-hero:is([data-density="compact"], [data-density="compact"] *) .mg-goal__num { font-size: var(--mg-text-xl); }
.mg-hero:is([data-density="compact"], [data-density="compact"] *) .mg-goal__scale { display: none; }
[data-density="compact"] .mg-hero__facts dd { font-size: var(--mg-text-md); }
[data-density="compact"] .mg-hero__facts p { display: none; }
[data-density="compact"] .mg-hero__explain { width: var(--mg-control-sm); padding: 0; }
[data-density="compact"] .mg-hero__btxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-density="spacious"] .mg-hero__in { padding: var(--mg-space-7) var(--mg-space-8) var(--mg-space-8); }

@container mg-hero (max-width: 600px) {
  .mg-hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "score" "goal" "act"; gap: var(--mg-space-5); padding: var(--mg-space-5); }
  .mg-hero__act { justify-self: stretch; justify-content: flex-start; }
}
@container mg-hero (max-width: 440px) {
  .mg-hero__in { gap: var(--mg-space-5); padding: var(--mg-space-5) var(--mg-space-4); }
  .mg-hero__num { font-size: calc(var(--mg-text-display) * 0.875); }
  .mg-hero__facts { grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-3); }
  .mg-hero__act { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mg-hero__act .mg-button { width: 100%; }
}

.mg-grow .mg-hero__fc { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: var(--mg-dur-story); }

.mg-actions { container: mg-actions / inline-size; }
.mg-acts { display: grid; margin: 0; padding: 0; list-style: none; }
.mg-act { --tone: var(--mg-ink-2); --tone-text: var(--mg-ink-2); display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "prio body cta"; align-items: center; gap: var(--mg-space-2) var(--mg-space-4); min-height: 76px; padding: var(--mg-space-3) 0; border-bottom: 1px solid var(--mg-rule); }
.mg-act:last-child { border-bottom: 0; }
.mg-act[data-prio="high"] { --tone: var(--mg-alarm); --tone-text: var(--mg-alarm-text); }
.mg-act[data-prio="mid"] { --tone: var(--mg-warn); --tone-text: var(--mg-warn-text); }
.mg-act__prio { grid-area: prio; display: grid; justify-items: start; gap: 6px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--tone-text); white-space: nowrap; }
.mg-act__dots { display: flex; gap: var(--mg-space-1); }
.mg-act__dots i { width: 10px; height: 10px; border-radius: var(--mg-radius-dot); box-shadow: inset 0 0 0 2px var(--mg-rule-strong); }
.mg-act[data-prio="high"] .mg-act__dots i,
.mg-act[data-prio="mid"] .mg-act__dots i:nth-child(-n+2),
.mg-act[data-prio="low"] .mg-act__dots i:first-child { background: var(--tone); box-shadow: none; }
.mg-act__body { grid-area: body; display: grid; gap: 3px; min-width: 0; }
.mg-act__kind { font: 700 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-act__title { margin: 0; font: 700 var(--mg-text-md)/1.3 var(--mg-font); letter-spacing: -0.005em; color: var(--mg-ink); }
.mg-act__why { margin: 0; font: 500 var(--mg-text-sm)/1.4 var(--mg-font); color: var(--mg-ink-2); font-feature-settings: "tnum" 1; }
.mg-act__why b { font-weight: 800; color: var(--mg-ink); }
.mg-act__cta { grid-area: cta; }
.mg-act:not(:has(> .mg-act__prio)), [data-density="compact"] .mg-act:not(:has(> .mg-act__prio)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body cta"; }
.mg-act__cta svg { width: 16px; height: 16px; }
.mg-actions .mg-empty { padding: var(--mg-space-7) var(--mg-space-5); }

[data-density="compact"] .mg-act { grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 52px; padding: var(--mg-space-2) 0; gap: 2px var(--mg-space-3); }
[data-density="compact"] .mg-act__kind { display: none; }
[data-density="compact"] .mg-act__prio { gap: var(--mg-space-1); }
[data-density="compact"] .mg-act__dots i { width: 8px; height: 8px; }
.mg-actions:is([data-density="compact"], [data-density="compact"] *) .mg-empty { padding: var(--mg-space-5); }
[data-density="spacious"] .mg-act { min-height: 88px; padding: var(--mg-space-4) 0; }

@container mg-actions (max-width: 560px) {
  .mg-act, [data-density="compact"] .mg-act { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prio" "body" "cta"; align-items: start; gap: var(--mg-space-2); padding: var(--mg-space-4) 0; }
  .mg-act__prio { display: flex; align-items: center; gap: var(--mg-space-2); }
  .mg-act:not(:has(> .mg-act__prio)), [data-density="compact"] .mg-act:not(:has(> .mg-act__prio)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "cta"; }
  .mg-act__cta { justify-self: start; margin-top: var(--mg-space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .mg-grow .mg-hero__fc { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
  .mg-hero__fc { transition: none !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-grow .mg-hero__fc { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-hero__fc { transition: none !important; }

@media (forced-colors: active) {
  .mg-hero__fc { forced-color-adjust: none; border-top-color: CanvasText; }
  .mg-hero__fc::after { forced-color-adjust: none; background: Canvas; box-shadow: none; border: 2px solid CanvasText; }
  .mg-act__dots i { forced-color-adjust: none; background: Canvas; box-shadow: none; border: 2px solid CanvasText; }
  .mg-act[data-prio="high"] .mg-act__dots i,
  .mg-act[data-prio="mid"] .mg-act__dots i:nth-child(-n+2),
  .mg-act[data-prio="low"] .mg-act__dots i:first-child { background: CanvasText; }
}

:is(.mg-settings__link, .mg-fchip, .mg-tool, .mg-cmdk-trigger, .mg-notif__link):focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }

.mg-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--mg-space-8); align-items: start; max-width: 1080px; }
.mg-settings__nav { position: sticky; top: var(--mg-space-6); z-index: var(--mg-z-sticky); display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mg-settings__link { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 38px; padding: 0 var(--mg-space-3) 0 var(--mg-space-4); border-radius: var(--mg-radius-dot); color: var(--mg-ink-2); font: 700 var(--mg-text-md)/1.2 var(--mg-font); text-decoration: none; }
.mg-settings__link::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--mg-radius-dot); background: transparent; }
.mg-settings__link:hover { background: var(--mg-hover); color: var(--mg-ink); }
.mg-settings__link[aria-current="true"] { background: var(--mg-hover); color: var(--mg-ink); }
.mg-settings__link[aria-current="true"]::before { background: var(--mg-ink); }
.mg-settings__dirty { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: var(--mg-radius-dot); background: var(--mg-warn); }
.mg-settings__nav-foot { margin: var(--mg-space-3) 0 0; padding: var(--mg-space-3) var(--mg-space-4) 0; border-top: 1.5px solid var(--mg-rule); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); text-wrap: balance; }
.mg-settings__main { display: grid; gap: var(--mg-space-8); min-width: 0; }
.mg-setgroup { display: grid; gap: var(--mg-space-4); scroll-margin-top: var(--mg-space-6); }
.mg-setgroup__head { display: grid; gap: var(--mg-space-1); max-width: var(--mg-measure); }
.mg-setgroup__title { margin: 0; font: 800 var(--mg-text-lg)/1.25 var(--mg-font); letter-spacing: -0.01em; color: var(--mg-ink); }
.mg-setgroup__text { margin: 0; font: 500 var(--mg-text-md)/1.5 var(--mg-font); color: var(--mg-ink-2); }
.mg-setgroup__card { container: mg-setcard / inline-size; background: var(--mg-surface); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); }
.mg-setrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: var(--mg-space-2) var(--mg-space-6); align-items: center; min-height: var(--mg-d-row); padding: var(--mg-space-4) var(--mg-d-pad); border-top: 1.5px solid var(--mg-rule); }
.mg-setrow:first-child { border-top: 0; }
.mg-setrow__text { display: grid; gap: 2px; min-width: 0; }
.mg-setrow__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; font: 700 var(--mg-text-md)/1.3 var(--mg-font); color: var(--mg-ink); }
.mg-setrow__help { display: var(--mg-d-note); margin: 0; max-width: 52ch; font: 500 var(--mg-text-sm)/1.45 var(--mg-font); color: var(--mg-ink-2); }
.mg-setrow__control { display: flex; justify-content: flex-end; align-items: center; gap: var(--mg-space-2); min-width: 0; }
.mg-setrow__control > .mg-control, .mg-setrow__control > .mg-select { width: 100%; }
.mg-setrow__changed { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-warn-text); }
.mg-setrow__changed::before { content: ""; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-warn); }
.mg-setrow .mg-field__error { grid-column: 1 / -1; justify-self: end; }
.mg-setgroup--danger .mg-setgroup__card { box-shadow: inset 0 0 0 1.5px var(--mg-alarm-tint), var(--mg-shadow-card); }
[data-density="compact"] .mg-setrow { padding-block: var(--mg-space-2); }
[data-density="spacious"] .mg-setrow { padding-block: var(--mg-space-5); }

.mg-savebar { position: sticky; bottom: var(--mg-space-5); z-index: var(--mg-z-sticky); display: flex; align-items: center; gap: var(--mg-space-2); width: fit-content; max-width: 100%; margin: 0 auto; min-height: 56px; padding: 6px 6px 6px var(--mg-space-5); border-radius: var(--mg-radius-dot); background: var(--mg-navy); color: var(--mg-on-navy); box-shadow: var(--mg-shadow-float); font: 700 var(--mg-text-md)/1.3 var(--mg-font); --mg-rise-d: var(--mg-move-md); animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-savebar[hidden] { display: none; }
.mg-savebar::before { content: ""; flex: none; width: var(--mg-dot); height: var(--mg-dot); border-radius: var(--mg-radius-dot); background: var(--mg-warn); }
.mg-savebar--alarm::before { background: var(--mg-alarm); }
.mg-savebar__msg { margin-right: var(--mg-space-3); white-space: nowrap; }
.mg-savebar .mg-button { border-color: transparent; }
.mg-savebar .mg-button--ghost { color: var(--mg-on-navy); }
.mg-savebar .mg-button--ghost:hover { background: var(--mg-navy-hi); border-color: var(--mg-navy-hi); }
.mg-savebar .mg-button--primary { background: var(--mg-on-navy); border-color: var(--mg-on-navy); color: var(--mg-navy); }
.mg-savebar .mg-button--primary:hover { background: var(--mg-on-navy-2); border-color: var(--mg-on-navy-2); }
.mg-savebar.is-leaving { pointer-events: none; animation: mg-out-fade var(--mg-dur-exit) var(--mg-ease-exit) both; }

@media (max-width: 760px) {
  .mg-settings { grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-5); }
  .mg-settings__nav { top: 0; display: flex; gap: var(--mg-space-1); overflow-x: auto; padding: var(--mg-space-2) 0; background: var(--mg-canvas); }
  .mg-settings__link { flex: none; }
  .mg-settings__nav-foot { display: none; }
  .mg-setrow { grid-template-columns: minmax(0, 1fr); }
  .mg-setrow__control { justify-content: flex-start; }
  .mg-setrow .mg-field__error { justify-self: start; }
  .mg-savebar { bottom: var(--mg-space-3); width: 100%; }
  .mg-savebar__msg { flex: 1; margin-right: 0; white-space: normal; }
}

@container mg-setcard (max-width: 560px) {
  .mg-setrow { grid-template-columns: minmax(0, 1fr); }
  .mg-setrow__control { justify-content: flex-start; }
  .mg-setrow .mg-field__error { justify-self: start; }
}

.mg-filters { display: grid; gap: var(--mg-space-3); }
.mg-filters .mg-tabs { gap: var(--mg-space-5); }
.mg-filters__views-end { display: flex; align-items: center; margin-left: auto; padding-top: var(--mg-space-2); }
.mg-filterbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.mg-filterbar__search { flex: 0 1 240px; min-width: 160px; }
.mg-filterbar__search .mg-control__icon ~ .mg-input { height: var(--mg-control-sm); min-height: 0; }
.mg-filterbar__count { margin-left: auto; font: 600 var(--mg-text-md)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-filterbar__count b { font-weight: 800; color: var(--mg-ink); }
.mg-filterbar__anchor { position: relative; }
.mg-fchip { display: inline-flex; align-items: center; gap: 6px; height: var(--mg-control-sm); padding: 0 10px 0 14px; border: 1.5px solid var(--mg-rule-strong); border-radius: var(--mg-chip-radius); background: var(--mg-surface); color: var(--mg-ink); font: 700 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; cursor: pointer; }
.mg-fchip:hover { background: var(--mg-hover); }
.mg-fchip > svg { flex: none; color: var(--mg-ink-2); }
.mg-fchip[data-active] { border-color: var(--mg-ink); box-shadow: inset 0 0 0 0.5px var(--mg-ink); }
.mg-fchip[data-active] > svg { color: var(--mg-ink); }
.mg-fchip__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--mg-badge-radius); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); }
.mg-fchip__val { font-weight: 600; color: var(--mg-ink-2); }
.mg-fchip[data-active] .mg-fchip__val { color: var(--mg-ink); }
.mg-fchip[aria-expanded="true"] { background: var(--mg-hover); }
details > summary.mg-fchip { list-style: none; }
details > summary.mg-fchip::-webkit-details-marker { display: none; }
details[open] > .mg-fchip { background: var(--mg-hover); }
.mg-fpop { position: absolute; top: calc(100% + var(--mg-space-2)); left: 0; z-index: var(--mg-z-popover); width: 280px; }
.mg-fpop .mg-menu__item .mg-small { font-weight: 700; }
.mg-fpop__search { padding: var(--mg-space-1) var(--mg-space-1) 6px; }
.mg-fpop__search .mg-control__icon ~ .mg-input { height: var(--mg-control-sm); min-height: 0; }
.mg-fpop__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--mg-space-2); padding: 6px var(--mg-space-1) 2px var(--mg-space-3); border-top: 1.5px solid var(--mg-rule); margin-top: 6px; }
.mg-filters__none { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-5); border-radius: var(--mg-radius-card); background: var(--mg-sunken); color: var(--mg-ink-2); }
.mg-filters__none b { color: var(--mg-ink); }
[data-density="compact"] .mg-filters { gap: var(--mg-space-2); }
@media (max-width: 760px) {
  .mg-filterbar__search { flex: 1 1 100%; }
  .mg-filterbar { flex-wrap: wrap; }
  .mg-filterbar > :not(.mg-filterbar__search) { flex: none; max-width: 100%; }
  .mg-filterbar__search + * { margin-left: 0; }
  .mg-filterbar__count { margin-left: var(--mg-space-2); }
}

.mg-bell { position: relative; }
.mg-bell__n { position: absolute; top: 1px; right: -1px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); box-shadow: 0 0 0 2px var(--mg-surface); pointer-events: none; }
.mg-bell__n--warn { background: var(--mg-warn-text); color: var(--mg-on-ink); }
.mg-bell__n.is-new { animation: mg-pop var(--mg-dur-base) var(--mg-ease-standard) both; }
.mg-rail .mg-bell__n { box-shadow: 0 0 0 2px var(--mg-navy); background: var(--mg-on-navy); color: var(--mg-navy); }
.mg-notif { display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 96px)); background: var(--mg-raised); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-float); overflow: hidden; }
.mg-notif[data-state="open"] { transform-origin: top right; animation: mg-menu-in var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-notif[data-state="closing"] { pointer-events: none; animation: mg-out-fade var(--mg-dur-exit) var(--mg-ease-exit) both; }
.mg-notif__head { display: flex; align-items: center; gap: var(--mg-space-2); min-height: 60px; padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-2) var(--mg-space-5); border-bottom: 1.5px solid var(--mg-rule); }
.mg-notif__head .mg-heading { margin-right: auto; }
.mg-notif__list { flex: 1; min-height: 0; margin: 0; padding: 0 0 var(--mg-space-2); overflow-y: auto; list-style: none; }
.mg-notif__group { padding: var(--mg-space-4) var(--mg-space-5) var(--mg-space-1); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-notif__item { position: relative; display: grid; grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr) auto; column-gap: var(--mg-space-3); row-gap: 2px; align-items: start; padding: var(--mg-space-3) var(--mg-space-5); }
.mg-notif__item:hover { background: var(--mg-hover); }
.mg-notif__item[data-unread]::before { content: ""; position: absolute; left: 7px; top: calc(var(--mg-space-3) + var(--mg-d-avatar) / 2 - var(--mg-space-1)); width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-notif__icon { display: grid; place-items: center; width: var(--mg-d-avatar); height: var(--mg-d-avatar); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); }
.mg-notif__icon--warn { background: var(--mg-warn-tint); color: var(--mg-warn-text); }
.mg-notif__icon svg { width: 16px; height: 16px; }
.mg-notif__item > .mg-avatar { font-size: var(--mg-text-xs); }
.mg-notif__text { margin: 0; font: 500 var(--mg-text-sm)/1.45 var(--mg-font); color: var(--mg-ink); }
.mg-notif__text b { font-weight: 800; }
.mg-notif__item:not([data-unread]) .mg-notif__text { color: var(--mg-ink-2); }
.mg-notif__item:not([data-unread]) .mg-notif__text b { font-weight: 700; color: var(--mg-ink); }
.mg-notif__link { color: inherit; text-decoration: none; border-radius: 4px; }
.mg-notif__link::after { content: ""; position: absolute; inset: 0; }
.mg-notif__time { font: 600 var(--mg-text-xs)/1.6 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-notif__meta { grid-column: 2 / -1; font: 700 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-warn-text); }
.mg-notif__actions { position: relative; grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--mg-space-2); margin-top: var(--mg-space-2); }
.mg-notif__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-2) var(--mg-space-5); border-top: 1.5px solid var(--mg-rule); }
.mg-notif .mg-empty { padding: var(--mg-space-8) var(--mg-space-6); }
.mg-notif .mg-empty .mg-trappen { --mg-trappen-size: 32px; }
.mg-notif .mg-empty__title { font-size: var(--mg-text-lg); }
[data-density="compact"] .mg-notif__item { padding-block: var(--mg-space-2); }
@media (max-width: 560px) {
  .mg-notif { width: 100%; max-height: calc(100vh - 56px); border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; }
}

.mg-upload { position: relative; display: grid; justify-items: center; gap: var(--mg-space-2); padding: var(--mg-space-7) var(--mg-space-5); border: 2px dashed var(--mg-rule-strong); border-radius: var(--mg-radius-card); background: var(--mg-surface); color: var(--mg-ink); text-align: center; cursor: pointer; transition: border-color var(--mg-motion-quick), background-color var(--mg-motion-quick); }
.mg-upload:hover { border-color: var(--mg-ink-2); }
.mg-upload:focus-within { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-upload[data-drag] { border-style: solid; border-color: var(--mg-ink); background: var(--mg-hover); }
.mg-upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mg-upload__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--mg-space-1); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); }
.mg-upload[data-drag] .mg-upload__icon { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-upload__title { margin: 0; font: 800 var(--mg-text-md)/1.35 var(--mg-font); }
.mg-upload__title .mg-link { font-weight: 800; }
.mg-upload__help { margin: 0; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-upload--sm { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--mg-space-4); padding: var(--mg-space-4) var(--mg-space-5); text-align: left; }
.mg-upload--sm .mg-upload__icon { grid-row: span 2; margin: 0; }

.mg-upq { display: grid; margin: 0; padding: 0; list-style: none; }
.mg-upq__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ic name end" "ic bar end"; column-gap: var(--mg-space-3); row-gap: 6px; align-items: center; padding: var(--mg-space-3) 0; border-top: 1.5px solid var(--mg-rule); }
.mg-upq__item:first-child { border-top: 0; }
.mg-upq__ic { grid-area: ic; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); }
.mg-upq__ic svg { width: 18px; height: 18px; }
.mg-upq__name { grid-area: name; display: flex; align-items: baseline; gap: var(--mg-space-2); min-width: 0; font: 700 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-upq__name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-upq__meta { flex: none; margin-left: auto; font: 600 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-upq__bar { grid-area: bar; position: relative; height: var(--mg-stem); margin-right: 6px; border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-upq__bar > i { position: relative; display: block; width: var(--v, 0%); height: 100%; border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: width var(--mg-motion-data); }
.mg-upq__bar > i::after { content: ""; position: absolute; top: 50%; right: -5px; width: var(--mg-dot); height: var(--mg-dot); margin-top: -5px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); box-shadow: 0 0 0 2px var(--mg-surface); }
.mg-upq__end { grid-area: end; display: flex; align-items: center; gap: var(--mg-space-1); }
.mg-upq__msg { grid-area: bar; margin: 0; }
.mg-upq__item[data-state="waiting"] .mg-upq__bar > i::after { left: 0; right: auto; background: var(--mg-surface); box-shadow: inset 0 0 0 2px var(--mg-rule-strong); }
.mg-upq__item[data-state="done"] .mg-upq__ic { background: var(--mg-ok-tint); color: var(--mg-ok-text); }
.mg-upq__item[data-state="error"] .mg-upq__ic { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-upq__item[data-state="done"] .mg-upq__bar, .mg-upq__item[data-state="error"] .mg-upq__bar { display: none; }
.mg-upq__item[data-state="done"] { grid-template-areas: "ic name end"; }
.mg-upq__name > .mg-status { margin-left: auto; }

.mg-upload__done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--mg-space-1) var(--mg-space-4); align-items: start; padding: var(--mg-space-5); border-radius: var(--mg-radius-card); background: var(--mg-ok-tint); color: var(--mg-ink); --mg-rise-d: var(--mg-move-sm); animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-upload__done-mark { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--mg-radius-dot); background: var(--mg-ok); color: var(--mg-on-ink); }
.mg-upload__done-title { margin: 0; font: 800 var(--mg-text-lg)/1.3 var(--mg-font); }
.mg-upload__done-text { margin: 0; font: 500 var(--mg-text-sm)/1.45 var(--mg-font); color: var(--mg-ink-2); }
.mg-upload__done .mg-row { margin-top: var(--mg-space-2); }

.mg-cmdk-trigger { display: inline-flex; align-items: center; gap: var(--mg-space-2); width: 280px; max-width: 100%; height: var(--mg-control-sm); padding: 0 6px 0 var(--mg-space-3); border: 1.5px solid var(--mg-rule); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink-2); font: 600 var(--mg-text-sm)/1 var(--mg-font); cursor: pointer; }
.mg-cmdk-trigger:hover { border-color: var(--mg-rule-strong); }
.mg-cmdk-trigger__text { flex: 1; text-align: left; }
.mg-cmdk { display: flex; flex-direction: column; width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--mg-radius-card); background: var(--mg-raised); color: var(--mg-ink); box-shadow: var(--mg-shadow-float); overflow: hidden; }
.mg-cmdk:not([open]) { display: none; }
.mg-cmdk::backdrop { background: var(--mg-scrim); }
.mg-cmdk[open] { animation: mg-pop-in var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-cmdk.is-closing { pointer-events: none; animation: mg-out-fade var(--mg-dur-exit) var(--mg-ease-exit) both; }
.mg-cmdk__search { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 60px; padding: 0 var(--mg-space-4) 0 var(--mg-space-5); border-bottom: 1.5px solid var(--mg-rule); color: var(--mg-ink-2); }
.mg-cmdk__search:focus-within { box-shadow: inset 0 -2px 0 var(--mg-focus); }
.mg-cmdk__input { flex: 1; min-width: 0; height: 56px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--mg-ink); font: 600 var(--mg-text-lg)/1 var(--mg-font); }
.mg-cmdk__input::placeholder { color: var(--mg-ink-2); opacity: 1; }
.mg-cmdk__list { flex: 1; min-height: 0; margin: 0; padding: var(--mg-space-2); overflow-y: auto; list-style: none; }
.mg-cmdk__group { margin: 0; padding: 0; list-style: none; }
.mg-cmdk__group + .mg-cmdk__group { margin-top: var(--mg-space-1); }
.mg-cmdk__label { display: flex; align-items: center; gap: var(--mg-space-2); padding: 10px var(--mg-space-3) 6px; font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-cmdk__label .mg-pmark { color: var(--mg-ink); }
.mg-cmdk__label .mg-cmdk__n { margin-left: auto; font-weight: 600; }
.mg-cmdk__opt { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); min-height: 48px; padding: 6px var(--mg-space-3); border-radius: calc(var(--mg-radius-field) - 4px); cursor: pointer; }
.mg-cmdk__opt:hover { background: var(--mg-hover); }
.mg-cmdk__opt[data-active] { background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-cmdk__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); }
.mg-cmdk__ic svg { width: 16px; height: 16px; }
.mg-cmdk__opt > .mg-avatar { --mg-d-avatar: 32px; }
.mg-cmdk__text { display: grid; gap: 2px; min-width: 0; }
.mg-cmdk__text > span, .mg-cmdk__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-cmdk__text > span { font: 600 var(--mg-text-md)/1.25 var(--mg-font); }
.mg-cmdk__text small { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-cmdk__opt mark { background: none; color: inherit; font-weight: 800; }
.mg-cmdk__hint { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); visibility: hidden; }
.mg-cmdk__opt[data-active] .mg-cmdk__hint { visibility: visible; }
.mg-cmdk__remove { visibility: hidden; }
.mg-cmdk__opt:hover .mg-cmdk__remove, .mg-cmdk__opt[data-active] .mg-cmdk__remove { visibility: visible; }
.mg-cmdk__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-5); padding: 10px var(--mg-space-5); border-top: 1.5px solid var(--mg-rule); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cmdk__foot > span { display: inline-flex; align-items: center; gap: 6px; }
.mg-cmdk__foot > span:last-child { margin-left: auto; }
.mg-cmdk__empty { display: grid; justify-items: center; gap: var(--mg-space-2); padding: var(--mg-space-7) var(--mg-space-5); text-align: center; color: var(--mg-ink-2); }
.mg-cmdk__empty b { color: var(--mg-ink); }
@media (max-width: 560px) {
  .mg-cmdk { width: 100%; max-width: none; max-height: 100vh; height: 100%; margin: 0; border-radius: 0; }
  .mg-cmdk__foot { display: none; }
}

.mg-compose { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 760px; background: var(--mg-surface); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-float); }
.mg-compose__head { display: flex; align-items: center; gap: var(--mg-space-2); min-height: 60px; padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-2) var(--mg-space-6); border-bottom: 1.5px solid var(--mg-rule); }
.mg-compose__head .mg-heading { margin-right: auto; }
.mg-compose__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: var(--mg-space-2) var(--mg-space-3); min-height: var(--mg-d-row); padding: 10px var(--mg-space-4) 10px var(--mg-space-6); border-bottom: 1.5px solid var(--mg-rule); }
.mg-compose__row:focus-within { box-shadow: inset 0 -2px 0 var(--mg-focus); }
.mg-compose__key { display: flex; align-items: center; min-height: 30px; font: 700 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-compose__row > .mg-button { margin-block: -1px; }
.mg-compose__to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mg-compose__to .mg-chip { padding-left: var(--mg-space-1); }
.mg-compose__to .mg-chip > .mg-avatar, .mg-compose__to .mg-chip > .mg-chip__ic { --mg-d-avatar: 22px; width: 22px; height: 22px; background: var(--mg-surface); font-size: var(--mg-text-xs); }
.mg-chip__ic { display: grid; place-items: center; flex: none; border-radius: var(--mg-chip-radius); background: var(--mg-surface); color: var(--mg-ink); }
.mg-chip__ic svg { width: 14px; height: 14px; }
.mg-chip--alarm { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); box-shadow: inset 0 0 0 1.5px var(--mg-alarm); }
.mg-chip--alarm .mg-chip__ic, .mg-compose__to .mg-chip--alarm > .mg-chip__ic { background: var(--mg-alarm); color: var(--mg-on-alarm); }
.mg-chip--alarm button { color: var(--mg-alarm-text); }
.mg-compose__input { flex: 1 1 8ch; min-width: 8ch; height: 30px; padding: 0 var(--mg-space-1); border: 0; outline: 0; background: transparent; color: var(--mg-ink); font: 500 var(--mg-text-md)/1 var(--mg-font); }
.mg-compose__input::placeholder { color: var(--mg-ink-2); opacity: 1; }
.mg-compose__input--subject { font-weight: 700; }
.mg-compose__row .mg-field__error { grid-column: 2 / -1; }
.mg-compose__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px var(--mg-space-4) 6px var(--mg-space-5); border-bottom: 1.5px solid var(--mg-rule); }
.mg-compose__bar-end { position: relative; display: flex; align-items: center; gap: var(--mg-space-2); margin-left: auto; }
.mg-tool { display: inline-grid; place-items: center; width: var(--mg-control-sm); height: var(--mg-control-sm); padding: 0; border: 0; border-radius: var(--mg-radius-dot); background: transparent; color: var(--mg-ink-2); font: 700 var(--mg-text-md)/1 var(--mg-font); cursor: pointer; }
.mg-tool:hover { background: var(--mg-hover); color: var(--mg-ink); }
.mg-tool[aria-pressed="true"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-tool--b { font-weight: 800; }
.mg-tool--i { font-style: italic; font-weight: 700; }
.mg-tool svg { width: 18px; height: 18px; }
.mg-tool__sep { width: 1.5px; height: 20px; margin: 0 var(--mg-space-2); background: var(--mg-rule); }
.mg-compose__editor { min-height: 200px; max-width: none; padding: var(--mg-space-5) var(--mg-space-6); outline: none; }
.mg-compose__editor:focus-visible { box-shadow: inset 0 0 0 2px var(--mg-focus); }
.mg-compose__editor > :first-child { margin-top: 0; }
.mg-compose__attach { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); padding: 0 var(--mg-space-6) var(--mg-space-4); }
.mg-compose__attach .mg-chip { gap: var(--mg-space-2); height: 34px; padding-left: 10px; }
.mg-compose__attach .mg-chip > svg { color: var(--mg-ink-2); }
.mg-chip__bar { position: relative; width: 56px; height: var(--mg-stem); border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-chip__bar > i { position: relative; display: block; width: var(--v, 0%); height: 100%; border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: width var(--mg-motion-data); }
.mg-chip__bar > i::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--mg-space-1)); width: 8px; height: 8px; margin-top: calc(-1 * var(--mg-space-1)); border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-compose__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-4) var(--mg-space-6); border-top: 1.5px solid var(--mg-rule); }
.mg-compose__status { margin-left: var(--mg-space-2); }
.mg-compose__foot > :last-child { margin-left: auto; }
.mg-compose__tmpl { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--mg-z-popover); width: 300px; }
@media (max-width: 560px) {
  .mg-compose { max-width: none; height: 100%; border-radius: 0; box-shadow: none; }
  .mg-compose__row { grid-template-columns: 44px minmax(0, 1fr) auto; padding-left: var(--mg-space-4); }
  .mg-compose__bar { flex-wrap: nowrap; overflow-x: auto; }
  .mg-compose__editor, .mg-compose__attach { padding-inline: var(--mg-space-4); }
  .mg-compose__foot { position: sticky; bottom: 0; background: var(--mg-surface); }
}

@media (pointer: coarse) {
  .mg-fchip, .mg-cmdk-trigger { min-height: var(--mg-control-touch); }
  .mg-tool { width: var(--mg-control-touch); height: var(--mg-control-touch); }
  .mg-settings__link { min-height: var(--mg-control-touch); }
}

@media (prefers-reduced-motion: reduce) {
  .mg-savebar, .mg-notif[data-state="open"], .mg-cmdk[open], .mg-upload__done, .mg-bell__n.is-new { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
  .mg-savebar.is-leaving, .mg-notif[data-state="closing"], .mg-cmdk.is-closing { animation-name: mg-out-fade !important; animation-duration: var(--mg-dur-exit) !important; }
  .mg-upq__bar > i, .mg-chip__bar > i, .mg-upload { transition: none !important; }
}
[data-motion="reduce"] :is(.mg-savebar, .mg-notif[data-state="open"], .mg-cmdk[open], .mg-upload__done, .mg-bell__n.is-new) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
[data-motion="reduce"] :is(.mg-savebar.is-leaving, .mg-notif[data-state="closing"], .mg-cmdk.is-closing) { animation-name: mg-out-fade !important; animation-duration: var(--mg-dur-exit) !important; }
[data-motion="reduce"] :is(.mg-upq__bar > i, .mg-chip__bar > i, .mg-upload) { transition: none !important; }
[data-motion="off"] :is(.mg-savebar, .mg-notif, .mg-cmdk, .mg-upload__done, .mg-bell__n, .mg-upq__bar > i, .mg-chip__bar > i, .mg-upload) { animation: none !important; transition: none !important; }

@media (forced-colors: active) {
  .mg-settings__link[aria-current="true"]::before, .mg-settings__dirty, .mg-setrow__changed::before, .mg-savebar::before, .mg-notif__item[data-unread]::before, .mg-upq__bar > i, .mg-upq__bar > i::after, .mg-chip__bar > i, .mg-chip__bar > i::after, .mg-fchip__n, .mg-bell__n { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .mg-settings__link[aria-current="true"], .mg-fchip[data-active], .mg-tool[aria-pressed="true"], .mg-cmdk__opt[data-active] { outline: 2px solid Highlight; outline-offset: -2px; }
  .mg-upq__bar, .mg-chip__bar { border: 1px solid CanvasText; }
  .mg-savebar, .mg-notif, .mg-cmdk, .mg-compose, .mg-fchip, .mg-setgroup__card, .mg-upload__done { border: 1px solid CanvasText; }
  .mg-upload { border-color: CanvasText; }
}

.mg-wheel { --mg-wheel-label: var(--mg-text-sm); }

.mg-chat { --mg-chat-other: var(--mg-sunken); --mg-chat-gap: var(--mg-space-1); --mg-chat-group: var(--mg-space-4); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; background: var(--mg-surface); color: var(--mg-ink); }
[data-density="compact"] .mg-chat, .mg-chat[data-density="compact"] { --mg-chat-gap: 2px; --mg-chat-group: var(--mg-space-2); }
[data-density="spacious"] .mg-chat, .mg-chat[data-density="spacious"] { --mg-chat-gap: var(--mg-space-2); --mg-chat-group: var(--mg-space-5); }

.mg-chat__head { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 60px; padding: var(--mg-space-2) var(--mg-space-3); border-bottom: 1px solid var(--mg-rule); }
.mg-chat__who { display: grid; min-width: 0; flex: 1; }
.mg-chat__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-chat__meta { display: flex; align-items: center; gap: var(--mg-space-2); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }

.mg-chat__log { display: flex; flex-direction: column; gap: var(--mg-chat-gap); min-height: 0; margin: 0; padding: var(--mg-space-3) var(--mg-space-3) var(--mg-space-4); overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.mg-chat__day, .mg-chat__time { align-self: center; margin: var(--mg-chat-group) 0 var(--mg-space-1); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-chat__day:first-child { margin-top: var(--mg-space-1); }
.mg-chat__time { margin-top: var(--mg-space-3); font-weight: 500; }
.mg-chat__new { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--mg-space-3); margin: var(--mg-space-3) 0 var(--mg-space-1); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink); }
.mg-chat__new::before, .mg-chat__new::after { content: ""; height: 2px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }

.mg-chat__group { display: flex; align-items: flex-end; gap: var(--mg-space-2); margin-top: var(--mg-chat-group); }
.mg-chat__group > .mg-avatar { margin-bottom: 2px; }
.mg-chat__group:has(.mg-chat__msg:last-of-type > .mg-chat__reacts) > .mg-avatar { margin-bottom: calc(26px + var(--mg-space-1)); }
.mg-chat__stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mg-chat-gap); min-width: 0; flex: 1; }
.mg-chat__group--own .mg-chat__stack { align-items: flex-end; }
.mg-chat__group--own { padding-left: calc(var(--mg-d-avatar) + var(--mg-space-2)); }
.mg-chat__from { margin: 0 0 2px var(--mg-space-3); font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }

.mg-chat__msg { display: flex; flex-direction: column; align-items: inherit; max-width: min(84%, 34ch); }
.mg-chat__bubble { margin: 0; padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-card); background: var(--mg-chat-other); color: var(--mg-ink); font: 500 var(--mg-text-md)/1.45 var(--mg-font); overflow-wrap: anywhere; white-space: pre-wrap; }
.mg-chat__group:not(.mg-chat__group--own) .mg-chat__msg:not(:last-of-type) .mg-chat__bubble { border-bottom-left-radius: calc(var(--mg-radius-field) / 2); }
.mg-chat__group:not(.mg-chat__group--own) .mg-chat__msg:not(:first-of-type) .mg-chat__bubble { border-top-left-radius: calc(var(--mg-radius-field) / 2); }
.mg-chat__group--own .mg-chat__bubble { background: var(--mg-navy); color: var(--mg-on-navy); }
.mg-chat__group--own .mg-chat__msg:not(:last-of-type) .mg-chat__bubble { border-bottom-right-radius: calc(var(--mg-radius-field) / 2); }
.mg-chat__group--own .mg-chat__msg:not(:first-of-type) .mg-chat__bubble { border-top-right-radius: calc(var(--mg-radius-field) / 2); }
.mg-chat__file { display: flex; align-items: center; gap: var(--mg-space-2); font-weight: 700; }
.mg-chat__file small { font: 500 var(--mg-text-xs)/1 var(--mg-font); opacity: 0.8; }

.mg-chat__reacts { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); margin: calc(var(--mg-space-1) * -1) var(--mg-space-2) var(--mg-space-1); position: relative; }
.mg-chat__react { display: inline-flex; align-items: center; gap: var(--mg-space-1); height: 26px; padding: 0 var(--mg-space-2); border: 0; border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: 0 0 0 1.5px var(--mg-rule); color: var(--mg-ink); font: 700 var(--mg-text-xs)/1 var(--mg-font); cursor: pointer; }
.mg-chat__react:hover { background: var(--mg-hover); }
.mg-chat__react[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mg-ink); }
.mg-chat__react:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-chat__react--add { width: 26px; padding: 0; justify-content: center; color: var(--mg-ink-2); }
.mg-chat__react--add svg { width: 14px; height: 14px; }

.mg-chat__status { margin: 2px var(--mg-space-2) 0; font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-chat__status--failed { display: flex; align-items: center; gap: var(--mg-space-2); color: var(--mg-alarm-text); font-weight: 700; }
.mg-chat__status--failed button { padding: 0; border: 0; background: none; color: var(--mg-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.mg-chat__typing { display: inline-flex; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-3) var(--mg-space-3) var(--mg-space-2); border-radius: var(--mg-radius-card); background: var(--mg-chat-other); }
.mg-chat__typing .mg-trappen { --mg-trappen-size: 14px; color: var(--mg-ink-2); }
.mg-chat__meta .mg-trappen { --mg-trappen-size: 10px; color: var(--mg-ink-2); }

.mg-chat__compose { display: grid; gap: var(--mg-space-2); padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-3); border-top: 1px solid var(--mg-rule); background: var(--mg-surface); }
.mg-chat__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--mg-space-2); }
.mg-chat__input { display: block; width: 100%; min-height: var(--mg-control); max-height: calc(var(--mg-control) * 3); padding: 9px var(--mg-space-4); border: 1.5px solid var(--mg-rule-strong); border-radius: calc(var(--mg-control) / 2); background: var(--mg-surface); color: var(--mg-ink); font: 500 var(--mg-text-md)/1.4 var(--mg-font); resize: none; field-sizing: content; }
.mg-chat__input::placeholder { color: var(--mg-ink-2); opacity: 1; }
.mg-chat__input:focus { border-color: var(--mg-blue); box-shadow: 0 0 0 4px var(--mg-blue-tint); outline: none; }
.mg-chat__attach { justify-self: start; }
@media (pointer: coarse) { .mg-chat__bar .mg-button--icon { width: var(--mg-control-touch); height: var(--mg-control-touch); } .mg-chat__input { min-height: var(--mg-control-touch); } }

.mg-chat__empty { align-self: center; padding-block: var(--mg-space-7); }

.mg-chat-list { margin: 0; padding: var(--mg-space-1) 0; list-style: none; }
.mg-chat-list__row { display: grid; grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); min-height: var(--mg-d-row); padding: var(--mg-space-2) var(--mg-space-4); color: var(--mg-ink); text-decoration: none; }
.mg-chat-list__row:hover { background: var(--mg-hover); }
.mg-chat-list__row:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: -2px; }
.mg-chat-list__main { display: grid; min-width: 0; }
.mg-chat-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-md)/1.35 var(--mg-font); }
.mg-chat-list__last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-sm)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-chat-list__side { display: grid; justify-items: end; gap: var(--mg-space-1); font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-chat-list__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chat-list__row--unread .mg-chat-list__name { font-weight: 800; }
.mg-chat-list__row--unread .mg-chat-list__last { color: var(--mg-ink); font-weight: 700; }
.mg-chat-list__row--unread .mg-chat-list__side { color: var(--mg-ink); font-weight: 700; }
[data-density="compact"] .mg-chat-list__last { display: none; }

.mg-cd { --elapsed: 0; display: grid; align-content: space-between; gap: var(--mg-space-4); min-width: 0; }
.mg-cd__read { display: grid; gap: var(--mg-space-1); }
.mg-cd__time { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; margin: 0; font: 800 clamp(var(--mg-text-2xl), 11cqi, var(--mg-text-display))/1 var(--mg-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-cd__time b { font-weight: 800; }
.mg-cd__part { white-space: nowrap; }
.mg-cd__u { margin-left: 0.3em; font-size: 0.42em; font-weight: 700; letter-spacing: 0; color: var(--mg-ink-2); }
.mg-cd__left { font: 700 var(--mg-text-md)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-cd__note { font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink); }
.mg-cd__stem { position: relative; height: calc(var(--mg-stem) * 4); }
.mg-cd__stem::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--mg-stem) * 1.5); transform: translateY(-50%); border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-cd__rest { position: absolute; left: calc(var(--elapsed) * 100%); right: 0; top: 50%; height: calc(var(--mg-stem) * 1.5); transform: translateY(-50%); border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: left var(--mg-motion-data); }
.mg-cd__now { position: absolute; left: calc(var(--elapsed) * 100%); top: 50%; width: calc(var(--mg-stem) * 4); height: calc(var(--mg-stem) * 4); transform: translate(-50%, -50%); border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-surface); transition: left var(--mg-motion-data); }
.mg-cd__end { position: absolute; right: 0; top: 50%; width: calc(var(--mg-stem) * 3.5); height: calc(var(--mg-stem) * 3.5); transform: translateY(-50%); border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: inset 0 0 0 2.5px var(--mg-ink); }
.mg-cd__scale { display: flex; justify-content: space-between; gap: var(--mg-space-3); font: 600 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-cd__done { display: none; margin: 0; font: 800 clamp(var(--mg-text-xl), 8cqi, var(--mg-text-3xl))/1.1 var(--mg-font); letter-spacing: -0.025em; }
.mg-cd__since { display: none; font: 500 var(--mg-text-md)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-cd--done .mg-cd__done, .mg-cd--done .mg-cd__since { display: block; }
.mg-cd--done :is(.mg-cd__time, .mg-cd__left, .mg-cd__stem, .mg-cd__note) { display: none; }
.mg-cd--bare .mg-cd__stem, .mg-cd--bare .mg-cd__scale { display: none; }

.mg-card--navy .mg-cd__u, .mg-card--navy .mg-cd__left, .mg-card--navy .mg-cd__since, .mg-card--navy .mg-cd__scale { color: var(--mg-on-navy-2); }
.mg-card--navy .mg-cd__note { color: var(--mg-on-navy); }
.mg-card--navy .mg-cd__stem::before { background: var(--mg-navy-hi); }
.mg-card--navy .mg-cd__rest { background: var(--mg-on-navy); }
.mg-card--navy .mg-cd__now { box-shadow: 0 0 0 3px var(--mg-navy); }
.mg-card--navy .mg-cd__end { background: var(--mg-navy); box-shadow: inset 0 0 0 2.5px var(--mg-on-navy); }

[data-surface="tv"] .mg-cd { gap: var(--mg-space-6); }
[data-surface="tv"] .mg-cd__time { font-size: var(--mg-tv-display); letter-spacing: -0.045em; }
[data-surface="tv"] .mg-cd__u { font-size: 0.34em; }
[data-surface="tv"] .mg-cd__left, [data-surface="tv"] .mg-cd__note, [data-surface="tv"] .mg-cd__since { font-size: var(--mg-tv-body); }
[data-surface="tv"] .mg-cd__scale { font-size: var(--mg-tv-label); }
[data-surface="tv"] .mg-cd__done { font-size: calc(var(--mg-tv-display) * 0.6); }
[data-surface="tv"] .mg-cd__stem { height: calc(var(--mg-stem) * 5); }
[data-surface="tv"] .mg-cd__stem::before, [data-surface="tv"] .mg-cd__rest { height: calc(var(--mg-stem) * 2); }
[data-surface="tv"] .mg-cd__now { width: calc(var(--mg-stem) * 5); height: calc(var(--mg-stem) * 5); box-shadow: 0 0 0 4px var(--mg-surface); }
[data-surface="tv"] .mg-card--navy .mg-cd__now { box-shadow: 0 0 0 4px var(--mg-navy); }
[data-surface="tv"] .mg-cd__end { width: calc(var(--mg-stem) * 4); height: calc(var(--mg-stem) * 4); box-shadow: inset 0 0 0 3px var(--mg-ink); }
[data-surface="tv"] .mg-card--navy .mg-cd__end { box-shadow: inset 0 0 0 3px var(--mg-on-navy); }

.mg-wheel { --to: 0deg; display: grid; justify-items: center; gap: var(--mg-space-4); min-width: 0; text-align: center; }
.mg-wheel__stage { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; margin-top: var(--mg-space-4); }
.mg-wheel__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mg-wheel__disc { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--to)); }
.mg-wheel__seg { stroke: var(--mg-surface); stroke-width: 2; }
.mg-wheel__seg--none { fill: var(--mg-sunken); }
.mg-wheel__label { fill: var(--mg-on-ink); font: 800 var(--mg-wheel-label)/1 var(--mg-font); letter-spacing: -0.01em; }
.mg-wheel__label--none { fill: var(--mg-ink-2); font-weight: 700; }
.mg-wheel__rim { fill: none; stroke: var(--mg-ink); stroke-width: 6; }
.mg-wheel__hub { fill: var(--mg-ink); stroke: var(--mg-surface); stroke-width: 4; }
.mg-wheel__pin { position: absolute; left: 50%; top: calc(var(--mg-space-4) * -1); width: calc(var(--mg-stem) * 1.5); height: calc(var(--mg-space-7) + var(--mg-space-2)); transform: translateX(-50%); border-radius: var(--mg-radius-dot); background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-wheel__pin::before { content: ""; position: absolute; left: 50%; top: calc(var(--mg-space-3) * -1); width: 20px; height: 20px; transform: translateX(-50%); border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-wheel__result { display: grid; gap: var(--mg-space-1); min-height: 64px; }
.mg-wheel__title { margin: 0; font: 800 var(--mg-text-xl)/1.15 var(--mg-font); letter-spacing: -0.025em; }
.mg-wheel__sub { margin: 0; color: var(--mg-ink-2); }
.mg-wheel__actions { display: grid; justify-items: center; gap: var(--mg-space-2); }
.mg-wheel__actions > * { grid-area: 1 / 1; }
.mg-wheel__left { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }

.mg-wheel:is([data-state="spin"], [data-state="result"]) :is(.mg-wheel__seg, .mg-wheel__label):not(.is-win) { opacity: 0.38; }
.mg-wheel[data-state="spin"] .mg-wheel__disc { animation: mg-wheel-spin var(--mg-dur-spin) var(--mg-ease-enter) both; }
.mg-wheel[data-state="spin"] :is(.mg-wheel__seg, .mg-wheel__label):not(.is-win) { animation: mg-wheel-dim var(--mg-dur-rise) var(--mg-ease-standard) both; animation-delay: var(--mg-dur-spin); }
.mg-wheel[data-state="spin"] :is(.mg-wheel__result > *, .mg-wheel__after) { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; animation-delay: var(--mg-dur-spin); }
.mg-wheel[data-state="spin"] .mg-wheel__title .mg-punktum--land::after { --mg-land-delay: calc(var(--mg-dur-spin) + var(--mg-dur-base)); }
.mg-wheel[data-state="spin"] .mg-wheel__skip { visibility: hidden; animation: mg-wheel-skip var(--mg-dur-spin); }
.mg-wheel:not([data-state="spin"]) .mg-wheel__skip { display: none; }
.mg-wheel[data-state="idle"] .mg-wheel__disc { transform: none; }
@keyframes mg-wheel-spin { from { transform: rotate(0deg); } }
@keyframes mg-wheel-dim { from { opacity: 1; } }
@keyframes mg-wheel-skip { from, to { visibility: visible; } }

.mg-card--navy .mg-wheel__seg, .mg-tv .mg-wheel__seg { stroke: var(--mg-navy); }
.mg-card--navy .mg-wheel__seg--none { fill: var(--mg-navy-hi); }
.mg-card--navy .mg-wheel__label { fill: var(--mg-navy); }
.mg-card--navy .mg-wheel__label--none { fill: var(--mg-on-navy-2); }
.mg-card--navy .mg-wheel__rim { stroke: var(--mg-on-navy); }
.mg-card--navy .mg-wheel__hub { fill: var(--mg-on-navy); stroke: var(--mg-navy); }
.mg-card--navy .mg-wheel__pin { background: var(--mg-on-navy); box-shadow: 0 0 0 3px var(--mg-navy); }
.mg-card--navy .mg-wheel__pin::before { box-shadow: 0 0 0 3px var(--mg-navy); }
.mg-card--navy .mg-wheel__sub, .mg-card--navy .mg-wheel__left { color: var(--mg-on-navy-2); }
[data-surface="tv"] .mg-wheel__stage { max-width: none; width: min(100%, 44cqi); }
[data-surface="tv"] .mg-wheel__title { font-size: var(--mg-tv-num); }
[data-surface="tv"] .mg-wheel__sub { font-size: var(--mg-tv-label); }

.mg-tombola { display: grid; gap: var(--mg-space-4); }
.mg-tombola__lots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
.mg-tombola__lot { display: inline-flex; align-items: center; gap: var(--mg-space-1); height: 28px; padding: 0 var(--mg-space-3) 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); font: 700 var(--mg-text-xs)/1 var(--mg-font); font-variant-numeric: tabular-nums; }
.mg-tombola__lot::before { content: ""; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-tombola__lot--win { background: var(--mg-blue-tint); }
.mg-tombola__lot--win::before { background: var(--mg-blue); }
.mg-tombola__draw { margin: 0; padding: 0; list-style: none; }
.mg-tombola__draw li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--mg-space-3); padding: var(--mg-space-2) 0; border-top: 1px solid var(--mg-rule); }
.mg-tombola__draw b { font-weight: 700; }
.mg-tombola__draw span { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.mg-tombola__draw [aria-current="true"] { margin: 0 calc(var(--mg-space-2) * -1); padding-inline: var(--mg-space-2); border-radius: var(--mg-radius-field); border-top-color: transparent; background: var(--mg-blue-tint); }

.mg-camp { display: grid; gap: var(--mg-space-5); min-width: 0; }
.mg-camp__name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--mg-text-xl)/1.2 var(--mg-font); letter-spacing: -0.02em; }
.mg-camp__statement { margin: 0; font: 800 var(--mg-text-2xl)/1.1 var(--mg-font); letter-spacing: -0.025em; }
.mg-camp__facts { display: grid; margin: 0; }
.mg-camp__fact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: baseline; gap: var(--mg-space-3); margin: 0; padding: var(--mg-space-2) 0; border-top: 1px solid var(--mg-rule); }
.mg-camp__fact dt { font: 700 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-camp__fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--mg-space-2); }
.mg-camp__v { font: 800 var(--mg-text-lg)/1.2 var(--mg-font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mg-camp__u { font: 700 var(--mg-text-sm)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-camp__v--ok { color: var(--mg-ok-text); }
.mg-camp__v--warn { color: var(--mg-warn-text); }
@container (min-width: 560px) {
  .mg-camp__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mg-space-5); }
  .mg-camp__fact { grid-template-columns: none; align-content: start; gap: var(--mg-space-1); padding: var(--mg-space-3) 0 0; }
  .mg-camp__fact dd { display: grid; row-gap: 2px; }
  .mg-camp__v { font-size: var(--mg-text-xl); }
}

.mg-camp-list { margin: 0; padding: 0; list-style: none; }
.mg-camp-list__head, .mg-camp-list__row { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(160px, 1.6fr) minmax(70px, 0.6fr) minmax(130px, 1fr) minmax(120px, 0.9fr); align-items: center; gap: var(--mg-space-4); padding: 0 var(--mg-d-pad); }
.mg-camp-list__head { min-height: 34px; font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-camp-list__row { min-height: calc(var(--mg-d-row) + var(--mg-space-3)); border-top: 1px solid var(--mg-rule); }
.mg-camp-list__who { display: grid; min-width: 0; }
.mg-camp-list__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-camp-list__who small { display: var(--mg-d-note); font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-camp-list__num { font: 700 var(--mg-text-md)/1.2 var(--mg-font); font-variant-numeric: tabular-nums; }
.mg-camp-list__num small { font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-camp-list .mg-goal { gap: var(--mg-space-1); }
.mg-camp-list .mg-goal__read { font: 700 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-camp-list .mg-goal__num { font: 800 var(--mg-text-sm)/1.2 var(--mg-font); letter-spacing: 0; }
.mg-camp-list .mg-goal__of { font: 500 var(--mg-text-xs)/1.2 var(--mg-font); }
.mg-camp-list .mg-goal__stem { height: 14px; }
.mg-camp-list .mg-goal__stem::before, .mg-camp-list .mg-goal__fill { height: var(--mg-stem); margin-top: calc(var(--mg-stem) / -2); }
.mg-camp-list .mg-goal__dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-camp-list .mg-goal__plan { top: 0; bottom: 0; }
.mg-camp-list .mg-goal__end { width: 10px; height: 10px; margin-top: -5px; box-shadow: inset 0 0 0 2px var(--mg-ink); }
.mg-camp-list .mg-goal--over .mg-goal__stem { margin-right: 14px; }
.mg-camp-list .mg-goal--over .mg-goal__fill { width: calc(100% + 14px); }
.mg-camp-list .mg-goal--over .mg-goal__dot { left: calc(100% + 14px); }
.mg-camp-list .mg-goal--over .mg-goal__end { box-shadow: 0 0 0 2px var(--mg-surface); }
.mg-camp-list__row--ended { color: var(--mg-ink-2); }
.mg-camp-list__row--ended .mg-camp-list__who b { color: var(--mg-ink-2); }
@media (max-width: 720px) {
  .mg-camp-list__head { display: none; }
  .mg-camp-list__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who status" "goal goal" "days tempo"; row-gap: var(--mg-space-2); padding-block: var(--mg-space-3); }
  .mg-camp-list__row > :nth-child(1) { grid-area: who; } .mg-camp-list__row > :nth-child(2) { grid-area: goal; } .mg-camp-list__row > :nth-child(3) { grid-area: days; } .mg-camp-list__row > :nth-child(4) { grid-area: tempo; text-align: right; } .mg-camp-list__row > :nth-child(5) { grid-area: status; }
}

.mg-card--navy .mg-camp__fact { border-top-color: var(--mg-navy-hi); }
.mg-card--navy .mg-camp__fact dt, .mg-card--navy .mg-camp__u { color: var(--mg-on-navy-2); }
.mg-card--navy .mg-camp__v--ok { color: var(--mg-on-navy); }
.mg-card--navy .mg-status { color: var(--mg-on-navy); }
.mg-card--navy .mg-status--ok::before { background: var(--mg-ok); }
[data-surface="tv"] .mg-camp { gap: var(--mg-space-7); }
[data-surface="tv"] .mg-camp__name { font-size: var(--mg-tv-body); }
[data-surface="tv"] .mg-camp__statement { font-size: calc(var(--mg-tv-display) * 0.45); letter-spacing: -0.04em; }
[data-surface="tv"] .mg-camp__fact dt { font-size: var(--mg-tv-label); }
[data-surface="tv"] .mg-camp .mg-camp__v { font-size: calc(var(--mg-tv-num) * 1.3); }
[data-surface="tv"] .mg-camp__u { font-size: var(--mg-tv-label); }
[data-surface="tv"] .mg-camp .mg-status { font-size: var(--mg-tv-label); }
[data-surface="tv"] .mg-camp .mg-goal__num { font-size: var(--mg-tv-num); }
[data-surface="tv"] .mg-camp .mg-goal__of { font-size: var(--mg-tv-label); }
[data-surface="tv"] .mg-camp .mg-goal__stem { height: calc(var(--mg-stem) * 6); }
[data-surface="tv"] .mg-camp .mg-goal__stem::before, [data-surface="tv"] .mg-camp .mg-goal__fill { height: calc(var(--mg-stem) * 2); margin-top: calc(var(--mg-stem) * -1); }
[data-surface="tv"] .mg-camp .mg-goal__dot { width: calc(var(--mg-stem) * 6); height: calc(var(--mg-stem) * 6); margin: calc(var(--mg-stem) * -3) 0 0 calc(var(--mg-stem) * -3); }
[data-surface="tv"] .mg-camp .mg-goal__end { width: calc(var(--mg-stem) * 4); height: calc(var(--mg-stem) * 4); margin-top: calc(var(--mg-stem) * -2); }
[data-surface="tv"] .mg-camp .mg-goal__plan { top: 0; bottom: 0; width: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mg-wheel[data-state="spin"] :is(.mg-wheel__disc, .mg-wheel__seg, .mg-wheel__label) { animation: none !important; }
  .mg-wheel[data-state="spin"] .mg-wheel__skip { display: none !important; }
  .mg-wheel[data-state="spin"] :is(.mg-wheel__result > *, .mg-wheel__after) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; }
  .mg-wheel .mg-punktum--land::after { animation-delay: 0s !important; }
  .mg-cd__rest, .mg-cd__now { transition: none !important; }
  .mg-chat__typing .mg-trappen i, .mg-chat__meta .mg-trappen i { animation: none !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-wheel[data-state="spin"] :is(.mg-wheel__disc, .mg-wheel__seg, .mg-wheel__label) { animation: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-wheel[data-state="spin"] .mg-wheel__skip { display: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-wheel[data-state="spin"] :is(.mg-wheel__result > *, .mg-wheel__after) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-wheel .mg-punktum--land::after { animation-delay: 0s !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-cd__rest, .mg-cd__now) { transition: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-chat__typing .mg-trappen i, .mg-chat__meta .mg-trappen i) { animation: none !important; }

@media (forced-colors: active) {
  .mg-chat__bubble { border: 1px solid CanvasText; }
  .mg-wheel__seg { stroke: CanvasText; }
  .mg-cd__stem::before, .mg-cd__end { outline: 1px solid CanvasText; }
}

.mg-nav__badge { margin-left: auto; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-on-navy); color: var(--mg-navy); font: 800 var(--mg-text-xs)/1 var(--mg-font); font-feature-settings: "tnum" 1; }
.mg-tab__n--due { background: var(--mg-ink); color: var(--mg-on-ink); }
@media (max-width: 760px) {
  .mg-nav__badge { position: absolute; top: var(--mg-space-1); left: calc(50% + var(--mg-space-2)); margin: 0; min-width: 20px; height: 20px; padding: 0 5px; box-shadow: 0 0 0 2px var(--mg-navy); }
}

.mg-picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.mg-pick { display: inline-flex; align-items: center; gap: 6px; height: var(--mg-control-sm); padding: 0 var(--mg-space-3); border: 1.5px solid var(--mg-rule); border-radius: var(--mg-radius-dot); background: var(--mg-surface); color: var(--mg-ink); font: 700 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; cursor: pointer; transition: background-color var(--mg-motion-quick), border-color var(--mg-motion-quick), color var(--mg-motion-quick); }
.mg-pick:hover { background: var(--mg-hover); border-color: var(--mg-hover); }
.mg-pick[aria-pressed="true"], .mg-pick[aria-checked="true"] { background: var(--mg-ink); border-color: var(--mg-ink); color: var(--mg-on-ink); }
.mg-pick:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-pick .mg-tab__n { padding: 2px 6px; }
.mg-pick[aria-pressed="true"] .mg-tab__n { background: var(--mg-on-ink); color: var(--mg-ink); }

.mg-card:has(.mg-queue__list) { overflow: clip; }
.mg-queue__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-2) var(--mg-d-pad) var(--mg-space-3); }
.mg-queue__sort { margin-left: auto; }
.mg-queue__bulk { position: sticky; top: 0; z-index: var(--mg-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-3); min-height: 52px; padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-2) var(--mg-d-pad); background: var(--mg-sunken); }
.mg-queue__bulk .mg-check { min-height: var(--mg-control-sm); font-weight: 800; }
.mg-queue__note { color: var(--mg-ink-2); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); }
.mg-queue__bulk-act { margin-left: auto; display: flex; gap: var(--mg-space-2); }
.mg-queue__list { margin: 0; padding: 0; list-style: none; }

.mg-req { display: grid; grid-template-columns: 20px var(--mg-d-avatar) minmax(0, 1fr) auto; grid-template-areas: "pick av main act"; align-items: start; column-gap: var(--mg-space-3); padding: var(--mg-space-3) var(--mg-d-pad); border-top: 1px solid var(--mg-rule); }
.mg-req.is-selected { background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-req__pick { grid-area: pick; display: flex; align-items: center; min-height: var(--mg-d-avatar); }
.mg-req__pick.mg-check { min-height: var(--mg-d-avatar); }
.mg-req > .mg-avatar { grid-area: av; }
.mg-req__main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.mg-req__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--mg-space-2); }
.mg-req__who { font: 800 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-req__type { display: inline-flex; align-items: center; gap: var(--mg-space-1); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-req__type svg { width: 14px; height: 14px; flex: none; }
.mg-req__what { font: 600 var(--mg-text-md)/1.4 var(--mg-font); }
.mg-req__when { display: var(--mg-d-note); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-req__impacts { display: flex; flex-wrap: wrap; gap: var(--mg-space-1) var(--mg-space-2); margin-top: var(--mg-space-1); }
.mg-impact { display: inline-flex; align-items: center; gap: var(--mg-space-2); min-height: 26px; padding: 3px var(--mg-space-3) 3px 10px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); }
.mg-impact::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-ink-2); }
.mg-impact--ok { background: var(--mg-ok-tint); color: var(--mg-ok-text); } .mg-impact--ok::before { background: var(--mg-ok); }
.mg-impact--warn { background: var(--mg-warn-tint); color: var(--mg-warn-text); } .mg-impact--warn::before { background: var(--mg-warn); }
.mg-impact--alarm { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); } .mg-impact--alarm::before { background: var(--mg-alarm); }
.mg-req__act { grid-area: act; display: flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-d-avatar); }

.mg-reason { grid-column: 3 / -1; display: grid; gap: var(--mg-space-3); margin-top: var(--mg-space-3); padding: var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); }
.mg-reason .mg-textarea { min-height: 64px; }
.mg-reason__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mg-space-2); }
.mg-reason__foot .mg-small { margin-right: auto; }

.mg-req.is-leaving { animation: mg-flow-out var(--mg-dur-exit) var(--mg-ease-exit) both; pointer-events: none; }
.mg-req.is-arriving, .mg-reason { animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; }
@keyframes mg-flow-out { to { opacity: 0; transform: translateX(var(--mg-move-md)); } }

[data-density="compact"] .mg-req { padding-block: var(--mg-space-2); }
[data-density="compact"] .mg-req__impacts { margin-top: 0; }
[data-density="compact"] .mg-impact { min-height: 22px; padding-block: 2px; }
@media (max-width: 720px) {
  .mg-req { grid-template-columns: 20px var(--mg-d-avatar) minmax(0, 1fr); grid-template-areas: "pick av main" ". act act"; row-gap: var(--mg-space-2); }
  .mg-req__act { flex-wrap: wrap; }
  .mg-reason { grid-column: 1 / -1; }
  .mg-queue__sort { margin-left: 0; }
}

.mg-flow { --fl-dot: 14px; display: flex; margin: 0; padding: 0; list-style: none; min-width: 0; }
.mg-flow__st { position: relative; flex: 1 1 0; display: grid; justify-items: start; align-content: start; gap: 6px; min-width: 0; padding-right: var(--mg-space-3); }
.mg-flow__st:last-child { flex: 0 1 auto; padding-right: 0; }
.mg-flow__st:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--fl-dot) / 2 - 1px); left: calc(var(--fl-dot) + 6px); right: 6px; height: 2px; border-radius: var(--mg-radius-dot); background: var(--mg-rule-strong); }
.mg-flow__st[data-state="past"]:not(:last-child)::after { top: calc(var(--fl-dot) / 2 - var(--mg-stem) / 2); height: var(--mg-stem); background: var(--mg-ink); }
.mg-flow__dot { position: relative; width: var(--fl-dot); height: var(--fl-dot); border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: inset 0 0 0 2px var(--mg-rule-strong); transition: background-color var(--mg-motion-quick); }
.mg-flow__st[data-state="past"] .mg-flow__dot { background: var(--mg-ink); box-shadow: none; }
.mg-flow__st[data-state="current"] .mg-flow__dot { background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface), 0 0 0 5px var(--mg-ink); }
.mg-flow__txt { display: grid; gap: 2px; min-width: 0; }
.mg-flow__label { display: inline-flex; align-items: center; gap: var(--mg-space-1); font: 600 var(--mg-text-sm)/1.25 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-flow__label svg { width: 14px; height: 14px; flex: none; }
.mg-flow__st[data-state="past"] .mg-flow__label { color: var(--mg-ink); }
.mg-flow__st[data-state="current"] .mg-flow__label { color: var(--mg-ink); font-weight: 800; }
.mg-flow__at { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-flow--mini { --fl-dot: 10px; flex: none; }
.mg-flow--mini .mg-flow__st { flex: none; width: 30px; padding-right: 0; }
.mg-flow--mini .mg-flow__st:last-child { width: auto; }
.mg-flow--mini .mg-flow__st:not(:last-child)::after { left: calc(var(--fl-dot) + var(--mg-space-1)); right: var(--mg-space-1); }
.mg-flow--mini .mg-flow__st[data-state="past"]:not(:last-child)::after { height: 3px; top: calc(var(--fl-dot) / 2 - 1.5px); }
.mg-flow--mini .mg-flow__st[data-state="current"] .mg-flow__dot { box-shadow: 0 0 0 2px var(--mg-surface), 0 0 0 3.5px var(--mg-ink); }
.mg-flow--mini .mg-flow__txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mg-flowcell { display: inline-flex; align-items: center; gap: var(--mg-space-3); }

.mg-flowrows { margin: 0; padding: 0; list-style: none; }
.mg-flowrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: var(--mg-space-3) var(--mg-space-6); padding: var(--mg-space-4) var(--mg-d-pad); border-top: 1px solid var(--mg-rule); }
.mg-flowrow:first-child { border-top: 0; }
.mg-flowrow__what { display: grid; gap: var(--mg-space-1); min-width: 0; }
.mg-flowrow__what b { font: 800 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-flowrow__act { display: grid; justify-items: end; gap: 6px; }
.mg-flowrow__act .mg-small { text-align: right; }
[data-density="compact"] .mg-flowrow { padding-block: var(--mg-space-2); }
@media (max-width: 720px) {
  .mg-flowrow { grid-template-columns: minmax(0, 1fr); }
  .mg-flowrow__act { justify-items: start; }
  .mg-flowrow__act .mg-small { text-align: left; }
}

.mg-tl { margin: 0; padding: 0; list-style: none; }
.mg-tl__day { position: sticky; top: 0; z-index: var(--mg-z-sticky); display: block; padding: var(--mg-space-4) 0 var(--mg-space-2); background: var(--mg-surface); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-tl__items { margin: 0; padding: 0; list-style: none; }
.mg-tl__ev { --tl-x: 9px; --tl-y: 15px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--mg-space-1) var(--mg-space-3); padding: var(--mg-space-2) 0 var(--mg-space-3) var(--mg-space-7); }
.mg-tl__ev::before { content: ""; position: absolute; left: calc(var(--tl-x) - 1px); top: 0; bottom: 0; width: 2px; background: var(--mg-rule); }
.mg-tl__ev:first-child::before { top: var(--tl-y); }
.mg-tl__ev:last-child::before { bottom: auto; height: var(--tl-y); }
.mg-tl__ev:only-child::before { display: none; }
.mg-tl__ev::after { content: ""; position: absolute; left: calc(var(--tl-x) - 5px); top: calc(var(--tl-y) - 5px); width: 10px; height: 10px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-tl__ev--auto::after { background: var(--mg-surface); box-shadow: 0 0 0 3px var(--mg-surface), inset 0 0 0 2px var(--mg-rule-strong); }
.mg-tl__ev.is-new::after { background: var(--mg-blue); }
.mg-tl__ev.is-new { animation: mg-in-rise var(--mg-dur-rise) var(--mg-ease-standard) both; }
.mg-tl__what { margin: 0; font: 500 var(--mg-text-md)/1.45 var(--mg-font); }
.mg-tl__what b { font-weight: 800; }
.mg-tl__time { font: 600 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-tl__change { grid-column: 1 / -1; justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-2); padding: 6px var(--mg-space-3); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 600 var(--mg-text-sm)/1.35 var(--mg-font); }
.mg-tl__field { font-weight: 700; color: var(--mg-ink-2); }
.mg-tl__change del { color: var(--mg-ink-2); text-decoration-thickness: 1.5px; }
.mg-tl__change ins { color: var(--mg-ink); font-weight: 800; text-decoration: none; }
.mg-tl__change svg { width: 14px; height: 14px; flex: none; color: var(--mg-ink-2); }
.mg-tl__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-3); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-tl__meta .mg-button { margin-left: auto; }
.mg-tl__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-3); margin-top: var(--mg-space-2); padding-top: var(--mg-space-3); border-top: 1.5px solid var(--mg-rule); }
[data-density="compact"] .mg-tl__ev { --tl-y: 11px; padding-block: var(--mg-space-1) var(--mg-space-2); }
[data-density="compact"] .mg-tl__what { font-size: var(--mg-text-sm); }
[data-density="compact"] .mg-tl__change { padding: 2px var(--mg-space-2); font-size: var(--mg-text-xs); }
[data-density="compact"] .mg-tl__day { padding-top: var(--mg-space-3); }
@media (max-width: 560px) {
  .mg-tl__ev { grid-template-columns: minmax(0, 1fr); }
  .mg-tl__time { grid-row: 1; }
}

.mg-notes { display: grid; gap: var(--mg-space-1); }
.mg-composer { display: grid; gap: var(--mg-space-2); margin-bottom: var(--mg-space-2); padding: var(--mg-space-3) var(--mg-space-3) var(--mg-space-2) var(--mg-space-4); border: 1.5px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); background: var(--mg-surface); transition: border-color var(--mg-motion-quick), box-shadow var(--mg-motion-quick); }
.mg-composer:focus-within { border-color: var(--mg-blue); box-shadow: 0 0 0 4px var(--mg-blue-tint); }
.mg-composer textarea { width: 100%; min-height: 48px; padding: 0; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--mg-ink); font: 500 var(--mg-text-md)/1.5 var(--mg-font); }
.mg-composer textarea::placeholder { color: var(--mg-ink-2); opacity: 1; }
.mg-composer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-3); }
.mg-composer__foot > .mg-button { margin-left: auto; }
.mg-composer .mg-seg__opt { height: 26px; padding: 0 var(--mg-space-3); font-size: var(--mg-text-xs); }
.mg-composer .mg-seg__opt svg { width: 14px; height: 14px; }
.mg-note { display: grid; grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr); gap: var(--mg-space-1) var(--mg-space-3); padding: var(--mg-space-3) 0; border-top: 1px solid var(--mg-rule); }
.mg-note > .mg-avatar { grid-row: span 2; }
.mg-note__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-2); min-height: var(--mg-d-avatar); }
.mg-note__who { font: 800 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-note__time { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-note__tools { margin-left: auto; display: flex; gap: 2px; }
.mg-note__text { grid-column: 2; margin: 0; max-width: var(--mg-measure); white-space: pre-wrap; overflow-wrap: anywhere; font: 500 var(--mg-text-md)/1.5 var(--mg-font); }
.mg-note__edit { grid-column: 2; display: grid; gap: var(--mg-space-2); }
.mg-note__edit .mg-textarea { min-height: 72px; }
.mg-note__edit > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mg-space-2); }
.mg-note__edit > div .mg-small { margin-right: auto; }
.mg-note.is-new { animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-note--gone { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin: var(--mg-space-1) 0; padding: var(--mg-space-1) var(--mg-space-1) var(--mg-space-1) var(--mg-space-4); border-top: 0; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); font: 700 var(--mg-text-sm)/1.3 var(--mg-font); animation: mg-in-fade var(--mg-dur-base) linear both; }
.mg-vis { display: inline-flex; align-items: center; gap: var(--mg-space-1); height: 22px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); white-space: nowrap; }
.mg-vis svg { width: 13px; height: 13px; flex: none; }
.mg-vis--all { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mg-rule); }
[data-density="compact"] .mg-note { padding-block: var(--mg-space-2); }
[data-density="compact"] .mg-note__text { font-size: var(--mg-text-sm); }

.mg-dialog.mg-export { width: min(600px, calc(100vw - 32px)); }
.mg-export .mg-dialog__body { display: grid; gap: var(--mg-space-5); }
.mg-export__sec { display: grid; gap: var(--mg-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.mg-export__sec > legend, .mg-export__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); width: 100%; padding: 0; margin-bottom: var(--mg-space-2); font: 700 var(--mg-text-sm)/1.3 var(--mg-font); color: var(--mg-ink); }
.mg-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mg-space-2); }
.mg-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 2px var(--mg-space-2); padding: var(--mg-space-3); border: 1.5px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); background: var(--mg-surface); cursor: pointer; transition: border-color var(--mg-motion-quick), background-color var(--mg-motion-quick); }
.mg-choice:hover { border-color: var(--mg-ink-2); }
.mg-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mg-choice svg { width: 18px; height: 18px; color: var(--mg-ink-2); }
.mg-choice b { font: 800 var(--mg-text-md)/1.2 var(--mg-font); }
.mg-choice small { grid-column: 1 / -1; font: 500 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-choice:has(input:checked) { border-color: var(--mg-ink); background: var(--mg-hover); box-shadow: inset 0 0 0 1px var(--mg-ink); }
.mg-choice:has(input:checked) svg { color: var(--mg-ink); }
.mg-choice:has(> .mg-tagfield) { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--mg-space-1); padding: 0; border: 0; background: transparent; cursor: auto; }
.mg-choice:has(> .mg-tagfield):hover { border-color: transparent; }
.mg-choice:has(input:focus-visible) { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-export__range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mg-space-2); }
.mg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--mg-space-4); }
.mg-cols .mg-check { min-height: var(--mg-control-sm); font-size: var(--mg-text-sm); }
.mg-export__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 600 var(--mg-text-sm)/1.4 var(--mg-font); }
.mg-export__sum b { font-weight: 800; }
.mg-export__foot { align-items: center; }
.mg-export__foot .mg-small { margin-right: auto; }

.mg-progress { display: grid; gap: var(--mg-space-2); }
.mg-progress__read { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mg-space-3); font: 700 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-progress__read span { font: 600 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-progress__stem { position: relative; height: 6px; margin: var(--mg-space-1) 7px var(--mg-space-1) 0; border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-progress__stem > i { position: relative; display: block; width: var(--v, 0%); height: 100%; border-radius: var(--mg-radius-dot); background: var(--mg-ink); transition: width var(--mg-motion-data); }
.mg-progress__stem > i::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-raised); }
.mg-progress .mg-checklist li { min-height: 30px; }
.mg-progress .mg-checklist li[aria-current="step"] { font-weight: 800; }
.mg-progress .mg-checklist li[aria-current="step"]::before { border-color: var(--mg-ink); box-shadow: inset 0 0 0 3px var(--mg-raised); background: var(--mg-ink); }
.mg-file { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); }
.mg-file svg { grid-row: span 2; width: 24px; height: 24px; color: var(--mg-ink-2); }
.mg-file b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-file span { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
@media (max-width: 560px) {
  .mg-choices, .mg-cols, .mg-export__range { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mg-req.is-arriving, .mg-reason, .mg-tl__ev.is-new, .mg-note.is-new, .mg-note--gone { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
  .mg-req.is-leaving { animation-name: mg-out-fade !important; animation-duration: var(--mg-dur-exit) !important; }
  .mg-progress__stem > i, .mg-flow__dot { transition: none !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) :is(.mg-req.is-arriving, .mg-reason, .mg-tl__ev.is-new, .mg-note.is-new, .mg-note--gone) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-req.is-leaving { animation-name: mg-out-fade !important; animation-duration: var(--mg-dur-exit) !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) :is(.mg-progress__stem > i, .mg-flow__dot) { transition: none !important; }

@media (forced-colors: active) {
  .mg-nav__badge, .mg-tab__n--due, .mg-pick, .mg-impact, .mg-vis, .mg-choice { border: 1px solid CanvasText; }
  .mg-pick[aria-pressed="true"], .mg-pick[aria-checked="true"], .mg-choice:has(input:checked), .mg-req.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
  .mg-flow__st[data-state="past"] .mg-flow__dot, .mg-flow__st[data-state="current"] .mg-flow__dot, .mg-flow__st[data-state="past"]:not(:last-child)::after, .mg-tl__ev::after, .mg-progress__stem > i, .mg-progress__stem > i::after, .mg-impact::before { forced-color-adjust: none; background: Highlight; }
  .mg-flow__dot, .mg-tl__ev--auto::after { forced-color-adjust: none; border: 2px solid CanvasText; }
}

.mg-dev { display: inline-flex; align-items: baseline; gap: var(--mg-space-1); font-weight: 700; white-space: nowrap; }
.mg-dev small { font: 600 var(--mg-text-xs)/1 var(--mg-font); }
.mg-dev[data-tone="bad"] { color: var(--mg-alarm-text); }
.mg-dev[data-tone="warn"] { color: var(--mg-warn-text); }
.mg-dev[data-tone="good"] { color: var(--mg-ok-text); }
.mg-dev[data-tone="none"] { color: var(--mg-ink-2); }

.mg-abs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-2) var(--mg-space-6); padding: var(--mg-space-2) var(--mg-space-5) var(--mg-space-3); }
.mg-abs-key { display: flex; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-4); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-abs-key span { display: inline-flex; align-items: center; gap: 6px; }
.mg-abs-key i { flex: none; width: 24px; height: 12px; border-radius: var(--mg-radius-dot); background: var(--abs-t); box-shadow: inset 0 0 0 1.5px var(--abs-c); }
.mg-abs-key i.we { width: 12px; border-radius: 3px; background: var(--mg-sunken); box-shadow: inset 0 0 0 1px var(--mg-rule); }
.mg-abs-key i.hol { width: 12px; border-radius: 3px; background: radial-gradient(circle, transparent 2.5px, var(--mg-rule-strong) 2.5px 4px, transparent 4.5px), var(--mg-sunken); box-shadow: none; }

.mg-abs-wrap { max-height: var(--mg-abs-h, 70vh); overflow: auto; border-top: 1px solid var(--mg-rule); border-radius: 0 0 var(--mg-radius-card) var(--mg-radius-card); }
.mg-abs { display: grid; grid-template-columns: minmax(150px, 180px) repeat(var(--abs-days), minmax(26px, 1fr)) 108px; grid-template-rows: 24px 40px; grid-auto-rows: var(--mg-d-cell); font: 600 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-abs--year { grid-template-columns: 104px repeat(31, minmax(26px, 1fr)) 84px; grid-template-rows: 32px; }
.mg-abs__row { display: contents; }

.mg-abs__corner, .mg-abs__balhead { position: sticky; top: 0; z-index: calc(var(--mg-z-sticky) + 1); display: flex; align-items: flex-end; padding: 0 var(--mg-space-3) 10px var(--mg-d-pad); background: var(--mg-surface); font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-abs__corner { grid-column: 1; left: 0; box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset -1.5px 0 0 var(--mg-rule); }
.mg-abs__balhead { right: 0; justify-content: flex-end; padding: 0 var(--mg-d-pad) 10px var(--mg-space-2); text-align: right; box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset 1.5px 0 0 var(--mg-rule); }
.mg-abs--year :is(.mg-abs__corner, .mg-abs__balhead) { grid-row: 1; padding-bottom: 9px; }

.mg-abs__wk { grid-row: 1; position: sticky; top: 0; z-index: var(--mg-z-sticky); display: flex; align-items: center; min-width: 0; padding: 0 6px; overflow: hidden; background: var(--mg-surface); box-shadow: inset 1px 0 0 var(--mg-rule); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-abs__dh { grid-row: 2; position: sticky; top: var(--mg-space-6); z-index: var(--mg-z-sticky); display: grid; place-items: center; align-content: center; gap: 1px; background: var(--mg-surface); box-shadow: inset 0 -1.5px 0 var(--mg-rule); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-abs--year .mg-abs__dh { grid-row: 1; top: 0; }
.mg-abs__dh b { font-weight: 800; color: var(--mg-ink); }
.mg-abs__dh.is-wk { box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset 1px 0 0 var(--mg-rule); }
.mg-abs__dh.is-we, .mg-abs__dh.is-hol { background: var(--mg-sunken); }
.mg-abs__dh[aria-current="date"] { color: var(--mg-ink); background-image: radial-gradient(circle at 50% calc(100% - 5px), var(--mg-blue) 3px, transparent 3.5px); }

.mg-abs__who { grid-column: 1; position: sticky; left: 0; display: flex; align-items: center; min-width: 0; padding: 0 var(--mg-space-3) 0 var(--mg-d-pad); overflow: hidden; background: var(--mg-surface); border-bottom: 1px solid var(--mg-rule); box-shadow: inset -1.5px 0 0 var(--mg-rule); color: var(--mg-ink); text-overflow: ellipsis; white-space: nowrap; }
.mg-abs__day { min-width: 0; border-bottom: 1px solid var(--mg-rule); }
.mg-abs__day.is-wk { box-shadow: inset 1px 0 0 var(--mg-rule); }
.mg-abs__day.is-we { background: var(--mg-sunken); }
.mg-abs__day.is-hol { background: radial-gradient(circle, transparent 3px, var(--mg-rule-strong) 3px 4.5px, transparent 5px), var(--mg-sunken); }
.mg-abs__day.is-today { background-image: radial-gradient(circle at 50% calc(100% - 6px), var(--mg-blue) 3px, transparent 3.5px); }
.mg-abs__day.is-void { border-bottom-color: transparent; background: var(--mg-surface); }
.mg-abs__day:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: -2px; }
.mg-abs__bal { position: sticky; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-1); padding: 0 var(--mg-d-pad) 0 var(--mg-space-2); background: var(--mg-surface); border-bottom: 1px solid var(--mg-rule); box-shadow: inset 1.5px 0 0 var(--mg-rule); font: 800 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; }
.mg-abs__bal small { font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }

.mg-abs__bar { align-self: center; display: flex; align-items: center; min-width: 0; height: calc(var(--mg-d-cell) - 12px); margin: 0 2px; padding: 0 2px; border-radius: var(--mg-radius-dot); background: var(--abs-t); box-shadow: inset 0 0 0 1.5px var(--abs-c); pointer-events: none; }
.mg-abs__bar b { display: grid; place-items: center; flex: none; width: calc(var(--mg-d-cell) - 16px); height: calc(var(--mg-d-cell) - 16px); border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: 0 0 0 1.5px var(--abs-c); font: 800 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink); }
:is(.mg-abs__bar, .mg-abs-key i)[data-type="ferie"] { --abs-c: var(--mg-cat-1); --abs-t: var(--mg-cat-1-tint); }
:is(.mg-abs__bar, .mg-abs-key i)[data-type="syg"] { --abs-c: var(--mg-cat-5); --abs-t: var(--mg-cat-5-tint); background: repeating-linear-gradient(135deg, var(--abs-c) 0 2px, var(--abs-t) 2px 6px); }
:is(.mg-abs__bar, .mg-abs-key i)[data-type="barn"] { --abs-c: var(--mg-cat-2); --abs-t: var(--mg-cat-2-tint); background: repeating-linear-gradient(45deg, var(--abs-c) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(135deg, var(--abs-c) 0 1.5px, var(--abs-t) 1.5px 6px); }
:is(.mg-abs__bar, .mg-abs-key i)[data-type="laege"] { --abs-c: var(--mg-cat-3); --abs-t: var(--mg-cat-3-tint); background: radial-gradient(circle, var(--abs-c) 1.5px, transparent 2px) 0 0 / 6px 6px, var(--abs-t); }
:is(.mg-abs__bar, .mg-abs-key i)[data-type="afsp"] { --abs-c: var(--mg-cat-4); --abs-t: var(--mg-cat-4-tint); background: repeating-linear-gradient(0deg, var(--abs-c) 0 1.5px, var(--abs-t) 1.5px 5px); }
:is(.mg-abs__bar, .mg-abs-key i)[data-type="andet"] { --abs-c: var(--mg-cat-other); --abs-t: var(--mg-cat-other-tint); background: repeating-linear-gradient(45deg, var(--abs-c) 0 2px, var(--abs-t) 2px 6px); }
:is(.mg-abs__bar, .mg-abs-key i)[data-state="pending"] { box-shadow: none; outline: 1.5px dashed var(--mg-ink); outline-offset: 1px; }

.mg-abs-sum { display: grid; grid-template-columns: minmax(180px, 280px) auto minmax(0, 1fr); align-items: center; gap: var(--mg-space-3) var(--mg-space-7); padding: var(--mg-space-1) var(--mg-space-5) var(--mg-space-4); }
.mg-abs-meter { display: flex; gap: var(--mg-chart-gap); height: 10px; overflow: hidden; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); }
.mg-abs-meter i { flex: none; }
.mg-abs-meter .used { width: calc(var(--a) / var(--of) * 100%); background: var(--mg-ink); }
.mg-abs-meter .plan { width: calc(var(--b) / var(--of) * 100%); background: var(--mg-cat-1); }
.mg-abs-meter .wait { width: calc(var(--c) / var(--of) * 100%); border-radius: var(--mg-radius-dot); outline: 1.5px dashed var(--mg-ink); outline-offset: -1.5px; }
.mg-abs-dl { display: flex; gap: var(--mg-space-5); margin: 0; }
.mg-abs-dl div { display: grid; gap: 2px; }
.mg-abs-dl dt { font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-abs-dl dd { margin: 0; font: 800 var(--mg-text-lg)/1.1 var(--mg-font); white-space: nowrap; }
.mg-abs-dl dd small { font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }

.mg-clock { display: grid; gap: var(--mg-space-4); max-width: 380px; padding: var(--mg-space-5); }
.mg-clock__top, .mg-clock__total { display: grid; justify-items: start; gap: 6px; }
.mg-clock__line { position: relative; height: 12px; margin-top: var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); }
.mg-clock__shift { position: absolute; top: calc(-1 * var(--mg-space-1)); bottom: calc(-1 * var(--mg-space-1)); left: var(--a); width: calc(var(--b) - var(--a)); border-radius: var(--mg-radius-dot); box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); }
.mg-clock__seg { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-clock__seg--pause { background: repeating-linear-gradient(135deg, var(--mg-ink-2) 0 1.5px, var(--mg-sunken) 1.5px 4px); }
.mg-clock__now { position: absolute; top: 50%; left: var(--a); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-clock__now::after { content: ""; position: absolute; inset: -6px; border-radius: var(--mg-radius-dot); box-shadow: 0 0 0 2px var(--mg-blue); opacity: 0; animation: mg-clock-breathe var(--mg-dur-live) var(--mg-ease-standard) infinite; }
@keyframes mg-clock-breathe { 0%, 100% { opacity: 0; transform: scale(0.7); } 50% { opacity: 0.5; transform: scale(1); } }
.mg-clock__scale { position: relative; height: 14px; margin-top: calc(var(--mg-space-2) * -1); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-clock__scale span { position: absolute; left: var(--at); transform: translateX(-50%); }
.mg-clock__log { display: grid; margin: 0; padding: 0; list-style: none; }
.mg-clock__log li { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); height: 38px; border-bottom: 1px solid var(--mg-rule); }
.mg-clock__log li:last-child { border-bottom: 0; }
.mg-clock__log span { display: inline-flex; align-items: center; gap: var(--mg-space-2); font: 600 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-clock__log b { font: 800 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; }
.mg-clock__log b small { margin-left: var(--mg-space-1); font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-clock__log .is-empty { color: var(--mg-ink-2); }
.mg-clock__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mg-space-2); }
.mg-clock__actions--one { grid-template-columns: minmax(0, 1fr); }
.mg-clock__actions .mg-button { height: var(--mg-control-touch); padding: 0 var(--mg-space-3); }

.mg-clock-days ol { display: flex; gap: var(--mg-space-2); margin: 0; padding: var(--mg-space-3) var(--mg-space-5) var(--mg-space-1); overflow-x: auto; list-style: none; }
.mg-clock-day { display: grid; gap: 6px; min-width: 116px; padding: 10px var(--mg-space-3); border-radius: var(--mg-radius-field); background: var(--mg-sunken); color: var(--mg-ink); text-decoration: none; }
.mg-clock-day b { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--mg-text-sm)/1 var(--mg-font); }
.mg-clock-day:hover { background: var(--mg-hover); }
.mg-clock-day:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-clock-day.is-selected { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-clock-day.is-selected .mg-status { color: var(--mg-on-ink); }
.mg-clock-day.is-today b::after { content: ""; width: 6px; height: 6px; border-radius: var(--mg-radius-dot); background: var(--mg-blue); }

.mg-clock-table { font-size: var(--mg-text-sm); }
.mg-clock-table tbody th { position: static; height: var(--mg-d-cell); padding: 0 var(--mg-space-3) 0 var(--mg-space-5); background: transparent; border-bottom: 1px solid var(--mg-rule); box-shadow: none; font: 700 var(--mg-text-sm)/1.2 var(--mg-font); color: var(--mg-ink); text-align: left; }
.mg-clock-table tbody tr:last-child th { border-bottom: 0; }
.mg-clock-table tbody tr:hover th { background: var(--mg-hover); }
.mg-clock-table tr[data-problem="alarm"] th { box-shadow: inset 3px 0 0 var(--mg-alarm); }
.mg-clock-table tr[data-problem="warn"] th { box-shadow: inset 3px 0 0 var(--mg-warn); }
.mg-clock-table td { white-space: nowrap; }
.mg-clock-act { text-align: right; }
.mg-clock-act .mg-button { height: calc(var(--mg-d-cell) - 8px); padding: 0 var(--mg-space-3); font-size: var(--mg-text-xs); }
.mg-clock-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--mg-space-2) var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-5) var(--mg-space-5); border-top: 1px solid var(--mg-rule); }
.mg-clock-foot p { max-width: 52ch; margin: 0 auto 0 0; }

.mg-budget-sum { margin: 0; padding: var(--mg-space-1) var(--mg-space-5) var(--mg-space-3); }
.mg-budget-wrap { max-height: var(--mg-budget-h, 70vh); overflow: auto; border-radius: 0 0 var(--mg-radius-card) var(--mg-radius-card); }
.mg-budget { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font: 500 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-budget :is(th, td) { height: var(--mg-d-cell); padding: 0 var(--mg-space-3); background: var(--mg-surface); border-bottom: 1px solid var(--mg-rule); color: var(--mg-ink-2); text-align: right; white-space: nowrap; }
.mg-budget td { min-width: 112px; }
.mg-budget td.is-act { color: var(--mg-ink); font-weight: 700; }
.mg-budget .is-start { box-shadow: inset 1px 0 0 var(--mg-rule); }
.mg-budget thead th { position: sticky; top: 0; z-index: var(--mg-z-sticky); height: 30px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--mg-rule); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-budget thead th.is-start { box-shadow: inset 0 -1px 0 var(--mg-rule), inset 1px 0 0 var(--mg-rule); }
.mg-budget thead tr + tr th { top: 30px; box-shadow: inset 0 -1.5px 0 var(--mg-rule); }
.mg-budget thead tr + tr th.is-start { box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset 1px 0 0 var(--mg-rule); }
.mg-budget__mon { text-align: center; color: var(--mg-ink); }
.mg-budget thead .mg-budget__mon { color: var(--mg-ink); text-align: center; }
.mg-budget .mg-budget__acc { position: sticky; left: 0; min-width: 240px; text-align: left; box-shadow: inset -1.5px 0 0 var(--mg-rule); }
.mg-budget th.mg-budget__acc { padding-left: calc(var(--mg-space-5) + var(--mg-space-5)); font: 600 var(--mg-text-sm)/1.2 var(--mg-font); color: var(--mg-ink); }
.mg-budget thead th.mg-budget__acc { z-index: calc(var(--mg-z-sticky) + 1); padding: 0 var(--mg-space-3) 9px var(--mg-space-5); vertical-align: bottom; box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset -1.5px 0 0 var(--mg-rule); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-budget .mg-budget__var { position: sticky; right: 0; padding-right: var(--mg-space-5); box-shadow: inset 1.5px 0 0 var(--mg-rule); }
.mg-budget thead th.mg-budget__var { z-index: calc(var(--mg-z-sticky) + 1); padding-bottom: 9px; vertical-align: bottom; box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset 1.5px 0 0 var(--mg-rule); }
.mg-budget__dv { display: grid; grid-template-columns: minmax(11ch, auto) 7ch 9ch; align-items: baseline; justify-content: end; gap: var(--mg-space-3); }
.mg-budget__dv > span { text-align: right; }
.mg-budget__dv small { text-align: left; }

.mg-budget__grp :is(th, td) { height: calc(var(--mg-d-cell) + 6px); padding-bottom: 6px; vertical-align: bottom; }
.mg-budget th.mg-budget__acc[scope="rowgroup"] { padding-left: var(--mg-space-4); font-weight: 800; }
.mg-budget__grp th .mg-small { margin-left: var(--mg-space-2); }
.mg-budget__fold { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: var(--mg-radius-dot); background: none; color: inherit; font: inherit; cursor: pointer; }
.mg-budget__fold svg { color: var(--mg-ink-2); transform: rotate(90deg); transition: transform var(--mg-motion-quick); }
.mg-budget__fold[aria-expanded="false"] svg { transform: none; }
.mg-budget__fold:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-budget .mg-budget__sub :is(th, td) { background: var(--mg-sunken); color: var(--mg-ink); font-weight: 800; }
.mg-budget :is(.mg-budget__sub, .mg-budget__total) th.mg-budget__acc { padding-left: var(--mg-space-5); font-weight: 800; }
.mg-budget .mg-budget__total :is(th, td) { position: sticky; bottom: 0; z-index: var(--mg-z-sticky); height: calc(var(--mg-d-cell) + 4px); border-bottom: 0; box-shadow: inset 0 2px 0 var(--mg-ink); color: var(--mg-ink); font-weight: 800; }
.mg-budget .mg-budget__total .is-start { box-shadow: inset 0 2px 0 var(--mg-ink), inset 1px 0 0 var(--mg-rule); }
.mg-budget .mg-budget__total .mg-budget__acc { z-index: calc(var(--mg-z-sticky) + 1); box-shadow: inset 0 2px 0 var(--mg-ink), inset -1.5px 0 0 var(--mg-rule); }
.mg-budget .mg-budget__total .mg-budget__var { z-index: calc(var(--mg-z-sticky) + 1); box-shadow: inset 0 2px 0 var(--mg-ink), inset 1.5px 0 0 var(--mg-rule); }
.mg-budget tbody tr:not(.mg-budget__grp):not(.mg-budget__sub):hover :is(th, td) { background: var(--mg-hover); }

.mg-pipe { display: grid; grid-template-columns: repeat(var(--mg-pipe-cols, 4), minmax(240px, 1fr)); gap: var(--mg-space-4); align-items: start; overflow-x: auto; padding-bottom: var(--mg-space-1); }
.mg-pipe__col { display: grid; align-content: start; gap: var(--mg-space-2); min-height: 380px; padding: var(--mg-space-2) var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-card); background: var(--mg-sunken); }
.mg-pipe__col.is-target { box-shadow: inset 0 0 0 2px var(--mg-ink); }
.mg-pipe__head { display: flex; align-items: center; gap: var(--mg-space-2); margin: 0; padding: 6px 6px 2px; font: 800 var(--mg-text-md)/1.2 var(--mg-font); color: var(--mg-ink); }
.mg-pipe__head .mg-tab__n { background: var(--mg-surface); }
.mg-pipe__list { display: grid; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
.mg-pipe__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px var(--mg-space-3); padding: 10px 6px 10px var(--mg-space-3); border-radius: var(--mg-radius-field); background: var(--mg-surface); box-shadow: var(--mg-shadow-card); cursor: grab; transition: transform var(--mg-motion-quick), box-shadow var(--mg-motion-quick); }
.mg-pipe__card:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-pipe__card.is-lifted, .mg-pipe__card[aria-grabbed="true"] { box-shadow: var(--mg-shadow-float), inset 0 0 0 2px var(--mg-ink); transform: translateY(calc(var(--mg-move-sm) * -0.5)); cursor: grabbing; }
.mg-pipe__who { display: grid; gap: 2px; min-width: 0; }
.mg-pipe__who b { overflow: hidden; font: 700 var(--mg-text-sm)/1.2 var(--mg-font); text-overflow: ellipsis; white-space: nowrap; }
.mg-pipe__who small { overflow: hidden; font: 500 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.mg-pipe__more { width: 28px; height: 28px; padding: 0; }
.mg-pipe__meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-3); font: 600 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-pipe__next { display: inline-flex; align-items: center; gap: var(--mg-space-1); color: var(--mg-ink); }
.mg-pipe__drop { display: grid; place-items: center; min-height: 72px; border: 2px dashed var(--mg-rule-strong); border-radius: var(--mg-radius-field); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-pipe__menu { position: absolute; top: 44px; right: 0; z-index: var(--mg-z-popover); min-width: 220px; cursor: default; }
.mg-pipe__menu .mg-menu__item[aria-disabled="true"] { color: var(--mg-ink-2); cursor: default; }
.mg-pipe__all { justify-self: start; padding: 6px; border: 0; border-radius: var(--mg-radius-dot); background: none; font: 700 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink); text-decoration: underline; text-decoration-color: var(--mg-rule-strong); text-underline-offset: 3px; cursor: pointer; }
.mg-pipe__all:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }

.mg-cover-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-2) var(--mg-space-6); padding: var(--mg-space-1) var(--mg-space-5) var(--mg-space-3); }
.mg-cover-key { display: flex; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-4); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cover-key span { display: inline-flex; align-items: center; gap: 6px; }
.mg-cover-key i { width: 20px; height: 14px; border-radius: 4px; }
.mg-cover-key .smp { font: 800 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cover-wrap { max-height: var(--mg-cover-h, 70vh); overflow: auto; border-radius: 0 0 var(--mg-radius-card) var(--mg-radius-card); }
.mg-cover { width: 100%; border-collapse: separate; border-spacing: 0; font: 600 var(--mg-text-sm)/1.1 var(--mg-font); }
.mg-cover :is(th, td) { height: calc(var(--mg-d-cell) + 6px); padding: 2px; background: var(--mg-surface); border-bottom: 1px solid var(--mg-rule); text-align: center; }
.mg-cover thead th { position: sticky; top: 0; z-index: var(--mg-z-sticky); height: 32px; min-width: 52px; box-shadow: inset 0 -1.5px 0 var(--mg-rule); border-bottom: 0; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-cover thead th[aria-current="time"] { color: var(--mg-ink); }
.mg-cover thead th[aria-current="time"]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--mg-space-1); border-radius: var(--mg-radius-dot); background: var(--mg-blue); vertical-align: middle; }
.mg-cover .mg-cover__role { position: sticky; left: 0; min-width: 168px; padding: 0 var(--mg-space-3) 0 var(--mg-space-5); box-shadow: inset -1.5px 0 0 var(--mg-rule); }
.mg-cover th.mg-cover__role { font: 700 var(--mg-text-sm)/1.2 var(--mg-font); color: var(--mg-ink); text-align: left; white-space: nowrap; }
.mg-cover .mg-cover__tot { position: sticky; right: 0; min-width: 132px; padding: 0 var(--mg-space-5) 0 var(--mg-space-3); box-shadow: inset 1.5px 0 0 var(--mg-rule); text-align: right; }
.mg-cover thead :is(.mg-cover__role, .mg-cover__tot) { z-index: calc(var(--mg-z-sticky) + 1); }
.mg-cover thead th.mg-cover__role { box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset -1.5px 0 0 var(--mg-rule); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cover thead th.mg-cover__tot { box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset 1.5px 0 0 var(--mg-rule); }
.mg-cover__all :is(th, td) { border-bottom: 1.5px solid var(--mg-rule-strong); }
.mg-cover__all th.mg-cover__role { font-weight: 800; }
.mg-cover__c:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: -2px; }
.mg-cover__in { display: grid; place-items: center; height: 100%; min-height: calc(var(--mg-d-cell) + 2px); padding: 3px; border-radius: 8px; }
.mg-cover__v { display: grid; justify-items: center; gap: 2px; padding: 2px 6px; border-radius: 6px; }
.mg-cover__v b { font: 800 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink); white-space: nowrap; }
.mg-cover__v small { font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-cover__c[data-gap="ok"] b, .mg-cover__c[data-gap="over"] b, .mg-cover-key .smp--ok { font-weight: 700; color: var(--mg-ink-2); }
.mg-cover__none { color: var(--mg-ink-2); }
.mg-cover__c[data-gap="gap"] .mg-cover__in, .mg-cover-key i[data-gap="gap"] { background: repeating-linear-gradient(135deg, var(--mg-warn) 0 1.5px, var(--mg-warn-tint) 1.5px 6px); box-shadow: inset 0 0 0 1.5px var(--mg-warn); }
.mg-cover__c[data-gap="crit"] .mg-cover__in, .mg-cover-key i[data-gap="crit"] { background: repeating-linear-gradient(135deg, var(--mg-alarm) 0 1.5px, var(--mg-alarm-tint) 1.5px 6px); box-shadow: inset 0 0 0 1.5px var(--mg-alarm); }
.mg-cover__c:is([data-gap="gap"], [data-gap="crit"]) .mg-cover__v { background: var(--mg-surface); }
.mg-cover__c[data-gap="gap"] b { color: var(--mg-warn-text); }
.mg-cover__c[data-gap="crit"] b { color: var(--mg-alarm-text); }

@media (max-width: 720px) {
  .mg-abs { grid-template-columns: 112px repeat(var(--abs-days), 28px) 84px; }
  .mg-abs--year { grid-template-columns: 64px repeat(31, 28px) 64px; }
  .mg-abs-sum { grid-template-columns: minmax(0, 1fr); }
  .mg-abs-dl { flex-wrap: wrap; }
  .mg-clock { max-width: none; }
  .mg-clock-foot .mg-button { flex: 1; }
  .mg-clock-foot p { flex-basis: 100%; }
  .mg-pipe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  .mg-pipe__col { scroll-snap-align: start; }
  .mg-budget .mg-budget__acc { min-width: 168px; }
  .mg-cover .mg-cover__role { min-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-clock__now::after { animation: none; opacity: 0; }
  .mg-pipe__card.is-lifted, .mg-pipe__card[aria-grabbed="true"] { transform: none; }
  .mg-pipe__card, .mg-budget__fold svg { transition-property: opacity, background-color, box-shadow; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-clock__now::after { animation: none !important; opacity: 0; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-pipe__card.is-lifted, .mg-pipe__card[aria-grabbed="true"]) { transform: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-pipe__card, .mg-budget__fold svg) { transition-property: opacity, background-color, box-shadow !important; }

@media (forced-colors: active) {
  .mg-abs__bar, .mg-abs-key i, .mg-abs-meter i, .mg-clock__seg, .mg-cover__in, .mg-pipe__card, .mg-clock-day { border: 1px solid CanvasText; }
  :is(.mg-abs__bar, .mg-abs-key i)[data-state="pending"], .mg-abs-meter .wait { outline-color: CanvasText; }
  .mg-abs__bar b { border: 1px solid CanvasText; }
  .mg-clock__now, .mg-clock-day.is-today b::after, .mg-cover thead th[aria-current="time"]::after { forced-color-adjust: none; background: Highlight; }
  .mg-abs__dh[aria-current="date"] b, .mg-abs__day.is-today { outline: 2px solid Highlight; outline-offset: -2px; }
  .mg-clock-day.is-selected, .mg-pipe__card.is-lifted, .mg-pipe__col.is-target { outline: 2px solid Highlight; outline-offset: -2px; }
}

.mg-compose--full { max-width: none; height: 100%; min-height: 0; overflow: hidden; border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); }
.mg-compose--full .mg-compose__editor { flex: 1; min-height: 0; overflow-y: auto; }
.mg-compose--full .mg-compose__editor > * { max-width: var(--mg-measure); }
.mg-compose__head .mg-compose__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-compose__from { display: inline-flex; align-items: center; gap: var(--mg-space-2); justify-self: start; max-width: 100%; height: 30px; padding: 0 10px 0 var(--mg-space-1); border: 0; border-radius: var(--mg-radius-dot); background: transparent; color: var(--mg-ink); font: 600 var(--mg-text-md)/1 var(--mg-font); cursor: pointer; }
.mg-compose__from:hover { background: var(--mg-hover); }
.mg-compose__from:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-compose__from .mg-avatar { --mg-d-avatar: 22px; font-size: var(--mg-text-xs); }
.mg-compose__from > span { min-width: 0; }
.mg-compose__from-name { white-space: nowrap; }
.mg-compose__from small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-compose__from > svg { flex: none; color: var(--mg-ink-2); }
.mg-compose__to .mg-chip[aria-selected="true"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-compose__to .mg-chip[aria-selected="true"] button { color: var(--mg-on-ink); }
.mg-compose__to .mg-chip[aria-selected="true"] > .mg-avatar { background: var(--mg-on-ink); color: var(--mg-ink); }
.mg-compose__sig { margin-top: var(--mg-space-5); padding-top: var(--mg-space-3); border-top: 1px solid var(--mg-rule); font: 500 var(--mg-text-sm)/1.55 var(--mg-font); color: var(--mg-ink-2); user-select: none; }
.mg-compose__sig b { color: var(--mg-ink); font-weight: 800; }
.mg-compose__caret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: var(--mg-ink); }
.mg-compose__attach { align-items: center; }
.mg-compose__attach .mg-chip--alarm .mg-small { color: var(--mg-alarm-text); font-weight: 700; }
.mg-compose__attach .mg-field__error { flex-basis: 100%; }
.mg-compose__total { margin-left: auto; font: 600 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-compose__status { display: inline-flex; align-items: center; gap: var(--mg-space-2); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-compose__status .mg-trappen { --mg-trappen-size: 12px; }
.mg-compose__status[data-state="offline"] { color: var(--mg-warn-text); font-weight: 700; }
.mg-compose__status[data-state="error"] { color: var(--mg-alarm-text); font-weight: 700; }
.mg-compose__foot .mg-button[aria-pressed="true"] { background: var(--mg-ink); border-color: var(--mg-ink); color: var(--mg-on-ink); }
.mg-compose__handle { display: none; }
[data-density="compact"] .mg-compose__row { min-height: var(--mg-d-cell); padding-top: var(--mg-space-1); padding-bottom: var(--mg-space-1); }
[data-density="compact"] .mg-compose__head { min-height: 48px; }
[data-density="compact"] .mg-compose__foot { padding-top: var(--mg-space-2); padding-bottom: var(--mg-space-2); }

.mg-split { position: relative; display: inline-flex; gap: 2px; }
.mg-split__main { padding-right: var(--mg-space-4); border-radius: var(--mg-radius-dot) 6px 6px var(--mg-radius-dot); }
.mg-split__more { width: 36px; padding: 0; border-radius: 6px var(--mg-radius-dot) var(--mg-radius-dot) 6px; }
.mg-split__more svg { transition: transform var(--mg-motion-quick); }
.mg-split__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.mg-split__menu { position: absolute; left: 0; bottom: calc(100% + var(--mg-space-2)); z-index: var(--mg-z-popover); min-width: 290px; }
.mg-split__menu .mg-kbd { margin-left: auto; }

.mg-sched { width: min(720px, calc(100vw - 32px)); }
.mg-sched__grid { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: var(--mg-space-6); }
.mg-sched__pick { min-width: 0; }
.mg-sched__quick { display: grid; align-content: start; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mg-sched__opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); width: 100%; min-height: var(--mg-row); padding: 6px var(--mg-space-3); border: 0; border-radius: var(--mg-radius-field); background: transparent; color: var(--mg-ink); font: 700 var(--mg-text-md)/1.3 var(--mg-font); text-align: left; cursor: pointer; }
.mg-sched__opt:hover { background: var(--mg-hover); }
.mg-sched__opt:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 1px; }
.mg-sched__opt::before { content: ""; width: 18px; height: 18px; border-radius: var(--mg-radius-dot); box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); }
.mg-sched__opt[aria-checked="true"]::before { box-shadow: inset 0 0 0 5.5px var(--mg-ink); }
.mg-sched__opt small { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-sched__pick .mg-cal { box-shadow: none; padding: 0; background: transparent; }
.mg-sched__time { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: end; gap: var(--mg-space-3); margin-top: var(--mg-space-3); }
.mg-sched__tz { margin: 0; font: 500 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-ink-2); }
.mg-sched__sum { display: flex; align-items: center; gap: var(--mg-space-2); margin: var(--mg-space-5) 0 0; padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 600 var(--mg-text-sm)/1.4 var(--mg-font); }
.mg-sched__sum b { font-weight: 800; }
.mg-sched__sum svg { flex: none; color: var(--mg-ink-2); }

.mg-outbox { margin: 0; padding: 0; list-style: none; }
.mg-outbox__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-2) var(--mg-space-4); min-height: var(--mg-d-row); padding: var(--mg-space-3) var(--mg-d-pad); border-bottom: 1px solid var(--mg-rule); }
.mg-outbox__row:last-child { border-bottom: 0; }
.mg-outbox__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink-2); }
.mg-outbox__main { display: grid; gap: 3px; min-width: 0; }
.mg-outbox__subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-outbox__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-1) var(--mg-space-3); font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-outbox__err { margin: 2px 0 0; font: 600 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-alarm-text); }
.mg-outbox__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mg-space-1); }
.mg-outbox__row[data-state="failed"] .mg-outbox__ic { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-outbox__row[data-state="queued"] .mg-outbox__ic { background: var(--mg-warn-tint); color: var(--mg-warn-text); }
[data-density="compact"] .mg-outbox__row { padding-top: var(--mg-space-1); padding-bottom: var(--mg-space-1); }
[data-density="compact"] .mg-outbox__ic { width: 24px; height: 24px; }
[data-density="compact"] .mg-outbox__ic svg { width: 14px; height: 14px; }
[data-density="compact"] .mg-outbox__main { display: flex; align-items: center; gap: var(--mg-space-3); }
[data-density="compact"] .mg-outbox__subj { flex: 1 1 auto; min-width: 0; }
[data-density="compact"] .mg-outbox__meta { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
[data-density="compact"] .mg-outbox__meta > :nth-child(n+3) { display: none; }
[data-density="compact"] .mg-outbox__err { display: none; }

.mg-thread { display: flex; flex-direction: column; gap: var(--mg-space-4); min-width: 0; }
.mg-thread__head { display: grid; gap: 6px; padding-bottom: var(--mg-space-3); }
.mg-thread__head .mg-title { font-size: var(--mg-text-xl); }
.mg-thread__list { display: grid; gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
.mg-msg { border-radius: var(--mg-radius-card); background: var(--mg-surface); box-shadow: var(--mg-shadow-card); }
.mg-msg__sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); width: 100%; min-height: var(--mg-d-row); padding: var(--mg-space-2) var(--mg-d-pad); border: 0; border-radius: var(--mg-radius-card); background: transparent; color: var(--mg-ink); font: inherit; text-align: left; cursor: pointer; }
.mg-msg__sum:hover { background: var(--mg-hover); }
.mg-msg__sum:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-msg__line { display: flex; align-items: baseline; gap: var(--mg-space-3); min-width: 0; }
.mg-msg__from { flex: none; font: 700 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-msg__snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-sm)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-msg__time { font: 600 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-msg[data-unread] .mg-msg__from { font-weight: 800; }
.mg-msg[data-unread] .mg-msg__sum { position: relative; }
.mg-msg[data-unread] .mg-msg__sum::before { content: ""; position: absolute; left: var(--mg-space-2); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-msg[data-open] .mg-msg__sum { border-radius: var(--mg-radius-card) var(--mg-radius-card) 0 0; }
.mg-msg__to { display: block; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-msg__who { display: grid; gap: 1px; min-width: 0; }
.mg-msg__body { display: grid; gap: var(--mg-space-4); padding: var(--mg-space-2) var(--mg-d-pad) var(--mg-d-pad) calc(var(--mg-d-pad) + var(--mg-d-avatar) + var(--mg-space-3)); }
.mg-msg .mg-prose ul { list-style: disc; }
.mg-msg__acts { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); padding-top: var(--mg-space-2); }
.mg-thread__fold { display: flex; align-items: center; gap: var(--mg-space-3); margin: 0; padding: 2px 0; }
.mg-thread__fold::before, .mg-thread__fold::after { content: ""; flex: 1; height: 1.5px; border-radius: var(--mg-radius-dot); background: var(--mg-rule); }

.mg-quote-fold { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 26px; padding: 0 var(--mg-space-3); border: 0; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); cursor: pointer; }
.mg-quote-fold:hover { background: var(--mg-hover); color: var(--mg-ink); }
.mg-quote-fold:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-quote-fold::before { content: ""; width: 4px; height: 4px; border-radius: var(--mg-radius-dot); background: currentColor; box-shadow: 6px 0 0 currentColor, 12px 0 0 currentColor; margin-right: var(--mg-space-3); }
.mg-quote-fold[aria-expanded="true"] { background: var(--mg-hover); color: var(--mg-ink); }
.mg-msg .mg-attach a.mg-chip { height: 36px; padding-left: 10px; text-decoration: none; cursor: pointer; }
.mg-msg .mg-attach a.mg-chip > svg { flex: none; color: var(--mg-ink-2); }
.mg-msg .mg-attach a.mg-chip:hover { background: var(--mg-hover); }
.mg-msg .mg-attach a.mg-chip:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }

.mg-token { display: inline-flex; align-items: center; height: 1.55em; padding: 0 0.5em; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); box-shadow: inset 0 0 0 1px var(--mg-rule-strong); color: var(--mg-ink); font-weight: 700; font-size: max(var(--mg-text-xs), 0.92em); line-height: 1; white-space: nowrap; vertical-align: 0.05em; user-select: all; }
button.mg-token { border: 0; font-family: var(--mg-font); cursor: pointer; }
button.mg-token:hover { background: var(--mg-hover); }
button.mg-token:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-merge { border-radius: 3px; box-shadow: inset 0 -2px 0 var(--mg-rule-strong); font-weight: 700; }
.mg-merge--missing { padding: 0 var(--mg-space-1); background: var(--mg-warn-tint); box-shadow: inset 0 -2px 0 var(--mg-warn); color: var(--mg-warn-text); }
.mg-slash { position: relative; }
.mg-slash__q { padding: 1px var(--mg-space-1); border-radius: 6px; background: var(--mg-sunken); font-weight: 700; }
.mg-slash .mg-listbox { position: absolute; z-index: var(--mg-z-popover); width: 340px; margin-top: 6px; }
.mg-slash__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--mg-space-3); padding: 10px var(--mg-space-3) 6px; border-top: 1.5px solid var(--mg-rule); margin-top: 6px; font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-slash__foot .mg-kbd { min-width: 20px; height: 20px; padding: 0 5px; }
.mg-tpl { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; overflow: hidden; background: var(--mg-surface); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-card); }
.mg-tpl__list { display: flex; flex-direction: column; min-height: 0; border-right: 1.5px solid var(--mg-rule); }
.mg-tpl__tools { display: grid; gap: var(--mg-space-2); padding: var(--mg-space-4); border-bottom: 1.5px solid var(--mg-rule); }
.mg-tpl__tools .mg-control__icon ~ .mg-input { height: var(--mg-control-sm); }
.mg-tpl__items { margin: 0; padding: var(--mg-space-2); list-style: none; overflow-y: auto; }
.mg-tpl__item { display: grid; gap: 2px; width: 100%; padding: 10px var(--mg-space-3); border: 0; border-radius: var(--mg-radius-field); background: transparent; color: var(--mg-ink); font: inherit; text-align: left; cursor: pointer; }
.mg-tpl__item:hover { background: var(--mg-hover); }
.mg-tpl__item:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 1px; }
.mg-tpl__item[aria-selected="true"] { background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-tpl__name { font: 700 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-tpl__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-tpl__detail { display: flex; flex-direction: column; gap: var(--mg-space-4); min-width: 0; padding: var(--mg-space-5) var(--mg-space-6); }
.mg-tpl__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-3); }
.mg-tpl__fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mg-tpl__fields .mg-label { margin-right: var(--mg-space-1); }
.mg-tpl__panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-4); }
.mg-tpl__pane { display: grid; align-content: start; gap: var(--mg-space-3); min-width: 0; padding: var(--mg-space-4) var(--mg-space-5); border-radius: var(--mg-radius-field); background: var(--mg-canvas); }
.mg-tpl__pane .mg-prose { font-size: var(--mg-text-sm); }
.mg-tpl__subj { margin: 0; font: 800 var(--mg-text-md)/1.4 var(--mg-font); }
.mg-tpl__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); padding-top: var(--mg-space-4); border-top: 1.5px solid var(--mg-rule); }
.mg-tpl__foot .mg-small { margin-right: auto; }

.mg-rules { margin: 0; padding: 0; list-style: none; }
.mg-rules__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--mg-space-3); min-height: var(--mg-d-row); padding: var(--mg-space-2) var(--mg-d-pad); border-bottom: 1px solid var(--mg-rule); }
.mg-rules__grip { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; border-radius: var(--mg-radius-dot); background: transparent; color: var(--mg-ink-2); cursor: grab; }
.mg-rules__grip:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 1px; }
.mg-rules__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); font: 800 var(--mg-text-xs)/1 var(--mg-font); }
.mg-rules__say { margin: 0; font: 500 var(--mg-text-md)/1.45 var(--mg-font); }
.mg-rules__say b { font-weight: 800; }
.mg-rules__say small { display: block; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-rules__row[data-off] .mg-rules__say, .mg-rules__row[data-off] .mg-rules__n { opacity: 0.6; }
.mg-rules__row .mg-toggle { min-height: 0; }
.mg-rules__row:last-child { border-bottom: 0; }
.mg-rb { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mg-space-6); }
.mg-rb__main { display: grid; align-content: start; gap: var(--mg-space-5); min-width: 0; }
.mg-rb__block { display: grid; gap: var(--mg-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.mg-rb__lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); padding: 0; font: 800 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-rb__lead span { font-weight: 600; color: var(--mg-ink-2); }
.mg-rb__lead .mg-seg__opt { height: 28px; padding: 0 var(--mg-space-3); }
.mg-rb__row { display: grid; grid-template-columns: 48px 160px 170px minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-2); }
.mg-rb__row--act { grid-template-columns: 48px 200px minmax(0, 1fr) auto; }
.mg-rb__join { font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-rb__add { justify-self: start; margin-left: var(--mg-space-8); }
.mg-rb__opts { display: grid; gap: 0; padding-top: var(--mg-space-2); border-top: 1.5px solid var(--mg-rule); }
.mg-rb__prev { display: grid; align-content: start; gap: var(--mg-space-3); padding: var(--mg-space-5); border-radius: var(--mg-radius-card); background: var(--mg-canvas); }
.mg-rb__hit { display: flex; align-items: baseline; gap: var(--mg-space-2); margin: 0; }
.mg-rb__hit b { font: 800 var(--mg-text-3xl)/1 var(--mg-font); letter-spacing: -0.03em; }
.mg-rb__hit span { font: 600 var(--mg-text-sm)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-rb__sample { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mg-rb__sample li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px var(--mg-space-3); padding: var(--mg-space-2) 0; border-top: 1px solid var(--mg-rule); font: 600 var(--mg-text-sm)/1.35 var(--mg-font); }
.mg-rb__sample li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-rb__sample small { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-rb__sample mark { background: none; color: inherit; font-weight: 800; box-shadow: inset 0 -2px 0 var(--mg-rule-strong); }
.mg-rb__states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mg-space-3); }
.mg-rb__state { display: grid; align-content: start; gap: var(--mg-space-2); padding: var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-canvas); font: 500 var(--mg-text-sm)/1.45 var(--mg-font); }
.mg-rb__state p { margin: 0; }
.mg-rb__state > p:not(.mg-rb__hit) { color: var(--mg-ink-2); }
[data-density="compact"] .mg-rules__say small { display: none; }
[data-density="compact"] .mg-rules__n { width: 22px; height: 22px; }

.mg-sync { display: inline-flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-control-sm); padding: 0 6px 0 var(--mg-space-3); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1.2 var(--mg-font); white-space: nowrap; }
.mg-sync > svg { flex: none; width: 16px; height: 16px; }
.mg-sync .mg-trappen { --mg-trappen-size: 12px; color: var(--mg-ink); }
.mg-sync__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--mg-radius-dot); background: var(--mg-surface); color: var(--mg-ink); font-weight: 800; }
.mg-sync .mg-button { height: 24px; padding: 0 10px; font-size: var(--mg-text-xs); }
.mg-sync--idle { padding-right: var(--mg-space-3); background: transparent; }
.mg-sync--busy { padding-right: var(--mg-space-3); color: var(--mg-ink); }
.mg-sync--offline { background: var(--mg-warn-tint); color: var(--mg-warn-text); }
.mg-sync--error { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-sync--error .mg-button, .mg-sync--offline .mg-button { background: var(--mg-surface); border-color: var(--mg-surface); color: var(--mg-ink); }
.mg-syncbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-4); background: var(--mg-warn-tint); color: var(--mg-warn-text); font: 600 var(--mg-text-sm)/1.4 var(--mg-font); animation: mg-banner-in var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-syncbar[hidden] { display: none; }
.mg-syncbar b { font-weight: 800; }
.mg-syncbar > svg { flex: none; }
.mg-syncbar--error { background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-syncbar .mg-button { background: var(--mg-surface); border-color: var(--mg-surface); color: var(--mg-ink); }
.mg-sendq { width: 340px; padding: 6px; background: var(--mg-raised); border-radius: var(--mg-radius-field); box-shadow: var(--mg-shadow-float); }
.mg-sendq__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mg-space-3); padding: 10px var(--mg-space-3) var(--mg-space-2); }
.mg-sendq__head b { font: 800 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-sendq__list { margin: 0; padding: 0; list-style: none; }
.mg-sendq__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--mg-space-3); padding: var(--mg-space-2) var(--mg-space-3); border-top: 1px solid var(--mg-rule); font: 600 var(--mg-text-sm)/1.35 var(--mg-font); }
.mg-sendq__item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-sendq__item small { grid-column: 1; font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-sendq__item .mg-status, .mg-sendq__item .mg-button { grid-column: 2; grid-row: 1 / 3; }
.mg-sendq__foot { padding: 10px var(--mg-space-3) 6px; border-top: 1.5px solid var(--mg-rule); font: 500 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-ink-2); }
.mg-accts { margin: 0; padding: 0; list-style: none; }
.mg-accts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); min-height: var(--mg-d-row); padding: 6px var(--mg-d-pad); border-top: 1px solid var(--mg-rule); }
.mg-accts li:first-child { border-top: 0; }
.mg-accts b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-md)/1.3 var(--mg-font); }
.mg-accts small { font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }

.mg-sheet { display: flex; flex-direction: column; max-height: calc(100dvh - var(--mg-space-8)); overflow: hidden; background: var(--mg-raised); color: var(--mg-ink); border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; box-shadow: var(--mg-shadow-float); padding-bottom: env(safe-area-inset-bottom, 0px); animation: mg-sheet-in var(--mg-dur-rise) var(--mg-ease-standard) both; }
.mg-sheet__handle, .mg-compose__handle { width: 40px; height: 5px; margin: var(--mg-space-2) auto 0; border-radius: var(--mg-radius-dot); background: var(--mg-rule-strong); }
.mg-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-3) var(--mg-space-2) var(--mg-space-5); }
.mg-sheet__body { overflow-y: auto; padding: 0 var(--mg-space-3) var(--mg-space-4); }
.mg-sheet .mg-menu { min-width: 0; padding: 0; background: transparent; box-shadow: none; }
.mg-sheet .mg-menu__item { min-height: var(--mg-control-touch); }

@media (max-width: 900px) {
  .mg-compose--sheet { max-width: none; height: calc(100dvh - var(--mg-space-6)); overflow: hidden; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; box-shadow: var(--mg-shadow-float); animation: mg-sheet-in var(--mg-dur-rise) var(--mg-ease-standard) both; }
  .mg-compose--sheet .mg-compose__handle { display: block; flex: none; }
  .mg-compose--sheet .mg-compose__head { min-height: 48px; padding-left: var(--mg-space-4); border-bottom: 0; }
  .mg-compose--sheet .mg-compose__row { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: var(--mg-control-touch); padding-left: var(--mg-space-4); }
  .mg-compose--sheet .mg-compose__input { font-size: 16px; }
  .mg-compose--sheet .mg-compose__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mg-compose--sheet .mg-compose__bar-end { display: none; }
  .mg-compose--sheet .mg-tool { width: var(--mg-control-touch); height: var(--mg-control-touch); }
  .mg-compose--sheet .mg-compose__editor { flex: 1; min-height: 120px; overflow-y: auto; padding-inline: var(--mg-space-4); font-size: 16px; }
  .mg-compose--sheet .mg-compose__attach { flex-wrap: nowrap; overflow-x: auto; padding: var(--mg-space-2) var(--mg-space-4); scrollbar-width: none; }
  .mg-compose--sheet .mg-compose__attach .mg-chip { flex: none; }
  .mg-compose--sheet .mg-compose__foot { position: sticky; bottom: 0; flex-wrap: nowrap; padding: var(--mg-space-3) var(--mg-space-3) var(--mg-space-3) var(--mg-space-4); background: var(--mg-surface); }
  .mg-compose--sheet .mg-compose__status { overflow: hidden; text-overflow: ellipsis; }
  .mg-compose--sheet .mg-compose__from-name { display: none; }
  .mg-compose--full { border-radius: 0; box-shadow: none; }
  .mg-split__menu { position: static; }
  .mg-sched__grid { grid-template-columns: 1fr; }
  .mg-outbox__row { grid-template-columns: auto minmax(0, 1fr); }
  .mg-outbox__acts { grid-column: 2; justify-content: flex-start; }
  .mg-msg__body { padding-left: var(--mg-d-pad); }
  .mg-msg__acts .mg-button { flex: 1; }
  .mg-tpl { grid-template-columns: 1fr; }
  .mg-tpl__list { border-right: 0; border-bottom: 1.5px solid var(--mg-rule); }
  .mg-tpl__panes { grid-template-columns: 1fr; }
  .mg-rb { grid-template-columns: 1fr; }
  .mg-rb__row, .mg-rb__row--act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .mg-rb__join { grid-column: 1 / -1; }
  .mg-rb__row .mg-input { grid-column: 1 / 3; }
  .mg-rb__add { margin-left: 0; }
  .mg-rb__states { grid-template-columns: 1fr; }
  .mg-syncbar { grid-template-columns: auto minmax(0, 1fr); }
  .mg-syncbar .mg-button { grid-column: 2; justify-self: start; }
}

@media (pointer: coarse) {
  .mg-sched__opt, .mg-compose__from { min-height: var(--mg-control-touch); }
  .mg-split__more { width: var(--mg-control-touch); }
}

@media (prefers-reduced-motion: reduce) {
  .mg-compose--sheet, .mg-sheet, .mg-syncbar { animation-name: mg-in-fade !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
  .mg-split__more svg { transition: none !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-compose--sheet, .mg-sheet, .mg-syncbar) { animation-name: mg-in-fade !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-split__more svg { transition: none !important; }
:is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root, [data-motion="off"].mg-root) :is(.mg-compose--sheet, .mg-sheet, .mg-syncbar, .mg-split__more svg) { animation: none !important; transition: none !important; }

@media (forced-colors: active) {
  .mg-sync, .mg-token, .mg-quote-fold, .mg-sched__opt::before, .mg-msg, .mg-sheet, .mg-sendq { border: 1px solid CanvasText; }
  .mg-compose__to .mg-chip[aria-selected="true"], .mg-tpl__item[aria-selected="true"], .mg-sched__opt[aria-checked="true"], .mg-compose__foot .mg-button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .mg-msg[data-unread] .mg-msg__sum::before, .mg-sched__opt[aria-checked="true"]::before, .mg-quote-fold::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .mg-merge--missing { border-bottom: 2px dashed CanvasText; }
}

.mg-eboard { --mg-eb-row: 52px; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--mg-eb-row); gap: var(--mg-d-gap); padding: var(--mg-d-gap); border-radius: var(--mg-radius-card); background: var(--mg-canvas); }
[data-density="compact"] .mg-eboard, .mg-eboard[data-density="compact"] { --mg-eb-row: 40px; }
[data-density="spacious"] .mg-eboard, .mg-eboard[data-density="spacious"] { --mg-eb-row: 64px; }
.mg-eboard__grid { position: absolute; top: var(--mg-d-gap); right: var(--mg-d-gap); bottom: var(--mg-d-gap); left: var(--mg-d-gap); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mg-d-gap); counter-reset: mg-col; pointer-events: none; opacity: 0; transition: opacity var(--mg-motion-quick); }
.mg-eboard__grid i { position: relative; counter-increment: mg-col; border-radius: var(--mg-radius-field); background: var(--mg-sunken); box-shadow: inset 0 0 0 1px var(--mg-rule); }
.mg-eboard__grid i::before { content: counter(mg-col); position: absolute; left: 0; right: 0; bottom: 100%; display: grid; place-items: center; height: var(--mg-d-gap); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-eboard[data-drag] .mg-eboard__grid, .mg-eboard[data-lib-drop="over"] .mg-eboard__grid { opacity: 1; }
.mg-eboard[data-lib-drop] { outline: 2px dashed var(--mg-rule-strong); outline-offset: 2px; }
.mg-eboard[data-lib-drop="over"] { outline-style: solid; outline-color: var(--mg-ink); }
.mg-eboard > .mg-etile-ghost, .mg-eboard > .mg-drop, .mg-eboard > .mg-egroup, .mg-eboard > .mg-etile-was, .mg-eboard > .mg-eboard__ro { position: relative; }
.mg-eboard__hint { position: absolute; bottom: var(--mg-space-3); left: 50%; z-index: var(--mg-z-sticky); display: inline-flex; align-items: center; gap: var(--mg-space-2); height: var(--mg-control-sm); padding: 0 var(--mg-space-4); border-radius: var(--mg-radius-dot); background: var(--mg-raised); box-shadow: var(--mg-shadow-float); color: var(--mg-ink); font: 700 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; transform: translateX(-50%); }
.mg-eboard__hint svg { width: 16px; height: 16px; }
.mg-eboard[data-readonly] .mg-etile { cursor: default; }
.mg-eboard__ro { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--mg-space-3); padding: 0 var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); color: var(--mg-ink); font: 600 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-eboard__ro svg { flex: none; width: 18px; height: 18px; }
.mg-eboard__ro .mg-button { margin-left: auto; }

.mg-etile { position: relative; grid-column: var(--col-start, auto) / span var(--w, 3); grid-row: var(--row-start, auto) / span var(--h, 2); display: flex; flex-direction: column; gap: var(--mg-space-2); min-width: 0; min-height: 0; padding: calc(var(--mg-d-pad) * 0.8); border-radius: var(--mg-radius-card); background: var(--mg-surface); box-shadow: var(--mg-shadow-card); color: var(--mg-ink); cursor: grab; user-select: none; touch-action: none; transition: box-shadow var(--mg-motion-quick), transform var(--mg-motion-quick); }
.mg-etile__head { display: flex; align-items: center; gap: var(--mg-space-2); min-height: 24px; min-width: 0; }
.mg-etile__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-etile__meta { margin-left: auto; flex: none; font: 500 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-etile__grip { position: absolute; top: 1px; left: 50%; display: grid; place-items: center; width: 32px; height: 16px; margin-left: calc(-1 * var(--mg-space-4)); color: var(--mg-ink-2); opacity: 0; transition: opacity var(--mg-motion-quick); }
.mg-etile__grip svg { width: 16px; height: 16px; transform: rotate(90deg); }
.mg-etile__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--mg-space-1); min-height: 0; }
.mg-etile__num { font: 800 var(--mg-text-2xl)/1 var(--mg-font); letter-spacing: -0.03em; }
.mg-etile:hover, .mg-etile.is-hover { box-shadow: var(--mg-shadow-card), 0 0 0 1.5px var(--mg-rule-strong); }
.mg-etile:hover .mg-etile__grip, .mg-etile.is-hover .mg-etile__grip, .mg-etile:focus-visible .mg-etile__grip { opacity: 1; }
.mg-etile.is-selected .mg-etile__grip, .mg-etile.is-resizing .mg-etile__grip, .mg-etile.is-dragging .mg-etile__grip { opacity: 0; }
.mg-etile:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 5px; }
.mg-etile.is-selected, .mg-etile.is-multi, .mg-etile.is-resizing { z-index: var(--mg-z-sticky); box-shadow: var(--mg-shadow-card), 0 0 0 2px var(--mg-ink); }

.mg-etile__h { position: absolute; display: none; background: var(--mg-surface); box-shadow: 0 0 0 2px var(--mg-ink); }
.mg-etile__h::before { content: ""; position: absolute; top: calc(-1 * var(--mg-space-2)); right: calc(-1 * var(--mg-space-2)); bottom: calc(-1 * var(--mg-space-2)); left: calc(-1 * var(--mg-space-2)); }
.mg-etile.is-selected > .mg-etile__h, .mg-etile.is-resizing > .mg-etile__h { display: block; }
.mg-etile__h[data-h="nw"], .mg-etile__h[data-h="ne"], .mg-etile__h[data-h="se"], .mg-etile__h[data-h="sw"] { width: 10px; height: 10px; border-radius: var(--mg-radius-dot); }
.mg-etile__h[data-h="n"], .mg-etile__h[data-h="s"] { left: 50%; width: 22px; height: 6px; margin-left: -11px; border-radius: var(--mg-radius-dot); }
.mg-etile__h[data-h="e"], .mg-etile__h[data-h="w"] { top: 50%; width: 6px; height: 22px; margin-top: -11px; border-radius: var(--mg-radius-dot); }
.mg-etile__h[data-h="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.mg-etile__h[data-h="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.mg-etile__h[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.mg-etile__h[data-h="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.mg-etile__h[data-h="n"] { top: calc(-1 * var(--mg-space-1)); cursor: ns-resize; }
.mg-etile__h[data-h="s"] { bottom: calc(-1 * var(--mg-space-1)); cursor: ns-resize; }
.mg-etile__h[data-h="e"] { right: calc(-1 * var(--mg-space-1)); cursor: ew-resize; }
.mg-etile__h[data-h="w"] { left: calc(-1 * var(--mg-space-1)); cursor: ew-resize; }
.mg-etile__h[data-active] { background: var(--mg-ink); }

.mg-etile__check { position: absolute; top: -9px; left: -9px; display: none; place-items: center; width: 22px; height: 22px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); box-shadow: 0 0 0 2px var(--mg-surface); }
.mg-etile__check svg { width: 14px; height: 14px; stroke-width: 2.4; }
.mg-etile.is-multi > .mg-etile__check { display: grid; }

.mg-etile.is-dragging { z-index: var(--mg-z-popover); cursor: grabbing; box-shadow: var(--mg-shadow-float), 0 0 0 2px var(--mg-ink); transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.02); animation: mg-et-lift var(--mg-dur-quick) var(--mg-ease-standard) both; }
@keyframes mg-et-lift { from { transform: translate(var(--dx, 0px), var(--dy, 0px)); box-shadow: var(--mg-shadow-card), 0 0 0 2px var(--mg-ink); } }
.mg-etile-ghost { grid-column: var(--col-start, auto) / span var(--w, 3); grid-row: var(--row-start, auto) / span var(--h, 2); display: grid; place-items: center; border-radius: var(--mg-radius-card); background: var(--mg-sunken); box-shadow: inset 0 0 0 2px var(--mg-rule-strong); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); text-align: center; pointer-events: none; }
.mg-etile-ghost { background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--mg-rule) 7px 8px); }

.mg-etile__hud { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: var(--mg-space-1); height: 28px; padding: 0 var(--mg-space-3); border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-sm)/1 var(--mg-font); font-feature-settings: "tnum" 1; white-space: nowrap; transform: translateY(calc(100% + 10px)); pointer-events: none; }
.mg-etile__hud small { font: 600 var(--mg-text-xs)/1 var(--mg-font); opacity: 0.8; }
.mg-etile.is-resizing { cursor: nwse-resize; transition: none; }
.mg-etile-was { grid-column: var(--col-start, auto) / span var(--w, 3); grid-row: var(--row-start, auto) / span var(--h, 2); border-radius: var(--mg-radius-card); box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); pointer-events: none; }

.mg-etile__lock { display: none; flex: none; align-items: center; gap: var(--mg-space-1); height: 24px; margin-left: auto; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-etile__lock svg { width: 14px; height: 14px; }
.mg-etile.is-locked { cursor: default; }
.mg-etile.is-locked > .mg-etile__head .mg-etile__lock { display: inline-flex; }
.mg-etile.is-locked > .mg-etile__head .mg-etile__meta, .mg-etile.is-locked .mg-etile__grip { display: none; }
.mg-etile.is-locked > .mg-etile__h { display: none; }
.mg-etile.is-locked:hover { box-shadow: var(--mg-shadow-card); }
.mg-etile.is-locked.is-selected { box-shadow: var(--mg-shadow-card), 0 0 0 2px var(--mg-ink); }

.mg-etile.is-error { box-shadow: var(--mg-shadow-card), inset 0 0 0 1.5px var(--mg-alarm); }
.mg-etile__err { display: grid; justify-items: start; gap: var(--mg-space-2); align-content: end; }
.mg-etile__err .mg-button { height: 28px; padding: 0 var(--mg-space-3); }
.mg-etile__err .mg-button svg { width: 14px; height: 14px; }
.mg-etile__err p { margin: 0; font: 500 var(--mg-text-xs)/1.4 var(--mg-font); color: var(--mg-ink-2); }
.mg-etile__err .mg-status svg { width: 16px; height: 16px; }

.mg-etag { display: inline-flex; flex: none; align-self: flex-start; margin-bottom: auto; align-items: center; gap: var(--mg-space-1); height: 22px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); font: 700 var(--mg-text-xs)/1 var(--mg-font); white-space: nowrap; }
.mg-etag::before { content: ""; width: 8px; height: 8px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-etag--follow::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mg-ink); }
.mg-egroup { grid-column: var(--col-start) / span var(--w); grid-row: var(--row-start) / span var(--h); margin: calc(var(--mg-d-gap) * -0.45); border-radius: calc(var(--mg-radius-card) + 6px); border: 1.5px dashed var(--mg-ink-2); pointer-events: none; }
.mg-egroup__name { position: relative; top: calc(-1 * var(--mg-space-3)); left: var(--mg-space-4); display: inline-flex; align-items: center; gap: var(--mg-space-1); height: 22px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-canvas); color: var(--mg-ink); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-egroup__name svg { width: 14px; height: 14px; }

.mg-guide { position: absolute; z-index: var(--mg-z-popover); pointer-events: none; background: var(--mg-ink); }
.mg-guide--v { top: var(--from); left: var(--at); width: 1px; height: var(--len); }
.mg-guide--h { top: var(--at); left: var(--from); width: var(--len); height: 1px; }
.mg-guide::before, .mg-guide::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
.mg-guide--v::before { top: -3px; left: -3px; } .mg-guide--v::after { bottom: -3px; left: -3px; }
.mg-guide--h::before { top: -3px; left: -3px; } .mg-guide--h::after { top: -3px; right: -3px; }
.mg-guide--center { background: repeating-linear-gradient(var(--mg-guide-dir, 180deg), var(--mg-ink) 0 4px, transparent 4px 7px); }
.mg-guide--h.mg-guide--center { --mg-guide-dir: 90deg; }
.mg-gap { position: absolute; z-index: var(--mg-z-popover); display: flex; align-items: center; justify-content: center; top: var(--at); left: var(--from); width: var(--len); height: 0; border-top: 1px solid var(--mg-ink); pointer-events: none; }
.mg-gap::before, .mg-gap::after { content: ""; position: absolute; top: -6px; width: 1px; height: 11px; background: var(--mg-ink); }
.mg-gap::before { left: 0; } .mg-gap::after { right: 0; }
.mg-gap span { position: absolute; top: 9px; left: 50%; display: inline-grid; place-items: center; height: 22px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); font-feature-settings: "tnum" 1; white-space: nowrap; transform: translateX(-50%); }
.mg-drop { grid-column: var(--col-start) / span var(--w); grid-row: var(--row-start) / span var(--h); display: grid; place-content: center; justify-items: center; gap: var(--mg-space-1); border-radius: var(--mg-radius-card); background: var(--mg-hover); box-shadow: inset 0 0 0 2px var(--mg-ink); color: var(--mg-ink); font: 800 var(--mg-text-md)/1 var(--mg-font); font-feature-settings: "tnum" 1; pointer-events: none; animation: mg-in-fade var(--mg-dur-quick) var(--mg-ease-enter) both; }
.mg-drop { background-image: radial-gradient(circle, var(--mg-ink) 1.5px, transparent 2px); background-size: 16px 16px; background-position: center; background-color: var(--mg-hover); }
.mg-drop > span { display: inline-flex; align-items: center; gap: var(--mg-space-2); padding: var(--mg-space-1) var(--mg-space-3); border-radius: var(--mg-radius-dot); background: var(--mg-surface); }
.mg-drop svg { width: 16px; height: 16px; }
.mg-drop small { display: block; padding: var(--mg-space-1) var(--mg-space-3); border-radius: var(--mg-radius-dot); background: var(--mg-surface); font: 600 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-drop--invalid { z-index: var(--mg-z-sticky); background-color: var(--mg-alarm-tint); background-image: repeating-linear-gradient(135deg, transparent 0 7px, var(--mg-alarm) 7px 9px); box-shadow: inset 0 0 0 2px var(--mg-alarm); color: var(--mg-alarm-text); }
.mg-drop--invalid > span, .mg-drop--invalid small { color: var(--mg-alarm-text); }
.mg-marquee { position: absolute; z-index: var(--mg-z-popover); top: var(--y); left: var(--x); width: var(--mw); height: var(--mh); border: 1.5px dashed var(--mg-ink); border-radius: var(--mg-radius-field); background: color-mix(in srgb, var(--mg-ink) 7%, transparent); pointer-events: none; }
.mg-marquee__n { position: absolute; right: -6px; bottom: -6px; display: inline-grid; place-items: center; height: 22px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); transform: translate(100%, 100%); white-space: nowrap; }

.mg-ebar { container: mg-ebar / inline-size; background: var(--mg-surface); border-bottom: 1.5px solid var(--mg-rule); }
.mg-ebar__main { display: flex; align-items: center; gap: var(--mg-space-3); min-height: 64px; padding: var(--mg-space-2) var(--mg-space-4); }
[data-density="compact"] .mg-ebar__main, .mg-ebar[data-density="compact"] .mg-ebar__main { min-height: 52px; }
.mg-ebar__group { display: flex; align-items: center; gap: var(--mg-space-1); min-width: 0; }
.mg-ebar__group--end { margin-left: auto; gap: var(--mg-space-2); }
.mg-ebar__center { margin-left: auto; gap: var(--mg-space-3); }
.mg-ebar__sep { flex: none; width: 1.5px; height: 24px; margin: 0 var(--mg-space-1); border-radius: 1px; background: var(--mg-rule); }
.mg-ebar__title { display: grid; gap: 2px; min-width: 0; }
.mg-ebar__name { display: inline-flex; align-items: center; gap: var(--mg-space-2); max-width: 260px; padding: 2px var(--mg-space-1); margin-left: calc(var(--mg-space-1) * -1); border: 0; border-radius: var(--mg-radius-field); background: transparent; color: var(--mg-ink); font: 800 var(--mg-text-lg)/1.2 var(--mg-font); letter-spacing: -0.01em; cursor: text; }
.mg-ebar__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-ebar__name svg { flex: none; width: 16px; height: 16px; color: var(--mg-ink-2); opacity: 0; }
.mg-ebar__name:hover { background: var(--mg-hover); } .mg-ebar__name:hover svg, .mg-ebar__name:focus-visible svg { opacity: 1; }
.mg-ebar__name:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-ebar__people { display: flex; gap: var(--mg-space-1); }
.mg-ebar__people .mg-avatar { --mg-d-avatar: 28px; }
.mg-save { display: inline-flex; align-items: center; gap: var(--mg-space-2); min-height: 20px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-save svg { width: 14px; height: 14px; }
.mg-save .mg-trappen { --mg-trappen-size: 10px; color: var(--mg-ink-2); }
.mg-save[data-state="dirty"] { color: var(--mg-warn-text); }
.mg-save[data-state="dirty"]::before, .mg-save[data-state="conflict"]::before { content: ""; flex: none; width: var(--mg-dot); height: var(--mg-dot); border-radius: var(--mg-radius-dot); }
.mg-save[data-state="dirty"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--mg-warn); }
.mg-save[data-state="conflict"] { color: var(--mg-alarm-text); }
.mg-save[data-state="conflict"]::before { background: var(--mg-alarm); }
.mg-save .mg-link { font-size: var(--mg-text-xs); }
.mg-zoom { display: inline-flex; align-items: center; gap: 2px; height: var(--mg-control-sm); padding: 2px; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); }
.mg-zoom .mg-tool { width: 28px; height: 28px; }
.mg-zoom .mg-tool svg { width: 16px; height: 16px; }
.mg-zoom .mg-zoom__val { width: auto; min-width: 60px; white-space: nowrap; padding: 0 var(--mg-space-2); font: 700 var(--mg-text-sm)/1 var(--mg-font); font-feature-settings: "tnum" 1; color: var(--mg-ink); }
.mg-ebar .mg-tool:disabled { color: var(--mg-rule-strong); cursor: not-allowed; background: transparent; }
.mg-ebar .mg-seg__opt svg { width: 16px; height: 16px; }
.mg-ebar .mg-seg { padding: 2px; } .mg-ebar .mg-seg__opt { height: 28px; padding: 0 var(--mg-space-3); }
.mg-ebar__name { max-width: 220px; }
@container mg-ebar (max-width: 960px) {
  .mg-ebar__wide, .mg-ebar__people { display: none; }
}
@container mg-ebar (max-width: 720px) {
  .mg-ebar__center { display: none; }
}

.mg-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); min-height: 48px; padding: var(--mg-space-2) var(--mg-space-4); background: var(--mg-canvas); border-top: 1.5px solid var(--mg-rule); }
.mg-ctx .mg-fchip > svg:first-child { width: 16px; height: 16px; }
[data-density="compact"] .mg-ctx { min-height: 40px; padding-block: var(--mg-space-1); }
.mg-ctx__label { margin-right: var(--mg-space-1); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-ctx__end { display: flex; align-items: center; gap: var(--mg-space-3); margin-left: auto; }
.mg-ctx .mg-toggle { min-height: var(--mg-control-sm); gap: var(--mg-space-2); font: 600 var(--mg-text-sm)/1 var(--mg-font); }

.mg-wlib { display: flex; flex-direction: column; width: 320px; max-height: 100%; min-height: 0; border-radius: var(--mg-radius-card); background: var(--mg-surface); box-shadow: var(--mg-shadow-card); }
.mg-wlib__head { display: grid; gap: var(--mg-space-3); padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-3); border-bottom: 1.5px solid var(--mg-rule); }
.mg-wlib__top { display: flex; align-items: center; justify-content: space-between; }
.mg-wlib__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-wlib__cat { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--mg-space-3); border: 0; border-radius: var(--mg-radius-dot); background: var(--mg-sunken); color: var(--mg-ink); font: 700 var(--mg-text-xs)/1 var(--mg-font); cursor: pointer; }
.mg-wlib__cat small { font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-wlib__cat:hover { background: var(--mg-hover); }
.mg-wlib__cat[aria-pressed="true"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-wlib__cat[aria-pressed="true"] small { color: var(--mg-on-ink); opacity: 0.8; }
.mg-wlib__cat:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-wlib__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--mg-space-2) var(--mg-space-4) var(--mg-space-4); }
.mg-wlib__sec { margin: var(--mg-space-3) 0 var(--mg-space-2); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-wlib__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-2); margin: 0; padding: 0; list-style: none; }
.mg-wlib__item { display: grid; gap: var(--mg-space-2); width: 100%; padding: var(--mg-space-2); border: 0; border-radius: var(--mg-radius-field); background: transparent; color: var(--mg-ink); text-align: left; cursor: grab; touch-action: none; }
.mg-wlib__item:hover { background: var(--mg-hover); }
.mg-wlib__item:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-wlib__name { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-wlib__name svg { flex: none; width: 16px; height: 16px; color: var(--mg-ink-2); }
.mg-wlib__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: var(--mg-space-1); margin-bottom: calc(-1 * var(--mg-space-1)); }
.mg-wlib__name mark { background: none; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.mg-wlib__thumb { position: relative; display: grid; place-items: center; height: 58px; overflow: hidden; border-radius: calc(var(--mg-radius-field) - 4px); background: var(--mg-sunken); color: var(--mg-ink); }
[data-density="compact"] .mg-wlib__thumb { height: 40px; }
.mg-wlib__thumb svg { width: 84%; height: 70%; }
.mg-wlib__thumb b { font: 800 var(--mg-text-xl)/1 var(--mg-font); letter-spacing: -0.03em; }
.mg-wlib__item[data-dragging] { cursor: grabbing; }
.mg-wlib__item[data-dragging] .mg-wlib__thumb { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); }
.mg-wlib__item[data-dragging] .mg-wlib__thumb > * { opacity: 0.35; }
.mg-wlib__empty { padding: var(--mg-space-6) var(--mg-space-2); }
.mg-wlib__empty .mg-empty__title { font-size: var(--mg-text-lg); }
.mg-wlib-ghost { position: absolute; z-index: var(--mg-z-popover); display: grid; gap: var(--mg-space-2); width: 168px; padding: var(--mg-space-2); border-radius: var(--mg-radius-field); background: var(--mg-raised); box-shadow: var(--mg-shadow-float), 0 0 0 2px var(--mg-ink); color: var(--mg-ink); pointer-events: none; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
.mg-wlib-ghost__size { justify-self: start; height: 20px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/20px var(--mg-font); font-feature-settings: "tnum" 1; }

.mg-drawer.mg-insp { width: min(400px, 100%); }
.mg-insp .mg-drawer__head { padding-bottom: var(--mg-space-3); border-bottom: 0; }
.mg-insp__tools { display: flex; gap: 2px; }
.mg-insp__tabs { flex: none; gap: var(--mg-space-5); padding: 0 var(--mg-space-6); }
.mg-insp__tabs .mg-tab { height: var(--mg-control-touch); font-size: var(--mg-text-sm); }
.mg-insp .mg-drawer__body { padding-top: var(--mg-space-1); }
.mg-insp .mg-acc > summary { min-height: 48px; }
.mg-insp .mg-acc > summary .mg-tab__n { margin-left: var(--mg-space-1); }
.mg-insp__sel { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--mg-space-6) var(--mg-space-3); }
.mg-insp__sel .mg-chip { height: 26px; padding: 0 var(--mg-space-3); font-size: var(--mg-text-xs); }
.mg-insp__note { display: flex; gap: var(--mg-space-2); margin: var(--mg-space-3) 0 var(--mg-space-1); padding: var(--mg-space-3); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 500 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-ink); }
.mg-insp__note svg { flex: none; width: 16px; height: 16px; color: var(--mg-ink-2); }
.mg-insp__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mg-space-3); }
.mg-mixed { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); white-space: nowrap; }
.mg-mixed::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--mg-radius-dot); box-shadow: inset 0 0 0 1.5px var(--mg-ink-2); background: linear-gradient(90deg, var(--mg-ink-2) 50%, transparent 50%); }
.mg-field__label .mg-mixed { margin-left: var(--mg-space-2); vertical-align: 1px; }
.mg-select[data-mixed], .mg-input[data-mixed] { color: var(--mg-ink-2); }
.mg-input[data-mixed]::placeholder { color: var(--mg-ink-2); font-weight: 700; }
.mg-toggle[data-mixed] .mg-toggle__track { background: var(--mg-rule-strong); }
.mg-toggle[data-mixed] .mg-toggle__track::before { transform: translateX(9px); background: var(--mg-surface); }
.mg-toggle[data-mixed] .mg-toggle__track::after { content: ""; position: absolute; top: var(--mg-space-3); left: var(--mg-space-4); width: 12px; height: 2px; border-radius: 1px; background: var(--mg-ink-2); }
.mg-toggle__side { display: inline-flex; align-items: center; gap: var(--mg-space-2); }

.mg-tslots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--mg-space-6); align-items: start; }
.mg-tslots__list { display: grid; gap: var(--mg-space-3); }
.mg-tslot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-2); margin: 0; padding: var(--mg-space-4); border: 0; border-radius: var(--mg-radius-card); background: var(--mg-surface); box-shadow: var(--mg-shadow-card); min-width: 0; }
.mg-tslot__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mg-space-1) var(--mg-space-2); margin: 0; font: 800 var(--mg-text-md)/1.2 var(--mg-font); color: var(--mg-ink); }
.mg-tslot__name small { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-tslot__ctl { display: flex; align-items: center; gap: var(--mg-space-3); }
.mg-tslot__sw { flex: none; width: 40px; height: 40px; border-radius: var(--mg-radius-dot); background: var(--mg-tslot, var(--mg-sunken)); box-shadow: inset 0 0 0 1.5px var(--mg-rule); }
.mg-tslot__hex { max-width: 150px; font-family: var(--mg-font); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.mg-tslot__ctl .mg-seg { flex: none; }
.mg-tslot__checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mg-tcheck { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--mg-space-2); align-items: start; font: 500 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-ink); }
.mg-tcheck svg { width: 18px; height: 18px; }
.mg-tcheck b { font-weight: 800; }
.mg-tcheck--ok svg, .mg-tcheck--ok b { color: var(--mg-ok-text); }
.mg-tcheck--warn svg, .mg-tcheck--warn b { color: var(--mg-warn-text); }
.mg-tcheck--bad svg, .mg-tcheck--bad b { color: var(--mg-alarm-text); }
.mg-tslot__logo { display: flex; align-items: center; gap: var(--mg-space-3); }
.mg-tslot__logo .mg-small { margin-right: auto; }
.mg-tslots__prev { display: grid; gap: var(--mg-space-3); }
.mg-tslots__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-3); }
.mg-tslots__cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-tmini { --tm-bg: var(--mg-canvas); --tm-card: var(--mg-surface); --tm-ink: var(--mg-ink); --tm-ink-2: var(--mg-ink-2); --tm-std: var(--mg-ink); --tm-shadow: var(--mg-shadow-card); overflow: hidden; border-radius: var(--mg-radius-field); background: color-mix(in srgb, var(--mg-tone, var(--tm-bg)) var(--tm-mix, 8%), var(--tm-bg)); box-shadow: inset 0 0 0 1px var(--mg-rule); color: var(--tm-ink); }
[data-theme="dark"] .mg-tmini--day { --tm-bg: var(--mg-ink); --tm-card: var(--mg-on-navy); --tm-ink: var(--mg-on-ink); --tm-ink-2: var(--mg-navy-hi); --tm-std: var(--mg-on-ink); --tm-shadow: none; }
.mg-tmini[data-theme="dark"] { --tm-mix: 14%; }
.mg-tmini__band { display: flex; align-items: center; gap: var(--mg-space-2); height: 34px; padding: 0 var(--mg-space-3); background: var(--mg-brand, var(--mg-navy)); color: var(--mg-brand-ink, var(--mg-on-navy)); font: 800 var(--mg-text-xs)/1 var(--mg-font); }
.mg-tmini__band svg { width: auto; height: 18px; }
.mg-tmini__band small { margin-left: auto; font-weight: 700; }
.mg-tmini__body { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--mg-space-2); padding: var(--mg-space-3); }
.mg-tmini__card { display: grid; align-content: start; gap: 6px; min-height: 104px; padding: var(--mg-space-2) var(--mg-space-3); border-radius: calc(var(--mg-radius-field) - 2px); background: var(--tm-card); box-shadow: var(--tm-shadow); }
.mg-tmini__k { font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--tm-ink-2); }
.mg-tmini__n { font: 800 var(--mg-text-xl)/1 var(--mg-font); letter-spacing: -0.02em; }
.mg-tmini__pod { display: flex; align-items: flex-end; justify-content: center; gap: var(--mg-space-3); height: 64px; }
.mg-tmini__pod i { position: relative; width: 6px; height: var(--h); border-radius: var(--mg-radius-dot); background: var(--mg-podium, var(--tm-std)); }
.mg-tmini__pod i::before { content: ""; position: absolute; left: 50%; top: -14px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: var(--mg-radius-dot); background: var(--mg-podium, var(--tm-std)); }
.mg-tmini--std { --mg-podium: var(--tm-std); }

.mg-cmdk__end { display: inline-flex; align-items: center; gap: var(--mg-space-3); }
.mg-cmdk__keys { display: inline-flex; gap: var(--mg-space-1); color: var(--mg-ink-2); }
.mg-cmdk__keys .mg-kbd, .mg-cmdk__hint .mg-kbd { height: 20px; min-width: 20px; padding: 0 6px; }
.mg-cmdk--editor .mg-cmdk__hint { display: none; }
.mg-cmdk--editor .mg-cmdk__opt[data-active] .mg-cmdk__hint { display: inline-flex; }

.mg-logocrop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--mg-space-4); padding: var(--mg-space-4); border-radius: var(--mg-radius-card); background: var(--mg-surface); box-shadow: inset 0 0 0 1.5px var(--mg-rule); }
.mg-logocrop__stage { position: relative; display: grid; place-items: center; min-height: 168px; overflow: hidden; border-radius: var(--mg-radius-field); background-color: var(--mg-surface); background-image: linear-gradient(45deg, var(--mg-sunken) 25%, transparent 25%, transparent 75%, var(--mg-sunken) 75%), linear-gradient(45deg, var(--mg-sunken) 25%, transparent 25%, transparent 75%, var(--mg-sunken) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; box-shadow: inset 0 0 0 1px var(--mg-rule); }
.mg-logocrop__img { color: var(--mg-ink); }
.mg-logocrop__img svg { display: block; width: 190px; height: auto; }
.mg-logocrop__frame { position: absolute; top: var(--y, 20%); left: var(--x, 12%); width: var(--fw, 76%); height: var(--fh, 60%); border: 1.5px solid var(--mg-ink); border-radius: 4px; box-shadow: 0 0 0 999px color-mix(in srgb, var(--mg-canvas) 70%, transparent); }
.mg-logocrop__frame i { position: absolute; width: 10px; height: 10px; border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: 0 0 0 2px var(--mg-ink); }
.mg-logocrop__frame i:nth-child(1) { top: -6px; left: -6px; } .mg-logocrop__frame i:nth-child(2) { top: -6px; right: -6px; } .mg-logocrop__frame i:nth-child(3) { bottom: -6px; right: -6px; } .mg-logocrop__frame i:nth-child(4) { bottom: -6px; left: -6px; }
.mg-logocrop__side { display: grid; align-content: start; gap: var(--mg-space-3); min-width: 0; }
.mg-logocrop__where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg-space-2); }
.mg-logocrop__where figure { display: grid; gap: 6px; margin: 0; }
.mg-logocrop__where figcaption { font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-logocrop__on { display: grid; place-items: center; height: 52px; border-radius: var(--mg-radius-field); background: var(--mg-surface); color: var(--mg-ink); box-shadow: inset 0 0 0 1px var(--mg-rule); }
.mg-logocrop__on--brand { background: var(--mg-brand, var(--mg-navy)); color: var(--mg-brand-ink, var(--mg-on-navy)); box-shadow: none; }
.mg-logocrop__on svg { width: 80%; max-width: 104px; height: auto; }

.mg-etile.is-grabbed { z-index: var(--mg-z-popover); box-shadow: var(--mg-shadow-float), 0 0 0 2px var(--mg-ink); transform: translateY(calc(var(--mg-move-sm) * -0.5)); }
.mg-etile.is-grabbed:focus-visible, .mg-etile.is-grabbed.is-focus { outline: 2px solid var(--mg-focus); outline-offset: 5px; }
.mg-etile.is-focus { outline: 2px solid var(--mg-focus); outline-offset: 5px; }
.mg-etile__arrows { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.mg-etile__arrows i { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-etile__arrows svg { width: 14px; height: 14px; stroke-width: 2.2; }
.mg-etile__arrows i:nth-child(1) { top: -11px; left: 50%; margin-left: -11px; }
.mg-etile__arrows i:nth-child(2) { top: 50%; right: -11px; margin-top: -11px; }
.mg-etile__arrows i:nth-child(3) { bottom: -11px; left: 50%; margin-left: -11px; }
.mg-etile__arrows i:nth-child(4) { top: 50%; left: -11px; margin-top: -11px; }
.mg-kbmove { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--mg-space-6); align-items: start; }
.mg-kbmove__keys { width: 100%; border-collapse: collapse; font: 500 var(--mg-text-sm)/1.4 var(--mg-font); }
.mg-kbmove__keys th, .mg-kbmove__keys td { padding: var(--mg-space-2) var(--mg-space-2) var(--mg-space-2) 0; border-bottom: 1.5px solid var(--mg-rule); text-align: left; vertical-align: top; }
.mg-kbmove__keys th { width: 1%; padding-right: var(--mg-space-5); font-weight: 700; white-space: nowrap; }
.mg-kbmove__keys .mg-kbd { margin-right: 2px; }
.mg-kblog { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: mg-kb; }
.mg-kblog li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--mg-space-3); align-items: start; padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 500 var(--mg-text-xs)/1.45 var(--mg-font); color: var(--mg-ink); }
.mg-kblog li > span:first-child { display: flex; flex-wrap: wrap; gap: var(--mg-space-1); }
.mg-kblog q { quotes: none; font-weight: 600; }
.mg-kblog li[data-kind="warn"] { box-shadow: inset 3px 0 0 var(--mg-warn); }

@media (pointer: coarse) {
  .mg-etile__h[data-h="nw"], .mg-etile__h[data-h="ne"], .mg-etile__h[data-h="se"], .mg-etile__h[data-h="sw"] { width: 16px; height: 16px; }
  .mg-etile__h[data-h="nw"] { top: -9px; left: -9px; } .mg-etile__h[data-h="ne"] { top: -9px; right: -9px; } .mg-etile__h[data-h="se"] { right: -9px; bottom: -9px; } .mg-etile__h[data-h="sw"] { bottom: -9px; left: -9px; }
  .mg-etile__h::before { top: -14px; right: -14px; bottom: -14px; left: -14px; }
  .mg-etile__grip { opacity: 1; }
  .mg-wlib__item { min-height: var(--mg-control-touch); }
}
@media (forced-colors: active) {
  .mg-etile, .mg-wlib, .mg-tslot, .mg-tmini__card, .mg-logocrop__stage { border: 1px solid CanvasText; }
  .mg-etile.is-selected, .mg-etile.is-multi, .mg-etile.is-resizing, .mg-etile.is-dragging, .mg-etile.is-grabbed { outline: 3px solid Highlight; outline-offset: 2px; }
  .mg-etile__h, .mg-etile__check, .mg-guide, .mg-guide::before, .mg-guide::after, .mg-gap span, .mg-etile__hud, .mg-marquee__n, .mg-logocrop__frame i, .mg-wlib__cat[aria-pressed="true"], .mg-etile__arrows i { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; }
  .mg-drop, .mg-etile-ghost, .mg-marquee, .mg-egroup { border: 2px dashed CanvasText; }
  .mg-drop--invalid { border-style: solid; }
  .mg-eboard__grid i { border: 1px dotted CanvasText; }
  .mg-mixed::before { forced-color-adjust: none; border: 1.5px solid CanvasText; background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-etile, .mg-etile__grip, .mg-eboard__grid { transition: none !important; }
  .mg-etile.is-dragging { animation: none !important; transform: translate(var(--dx, 0px), var(--dy, 0px)) !important; }
  .mg-etile.is-grabbed { transform: none !important; }
  .mg-drop { animation-name: mg-in-fade !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-etile,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-etile__grip,
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-eboard__grid { transition: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-etile.is-dragging { animation: none !important; transform: translate(var(--dx, 0px), var(--dy, 0px)) !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-etile.is-grabbed { transform: none !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root) .mg-drop { animation-name: mg-in-fade !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }

.mg-view { container: mg-view / inline-size; min-width: 0; }

.mg-pagehead--rich { display: grid; gap: var(--mg-space-2); margin-bottom: var(--mg-space-4); }
.mg-pagehead--rich .mg-crumb { margin-bottom: 0; }
.mg-pagehead__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-4); min-width: 0; }
.mg-pagehead__titlerow .mg-title { min-width: 0; }
.mg-pagehead__sub { margin: 0; max-width: var(--mg-measure); font: 500 var(--mg-text-md)/1.5 var(--mg-font); color: var(--mg-ink-2); }

.mg-crumb a { color: inherit; text-decoration: none; border-radius: var(--mg-radius-field); }
.mg-crumb a:hover { color: var(--mg-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mg-crumb a:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-crumb__sep { flex: none; width: 12px; height: 12px; color: var(--mg-rule-strong); }
.mg-crumb [aria-current="page"] { color: var(--mg-ink); }

.mg-pagehead__dock { position: sticky; top: 0; z-index: var(--mg-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); margin: 0 0 var(--mg-d-gap); padding: var(--mg-space-2) 0; background: var(--mg-canvas); }
.mg-pagehead__dock > .mg-filterbar { flex: 0 1 auto; min-width: 0; }
.mg-pagehead__sep { flex: none; width: 1.5px; height: 20px; margin: 0 var(--mg-space-1); border-radius: var(--mg-radius-dot); background: var(--mg-rule); }
.mg-pagehead__name { display: none; align-items: center; gap: var(--mg-space-2); margin-right: var(--mg-space-3); font: 800 var(--mg-text-lg)/1.2 var(--mg-font); letter-spacing: -0.01em; white-space: nowrap; }
.mg-pagehead__name .mg-pmark { color: var(--mg-ink); }
.mg-pagehead__act { margin-left: auto; display: flex; align-items: center; gap: var(--mg-space-2); }
.mg-pagehead__dock.is-stuck { margin-inline: calc(-1 * var(--mg-ph-bleed, var(--mg-space-7))); padding: var(--mg-space-2) var(--mg-ph-bleed, var(--mg-space-7)); background: var(--mg-surface); box-shadow: var(--mg-shadow-card); }
.mg-pagehead__dock.is-stuck .mg-pagehead__name { display: inline-flex; }
.mg-pagehead__dock.is-stuck .mg-pagehead__clear { display: none; }

.mg-date--sm { gap: 2px; }
.mg-date--sm .mg-fchip { justify-content: space-between; min-width: 25ch; }
.mg-date--sm .mg-fchip__val { margin-right: auto; }
.mg-filterbar--compact { flex-wrap: nowrap; gap: var(--mg-space-2); }
.mg-fpop--end { left: auto; right: 0; }
.mg-fpop .mg-menu { min-width: 0; }

.mg-pagehead__filters { display: none; }

@container mg-view (max-width: 640px) {
  .mg-pagehead--rich .mg-title { font-size: var(--mg-text-xl); }
  .mg-pagehead__dock { row-gap: var(--mg-space-2); }
  .mg-pagehead__dock > .mg-date { flex: 1 1 100%; }
  .mg-pagehead__dock > .mg-date .mg-fchip { flex: 1; min-width: 0; }
  .mg-pagehead__dock > .mg-pagehead__sep { display: none; }
  .mg-pagehead__dock > .mg-filterbar { flex: 1 1 100%; overflow-x: auto; padding-bottom: 2px; }
  .mg-pagehead__act { flex: 1 1 100%; margin-left: 0; }
  .mg-pagehead__act > .mg-button--primary { flex: 1; }
  .mg-pagehead__dock, .mg-pagehead__dock.is-stuck { position: static; margin-inline: 0; padding-inline: 0; background: var(--mg-canvas); box-shadow: none; }
  .mg-pagehead__dock.is-stuck .mg-pagehead__name { display: none; }
  .mg-pagehead__dock--sheet { flex-wrap: nowrap; }
  .mg-pagehead__dock--sheet > .mg-date { flex: 1 1 0; min-width: 0; }
  .mg-pagehead__dock--sheet > :is(.mg-seg, .mg-pagehead__sep, .mg-filterbar) { display: none; }
  .mg-pagehead__filters { display: inline-flex; flex: none; }
  .mg-pagehead__titlerow > .mg-pagehead__act { flex: none; margin-left: auto; }
  .mg-pagehead__act--icon > .mg-button { width: var(--mg-control); height: var(--mg-control); padding: 0; }
  .mg-pagehead__act--icon .mg-button__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.mg-pagehead__filters .mg-fchip__n { margin-left: 2px; }
.mg-filtersheet .mg-drawer__body { display: grid; align-content: start; gap: var(--mg-space-5); padding-top: var(--mg-space-5); padding-bottom: var(--mg-space-6); }
.mg-filtersheet__group { display: grid; gap: var(--mg-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.mg-filtersheet__group > .mg-label { margin: 0; padding: 0; color: var(--mg-ink-2); }
.mg-filtersheet__group > .mg-seg { display: flex; width: 100%; overflow-x: auto; }
.mg-filtersheet__group > .mg-seg > .mg-seg__opt { flex: 1 1 auto; }
.mg-filtersheet__group > .mg-select { width: 100%; max-width: none; }

.mg-tablebox { container: mg-table / inline-size; position: relative; min-width: 0; }
.mg-tablebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); min-height: 64px; padding: var(--mg-space-3) var(--mg-d-pad); }
.mg-tablebar > .mg-filterbar { flex: 1 1 420px; min-width: 0; }
.mg-tablebar__tools { display: flex; align-items: center; gap: var(--mg-space-2); margin-left: auto; }
.mg-tablebar__sort { display: none; }
.mg-tablebar > .mg-savebar { flex: 1 1 100%; }

.mg-savebar--select { position: static; width: 100%; margin: 0; min-height: 48px; padding: var(--mg-space-1) 6px var(--mg-space-1) var(--mg-space-4); box-shadow: none; }
.mg-savebar--select::before { display: none; }
.mg-savebar--select .mg-savebar__msg { margin-right: var(--mg-space-1); }
.mg-savebar--select .mg-savebar__msg b { font-weight: 800; }
.mg-savebar__end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.mg-savebar--select .mg-check { min-height: 0; }
.mg-savebar--select .mg-check input { border-color: var(--mg-on-navy-2); background: transparent; }
.mg-savebar--select .mg-check input:checked, .mg-savebar--select .mg-check input:indeterminate { background: var(--mg-on-navy); border-color: var(--mg-on-navy); }
.mg-savebar--select .mg-check input:checked::after { border-color: var(--mg-navy); }
.mg-savebar--select .mg-check input:indeterminate::after { background: var(--mg-navy); }
.mg-savebar--select .mg-link { color: var(--mg-on-navy); font-size: var(--mg-text-sm); }

.mg-table tbody th[scope="row"] { position: static; height: var(--mg-d-cell); padding: 0 var(--mg-space-3); background: transparent; box-shadow: none; border-bottom: 1px solid var(--mg-rule); font: 700 var(--mg-text-md)/1.3 var(--mg-font); color: var(--mg-ink); white-space: normal; }
.mg-table tbody th[scope="row"]:first-child { padding-left: var(--mg-space-5); }
.mg-table tbody tr:last-child th[scope="row"] { border-bottom: 0; }

.mg-table__sort { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0 calc(-1 * var(--mg-space-2)); padding: 0 var(--mg-space-2); border: 0; border-radius: var(--mg-table-radius); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mg-table__sort:hover { background: var(--mg-hover); color: var(--mg-ink); }
.mg-table__sort:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 0; }
.mg-table--rich th[aria-sort]::after { margin-left: 10px; }

.mg-table--rich { min-width: var(--mg-table-min, 0); }
.mg-table--rich td { white-space: nowrap; }
.mg-table__who { display: flex; align-items: center; gap: var(--mg-space-3); min-width: 0; }
.mg-table__pick { min-height: 0; gap: 0; }
.mg-table__name { display: grid; gap: 1px; min-width: 0; }
.mg-table__name b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.mg-table__name a { color: inherit; text-decoration: none; border-radius: 4px; }
.mg-table__name a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mg-table__name a:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-table__name small { display: var(--mg-d-note); font: 500 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-table__act { width: 56px; text-align: right; }
.mg-table__act .mg-button { margin-right: calc(-1 * var(--mg-space-2)); }
.mg-table__act .mg-button[aria-expanded="true"] { background: var(--mg-hover); }
.mg-table__muted { color: var(--mg-ink-2); font-weight: 600; }

.mg-table--pin :is(th, td):first-child { position: sticky; left: 0; z-index: calc(var(--mg-z-sticky) - 1); background: var(--mg-surface); }
.mg-table--pin thead th:first-child { z-index: calc(var(--mg-z-sticky) + 1); }
.mg-table-wrap.is-scrolled-x .mg-table--pin thead th:first-child { box-shadow: inset 0 -1.5px 0 var(--mg-rule), inset -1.5px 0 0 var(--mg-rule-strong); }
.mg-table-wrap.is-scrolled-x .mg-table--pin tbody td:first-child, .mg-table-wrap.is-scrolled-x .mg-table--pin tfoot td:first-child { box-shadow: inset -1.5px 0 0 var(--mg-rule-strong); }
.mg-table-wrap.is-scrolled-x .mg-table--pin tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--mg-ink), inset -1.5px 0 0 var(--mg-rule-strong); }

.mg-table__edit { display: inline-flex; align-items: center; gap: 6px; margin: 0 calc(-1 * var(--mg-space-2)); padding: var(--mg-space-1) var(--mg-space-2); border: 0; border-radius: var(--mg-table-radius); background: transparent; color: var(--mg-ink); font: 700 var(--mg-text-md)/1.35 var(--mg-font); text-decoration: underline dotted var(--mg-rule-strong); text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: text; }
.mg-table__edit:hover { background: var(--mg-hover); }
.mg-table__edit:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 0; }
.mg-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-1); }
.mg-cell .mg-input { width: 84px; height: var(--mg-control-sm); padding: 0 10px; text-align: right; font-weight: 700; }
.mg-cell .mg-button--icon { width: 28px; height: 28px; }
.mg-cell--error { display: inline-grid; justify-items: end; gap: var(--mg-space-1); padding: 6px 0; }
.mg-cell--error > span { display: inline-flex; gap: var(--mg-space-1); }
.mg-cell--error .mg-field__error { margin: 0; white-space: nowrap; font-size: var(--mg-text-xs); }
.mg-cell__state { display: inline-flex; align-items: center; gap: var(--mg-space-1); font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-cell__state--ok { color: var(--mg-ok-text); }
.mg-cell__state--ok.is-new { animation: mg-in-fade var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-cell__state .mg-trappen { --mg-trappen-size: 12px; color: var(--mg-ink); }
.mg-table tbody tr td:has(.mg-cell--error) { background: var(--mg-alarm-tint); }

.mg-trend { display: inline-flex; align-items: center; gap: var(--mg-space-2); }
.mg-trend svg { display: block; width: 64px; height: 22px; overflow: visible; }
.mg-trend__line { fill: none; stroke: var(--mg-chart-3); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mg-trend__end { fill: var(--mg-chart-3); }
.mg-trend .mg-delta { min-width: 46px; justify-content: center; }

.mg-table--rich tfoot td { position: sticky; bottom: 0; z-index: calc(var(--mg-z-sticky) - 1); height: var(--mg-d-cell); padding: 0 var(--mg-space-3); background: var(--mg-surface); box-shadow: inset 0 1.5px 0 var(--mg-rule-strong); font-weight: 800; white-space: nowrap; }
.mg-table--rich tfoot td:first-child { padding-left: var(--mg-space-5); z-index: var(--mg-z-sticky); }
.mg-table--rich tfoot td small { margin-right: 6px; font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }

.mg-table__skel td { height: var(--mg-d-cell); }
.mg-table__skel .mg-skel { height: 10px; }

@container mg-table (max-width: 600px) {
  .mg-tablebar__sort { display: inline-flex; }
  .mg-tablebar > .mg-filterbar { flex-basis: 100%; }
  .mg-tablebar__tools { margin-left: 0; }
  .mg-table--rich, .mg-table--rich tbody, .mg-table--rich tfoot { display: block; }
  .mg-table--rich { min-width: 0; }
  .mg-table--rich thead { display: none; }
  .mg-table--rich tbody { display: grid; gap: var(--mg-space-3); padding: 0 var(--mg-space-4) var(--mg-space-4); }
  .mg-table--rich tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; grid-template-areas: "who who who act" "hold hold hold hold" "c1 c2 c3 c3" "c4 c5 c5 c5"; gap: var(--mg-space-2) var(--mg-space-3); padding: var(--mg-space-3) var(--mg-space-4) var(--mg-space-4); border: 1.5px solid var(--mg-rule); border-radius: var(--mg-radius-card); background: var(--mg-surface); }
  .mg-table--rich tbody tr[aria-selected="true"] { border-color: var(--mg-ink); background: var(--mg-hover); }
  .mg-table--rich tbody tr:hover td, .mg-table--rich tbody tr[aria-selected="true"] td { background: transparent; }
  .mg-table--rich tbody td, .mg-table--pin tbody td:first-child { position: static; display: block; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; white-space: normal; }
  .mg-table--rich tbody tr[aria-selected="true"] td:first-child { box-shadow: none; }
  .mg-table--rich td[data-col="who"] { grid-area: who; }
  .mg-table--rich td[data-col="hold"] { grid-area: hold; margin-top: -6px; padding-left: calc(var(--mg-space-5) + var(--mg-d-avatar) + 2 * var(--mg-space-3)); font: 500 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
  .mg-table--rich td[data-col="c1"] { grid-area: c1; } .mg-table--rich td[data-col="c2"] { grid-area: c2; } .mg-table--rich td[data-col="c3"] { grid-area: c3; }
  .mg-table--rich td[data-col="c4"] { grid-area: c4; } .mg-table--rich td[data-col="c5"] { grid-area: c5; justify-self: end; align-self: end; }
  .mg-table--rich td[data-col="act"] { grid-area: act; width: auto; }
  .mg-table--rich td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--mg-space-1); font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
  .mg-table--rich tbody td[data-num] { text-align: left; font-size: var(--mg-text-lg); }
  .mg-table--rich .mg-cell { justify-content: flex-start; }
  .mg-table--rich tfoot { margin: 0 var(--mg-space-4) var(--mg-space-4); padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-card); background: var(--mg-sunken); }
  .mg-table--rich tfoot tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mg-space-2) var(--mg-space-3); }
  .mg-table--rich tfoot td, .mg-table--rich tfoot td[data-num] { grid-area: auto; border: 0; text-align: left; }
  .mg-table--rich tfoot td[data-col="who"] { grid-area: auto; grid-column: 1 / -1; }
  .mg-table--rich tfoot td, .mg-table--rich tfoot td:first-child { position: static; height: auto; padding: 0; background: transparent; box-shadow: none; }
  .mg-table--rich tfoot td:empty { display: none; }
}

.mg-goal--target .mg-goal__end { right: auto; left: calc(min(var(--target, 1), 1) * 100%); margin-left: -7px; }
.mg-goal__fc { position: absolute; top: 50%; left: calc(min(var(--value), 1) * 100%); width: calc(max(min(var(--fc, 0), 1) - min(var(--value), 1), 0) * 100%); height: 0; margin-top: -1px; border-top: 2px dashed var(--mg-ink-2); }
.mg-goal__fcdot { position: absolute; top: 50%; left: calc(min(var(--fc, 0), 1) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--mg-radius-dot); background: var(--mg-surface); box-shadow: inset 0 0 0 2px var(--mg-ink-2); }
.mg-card--navy .mg-goal__fc { border-top-color: var(--mg-on-navy-2); }
.mg-card--navy .mg-goal__fcdot { background: var(--mg-navy); box-shadow: inset 0 0 0 2px var(--mg-on-navy-2); }
.mg-goal--sm { gap: var(--mg-space-1); }
.mg-goal--sm .mg-goal__read { font: 700 var(--mg-text-sm)/1.2 var(--mg-font); }
.mg-goal--sm .mg-goal__num { font: 800 var(--mg-text-md)/1.2 var(--mg-font); letter-spacing: 0; }
.mg-goal--sm .mg-goal__of { font: 500 var(--mg-text-xs)/1.2 var(--mg-font); }
.mg-goal--sm .mg-goal__stem { height: 14px; }
.mg-goal--sm .mg-goal__stem::before, .mg-goal--sm .mg-goal__fill { height: var(--mg-stem); margin-top: calc(var(--mg-stem) / -2); }
.mg-goal--sm .mg-goal__dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-goal--sm .mg-goal__end { width: 10px; height: 10px; margin-top: -5px; box-shadow: inset 0 0 0 2px var(--mg-ink); }
.mg-goal--sm.mg-goal--target .mg-goal__end { margin-left: -5px; }
.mg-goal--sm .mg-goal__fcdot { width: 8px; height: 8px; margin: calc(-1 * var(--mg-space-1)) 0 0 calc(-1 * var(--mg-space-1)); }
.mg-table tbody tr:is(:hover, .is-selected, [aria-selected="true"]) .mg-goal--sm .mg-goal__dot { box-shadow: 0 0 0 3px var(--mg-hover); }

.mg-seg--sm { padding: 2px; }
.mg-seg--sm .mg-seg__opt { height: calc(var(--mg-control-sm) - 4px); padding: 0 var(--mg-space-3); font-size: var(--mg-text-sm); }

dialog.mg-drawer--modal { position: fixed; inset: 0 0 0 auto; z-index: var(--mg-z-dialog); width: min(var(--mg-drawer-w, 400px), 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--mg-ink); overflow: hidden; }
dialog.mg-drawer--modal:not([open]) { display: none; }
dialog.mg-drawer--modal::backdrop { background: var(--mg-scrim); }
dialog.mg-drawer--modal[open] { animation: mg-drawer-in var(--mg-dur-base) var(--mg-ease-enter) both; }
dialog.mg-drawer--modal[open]::backdrop { animation: mg-in-fade var(--mg-dur-base) linear both; }
dialog.mg-drawer--modal [hidden] { display: none; }
dialog.mg-drawer--modal > form { display: contents; }
dialog.mg-drawer--modal > form > .mg-drawer__body { display: grid; align-content: start; gap: var(--mg-space-5); padding-top: var(--mg-space-5); padding-bottom: var(--mg-space-5); }
@keyframes mg-drawer-in { from { opacity: 0; transform: translateX(24px); } }
.mg-drawer--wide { --mg-drawer-w: 960px; }
.mg-drawer__head .mg-tabs { flex: 1 1 100%; margin: var(--mg-space-1) 0 calc(-1 * var(--mg-space-4) - 1.5px); border-bottom: 0; }
.mg-drawer__head:has(.mg-tabs) { flex-wrap: wrap; padding-bottom: var(--mg-space-4); }
.mg-drawer__nav { display: flex; align-items: center; gap: var(--mg-space-1); flex: 1 1 100%; margin: calc(-1 * var(--mg-space-2)) 0 var(--mg-space-1); }
.mg-drawer__nav .mg-small { margin-right: auto; }
@media (max-width: 720px) {
  dialog.mg-drawer--modal { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 92dvh; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.mg-drawer--modal[open] { animation-name: mg-sheet-in; animation-duration: var(--mg-dur-rise); animation-timing-function: var(--mg-ease-standard); }
}
dialog.mg-drawer--modal.mg-drawer--sheet { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 92dvh; border-radius: var(--mg-radius-sheet) var(--mg-radius-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
dialog.mg-drawer--modal.mg-drawer--sheet[open] { animation-name: mg-sheet-in; animation-duration: var(--mg-dur-rise); animation-timing-function: var(--mg-ease-standard); }
@media (prefers-reduced-motion: reduce) { dialog.mg-drawer--modal[open] { animation-name: mg-in-fade !important; animation-duration: var(--mg-dur-base) !important; } }
dialog.mg-drawer--modal:is([data-motion="reduce"], [data-motion="reduce"] *)[open] { animation-name: mg-in-fade !important; animation-duration: var(--mg-dur-base) !important; }
dialog.mg-drawer--modal:is([data-motion="off"], [data-motion="off"] *)[open], dialog.mg-drawer--modal:is([data-motion="off"], [data-motion="off"] *)[open]::backdrop { animation: none !important; }

.mg-chip--sm { height: 22px; gap: var(--mg-space-1); padding: 0 var(--mg-space-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); }
.mg-chip--sm svg { flex: none; width: 12px; height: 12px; }
button.mg-chip, a.mg-chip { position: relative; border: 0; cursor: pointer; text-decoration: none; }
button.mg-chip { margin: 0; font: 700 var(--mg-text-sm)/1 var(--mg-font); }
button.mg-chip.mg-chip--sm { font: 700 var(--mg-text-xs)/1 var(--mg-font); }
button.mg-chip::after, a.mg-chip::after { content: ""; position: absolute; inset: calc(-1 * var(--mg-space-1)) 0; }
button.mg-chip:hover:not(:disabled), a.mg-chip:hover { background: var(--mg-hover); }
button.mg-chip:focus-visible, a.mg-chip:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
button.mg-chip[aria-pressed="true"], button.mg-chip[aria-pressed="true"]:hover:not(:disabled) { background: var(--mg-ink); color: var(--mg-on-ink); }
button.mg-chip:disabled, button.mg-chip[aria-disabled="true"], a.mg-chip[aria-disabled="true"] { color: var(--mg-ink-2); cursor: not-allowed; }
button.mg-chip:disabled:hover, button.mg-chip[aria-disabled="true"]:hover, a.mg-chip[aria-disabled="true"]:hover { background: var(--mg-sunken); }
@media (forced-colors: active) { button.mg-chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.mg-table tbody th[scope="rowgroup"] { position: static; height: 40px; padding: 0 var(--mg-space-3) 0 var(--mg-space-4); background: var(--mg-sunken); box-shadow: none; border-bottom: 1px solid var(--mg-rule); font: 700 var(--mg-text-sm)/1.2 var(--mg-font); color: var(--mg-ink); text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mg-table tbody + tbody th[scope="rowgroup"] { box-shadow: inset 0 1px 0 var(--mg-rule); }
.mg-table__groupbtn { display: inline-flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-control-sm); margin-left: -6px; padding: 0 var(--mg-space-2) 0 6px; border: 0; border-radius: var(--mg-table-radius); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mg-table__groupbtn:hover { background: var(--mg-hover); }
.mg-table__groupbtn:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 0; }
.mg-table__groupbtn > svg { flex: none; width: 16px; height: 16px; color: var(--mg-ink-2); transition: transform var(--mg-motion-quick); }
.mg-table__groupbtn[aria-expanded="false"] > svg { transform: rotate(-90deg); }
.mg-table__groupnote { margin-left: var(--mg-space-2); font: 600 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-table__group-act { margin-left: var(--mg-space-3); }
@media (prefers-reduced-motion: reduce) { .mg-table__groupbtn > svg { transition: none !important; } }
:is(.mg-root[data-motion="reduce"], .mg-root[data-motion="off"], [data-motion="reduce"] .mg-root, [data-motion="off"] .mg-root) .mg-table__groupbtn > svg { transition: none !important; }
@container mg-table (max-width: 600px) {
  .mg-table--rich tbody tr.mg-table__grouprow { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .mg-table--rich tbody th[scope="rowgroup"] { display: block; height: auto; padding: var(--mg-space-3) 0 0; background: transparent; border: 0; box-shadow: none; }
  .mg-table--rich td[data-col="rest"] { display: none; }
  .mg-table--rich td:is([data-col="note"], [data-col="wide"]) { grid-column: 1 / -1; }
}

.mg-compare { container: mg-compare / inline-size; display: grid; gap: var(--mg-space-5); min-width: 0; }
.mg-compare__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); }
.mg-compare__picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.mg-compare__pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--mg-space-3); min-width: 232px; min-height: 52px; padding: 6px var(--mg-space-3) 6px 14px; border: 1.5px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); background: var(--mg-surface); color: var(--mg-ink); font: inherit; text-align: left; cursor: pointer; }
.mg-compare__pick:hover { background: var(--mg-hover); }
.mg-compare__pick:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-compare__pick > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.mg-compare__pick small { font: 700 var(--mg-text-xs)/1.2 var(--mg-font); color: var(--mg-ink-2); }
.mg-compare__pick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--mg-text-md)/1.25 var(--mg-font); }
.mg-compare__pick > svg { color: var(--mg-ink-2); }
.mg-compare__mark { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: var(--mg-radius-dot); background: var(--mg-chart-3); }
.mg-compare__mark--a { background: var(--mg-surface); box-shadow: inset 0 0 0 2.5px var(--mg-chart-2); }
.mg-compare__note { font: 600 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-compare__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--mg-space-6); align-items: start; }
.mg-compare__key { display: inline-flex; align-items: center; gap: 6px; }
.mg-table--compare td[data-a] { font-weight: 600; color: var(--mg-ink-2); }
.mg-table--compare td[data-b] { font-weight: 800; }
.mg-diff { display: inline-flex; align-items: center; gap: var(--mg-space-2); white-space: nowrap; }
.mg-diff__word { font: 600 var(--mg-text-sm)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-delta--flat::before { content: "="; width: auto; height: auto; background: none; font-weight: 800; }

.mg-chart__prev { fill: var(--mg-surface); stroke: var(--mg-chart-2); stroke-width: 2.5; }

.mg-table--matrix { table-layout: fixed; }
.mg-table--matrix thead th { height: auto; padding-top: var(--mg-space-2); padding-bottom: var(--mg-space-2); vertical-align: bottom; white-space: normal; }
.mg-table--matrix thead th:first-child { width: 132px; }
.mg-mxhead { display: grid; gap: var(--mg-space-1); justify-items: end; text-align: right; }
.mg-mxhead b { display: flex; align-items: center; gap: 2px; font: 800 var(--mg-text-sm)/1.25 var(--mg-font); color: var(--mg-ink); }
.mg-mxhead .mg-button { width: 24px; height: 24px; margin-right: calc(-1 * var(--mg-space-1)); }
.mg-mx { display: grid; justify-items: end; gap: var(--mg-space-1); padding: 6px 0; }
.mg-mx__v { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; white-space: nowrap; }
.mg-mx__stem { display: block; width: 100%; max-width: 120px; height: var(--mg-stem); border-radius: var(--mg-radius-dot); background: var(--mg-sunken); }
.mg-mx__stem i { display: block; width: calc(var(--v) * 100%); height: 100%; margin-left: auto; border-radius: var(--mg-radius-dot); background: var(--mg-chart-2); }
.mg-mx[data-best] .mg-mx__stem i { background: var(--mg-chart-3); }
.mg-mx__best { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-ink); color: var(--mg-on-ink); font: 800 var(--mg-text-xs)/1 var(--mg-font); }

@container mg-compare (max-width: 860px) {
  .mg-compare__body { grid-template-columns: minmax(0, 1fr); }
}
@container mg-compare (max-width: 560px) {
  .mg-compare__picks { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .mg-compare__pick { min-width: 0; padding-inline: 10px; column-gap: var(--mg-space-2); }
}

.mg-stream { display: grid; gap: var(--mg-d-gap); min-width: 0; }
.mg-post--new { grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr); align-items: start; }
.mg-post--new .mg-composer { margin-bottom: 0; }
.mg-post--new .mg-composer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2); }
.mg-post--new .mg-select { width: auto; height: var(--mg-control-sm); font-size: var(--mg-text-sm); font-weight: 700; }
.mg-post--new .mg-composer__count { font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }

.mg-post { display: grid; gap: var(--mg-space-3); padding: var(--mg-d-pad); }
.mg-post__head { display: grid; grid-template-columns: var(--mg-d-avatar) minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-3); }
.mg-post__who { display: grid; gap: 2px; min-width: 0; }
.mg-post__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 var(--mg-text-md)/1.25 var(--mg-font); }
.mg-post__who small { font: 500 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-post__end { display: flex; align-items: center; gap: var(--mg-space-1); }
.mg-post__title { margin: 0; font: 800 var(--mg-text-lg)/1.3 var(--mg-font); letter-spacing: -0.01em; }
.mg-post__text { margin: 0; max-width: var(--mg-measure); font: 500 var(--mg-text-md)/1.55 var(--mg-font); }
.mg-post__media { margin: 0; overflow: hidden; border-radius: var(--mg-radius-field); background: var(--mg-sunken); aspect-ratio: 16 / 9; }
.mg-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-post__auto { margin: 0 calc(-1 * var(--mg-d-pad)); }
.mg-post__auto .mg-feed__item { padding-block: 0; }
.mg-post__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-3); padding-top: var(--mg-space-3); border-top: 1.5px solid var(--mg-rule); }
.mg-post__react { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mg-post__by { font: 500 var(--mg-text-xs)/1.35 var(--mg-font); color: var(--mg-ink-2); }
.mg-post__by b { font-weight: 700; color: var(--mg-ink); }
.mg-post__more { margin-left: auto; }
.mg-post__more svg { transition: transform var(--mg-motion-quick); }
.mg-post__more[aria-expanded="true"] svg { transform: rotate(180deg); }

.mg-react { display: inline-flex; align-items: center; gap: 6px; height: var(--mg-control-sm); padding: 0 var(--mg-space-3) 0 10px; border: 1.5px solid var(--mg-rule); border-radius: var(--mg-radius-dot); background: var(--mg-surface); color: var(--mg-ink); font: 700 var(--mg-text-sm)/1 var(--mg-font); white-space: nowrap; cursor: pointer; }
.mg-react svg { flex: none; width: 16px; height: 16px; color: var(--mg-ink-2); }
.mg-react:hover { background: var(--mg-hover); border-color: var(--mg-hover); }
.mg-react:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-react[aria-pressed="true"] { background: var(--mg-ink); border-color: var(--mg-ink); color: var(--mg-on-ink); }
.mg-react[aria-pressed="true"] svg { color: var(--mg-on-ink); }
.mg-react.is-new svg { animation: mg-pop var(--mg-dur-base) var(--mg-ease-rise) both; }
.mg-react__n:empty { display: none; }

.mg-comments { display: grid; gap: var(--mg-space-3); margin: 0; padding: 0; list-style: none; }
.mg-comments[data-state="open"] { animation: mg-in-rise var(--mg-dur-base) var(--mg-ease-enter) both; }
.mg-comment { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--mg-space-2); }
.mg-comment .mg-avatar { width: 28px; height: 28px; }
.mg-comment__bubble { width: fit-content; max-width: 100%; padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 500 var(--mg-text-md)/1.45 var(--mg-font); }
.mg-comment__bubble b { display: block; font: 800 var(--mg-text-sm)/1.3 var(--mg-font); }
.mg-comment__meta { display: flex; align-items: center; gap: var(--mg-space-3); margin-top: var(--mg-space-1); padding-left: var(--mg-space-3); font: 600 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-comment__meta button { padding: 2px 0; border: 0; background: none; color: var(--mg-ink-2); font: 700 var(--mg-text-xs)/1 var(--mg-font); cursor: pointer; border-radius: 4px; }
.mg-comment__meta button:hover { color: var(--mg-ink); text-decoration: underline; text-underline-offset: 3px; }
.mg-comment__meta button:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-comments__more { padding-left: 36px; }
.mg-comments__more .mg-button { margin-left: -14px; }
.mg-reply { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--mg-space-2); }
.mg-reply .mg-avatar { width: 28px; height: 28px; }
.mg-reply .mg-input { height: var(--mg-control-sm); border-radius: var(--mg-radius-dot); }
[data-density="compact"] .mg-post { gap: var(--mg-space-2); }
[data-density="compact"] .mg-post__by { display: none; }

.mg-empty--error .mg-empty__title, .mg-empty--compact .mg-empty__title { font-size: var(--mg-text-lg); }
.mg-empty__mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--mg-space-1); border-radius: var(--mg-radius-dot); background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mg-space-2); }
.mg-empty__ref { margin: var(--mg-space-1) 0 0; font: 600 var(--mg-text-xs)/1.3 var(--mg-font); color: var(--mg-ink-2); }
.mg-empty--compact { padding: var(--mg-space-5) var(--mg-space-4); }
.mg-vslow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-2) var(--mg-space-3); margin: 0 var(--mg-d-pad) var(--mg-d-pad); padding: var(--mg-space-3) var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-sunken); font: 600 var(--mg-text-sm)/1.4 var(--mg-font); color: var(--mg-ink); }
.mg-vslow .mg-button { margin-left: auto; }
.mg-skelrows { display: grid; gap: 0; padding: var(--mg-space-2) 0; }
.mg-skelrows > div { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--mg-space-4); height: var(--mg-d-cell); padding: 0 var(--mg-d-pad); border-bottom: 1px solid var(--mg-rule); }
.mg-skelrows > div:last-child { border-bottom: 0; }
.mg-skelrows .mg-skel { height: 10px; }
.mg-skelrows .mg-skel--dot { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
  .mg-react.is-new svg, .mg-cell__state--ok.is-new, .mg-comments[data-state="open"] { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
  .mg-post__more svg { transition: none !important; }
}
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) :is(.mg-react.is-new svg, .mg-cell__state--ok.is-new, .mg-comments[data-state="open"]) { animation-name: mg-in-fade !important; animation-delay: 0s !important; animation-duration: var(--mg-dur-base) !important; animation-timing-function: linear !important; }
:is(.mg-root[data-motion="reduce"], [data-motion="reduce"] .mg-root, [data-motion="reduce"].mg-root) .mg-post__more svg { transition: none !important; }
:is(.mg-root[data-motion="off"], [data-motion="off"] .mg-root) :is(.mg-react svg, .mg-cell__state, .mg-comments, .mg-post__more svg) { animation: none !important; transition: none !important; }

@media (forced-colors: active) {
  .mg-react, .mg-compare__pick, .mg-post, .mg-tablebox, .mg-pagehead__dock.is-stuck { border: 1px solid CanvasText; }
  .mg-react[aria-pressed="true"], .mg-mx__best { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .mg-react[aria-pressed="true"] svg { color: HighlightText; }
  .mg-compare__mark, .mg-mx[data-best] .mg-mx__stem i, .mg-trend__end { forced-color-adjust: none; background: CanvasText; fill: CanvasText; }
  .mg-compare__mark--a { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 2.5px CanvasText; }
  .mg-table--pin :is(th, td):first-child { border-right: 1px solid CanvasText; }
  .mg-empty__mark { border: 2px solid CanvasText; }
}

@media (pointer: coarse) {
  .mg-react, .mg-table__sort, .mg-compare__pick { min-height: var(--mg-control-touch); }
  .mg-table__act .mg-button { width: var(--mg-control-touch); height: var(--mg-control-touch); }
}

.mg-board__row--pick { margin: 2px var(--mg-space-2); padding-inline: calc(var(--mg-space-5) - var(--mg-space-2)); border-radius: var(--mg-radius-dot); background: var(--mg-hover); box-shadow: inset 3px 0 0 var(--mg-ink); }
.mg-board__row--pick .mg-board__stem::before { background: var(--mg-ink); }
.mg-board__row--pick .mg-avatar { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-board__name:is(button) { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.mg-board__name:is(button):hover { text-decoration: underline; text-decoration-color: var(--mg-rule-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mg-board__name:is(button):focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; border-radius: 4px; }

.mg-hours__col--before .mg-hours__now, .mg-hours__col--before .mg-hours__now::after { background: var(--mg-rule-strong); }

.mg-pins i.is-gap { visibility: hidden; }

.mg-strip { position: relative; display: grid; gap: var(--mg-space-2); padding: 0 var(--mg-space-2); }
.mg-strip__rules, .mg-strip__axis { position: relative; height: 18px; font: 700 var(--mg-text-xs)/1 var(--mg-font); color: var(--mg-ink-2); }
.mg-strip__rule { position: absolute; top: 2px; transform: translateX(calc(-100% - 8px)); white-space: nowrap; }
.mg-strip__rule--goal { transform: translateX(8px); }
.mg-strip__line { position: absolute; top: -10px; bottom: 0; width: 0; border-left: 1.5px dashed var(--mg-ink-2); }
.mg-strip__plot { position: relative; border-bottom: 1.5px solid var(--mg-rule); }
.mg-strip__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--mg-radius-dot); background: var(--mg-chart-2); box-shadow: 0 0 0 2px var(--mg-surface); }
.mg-strip__dot--ok { background: var(--mg-ok); }
.mg-strip__dot--warn { background: var(--mg-warn); }
.mg-strip__dot--pick { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--mg-ink); box-shadow: 0 0 0 3px var(--mg-surface); }
.mg-strip__dot.is-faded { opacity: 0.28; }
.mg-strip__dot[data-mg-row] { cursor: pointer; }
.mg-strip__dot[data-mg-row]:hover { box-shadow: 0 0 0 2px var(--mg-surface), 0 0 0 4px var(--mg-ink); }
.mg-strip__axis span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.mg-strip__axis span:first-child { transform: none; }
.mg-strip__axis span:last-child { transform: translateX(-100%); }

.mg-chart__day { fill: var(--mg-sunken); }
.mg-chart__day--off { fill: transparent; stroke: var(--mg-rule-strong); stroke-width: 1.5; stroke-dasharray: 2 3; }
.mg-chart__day--none { fill: var(--mg-rule); }
.mg-chart__day--today { stroke: var(--mg-ink); stroke-width: 2.5; stroke-dasharray: none; }
.mg-legend .ok { background: var(--mg-ok); }
.mg-legend .warn { background: var(--mg-warn); }
.mg-legend .idle { background: var(--mg-chart-2); }
.mg-legend .none { border-radius: 3px; background: var(--mg-rule); }
.mg-legend .off { border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--mg-rule-strong); }

.mg-pattern { display: grid; gap: var(--mg-space-4); padding: var(--mg-space-6); color: var(--mg-ink); background: var(--mg-surface); font-family: var(--mg-font); }
.mg-pattern__row, .mg-pattern__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); }
.mg-pattern__stack { display: grid; gap: var(--mg-space-3); min-width: 0; }
.mg-pattern__row > .mg-field { flex: 1; min-width: min(100%, 16ch); }
.mg-pattern [hidden] { display: none; }
.mg-pattern .mg-button { white-space: normal; min-height: var(--mg-control); height: auto; padding-block: var(--mg-space-2); }
.mg-savebar--wrap { flex-wrap: wrap; border-radius: var(--mg-radius-card); bottom: calc(var(--mg-space-3) + env(safe-area-inset-bottom, 0px)); }
.mg-savebar--wrap .mg-savebar__msg { flex: 1 1 16ch; white-space: normal; }
.mg-savebar--auto { position: static; margin: 0; box-shadow: none; }
.mg-choice { position: relative; min-width: 0; }
.mg-choice__chips { display: contents; }
.mg-choice .mg-chip { max-width: 100%; height: auto; min-height: var(--mg-control); overflow-wrap: anywhere; }
.mg-choice .mg-chip[data-armed] { color: var(--mg-on-ink); background: var(--mg-ink); }
.mg-choice .mg-chip__remove { min-width: var(--mg-control); min-height: var(--mg-control); color: inherit; }
.mg-choice__options { position: absolute; inset-inline: 0; top: 100%; z-index: var(--mg-z-popover); max-height: 40vh; overflow: auto; padding: var(--mg-space-2); background: var(--mg-raised); border: 1px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); box-shadow: var(--mg-shadow-float); }
.mg-choice__options[hidden] { display: none; }
.mg-choice__option { display: flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-control); padding: var(--mg-space-2) var(--mg-space-3); border-radius: var(--mg-radius-dot); cursor: pointer; }
.mg-choice__option[data-active] { background: var(--mg-hover); outline: 2px solid var(--mg-focus); outline-offset: -2px; }
.mg-choice__option[aria-selected="true"] { font-weight: 800; box-shadow: inset var(--mg-space-1) 0 var(--mg-ink); }
.mg-choice__option[aria-disabled="true"] { color: var(--mg-ink-2); cursor: default; }
.mg-secret { display: grid; gap: var(--mg-space-3); padding: var(--mg-space-4); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-secret__value { font-family: var(--mg-font); overflow-wrap: anywhere; }
.mg-connection-card { display: grid; gap: var(--mg-space-4); padding: var(--mg-space-5); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-card); background: var(--mg-surface); }
.mg-connection-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mg-space-3); }
.mg-mapping { display: grid; gap: var(--mg-space-3); padding: var(--mg-space-4); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-mapping__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--mg-space-3); }
.mg-mapping[data-state="conflict"], .mg-mapping[data-state="missing"] { border-color: var(--mg-alarm); }
.mg-repeatable { display: grid; gap: var(--mg-space-3); }
.mg-repeatable__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--mg-space-3); padding: var(--mg-space-3); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-repeatable__row > .mg-field { flex: 1 1 16ch; }
.mg-access { display: grid; gap: var(--mg-space-3); }
.mg-access__role { display: flex; flex-wrap: wrap; gap: var(--mg-space-4); margin: 0; padding: var(--mg-space-4); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-access__role legend { padding-inline: var(--mg-space-2); font-weight: 800; }
.mg-access .mg-check { min-height: var(--mg-control); }
.mg-table--form [data-selected], .mg-pattern [data-mg-row][data-selected] { background: var(--mg-hover); box-shadow: inset var(--mg-space-1) 0 var(--mg-ink); }
.mg-table--form input, .mg-table--form select { min-width: 10ch; }
.mg-table--form caption { text-align: start; padding: var(--mg-space-3); font-weight: 800; }
.mg-week--interactive { min-width: 48rem; }
.mg-week--interactive [data-mg-cell] { position: relative; min-height: var(--mg-control); padding: var(--mg-space-2); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-dot); background: var(--mg-surface); color: var(--mg-ink); font: inherit; text-align: start; cursor: pointer; }
.mg-week--interactive [data-mg-cell]:focus-visible, .mg-pipe--dynamic [data-mg-card]:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: -2px; }
.mg-week--interactive [data-lifted], .mg-pipe--dynamic [data-lifted] { border: 2px solid var(--mg-ink); box-shadow: var(--mg-shadow-float); }
.mg-pipe--dynamic { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); overflow-x: auto; scroll-snap-type: x proximity; }
.mg-pipe--dynamic [data-mg-stage] { scroll-snap-align: start; }
.mg-pipe--dynamic [data-drop-target] { outline: 2px dashed var(--mg-ink); outline-offset: -2px; }
.mg-pipe--dynamic [data-mg-move-card] { grid-column: 1 / -1; }
.mg-calendar { display: grid; gap: var(--mg-space-4); min-width: 0; }
.mg-calendar__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mg-space-3); align-items: center; }
.mg-calendar__scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(10rem, 1fr)); }
.mg-calendar[data-view="day"] .mg-calendar__days { grid-template-columns: minmax(0, 1fr); }
.mg-calendar[data-view="month"] .mg-calendar__days { grid-template-columns: repeat(7, minmax(8rem, 1fr)); }
.mg-calendar__day { min-width: 0; padding: var(--mg-space-2); border-inline-end: 1px solid var(--mg-rule); border-block-end: 1px solid var(--mg-rule); }
.mg-calendar__date { position: sticky; top: 0; z-index: var(--mg-z-sticky); margin: 0; padding: var(--mg-space-2); background: var(--mg-surface); color: var(--mg-ink); font-size: var(--mg-text-sm); }
.mg-calendar__date[aria-current="date"]::after { content: ''; display: inline-block; width: var(--mg-dot); height: var(--mg-dot); margin-left: var(--mg-space-2); border-radius: var(--mg-radius-dot); background: var(--mg-blue); }
.mg-calendar__overlap { display: flex; align-items: stretch; gap: var(--mg-space-1); }
.mg-calendar__event { flex: 1; display: grid; gap: var(--mg-space-1); min-width: 0; margin-block: var(--mg-space-2); padding: var(--mg-space-3); border: 1px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); background: var(--mg-sunken); color: var(--mg-ink); font: 600 var(--mg-text-xs)/1.5 var(--mg-font); text-align: start; overflow-wrap: anywhere; }
.mg-calendar__event[aria-pressed="true"] { border-color: var(--mg-ink); box-shadow: inset var(--mg-space-1) 0 var(--mg-ink); }
.mg-calendar__event:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-task-list { display: grid; gap: var(--mg-space-3); margin: 0; padding: 0; list-style: none; }
.mg-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--mg-space-3); padding: var(--mg-space-4); border-bottom: 1px solid var(--mg-rule); align-items: start; }
.mg-task__meta { display: flex; flex-wrap: wrap; gap: var(--mg-space-2) var(--mg-space-4); font-size: var(--mg-text-xs); color: var(--mg-ink-2); }
.mg-task[data-state="done"] .mg-task__title { text-decoration: line-through; }
.mg-document { display: grid; gap: var(--mg-space-3); min-width: 0; }
.mg-document__frame { width: 100%; min-height: 24rem; border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); background: var(--mg-surface); }
.mg-document__trust { display: flex; flex-wrap: wrap; gap: var(--mg-space-3); align-items: center; }
.mg-compose--signature { max-width: var(--mg-measure); box-shadow: none; border: 1px solid var(--mg-rule); }
.mg-compose--signature .mg-compose__sig[contenteditable="true"] { user-select: text; color: var(--mg-ink); min-height: 8rem; }
.mg-compose--signature .mg-compose__sig[contenteditable="false"] { user-select: text; }
.mg-rule--single { display: grid; gap: var(--mg-space-3); }
.mg-rule--single fieldset { display: flex; flex-wrap: wrap; gap: var(--mg-space-3); padding: var(--mg-space-4); margin: 0; border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-rule--single .mg-field { flex: 1 1 14ch; }
.mg-template--plain { display: grid; gap: var(--mg-space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mg-template--plain .mg-prose { overflow-wrap: anywhere; }
.mg-mail__smartfolders { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
.mg-mail__smartfolders [aria-current="page"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-outbox--parity { display: grid; gap: var(--mg-space-3); }
.mg-outbox--parity .mg-pattern__row { padding: var(--mg-space-3); border-bottom: 1px solid var(--mg-rule); }
.mg-syncbar--metadata { display: grid; gap: var(--mg-space-3); padding: var(--mg-space-4); border-radius: var(--mg-radius-field); background: var(--mg-warn-tint); color: var(--mg-warn-text); }
@media (max-width: 760px) {
  .mg-pattern { padding: var(--mg-space-4); }
  .mg-mapping__pair, .mg-template--plain { grid-template-columns: minmax(0, 1fr); }
  .mg-mapping__arrow { display: none; }
  .mg-access__role { flex-direction: column; }
  .mg-task { grid-template-columns: auto minmax(0, 1fr); }
  .mg-task > .mg-button { grid-column: 2; justify-self: start; }
  .mg-calendar__overlap { flex-direction: column; }
}
@media (pointer: coarse) {
  .mg-pattern .mg-button, .mg-pattern input, .mg-pattern select, .mg-pattern .mg-tool, .mg-pattern .mg-check, .mg-choice .mg-chip__remove, .mg-choice__option, .mg-week--interactive [data-mg-cell] { min-height: var(--mg-control-touch); }
}
@media (forced-colors: active) {
  .mg-choice__option[aria-selected="true"], .mg-pattern [data-selected], .mg-week--interactive [data-lifted], .mg-pipe--dynamic [data-lifted], .mg-pipe--dynamic [data-drop-target] { outline: 2px solid CanvasText; outline-offset: -2px; }
  .mg-calendar__event[aria-pressed="true"], .mg-mail__smartfolders [aria-current="page"] { outline: 2px solid Highlight; }
  .mg-choice .mg-chip[data-armed] { outline: 2px solid Highlight; }
}

.mg-document__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: inherit; }

.mg-view__state[hidden], .mg-view__content[hidden], [data-mg-view-content][hidden] { display: none; }
.mg-view__skeleton { display: grid; gap: var(--mg-space-4); padding: var(--mg-space-5); }
.mg-view__skeleton > .mg-skel { min-height: var(--mg-control); }
.mg-view__skeleton--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.mg-view__skeleton--cards > .mg-skel, .mg-view__skeleton--kpi > .mg-skel { min-height: var(--mg-space-9); }
.mg-view__skeleton--table { gap: var(--mg-space-2); }
.mg-view__state .mg-vslow { margin: var(--mg-space-3) 0; }
.mg-view__state .mg-vslow .mg-empty__title { font-size: var(--mg-text-md); }
.mg-view__state .mg-vslow .mg-empty__text { margin: 0; }
.mg-binding, .mg-question, .mg-richtext, .mg-rank-appearance { display: grid; gap: var(--mg-space-4); padding: var(--mg-space-4); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-card); min-width: 0; }
.mg-binding__current { padding: var(--mg-space-3); background: var(--mg-sunken); border-radius: var(--mg-radius-field); overflow-wrap: anywhere; }
.mg-binding__context { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16ch), 1fr)); gap: var(--mg-space-3); margin: 0; }
.mg-binding__context dt { color: var(--mg-ink-2); font-size: var(--mg-text-xs); }
.mg-binding__context dd { margin: 0; overflow-wrap: anywhere; }
.mg-person-matrix { overflow: auto; max-height: 70vh; border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); }
.mg-person-matrix table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 42rem; }
.mg-person-matrix caption { text-align: start; padding: var(--mg-space-4); font-weight: 800; }
.mg-person-matrix th, .mg-person-matrix td { padding: var(--mg-space-3); text-align: start; border-block-end: 1px solid var(--mg-rule); background: var(--mg-surface); }
.mg-person-matrix thead th { position: sticky; top: 0; z-index: var(--mg-z-sticky); background: var(--mg-sunken); }
.mg-person-matrix tbody th { position: sticky; left: 0; z-index: 1; }
.mg-person-matrix [data-selected] th, .mg-person-matrix [data-selected] td { background: var(--mg-hover); }
.mg-person-matrix label { display: flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-control); }
.mg-person-matrix input { accent-color: var(--mg-ink); }
.mg-person-matrix .mg-select { min-width: 14ch; }
.mg-flow { display: grid; gap: var(--mg-space-4); margin: 0; padding: 0; list-style: none; }
.mg-flow__step { display: grid; gap: var(--mg-space-3); padding: var(--mg-space-4); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-card); }
.mg-flow__step[aria-current="step"] { border-color: var(--mg-ink); box-shadow: inset var(--mg-space-1) 0 var(--mg-ink); }
.mg-flow__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mg-space-3); align-items: center; }
.mg-flow__step label { display: flex; align-items: center; gap: var(--mg-space-2); min-height: var(--mg-control); }
.mg-flow__step input { accent-color: var(--mg-ink); }
.mg-richtext__toolbar { display: flex; flex-wrap: wrap; gap: var(--mg-space-2); }
.mg-richtext__toolbar [aria-pressed="true"] { background: var(--mg-ink); color: var(--mg-on-ink); }
.mg-richtext__body { min-height: 10rem; padding: var(--mg-space-3); border: 1px solid var(--mg-rule-strong); border-radius: var(--mg-radius-field); overflow-wrap: anywhere; }
.mg-richtext__body:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; }
.mg-richtext__body[aria-invalid="true"] { border-color: var(--mg-alarm); }
.mg-question__answers { display: grid; gap: var(--mg-space-3); margin: 0; padding: 0; border: 0; }
.mg-question__answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mg-space-3); }
.mg-question__answer .mg-field { flex: 1 1 16ch; }
.mg-rank-appearance__sample { display: flex; align-items: center; gap: var(--mg-space-3); padding: var(--mg-space-4); background: var(--mg-sunken); border-radius: var(--mg-radius-field); }
.mg-rank-appearance__mark { width: var(--mg-space-4); height: var(--mg-space-8); border-radius: var(--mg-radius-dot); background: var(--mg-ink); }
[data-rank-preset="neutral"] .mg-rank-appearance__mark { background: var(--mg-rule-strong); }
[data-rank-preset="preserve"] .mg-rank-appearance__mark { visibility: hidden; }
.mg-chat--workspace { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr); gap: var(--mg-space-4); }
.mg-chat__conversations, .mg-chat__detail { min-width: 0; display: grid; align-content: start; gap: var(--mg-space-3); }
.mg-chat__conversation { display: grid; gap: var(--mg-space-1); padding: var(--mg-space-3); color: var(--mg-ink); background: var(--mg-surface); border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); text-decoration: none; }
.mg-chat__conversation[aria-current="page"] { border-color: var(--mg-ink); box-shadow: inset var(--mg-space-1) 0 var(--mg-ink); }
.mg-chat__quote, .mg-chat__attachment, .mg-chat__recovery { padding: var(--mg-space-3); margin: 0; border: 1px solid var(--mg-rule); border-radius: var(--mg-radius-field); overflow-wrap: anywhere; }
.mg-chat__quote { border-inline-start: var(--mg-space-1) solid var(--mg-ink); }
.mg-chat__recovery { background: var(--mg-warn-tint); color: var(--mg-warn-text); }
.mg-pipe__card[aria-busy="true"] { border-color: var(--mg-rule-strong); }
@media (max-width: 760px) {
  .mg-chat--workspace { grid-template-columns: minmax(0, 1fr); }
  .mg-chat--workspace[data-pane="conversation"] .mg-chat__conversations { display: none; }
  .mg-chat--workspace[data-pane="list"] .mg-chat__detail { display: none; }
  .mg-question__answer { align-items: stretch; }
  .mg-tslots, .mg-tslots__pair { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .mg-person-matrix label, .mg-person-matrix .mg-select, .mg-flow__step label, .mg-richtext .mg-button { min-height: var(--mg-control-touch); }
}
@media (forced-colors: active) {
  .mg-chat__conversation[aria-current="page"], .mg-flow__step[aria-current="step"], .mg-richtext__toolbar [aria-pressed="true"] { outline: 2px solid Highlight; }
  .mg-rank-appearance__mark { border: 2px solid CanvasText; }
}
.mg-view--enter { position: relative; }
.mg-view--enter > .mg-view__state { position: absolute; inset: 0; pointer-events: none; animation: mg-view-out calc(var(--mg-dur-instant) * 1.5) linear both; }
.mg-view--enter > [data-mg-view-content] { animation: mg-in-fade calc(var(--mg-dur-instant) * 1.5) linear both; }
@keyframes mg-view-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mg-view--enter > .mg-view__state, .mg-view--enter > [data-mg-view-content] { animation: none; }
}
[data-motion="reduce"] .mg-view--enter > *, [data-motion="off"] .mg-view--enter > * { animation: none; }
.mg-question [hidden] { display: none; }

.mg-delete-dropzone { display: flex; align-items: center; justify-content: center; gap: var(--mg-space-3); min-height: var(--mg-control-touch); padding: var(--mg-space-4) var(--mg-space-6); border: 2px dashed var(--mg-rule-strong); border-radius: var(--mg-radius-card); background: var(--mg-surface); color: var(--mg-ink-2); font: 700 var(--mg-text-md)/1.4 var(--mg-font); }
.mg-delete-dropzone svg { width: 24px; height: 24px; flex: none; }
.mg-delete-dropzone[data-active], .mg-delete-dropzone:hover, .mg-delete-dropzone:focus-visible { border-color: var(--mg-alarm-text); background: var(--mg-alarm-tint); color: var(--mg-alarm-text); }
.mg-delete-dropzone:focus-visible { outline: 2px solid var(--mg-alarm-text); outline-offset: 3px; }
.mg-delete-dropzone[hidden] { display: none; }

.mg-nav--surface { display: grid; gap: var(--mg-space-4); }
.mg-nav--surface .mg-nav__group { display: grid; gap: var(--mg-space-1); min-width: 0; }
.mg-nav--surface .mg-nav__heading { margin: var(--mg-space-3) var(--mg-space-3) var(--mg-space-1); color: var(--mg-ink-3); font: 700 var(--mg-text-xs)/1.3 var(--mg-font); }
.mg-nav--surface .mg-nav__item { flex: none; flex-direction: row; justify-content: flex-start; width: 100%; height: auto; min-height: var(--mg-control-touch); padding: var(--mg-space-2) var(--mg-space-3) var(--mg-space-2) calc(var(--mg-space-2) * 3); color: var(--mg-ink-2); text-align: left; line-height: 1.4; }
.mg-nav--surface .mg-nav__item > span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.mg-nav--surface .mg-nav__item:hover { background: var(--mg-hover); color: var(--mg-ink); }
.mg-nav--surface .mg-nav__item[aria-current="page"] { background: var(--mg-hover); color: var(--mg-ink); }
.mg-nav--surface .mg-nav__item[aria-current="page"]::before { left: var(--mg-space-2); top: 50%; margin: 0; transform: translateY(-50%); background: var(--mg-ink); }