/* Decimal Mobile components that look the same on iOS and Android.
   Platform-specific chrome lives in ios/ios-decimal.css and android/android-decimal.css. */

/* ---- Buttons (decimal-button) ------------------------------------------ */
.m-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-space-8);
  height: var(--m-control-l);
  padding: 0 var(--m-space-16);
  border-radius: var(--m-corner-button);
  border: var(--m-stroke-s) solid transparent;
  font: var(--m-type-label-3-prominent);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.m-btn--m { height: var(--m-control-m); padding: 0 var(--m-space-12); font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); }
.m-btn--m::after { content: ""; position: absolute; inset: calc((var(--m-touch-target) - var(--m-control-m)) / -2) 0; }
.m-btn--block { width: 100%; }
.m-btn--primary { background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); }
.m-btn--primary:active { background: var(--m-fill-primary-press); }
.m-btn--secondary { background: var(--m-fill-secondary); color: var(--m-glyphs-action); border-color: var(--m-stroke-action); }
.m-btn--secondary:active { background: var(--m-fill-secondary-press); }
.m-btn--tertiary { background: transparent; color: var(--m-glyphs-action); }
.m-btn--tertiary:active { background: var(--m-fill-secondary-press); }
.m-btn--destructive { background: var(--m-fill-destructive); color: var(--m-glyphs-on-fill); }
.m-btn--constructive { background: var(--m-fill-constructive); color: var(--m-glyphs-on-fill); }
.m-btn:disabled,
.m-btn[aria-disabled="true"] { background: var(--m-fill-primary-disabled); color: var(--m-glyphs-disabled); border-color: transparent; cursor: not-allowed; }
.m-btn .icon { width: var(--m-icon-s); height: var(--m-icon-s); }

/* Trading (decimal-trading-button) */
.m-btn--buy { background: var(--m-fill-buy); color: var(--m-glyphs-on-fill); }
.m-btn--buy:active { background: var(--m-fill-buy-press); }
.m-btn--sell { background: var(--m-fill-sell); color: var(--m-glyphs-on-fill); }
.m-btn--sell:active { background: var(--m-fill-sell-press); }

/* Progressive (decimal-progressive-button) */
.m-btn[aria-busy="true"] { color: transparent; }
.m-btn[aria-busy="true"]::before { content: ""; position: absolute; width: var(--m-icon-s); height: var(--m-icon-s); border-radius: 50%; border: var(--m-stroke-m) solid var(--m-glyphs-on-fill); border-right-color: transparent; animation: m-spin 0.8s linear infinite; }

/* Button group (decimal-button-group) */
.m-btn-group { display: flex; gap: var(--m-space-8); }
.m-btn-group > .m-btn { flex: 1; }
.m-btn-group--stacked { flex-direction: column; }
.m-btn-group--stacked > .m-btn { flex: none; width: 100%; }

/* Split / dropdown button (decimal-split-button) */
.m-split { display: inline-flex; }
.m-split > .m-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.m-split > .m-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 var(--m-space-12); border-left: var(--m-stroke-s) solid var(--m-glyphs-on-fill); }

