/* Opt-in foundations. Load tokens.css and fonts.css before this file. */
.m7 { margin: 0; background: var(--m7-bg); color: var(--m7-text); font: 400 var(--m7-type-body)/var(--m7-type-body-leading) var(--m7-font-body); -webkit-font-smoothing: antialiased; }
.m7 *, .m7 *::before, .m7 *::after { box-sizing: border-box; }
.m7 [hidden] { display: none !important; }
.m7 [data-m7-theme] { background-color: var(--m7-bg); color: var(--m7-text); }
.m7 ::selection { background: var(--m7-selection); color: var(--m7-text); }
.m7 :where(button, input, textarea, select) { font: inherit; }
.m7 :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--m7-focus); outline-offset: 4px; }
.m7 :where(a) { color: var(--m7-accent); text-underline-offset: .25em; text-decoration-thickness: 1px; }
.m7 :where(a):hover { text-decoration-thickness: 2px; }
.m7 :where(img, svg) { max-width: 100%; }
.m7 :where(h1, h2, h3, p) { margin-block: 0; }
.m7 :where(p + p) { margin-block-start: 1em; }
.m7 :where(code, pre) { font-family: var(--m7-font-mono); font-size: .875rem; }
.m7 :where(code) { overflow-wrap: anywhere; }
.m7 :where(pre) { padding: 20px; background: var(--m7-surface); border: 1px solid var(--m7-line); border-radius: 8px; overflow: auto; max-width: 100%; }
.m7 :where(pre code) { overflow-wrap: normal; }
.m7-container { width: 100%; max-width: calc(var(--m7-size-content) + 2 * var(--m7-gutter, 40px)); padding-inline: var(--m7-gutter, 40px); margin-inline: auto; }
.m7-reading { max-width: var(--m7-size-reading); }
.m7-stack { display: flex; flex-direction: column; gap: var(--m7-gap, 16px); }
.m7-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--m7-gap, 12px); }
.m7-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.m7-title, .m7-heading, .m7-display { font-family: var(--m7-font-heading); font-weight: 400; text-wrap: balance; }
.m7-display { font-size: var(--m7-type-display); line-height: var(--m7-type-display-leading); letter-spacing: var(--m7-type-display-tracking); }
.m7-title { font-size: var(--m7-type-title); line-height: var(--m7-type-heading-leading); letter-spacing: -.035em; }
.m7-heading { font-size: var(--m7-type-section); line-height: var(--m7-type-heading-leading); letter-spacing: -.025em; }
.m7-lead { font-size: var(--m7-type-lead); }
.m7-muted { color: var(--m7-muted); }
.m7-caption { font-size: var(--m7-type-caption); line-height: 1.5; }
.m7-overline { font-size: .75rem; font-weight: 500; line-height: 1.6; letter-spacing: .13em; text-transform: uppercase; color: var(--m7-muted); }
.m7-numbers { font-variant-numeric: tabular-nums; }
.m7-button { --m7-control-height: var(--m7-size-control); min-height: var(--m7-control-height); padding: 9px 18px; border: 1px solid transparent; border-radius: var(--m7-radius-4); background: var(--m7-action); color: var(--m7-action-text); font-size: .875rem; font-weight: 500; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--m7-motion-fast) var(--m7-motion-ease), border-color var(--m7-motion-fast) var(--m7-motion-ease); }
.m7-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--m7-action-hover); text-decoration: none; }
.m7-button:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--m7-action-text); }
.m7-button--secondary, .m7-button--quiet { background: transparent; color: var(--m7-text); border-color: var(--m7-control-border); }
.m7-button--quiet { border-color: transparent; }
.m7-button--secondary:hover:not(:disabled):not([aria-disabled="true"]), .m7-button--quiet:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--m7-selection); }
.m7-button--danger { background: transparent; color: var(--m7-danger); border-color: var(--m7-danger); }
.m7-button--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--m7-selection); }
.m7-button:disabled, .m7-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.m7-button[aria-busy="true"] { cursor: progress; }
.m7-button[aria-pressed="true"] { background: var(--m7-selection); color: var(--m7-text); border-color: var(--m7-accent); }
.m7-field { display: flex; flex-direction: column; gap: 8px; }
.m7-label { font-size: .875rem; font-weight: 500; }
.m7-input { width: 100%; min-height: var(--m7-size-control); padding: 10px 12px; border: 1px solid var(--m7-control-border); border-radius: var(--m7-radius-4); background: var(--m7-surface); color: var(--m7-text); line-height: 1.5; }
.m7-input::placeholder { color: var(--m7-subtle); opacity: 1; }
.m7-input:hover:not(:disabled) { border-color: var(--m7-accent); }
.m7-input[aria-invalid="true"] { border-color: var(--m7-danger); }
.m7-input:disabled { cursor: not-allowed; opacity: .6; }
.m7-error { color: var(--m7-danger); font-size: .875rem; }
.m7-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.m7-choice input { width: 18px; height: 18px; accent-color: var(--m7-accent); flex: 0 0 auto; }
.m7-panel { border: 1px solid var(--m7-line); border-radius: var(--m7-radius-8); padding: 24px; background: var(--m7-surface); }
.m7-rule { border: 0; border-top: 1px solid var(--m7-line); margin-block: 24px; }
.m7-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; color: var(--m7-info); font-size: .75rem; font-weight: 500; line-height: 1.5; }
.m7-badge--success { color: var(--m7-success); }
.m7-badge--warning { color: var(--m7-warning); }
.m7-badge--danger { color: var(--m7-danger); }
.m7-notice { padding: 16px; border-inline-start: 2px solid var(--m7-info); background: var(--m7-selection); color: var(--m7-text); }
.m7-table-wrap { overflow-x: auto; max-width: 100%; }
.m7-table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: start; }
.m7-table caption { text-align: start; color: var(--m7-muted); padding-block-end: 16px; }
.m7-table th { font-weight: 500; color: var(--m7-muted); text-align: start; }
.m7-table :where(th, td) { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--m7-line); vertical-align: middle; }
.m7-table .m7-numeric { text-align: end; font-variant-numeric: tabular-nums; }
.m7-dialog { color: var(--m7-text); background: var(--m7-surface); border: 1px solid var(--m7-control-border); border-radius: var(--m7-radius-12); padding: 32px; width: min(520px, calc(100% - 40px)); max-height: calc(100svh - 40px); overflow: auto; }
.m7-dialog::backdrop { background: rgb(0 0 0 / .65); }
.m7-skip { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; transform: translateY(-180%); }
.m7-skip:focus { transform: none; }
.m7-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
.m7 [data-m7-density="compact"] :is(.m7-input, .m7-button), .m7[data-m7-density="compact"] :is(.m7-input, .m7-button) { min-height: var(--m7-size-compact); padding-block: 6px; }
.m7 [data-m7-density="compact"] .m7-table :is(th, td), .m7[data-m7-density="compact"] .m7-table :is(th, td) { padding-block: 9px; }
@media (min-width: 1650px) { .m7 { --m7-gutter: 64px; } }
@media (max-width: 900px) { .m7 { --m7-gutter: 24px; } }
@media (max-width: 640px) { .m7 { --m7-gutter: 20px; } .m7-display { font-size: var(--m7-type-display-mobile); line-height: 1.05; } .m7-panel { padding: 20px; } }
@media (pointer: coarse) { .m7 [data-m7-density="compact"] :is(.m7-input, .m7-button), .m7[data-m7-density="compact"] :is(.m7-input, .m7-button) { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .m7 *, .m7 *::before, .m7 *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .m7-button, .m7-input, .m7-badge { border: 1px solid ButtonText; } }