/* Icon button (decimal-icon-button) + badge icon button */
.m-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--m-touch-target);
  height: var(--m-touch-target);
  border: 0;
  border-radius: var(--m-corner-pill);
  background: transparent;
  color: var(--m-glyphs-action);
  cursor: pointer;
}
.m-icon-btn:active { background: var(--m-fill-control-press); }
.m-icon-btn--bound { border: var(--m-stroke-s) solid var(--m-stroke-action); border-radius: var(--m-corner-button); width: var(--m-control-m); height: var(--m-control-m); }
.m-icon-btn--neutral { color: var(--m-glyphs-default); }
.m-badge {
  position: absolute;
  top: var(--m-space-4);
  right: var(--m-space-4);
  min-width: 16px;
  height: 16px;
  padding: 0 var(--m-space-4);
  border-radius: var(--m-corner-pill);
  background: var(--m-fill-destructive);
  color: var(--m-glyphs-on-fill);
  font: var(--m-type-supplemental-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m-badge--dot { min-width: 8px; height: 8px; padding: 0; top: var(--m-space-8); right: var(--m-space-8); }

/* Toggle buttons: bookmark / pin (Decimal Toggleable Buttons) */
.m-toggle-btn[aria-pressed="true"] { color: var(--m-glyphs-action); }
.m-toggle-btn[aria-pressed="true"] .icon { fill: currentColor; }
.m-toggle-btn[aria-pressed="false"] { color: var(--m-glyphs-secondary); }

/* Link (decimal-link) */
.m-link { color: var(--m-glyphs-action); font: var(--m-type-label-3-prominent); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- Chips / filter buttons (Decimal Badge Buttons/Filter) -------------- */
.m-chips { display: flex; gap: var(--m-space-8); overflow-x: auto; scrollbar-width: none; }
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-4);
  height: var(--m-control-s);
  padding: 0 var(--m-space-12);
  border-radius: var(--m-corner-pill);
  border: var(--m-stroke-s) solid var(--m-stroke-control);
  background: var(--m-fill-control);
  color: var(--m-glyphs-default);
  font: var(--m-type-label-2);
  letter-spacing: var(--m-tracking-label-2);
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}
.m-chip::after { content: ""; position: absolute; inset: calc((var(--m-touch-target) - var(--m-control-s)) / -2) 0; }
.m-chip[aria-pressed="true"] { background: var(--m-fill-control-selected); border-color: var(--m-stroke-control-selected); color: var(--m-glyphs-action-press); }
.m-chip__count { font: var(--m-type-label-1-prominent); background: var(--m-fill-primary); color: var(--m-glyphs-on-fill); border-radius: var(--m-corner-pill); padding: 0 var(--m-space-4); min-width: 16px; text-align: center; }

/* ---- Form fields (decimal-text-input, decimal-form-field) --------------- */
.m-field { display: flex; flex-direction: column; gap: var(--m-space-4); }
.m-field__label { font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); color: var(--m-glyphs-prominent); }
.m-field__control {
  display: flex;
  align-items: center;
  gap: var(--m-space-8);
  min-height: var(--m-control-l);
  padding: 0 var(--m-space-12);
  border: var(--m-stroke-s) solid var(--m-stroke-control);
  border-radius: var(--m-corner-field);
  background: var(--m-fill-control);
  color: var(--m-glyphs-default);
}
.m-field__control:focus-within { border-color: var(--m-stroke-focus); box-shadow: 0 0 0 var(--m-stroke-s) var(--m-stroke-focus); }
.m-field__control input,
.m-field__control textarea,
.m-field__control select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--m-type-body-2); color: inherit; padding: var(--m-space-12) 0; }
.m-field__control textarea { resize: none; min-height: 96px; }
.m-field__affix { font: var(--m-type-body-2); color: var(--m-glyphs-secondary); }
.m-field__hint { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }
.m-field--error .m-field__control { border-color: var(--m-stroke-control-error); }
.m-field--error .m-field__hint { color: var(--m-glyphs-danger); }
.m-field--disabled .m-field__control { background: var(--m-fill-control-disabled); color: var(--m-glyphs-disabled); }

/* Amount input (decimal-dollar-input / decimal-percent-input) */
.m-amount .m-field__control input { font: var(--m-type-heading-4); font-variant-numeric: tabular-nums; }
.m-amount .m-field__affix { font: var(--m-type-heading-4); color: var(--m-glyphs-prominent); }
.m-amount .m-field__control { min-height: 64px; }

/* ---- Checkbox / radio (decimal-checkbox, decimal-radio-group) ----------- */
.m-check { display: flex; align-items: center; gap: var(--m-space-12); min-height: var(--m-touch-target); font: var(--m-type-body-2); cursor: pointer; }
.m-check input { appearance: none; margin: 0; width: 20px; height: 20px; flex: none; border: var(--m-stroke-m) solid var(--m-stroke-control); border-radius: var(--m-corner-s); background: var(--m-fill-control); display: grid; place-content: center; }
.m-check input[type="radio"] { border-radius: 50%; }
.m-check input:checked { background: var(--m-fill-primary); border-color: var(--m-fill-primary); }
.m-check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border-left: var(--m-stroke-m) solid var(--m-glyphs-on-fill); border-bottom: var(--m-stroke-m) solid var(--m-glyphs-on-fill); transform: rotate(-45deg) translate(1px, -1px); }
.m-check input[type="radio"]:checked { background: var(--m-fill-control); border-color: var(--m-fill-primary); }
.m-check input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--m-fill-primary); }
.m-check input:focus-visible { outline: var(--m-stroke-m) solid var(--m-stroke-focus); outline-offset: 2px; }

/* ---- Status pill (decimal-status-pill) --------------------------------- */
.m-pill { display: inline-flex; align-items: center; gap: var(--m-space-4); padding: var(--m-space-2) var(--m-space-8); border-radius: var(--m-corner-pill); font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); background: var(--m-fill-neutral); color: var(--m-glyphs-default); }
.m-pill--info { background: var(--m-fill-info); color: var(--m-glyphs-info); }
.m-pill--success { background: var(--m-fill-success); color: var(--m-glyphs-success); }
.m-pill--warning { background: var(--m-fill-warning); color: var(--m-glyphs-warning); }
.m-pill--danger { background: var(--m-fill-danger); color: var(--m-glyphs-danger); }

/* ---- Inline notification (decimal-inline-notification) ----------------- */
.m-notice { display: flex; gap: var(--m-space-12); padding: var(--m-space-12) var(--m-space-16); border-radius: var(--m-corner-card); border-left: var(--m-stroke-l) solid var(--m-stroke-info); background: var(--m-fill-info); color: var(--m-glyphs-default); }
.m-notice .icon { color: var(--m-glyphs-info); }
.m-notice__title { font: var(--m-type-heading-1); letter-spacing: var(--m-tracking-heading-1); color: var(--m-glyphs-prominent); margin: 0 0 var(--m-space-2); }
.m-notice__text { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); margin: 0; }
.m-notice--success { background: var(--m-fill-success); border-color: var(--m-stroke-success); }
.m-notice--success .icon { color: var(--m-glyphs-success); }
.m-notice--warning { background: var(--m-fill-warning); border-color: var(--m-stroke-warning); }
.m-notice--warning .icon { color: var(--m-glyphs-warning); }
.m-notice--danger { background: var(--m-fill-danger); border-color: var(--m-stroke-danger); }
.m-notice--danger .icon { color: var(--m-glyphs-danger); }

/* ---- Toast (decimal-toast) ---------------------------------------------- */
.m-toast { display: flex; align-items: center; gap: var(--m-space-12); padding: var(--m-space-12) var(--m-space-16); border-radius: var(--m-corner-card); background: var(--m-surface-inverse); color: var(--m-surface-card); font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); box-shadow: var(--m-elevation-high); }
.m-toast__action { margin-left: auto; background: none; border: 0; font: var(--m-type-label-2-prominent); color: var(--color-glyphs-action-neutral-inverse-enabled); cursor: pointer; min-height: var(--m-touch-target); }

/* ---- Data point / summary (decimal-data-point, decimal-data-summary) ---- */
.m-data-summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-space-16); }
.m-data-point { display: flex; flex-direction: column; gap: var(--m-space-2); }
.m-data-point__label { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }
.m-data-point__value { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); font-variant-numeric: tabular-nums; }
.m-data-point__value--hero { font: var(--m-type-heading-5); }
.m-data-point__delta { font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); }
.m-data-point__delta--up { color: var(--m-glyphs-success); }
.m-data-point__delta--down { color: var(--m-glyphs-danger); }

/* Masked value (decimal-masked-value / decimal-masked-account-number) */
.m-masked { display: inline-flex; align-items: center; gap: var(--m-space-4); font: var(--m-type-numeric-2); font-variant-numeric: tabular-nums; }
.m-masked button { min-width: var(--m-touch-target); min-height: var(--m-touch-target); }

/* Info field (decimal-info-field) */
.m-info-field { display: flex; justify-content: space-between; gap: var(--m-space-16); padding: var(--m-space-12) 0; border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); }
.m-info-field dt { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); color: var(--m-glyphs-secondary); }
.m-info-field dd { margin: 0; font: var(--m-type-label-2-prominent); letter-spacing: var(--m-tracking-label-2); color: var(--m-glyphs-prominent); text-align: right; }

/* Regulatory block (decimal-reg-block) */
.m-reg-block { padding: var(--m-space-16); background: var(--m-surface-sunken); border-radius: var(--m-corner-card); font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }
.m-reg-block p { margin: 0 0 var(--m-space-8); }
.m-reg-block p:last-child { margin: 0; }

/* ---- Card (decimal-card / decimal-outcome-card) ------------------------ */
.m-card { background: var(--m-surface-card); border-radius: var(--m-corner-card); border: var(--m-stroke-s) solid var(--m-stroke-divider); padding: var(--m-space-16); display: flex; flex-direction: column; gap: var(--m-space-12); }
.m-card--raised { border-color: transparent; box-shadow: var(--m-elevation-medium); }
.m-card__title { font: var(--m-type-heading-2); color: var(--m-glyphs-prominent); margin: 0; }
.m-card__meta { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); margin: 0; }
.m-card--outcome { border-left: var(--m-stroke-l) solid var(--m-stroke-success); }

/* ---- Avatar (decimal-avatar) ------------------------------------------- */
.m-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); display: inline-flex; align-items: center; justify-content: center; font: var(--m-type-label-2-prominent); }
.m-avatar--s { width: 32px; height: 32px; font: var(--m-type-label-1-prominent); }
.m-avatar--l { width: 56px; height: 56px; font: var(--m-type-heading-3); }

/* ---- Empty state (decimal-empty-state) --------------------------------- */
.m-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--m-space-8); padding: var(--m-space-32) var(--m-space-16); }
.m-empty .icon { width: 48px; height: 48px; color: var(--m-glyphs-secondary); }
.m-empty__title { font: var(--m-type-heading-3); color: var(--m-glyphs-prominent); margin: 0; }
.m-empty__text { font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); color: var(--m-glyphs-secondary); margin: 0 0 var(--m-space-8); }

/* ---- Step tracker (decimal-step-tracker / decimal-section-tracker) ------ */
.m-steps { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.m-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--m-space-4); position: relative; font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); text-align: center; }
.m-steps li::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: var(--m-stroke-m); background: var(--m-stroke-divider); z-index: 0; }
.m-steps li:first-child::before { display: none; }
.m-steps__dot { width: 24px; height: 24px; border-radius: 50%; border: var(--m-stroke-m) solid var(--m-stroke-control); background: var(--m-fill-control); position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; font: var(--m-type-label-1-prominent); }
.m-steps li[data-state="done"] .m-steps__dot { background: var(--m-fill-primary); border-color: var(--m-fill-primary); color: var(--m-glyphs-on-fill); }
.m-steps li[data-state="done"]::before,
.m-steps li[data-state="current"]::before { background: var(--m-fill-primary); }
.m-steps li[data-state="current"] { color: var(--m-glyphs-prominent); font: var(--m-type-label-1-prominent); }
.m-steps li[data-state="current"] .m-steps__dot { border-color: var(--m-fill-primary); color: var(--m-glyphs-action); }
.m-progress-label { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }

/* ---- Breadcrumbs (decimal-breadcrumbs) ---------------------------------- */
.m-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-space-4); list-style: none; margin: 0; padding: 0; font: var(--m-type-label-2); letter-spacing: var(--m-tracking-label-2); }
.m-breadcrumbs a { color: var(--m-glyphs-action); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--m-touch-target); }
.m-breadcrumbs li + li::before { content: "/"; color: var(--m-glyphs-secondary); margin-right: var(--m-space-4); }
.m-breadcrumbs [aria-current="page"] { color: var(--m-glyphs-prominent); font: var(--m-type-label-2-prominent); }

/* ---- Menu (decimal-menu) / tooltip (decimal-info-toggletip) ------------- */
.m-menu { min-width: 200px; background: var(--m-surface-card); border-radius: var(--m-corner-card); box-shadow: var(--m-elevation-high); padding: var(--m-space-4) 0; list-style: none; margin: 0; }
.m-menu li { display: flex; align-items: center; justify-content: space-between; gap: var(--m-space-12); min-height: var(--m-touch-target); padding: 0 var(--m-space-16); font: var(--m-type-body-2); }
.m-menu li[aria-checked="true"] { color: var(--m-glyphs-action); }
.m-menu li.m-menu__danger { color: var(--m-glyphs-destructive); }
.m-menu hr { border: 0; border-top: var(--m-stroke-s) solid var(--m-stroke-divider); margin: var(--m-space-4) 0; }
.m-menu-anchor { position: relative; }
.m-menu-anchor .m-menu { position: absolute; right: 0; top: 100%; z-index: 4; }
.m-tooltip { position: relative; display: inline-block; max-width: 240px; padding: var(--m-space-8) var(--m-space-12); border-radius: var(--m-corner-m); background: var(--m-surface-inverse); color: var(--m-surface-card); font: var(--m-type-label-2); letter-spacing: var(--m-tracking-label-2); }
.m-tooltip::after { content: ""; position: absolute; bottom: -6px; left: var(--m-space-16); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--m-surface-inverse); }

/* ---- Progress (decimal-loading-comet, linear, ring) -------------------- */
.m-spinner { width: 24px; height: 24px; border-radius: 50%; border: var(--m-stroke-l) solid var(--m-fill-control-selected); border-top-color: var(--m-fill-primary); animation: m-spin 0.9s linear infinite; }
.m-linear { height: 4px; border-radius: var(--m-corner-pill); background: var(--m-fill-control-selected); overflow: hidden; }
.m-linear__bar { height: 100%; background: var(--m-fill-primary); border-radius: inherit; }
.m-linear--indeterminate .m-linear__bar { width: 40%; animation: m-indeterminate 1.4s var(--m-easing) infinite; }
.m-ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.m-ring circle { fill: none; stroke-width: 8; }
.m-ring__track { stroke: var(--m-fill-control-selected); }
.m-ring__value { stroke: var(--m-fill-primary); stroke-linecap: round; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (prefers-reduced-motion: reduce) {
  .m-spinner,
  .m-btn[aria-busy="true"]::before,
  .m-linear--indeterminate .m-linear__bar { animation-duration: 3s; }
}

/* ---- Slider -------------------------------------------------------------- */
.m-slider { width: 100%; accent-color: var(--m-fill-primary); min-height: var(--m-touch-target); }

/* ---- Token field (chips input) ----------------------------------------- */
.m-token-field { display: flex; flex-wrap: wrap; gap: var(--m-space-8); padding: var(--m-space-8) var(--m-space-12); min-height: var(--m-control-l); border: var(--m-stroke-s) solid var(--m-stroke-control); border-radius: var(--m-corner-field); background: var(--m-fill-control); align-items: center; }
.m-token { display: inline-flex; align-items: center; gap: var(--m-space-4); height: 28px; padding: 0 var(--m-space-4) 0 var(--m-space-8); border-radius: var(--m-corner-pill); background: var(--m-fill-control-selected); color: var(--m-glyphs-action-press); font: var(--m-type-label-2); }
.m-token button { width: 24px; height: 24px; border: 0; background: none; color: inherit; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.m-token-field input { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; font: var(--m-type-body-2); color: inherit; }

/* ---- Disclosure / accordion (decimal-section) -------------------------- */
.m-disclosure { border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); }
.m-disclosure summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--m-list-row-min-height); font: var(--m-type-label-3-prominent); color: var(--m-glyphs-prominent); cursor: pointer; list-style: none; }
.m-disclosure summary::-webkit-details-marker { display: none; }
.m-disclosure summary::after { content: ""; width: 8px; height: 8px; border-right: var(--m-stroke-m) solid currentColor; border-bottom: var(--m-stroke-m) solid currentColor; transform: rotate(45deg); transition: transform var(--m-duration-fast); }
.m-disclosure[open] summary::after { transform: rotate(-135deg); }
.m-disclosure__body { padding: 0 0 var(--m-space-16); font: var(--m-type-body-1); letter-spacing: var(--m-tracking-body-1); }

/* ---- Holdings row (decimal-data-table on mobile) ------------------------ */
.m-holding { display: grid; grid-template-columns: 1fr auto; gap: var(--m-space-2) var(--m-space-12); padding: var(--m-space-12) var(--m-screen-margin); border-bottom: var(--m-stroke-s) solid var(--m-stroke-divider); background: var(--m-surface-card); }
.m-holding__symbol { font: var(--m-type-heading-2); color: var(--m-glyphs-prominent); }
.m-holding__name { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }
.m-holding__value { font: var(--m-type-numeric-2); color: var(--m-glyphs-prominent); text-align: right; }
.m-holding__delta { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); text-align: right; }
.m-holding__delta--up { color: var(--m-glyphs-success); }
.m-holding__delta--down { color: var(--m-glyphs-danger); }
.m-holding-header { display: grid; grid-template-columns: 1fr auto; padding: var(--m-space-8) var(--m-screen-margin); background: var(--color-fill-data-header); font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); }

/* ---- Carousel + page indicator ----------------------------------------- */
.m-carousel { display: flex; gap: var(--m-space-12); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--m-screen-margin); margin: 0 calc(var(--m-screen-margin) * -1); }
.m-carousel > * { flex: 0 0 85%; scroll-snap-align: center; }
.m-dots { display: flex; justify-content: center; gap: var(--m-space-8); }
.m-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--m-stroke-divider); }
.m-dots span[aria-current="true"] { background: var(--m-glyphs-prominent); }