/* MultiApps.UI — base global da biblioteca. Só tokens --ma-*: nenhuma cor, fonte ou tamanho literal (LiteralStyleGate). */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--ma-font-sans);
  font-size: 100%;
  line-height: var(--ma-leading-normal);
  color: var(--ma-text);
  background: var(--ma-bg);
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; font-size: var(--ma-text-sm); }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--ma-link); text-decoration: none; }
a:hover { color: var(--ma-link-hover); text-decoration: underline; }

:focus-visible {
  outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring);
  outline-offset: var(--ma-focus-ring-offset);
}

.ma-scroll-locked, .ma-scroll-locked body { overflow: hidden; }

.ma-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Texto (MaText) */
.ma-text { margin: 0; }
.ma-text--display { font-size: var(--ma-text-3xl); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-bold); letter-spacing: var(--ma-tracking-tight); }
.ma-text--h1 { font-size: var(--ma-text-2xl); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); letter-spacing: var(--ma-tracking-tight); }
.ma-text--h2 { font-size: var(--ma-text-xl); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); }
.ma-text--h3 { font-size: var(--ma-text-lg); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); }
.ma-text--h4 { font-size: var(--ma-text-base); line-height: var(--ma-leading-tight); font-weight: var(--ma-weight-semibold); }
.ma-text--body { font-size: var(--ma-text-sm); }
.ma-text--body-sm { font-size: var(--ma-text-xs); }
.ma-text--caption { font-size: var(--ma-text-xs); color: var(--ma-text-muted); }
.ma-text--code { font-family: var(--ma-font-mono); font-size: var(--ma-text-xs); background: var(--ma-surface-sunken); padding: 0 var(--ma-space-1); border-radius: var(--ma-radius-sm); }
.ma-color--secondary { color: var(--ma-text-secondary); }
.ma-color--muted { color: var(--ma-text-muted); }
.ma-color--primary { color: var(--ma-primary-text); }
.ma-color--accent { color: var(--ma-accent-text); }
.ma-color--success { color: var(--ma-success-text); }
.ma-color--warning { color: var(--ma-warning-text); }
.ma-color--danger { color: var(--ma-danger-text); }
.ma-color--info { color: var(--ma-info-text); }
/* Matiz de categoria (AppHue): ícone de menu e de página. */
.ma-hue--sky { color: var(--ma-hue-sky); }
.ma-hue--blue { color: var(--ma-hue-blue); }
.ma-hue--violet { color: var(--ma-hue-violet); }
.ma-hue--emerald { color: var(--ma-hue-emerald); }
.ma-hue--teal { color: var(--ma-hue-teal); }
.ma-hue--amber { color: var(--ma-hue-amber); }
.ma-hue--orange { color: var(--ma-hue-orange); }
.ma-hue--rose { color: var(--ma-hue-rose); }
/* Tom (ColorRole): as variáveis de cor de quem pinta com a cor do papel, como o selo, o chip e o progresso (spec 0091). */
.ma-tone--default, .ma-tone--secondary, .ma-tone--muted, .ma-tone--neutral { --tone: var(--ma-neutral); --tone-text: var(--ma-text-secondary); --on-tone: var(--ma-on-neutral); --tone-subtle: var(--ma-neutral-subtle); --on-tone-subtle: var(--ma-on-neutral-subtle); }
.ma-tone--primary { --tone: var(--ma-primary); --tone-text: var(--ma-primary-text); --on-tone: var(--ma-on-primary); --tone-subtle: var(--ma-primary-subtle); --on-tone-subtle: var(--ma-on-primary-subtle); }
.ma-tone--accent { --tone: var(--ma-accent); --tone-text: var(--ma-accent-text); --on-tone: var(--ma-on-accent); --tone-subtle: var(--ma-accent-subtle); --on-tone-subtle: var(--ma-on-accent-subtle); }
.ma-tone--success { --tone: var(--ma-success); --tone-text: var(--ma-success-text); --on-tone: var(--ma-on-success); --tone-subtle: var(--ma-success-subtle); --on-tone-subtle: var(--ma-on-success-subtle); }
.ma-tone--warning { --tone: var(--ma-warning); --tone-text: var(--ma-warning-text); --on-tone: var(--ma-on-warning); --tone-subtle: var(--ma-warning-subtle); --on-tone-subtle: var(--ma-on-warning-subtle); }
.ma-tone--danger { --tone: var(--ma-danger); --tone-text: var(--ma-danger-text); --on-tone: var(--ma-on-danger); --tone-subtle: var(--ma-danger-subtle); --on-tone-subtle: var(--ma-on-danger-subtle); }
.ma-tone--info { --tone: var(--ma-info); --tone-text: var(--ma-info-text); --on-tone: var(--ma-on-info); --tone-subtle: var(--ma-info-subtle); --on-tone-subtle: var(--ma-on-info-subtle); }

/* Layout (MaStack, MaRow, MaGridLayout) — também usáveis por apps em composição, sem CSS próprio. */
.ma-stack { display: flex; flex-direction: column; }
.ma-row { display: flex; flex-direction: row; align-items: center; }
.ma-wrap { flex-wrap: wrap; }
/* Lista sem marcador nem recuo: itens de um drawer, membros, perfis. */
.ma-list { list-style: none; margin: 0; padding: 0; }
.ma-grid { display: grid; grid-template-columns: repeat(var(--ma-cols, 1), minmax(0, 1fr)); }
.ma-gap-0 { gap: 0; } .ma-gap-1 { gap: var(--ma-space-1); } .ma-gap-2 { gap: var(--ma-space-2); } .ma-gap-3 { gap: var(--ma-space-3); }
.ma-gap-4 { gap: var(--ma-space-4); } .ma-gap-5 { gap: var(--ma-space-5); } .ma-gap-6 { gap: var(--ma-space-6); } .ma-gap-8 { gap: var(--ma-space-8); }
.ma-align-start { align-items: flex-start; } .ma-align-center { align-items: center; } .ma-align-end { align-items: flex-end; }
.ma-align-stretch { align-items: stretch; } .ma-align-baseline { align-items: baseline; }
.ma-justify-start { justify-content: flex-start; } .ma-justify-center { justify-content: center; }
.ma-justify-end { justify-content: flex-end; } .ma-justify-between { justify-content: space-between; }
.ma-cols-1 { --ma-cols: 1; } .ma-cols-2 { --ma-cols: 2; } .ma-cols-3 { --ma-cols: 3; } .ma-cols-4 { --ma-cols: 4; } .ma-cols-6 { --ma-cols: 6; }
@media (min-width: 640px) {
  .ma-sm-cols-1 { --ma-cols: 1; } .ma-sm-cols-2 { --ma-cols: 2; } .ma-sm-cols-3 { --ma-cols: 3; } .ma-sm-cols-4 { --ma-cols: 4; }
}
@media (min-width: 768px) {
  .ma-md-cols-1 { --ma-cols: 1; } .ma-md-cols-2 { --ma-cols: 2; } .ma-md-cols-3 { --ma-cols: 3; } .ma-md-cols-4 { --ma-cols: 4; }
}
@media (min-width: 1024px) {
  .ma-lg-cols-1 { --ma-cols: 1; } .ma-lg-cols-2 { --ma-cols: 2; } .ma-lg-cols-3 { --ma-cols: 3; } .ma-lg-cols-4 { --ma-cols: 4; } .ma-lg-cols-6 { --ma-cols: 6; }
}
@media (min-width: 1280px) {
  .ma-xl-cols-2 { --ma-cols: 2; } .ma-xl-cols-3 { --ma-cols: 3; } .ma-xl-cols-4 { --ma-cols: 4; } .ma-xl-cols-6 { --ma-cols: 6; }
}

/* Formulário e campos (spec 0005). Também estilizam os controles nativos das páginas de conta. */
.ma-form, .ma-form__fields { display: flex; flex-direction: column; gap: var(--ma-space-4); }
.ma-form__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--ma-space-2); }
.ma-field { display: flex; flex-direction: column; gap: var(--ma-space-1); min-width: 0; }
fieldset.ma-field { border: 0; padding: 0; margin: 0; }
.ma-field__required { color: var(--ma-danger-text); margin-left: var(--ma-space-1); }
.ma-field__hint { font-size: var(--ma-text-xs); color: var(--ma-text-muted); }
.ma-field__count { align-self: flex-end; font-size: var(--ma-text-xs); color: var(--ma-text-muted); font-variant-numeric: tabular-nums; }
.ma-field__error { display: flex; flex-direction: column; font-size: var(--ma-text-xs); color: var(--ma-danger-text); }
.ma-control { position: relative; display: flex; align-items: center; min-width: 0; }
.ma-control > .ma-input { flex: 1; min-width: 0; width: 100%; }
.ma-control__icon { position: absolute; left: var(--ma-control-padding-x); color: var(--ma-text-muted); pointer-events: none; }
.ma-control--icon > .ma-input { padding-left: calc(var(--ma-control-padding-x) * 2 + var(--ma-space-4)); }
.ma-control__affix { flex: none; color: var(--ma-text-muted); font-size: var(--ma-text-sm); }
.ma-control--affixed {
  height: var(--ma-control-height-md); padding: 0 var(--ma-control-padding-x); gap: var(--ma-space-1);
  border: var(--ma-border-width) solid var(--ma-control-border); border-radius: var(--ma-control-radius); background: var(--ma-control-bg);
}
.ma-control--affixed:focus-within { border-color: var(--ma-focus-ring); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-focus-ring) 25%, transparent); }
.ma-control--affixed > .ma-input { height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
.ma-control--affixed.ma-control--invalid { border-color: var(--ma-danger); }
.ma-control--sm > .ma-input { height: var(--ma-control-height-sm); font-size: var(--ma-text-xs); }
.ma-control--lg > .ma-input { height: var(--ma-control-height-lg); font-size: var(--ma-text-base); }
.ma-control--multiline > .ma-input { height: auto; min-height: calc(var(--ma-control-height-md) * 2); padding: var(--ma-space-2) var(--ma-control-padding-x); resize: vertical; }
.ma-control--invalid > .ma-input, .ma-control--invalid .ma-input { border-color: var(--ma-danger); }
.ma-control--invalid > .ma-input:focus-visible, .ma-control--invalid .ma-input:focus-visible, .ma-control--affixed.ma-control--invalid:focus-within,
.ma-input[aria-invalid="true"]:focus-visible {
  border-color: var(--ma-danger); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-danger) 25%, transparent);
}
.ma-input[aria-invalid="true"] { border-color: var(--ma-danger); }
.ma-input:disabled { background: var(--ma-surface-sunken); color: var(--ma-text-disabled); cursor: not-allowed; }
.ma-input[readonly] { background: var(--ma-surface-sunken); }
.ma-select > .ma-input, .ma-combobox > .ma-input { padding-right: calc(var(--ma-control-padding-x) * 2 + var(--ma-space-4)); }
.ma-select > .ma-input { appearance: none; cursor: pointer; }
.ma-combobox--clearable > .ma-input { padding-right: calc(var(--ma-control-padding-x) * 2 + var(--ma-space-4) + var(--ma-control-height-sm)); }
.ma-combobox .ma-combobox__clear { position: absolute; right: calc(var(--ma-control-padding-x) + var(--ma-space-4) + var(--ma-space-1)); }
.ma-select__chevron { position: absolute; right: var(--ma-control-padding-x); color: var(--ma-text-muted); pointer-events: none; }
.ma-combobox__list {
  /* Ancorada pelo ma.js em position: fixed, por cima de tudo, inclusive de um modal (spec 0071). Antes do JavaScript,
     fica logo abaixo do campo. */
  position: absolute; top: calc(100% + var(--ma-space-1)); left: 0; z-index: var(--ma-z-dropdown);
  /* Pelo menos a largura do campo, e cresce até o texto mais longo: a opção não quebra (revisão da v0.3, ajuste 4). */
  min-width: var(--ma-anchor-width, 100%); width: max-content; max-width: min(calc(var(--ma-space-16) * 8), 90vw);
  max-height: min(calc(var(--ma-space-16) * 5), var(--ma-floating-max-height, 100vh)); overflow-y: auto; margin: 0; padding: var(--ma-space-1); list-style: none;
  background: var(--ma-surface-raised); color: var(--ma-text);
  border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-md); box-shadow: var(--ma-shadow-lg);
}
.ma-combobox__option { padding: var(--ma-space-2) var(--ma-space-3); border-radius: var(--ma-radius-sm); font-size: var(--ma-text-sm); cursor: pointer; }
.ma-combobox__option:hover, .ma-combobox__option--active { background: var(--ma-primary-subtle); color: var(--ma-on-primary-subtle); }
.ma-combobox__option[aria-selected="true"] { font-weight: var(--ma-weight-semibold); }
.ma-combobox__status { display: flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-2) var(--ma-space-3); color: var(--ma-text-muted); font-size: var(--ma-text-sm); }
.ma-multiselect {
  flex-wrap: wrap; gap: var(--ma-space-1); min-height: var(--ma-control-height-md); padding: var(--ma-space-1);
  border: var(--ma-border-width) solid var(--ma-control-border); border-radius: var(--ma-control-radius); background: var(--ma-control-bg);
}
.ma-multiselect:focus-within { border-color: var(--ma-focus-ring); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-focus-ring) 25%, transparent); }
.ma-multiselect > .ma-input { flex: 1; width: auto; min-width: calc(var(--ma-space-16) * 2); height: calc(var(--ma-control-height-md) - var(--ma-space-3)); border: 0; background: transparent; box-shadow: none; }
.ma-check { gap: var(--ma-space-1); }
.ma-check__label { display: inline-flex; align-items: center; gap: var(--ma-space-2); font-size: var(--ma-text-sm); cursor: pointer; }
.ma-check__label:has(:disabled) { opacity: 0.6; cursor: not-allowed; }
.ma-checkbox__input, .ma-radio__input { width: var(--ma-space-4); height: var(--ma-space-4); margin: 0; accent-color: var(--ma-primary); }
.ma-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Trilho e botão por tamanho (spec 0094, RN-15). A folga entre o botão e a borda do trilho é meio --ma-space-1. */
.ma-switch--sm { --switch-width: var(--ma-space-7); --switch-height: var(--ma-space-4); --switch-thumb: var(--ma-space-3); }
.ma-switch--md { --switch-width: var(--ma-space-9); --switch-height: var(--ma-space-5); --switch-thumb: var(--ma-space-4); }
.ma-switch--lg { --switch-width: var(--ma-space-11); --switch-height: var(--ma-space-6); --switch-thumb: var(--ma-space-5); }
.ma-switch__track {
  position: relative; flex: none; width: var(--switch-width); height: var(--switch-height);
  border-radius: var(--ma-radius-full); background: var(--ma-border-strong);
  transition: background var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-switch__track::after, .ma-switch__thumb-icon {
  position: absolute; top: calc(var(--ma-space-1) / 2); left: calc(var(--ma-space-1) / 2);
  width: var(--switch-thumb); height: var(--switch-thumb); border-radius: var(--ma-radius-full);
  transition: transform var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-switch__track::after { content: ""; background: var(--ma-surface-raised); box-shadow: var(--ma-shadow-xs); }
/* O ícone fica por cima do botão (RN-18): em --ma-text-muted desligado, no tom ligado. */
.ma-switch__thumb-icon { z-index: 1; display: flex; align-items: center; justify-content: center; color: var(--ma-text-muted); }
.ma-switch__thumb-icon > .ma-icon.ma-switch__icon { width: calc(var(--switch-thumb) - var(--ma-space-1)); height: calc(var(--switch-thumb) - var(--ma-space-1)); }
.ma-switch__input:checked ~ .ma-switch__track { background: var(--tone); }
.ma-switch__input:checked ~ .ma-switch__track::after,
.ma-switch__input:checked ~ .ma-switch__track > .ma-switch__thumb-icon { transform: translateX(calc(var(--switch-width) - var(--switch-thumb) - var(--ma-space-1))); }
.ma-switch__input:checked ~ .ma-switch__track > .ma-switch__thumb-icon { color: var(--tone); }
.ma-switch__input:checked ~ .ma-switch__track .ma-icon.ma-switch__icon--off,
.ma-switch__input:not(:checked) ~ .ma-switch__track .ma-icon.ma-switch__icon--on { display: none; }
.ma-switch__input:focus-visible ~ .ma-switch__track { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: var(--ma-focus-ring-offset); }
/* Rótulo antes: a linha ocupa o campo, com o trilho no fim (RN-17). */
.ma-switch--start > .ma-check__label { display: flex; justify-content: space-between; }
/* A descrição alinha ao texto do rótulo: o trilho mais o gap do rótulo (RN-19). */
.ma-switch__hint { padding-left: calc(var(--switch-width) + var(--ma-space-2)); }
.ma-radio-group { display: flex; flex-direction: column; gap: var(--ma-space-2); }
.ma-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: var(--ma-space-4); }
.ma-search { min-width: calc(var(--ma-space-16) * 3); }
.ma-search > .ma-input { padding-right: calc(var(--ma-control-height-sm) + var(--ma-space-2)); }
.ma-search .ma-search__clear { position: absolute; right: var(--ma-space-1); }
.ma-search > .ma-input::-webkit-search-cancel-button { display: none; }
.ma-label {
  font-size: var(--ma-label-size); font-weight: var(--ma-label-weight); color: var(--ma-label-color);
  text-transform: var(--ma-label-transform); letter-spacing: var(--ma-label-tracking);
}
.ma-input {
  height: var(--ma-control-height-md);
  padding: 0 var(--ma-control-padding-x);
  border: var(--ma-border-width) solid var(--ma-control-border);
  border-radius: var(--ma-control-radius);
  background: var(--ma-control-bg);
  color: var(--ma-text); font-size: var(--ma-text-sm);
  transition: border-color var(--ma-duration-fast) var(--ma-ease-standard), box-shadow var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-input::placeholder { color: var(--ma-control-placeholder); }
.ma-input:focus-visible { outline: none; border-color: var(--ma-focus-ring); box-shadow: 0 0 0 calc(var(--ma-focus-ring-width) * 1.5) color-mix(in oklch, var(--ma-focus-ring) 25%, transparent); }

/* Tabela simples (Sobre, catálogo). O MaGrid da spec 0005 tem o seu. */
.ma-table { width: 100%; border-collapse: collapse; font-size: var(--ma-text-sm); }
.ma-table th {
  text-align: left; font-weight: var(--ma-weight-medium); color: var(--ma-text-secondary);
  padding: var(--ma-space-2) var(--ma-space-3); border-bottom: var(--ma-border-width) solid var(--ma-border);
  background: var(--ma-surface-sunken);
}
.ma-table td { padding: var(--ma-space-2) var(--ma-space-3); border-bottom: var(--ma-border-width) solid var(--ma-divider); }
.ma-table tr:last-child td { border-bottom: 0; }
/* Tabela simples (spec 0089): alinhamento da célula e densidade. */
.ma-table .ma-table__cell--center { text-align: center; }
.ma-table .ma-table__cell--end { text-align: end; }
.ma-table--dense th, .ma-table--dense td { padding: var(--ma-space-1) var(--ma-space-2); }
/* Lista de propriedades (spec 0088): o rótulo na largura do conteúdo, sem quebrar; o valor fica com o resto. */
.ma-property-list th { width: 1%; white-space: nowrap; }

/* Grade de dados (spec 0005): MaGrid, MaGridRow, MaPagination e MaFilterBar. */
.ma-datagrid { display: flex; flex-direction: column; gap: var(--ma-space-3); min-width: 0; }
.ma-datagrid__scroll {
  position: relative; overflow: auto; background: var(--ma-surface);
  border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-xl); box-shadow: var(--ma-shadow-card);
}
.ma-datagrid--virtual .ma-datagrid__scroll { max-height: calc(var(--ma-space-16) * 10); }
.ma-datagrid__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ma-text-sm); }
.ma-datagrid__th {
  position: sticky; top: 0; z-index: 1; height: calc(var(--ma-space-10) * var(--ma-density)); padding: 0 var(--ma-space-4);
  text-align: left; white-space: nowrap; background: var(--ma-surface-sunken); border-bottom: var(--ma-border-width) solid var(--ma-border);
  font-size: var(--ma-label-size); font-weight: var(--ma-label-weight); text-transform: var(--ma-label-transform);
  letter-spacing: var(--ma-label-tracking); color: var(--ma-label-color);
}
.ma-datagrid__sort {
  display: inline-flex; align-items: center; gap: var(--ma-space-1); padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.ma-datagrid__sort:hover { color: var(--ma-text); }
.ma-datagrid__th--sorted { color: var(--ma-text); }
.ma-datagrid__td { height: var(--ma-table-row-height); padding: var(--ma-space-2) var(--ma-space-4); color: var(--ma-text); border-bottom: var(--ma-border-width) solid var(--ma-divider); }
.ma-control--mono .ma-input { font-family: var(--ma-font-mono); font-size: var(--ma-text-sm); }
.ma-datagrid__cell--mono { font-family: var(--ma-font-mono); font-size: var(--ma-text-xs); white-space: nowrap; }
.ma-datagrid__cell--emphasis { font-weight: var(--ma-weight-medium); color: var(--ma-text); white-space: nowrap; }
.ma-datagrid__empty-value { color: var(--ma-text-muted); }
.ma-datagrid__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--ma-space-0); }
.ma-datagrid--dense .ma-datagrid__th, .ma-datagrid--dense .ma-datagrid__td { height: calc(var(--ma-table-row-height) * 0.8); }
.ma-datagrid__row:last-child > .ma-datagrid__td { border-bottom: 0; }
.ma-datagrid__row--clickable { cursor: pointer; }
.ma-datagrid__row--clickable:hover > .ma-datagrid__td { background: var(--ma-surface-hover); }
.ma-datagrid__row--clickable:focus-visible { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: calc(var(--ma-focus-ring-width) * -1); }
.ma-datagrid__row--selected > .ma-datagrid__td { background: var(--ma-primary-subtle); color: var(--ma-on-primary-subtle); }
.ma-datagrid__row--skeleton > td { padding: var(--ma-space-2) var(--ma-space-3); }
.ma-datagrid__row--empty > td { padding: var(--ma-space-6); }
.ma-datagrid__select { width: var(--ma-space-10); text-align: center; }
.ma-datagrid__cell--center { text-align: center; }
.ma-datagrid__cell--end { text-align: right; }
.ma-datagrid__cell--w-xs { width: var(--ma-space-16); }
.ma-datagrid__cell--w-sm { width: calc(var(--ma-space-16) * 2); }
.ma-datagrid__cell--w-md { width: calc(var(--ma-space-16) * 3); }
.ma-datagrid__cell--w-lg { width: calc(var(--ma-space-16) * 4); }
.ma-datagrid__cell--w-xl { width: calc(var(--ma-space-16) * 6); }
.ma-datagrid__cell--sticky { position: sticky; left: 0; z-index: 1; background: var(--ma-surface); }
.ma-datagrid__th.ma-datagrid__cell--sticky { z-index: 2; background: var(--ma-surface-sunken); }
@media (max-width: 1535px) { .ma-datagrid__cell--hide-below-xxl { display: none; } }
@media (max-width: 1279px) { .ma-datagrid__cell--hide-below-xl { display: none; } }
@media (max-width: 1023px) { .ma-datagrid__cell--hide-below-lg { display: none; } }
@media (max-width: 767px) { .ma-datagrid__cell--hide-below-md { display: none; } }
.ma-datagrid__expand { width: var(--ma-space-10); padding-inline: var(--ma-space-1); text-align: center; }
.ma-datagrid__row--expanded > .ma-datagrid__td { border-bottom-color: transparent; }
.ma-datagrid__detail-cell { padding: var(--ma-space-3) var(--ma-space-4) var(--ma-space-4); background: var(--ma-surface-sunken); border-bottom: var(--ma-border-width) solid var(--ma-divider); }
.ma-datagrid__detail:last-child > .ma-datagrid__detail-cell { border-bottom: 0; }
.ma-datagrid__ftd {
  height: calc(var(--ma-space-10) * var(--ma-density)); padding: var(--ma-space-2) var(--ma-space-4); text-align: left;
  background: var(--ma-surface-sunken); border-top: var(--ma-border-width) solid var(--ma-border);
  color: var(--ma-text); font-weight: var(--ma-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ma-datagrid__ftd.ma-datagrid__cell--sticky { background: var(--ma-surface-sunken); }
.ma-datagrid--fixed-header .ma-datagrid__ftd { position: sticky; bottom: 0; z-index: 1; }
.ma-datagrid--fixed-header .ma-datagrid__ftd.ma-datagrid__cell--sticky { z-index: 2; }
.ma-datagrid--fixed-header.ma-datagrid--height-sm .ma-datagrid__scroll { max-height: calc(var(--ma-space-16) * 6); }
.ma-datagrid--fixed-header.ma-datagrid--height-md .ma-datagrid__scroll { max-height: calc(var(--ma-space-16) * 10); }
.ma-datagrid--fixed-header.ma-datagrid--height-lg .ma-datagrid__scroll { max-height: calc(var(--ma-space-16) * 14); }
.ma-datagrid__resize {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--ma-space-2); cursor: col-resize; touch-action: none;
}
.ma-datagrid__resize::after {
  content: ""; position: absolute; top: var(--ma-space-2); bottom: var(--ma-space-2); right: calc(var(--ma-space-1) - 1px);
  width: var(--ma-border-width); background: var(--ma-border);
}
.ma-datagrid__resize:hover::after, .ma-datagrid__resize:focus-visible::after, .ma-datagrid__resize[data-active]::after { background: var(--ma-primary); width: var(--ma-focus-ring-width); }
.ma-datagrid__resize:focus-visible { outline-offset: calc(var(--ma-focus-ring-width) * -1); }
.ma-datagrid__table[data-resized] { table-layout: fixed; }
.ma-datagrid__table[data-resized] .ma-datagrid__th { overflow: hidden; text-overflow: ellipsis; }
.ma-datagrid__table[data-resized] .ma-datagrid__td { overflow: hidden; text-overflow: ellipsis; }
.ma-datagrid__overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--ma-surface) 60%, transparent);
}
.ma-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ma-space-3); font-size: var(--ma-text-sm); color: var(--ma-text-secondary); }
.ma-pagination__controls { display: flex; align-items: center; gap: var(--ma-space-1); }
.ma-pagination__size { display: inline-flex; align-items: center; gap: var(--ma-space-2); margin-right: var(--ma-space-3); }
.ma-pagination__size .ma-input { height: var(--ma-control-height-sm); padding: 0 var(--ma-space-2); }
.ma-pagination__page { padding: 0 var(--ma-space-2); font-variant-numeric: tabular-nums; }
.ma-filterbar { display: flex; flex-direction: column; gap: var(--ma-space-2); }
.ma-filterbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ma-space-2); }
.ma-filterbar__search { flex: 1; max-width: calc(var(--ma-space-16) * 5); }
.ma-filterbar__actions { display: flex; align-items: center; gap: var(--ma-space-2); margin-left: auto; }
.ma-filterbar__editor {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ma-space-3); padding: var(--ma-space-3);
  background: var(--ma-surface-sunken); border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-md);
}
.ma-filterbar__editor-actions { display: flex; gap: var(--ma-space-2); }
.ma-filterbar__choices { display: flex; flex-wrap: wrap; gap: var(--ma-space-3); }
.ma-filterbar__chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ma-space-2); }
.ma-filterbar__count { font-size: var(--ma-text-xs); color: var(--ma-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-datagrid__cards { display: grid; grid-template-columns: repeat(var(--ma-cols, 1), minmax(0, 1fr)); gap: var(--ma-space-4); }
.ma-datagrid__card { min-width: 0; }
.ma-datagrid__card--clickable { cursor: pointer; }
.ma-datagrid__card--clickable:focus-visible { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: var(--ma-focus-ring-offset); border-radius: var(--ma-radius-xl); }
.ma-datagrid__card--selected > .ma-card { border-color: var(--ma-primary); }
.ma-datagrid__cards-empty { padding: var(--ma-space-6); background: var(--ma-surface); border: var(--ma-border-width) solid var(--ma-border); border-radius: var(--ma-radius-xl); }
@media (min-width: 768px) { .ma-datagrid__cards { --ma-cols: 2; } }
@media (min-width: 1280px) { .ma-datagrid__cards { --ma-cols: 3; } }

/* Overlay (spec 0090): o fundo que cobre a página ou um bloco. Global, e não escopado, porque o MaModal e o MaDrawer
   passam classe à camada, e o CSS escopado deles não alcança a raiz de outro componente (RN-10). O clique só conta no
   scrim, irmão do conteúdo; a área vazia do conteúdo deixa o clique passar até ele (RN-02). O pointer-events: auto vale
   dentro de uma área transparente ao clique, como o corpo de um MaCard clicável: sem ele, o fundo herdaria o none. */
.ma-overlay {
  display: flex; align-items: center; justify-content: center; padding: var(--ma-space-4); pointer-events: auto;
  animation: ma-overlay-fade var(--ma-duration-normal) var(--ma-ease-standard);
}
.ma-overlay--page { position: fixed; inset: 0; z-index: var(--ma-z-modal); }
.ma-overlay--block { position: absolute; inset: 0; z-index: var(--ma-z-dropdown); border-radius: inherit; }
.ma-overlay--dark { background: var(--ma-backdrop); }
.ma-overlay--light { background: color-mix(in oklch, var(--ma-surface) 70%, transparent); }
.ma-overlay--transparent { background: transparent; }
.ma-overlay__scrim { position: absolute; inset: 0; }
.ma-overlay__content { position: relative; pointer-events: none; }
.ma-overlay__content > * { pointer-events: auto; }
/* Modo bloco: o host isola as camadas; nada de dentro passa por cima do fundo, e o fundo não passa por cima de fora (RN-05). */
.ma-overlay-host { position: relative; isolation: isolate; }
/* O fundo do modal: alinhado em cima, com folga, e o diálogo na largura do tamanho dele (RN-11). */
.ma-modal__backdrop { align-items: flex-start; padding: var(--ma-space-16) var(--ma-space-4) var(--ma-space-4); overflow-y: auto; }
.ma-modal__backdrop > .ma-overlay__content { display: flex; justify-content: center; width: 100%; }
/* O fundo do painel: na camada dele, e o conteúdo sem posição, para o painel ficar absolute em relação à camada (RN-11). */
.ma-drawer__backdrop { z-index: var(--ma-z-drawer); }
.ma-drawer__backdrop > .ma-overlay__content { position: static; }
@keyframes ma-overlay-fade { from { opacity: 0; } }

/* Progresso sem valor (spec 0091, RN-04 e RN-10): a faixa que corre no trilho. Global, e não no CSS escopado da barra, para a
   regra parada do movimento reduzido, logo abaixo, valer sobre ela; o seletor de três classes passa o preenchimento escopado. */
.ma-progress--indeterminate > .ma-progress__track > .ma-progress__fill {
  width: 40%; transition: none; animation: ma-progress-slide 1.6s var(--ma-ease-standard) infinite;
}
@keyframes ma-progress-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Aviso de reconexão do circuito (spec 0004, RN-13): aparece depois de 2 s sem conexão. */
#components-reconnect-modal {
  display: none; position: fixed; inset: 0; z-index: var(--ma-z-modal);
  background: var(--ma-backdrop); align-items: center; justify-content: center;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; animation: ma-reconnect-in var(--ma-duration-slow) var(--ma-ease-standard) 2s both; }
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { animation-delay: 0s; }
.ma-reconnect__box {
  display: flex; flex-direction: column; align-items: center; gap: var(--ma-space-3);
  padding: var(--ma-space-6); max-width: var(--ma-container-sm);
  background: var(--ma-surface-raised); color: var(--ma-text);
  border-radius: var(--ma-radius-lg); box-shadow: var(--ma-shadow-xl); text-align: center;
}
.ma-reconnect__failed, .ma-reconnect__reload { display: none; }
.components-reconnect-show .ma-reconnect__waiting { display: block; }
.components-reconnect-failed .ma-reconnect__waiting, .components-reconnect-rejected .ma-reconnect__waiting { display: none; }
.components-reconnect-failed .ma-reconnect__failed, .components-reconnect-rejected .ma-reconnect__failed,
.components-reconnect-failed .ma-reconnect__reload, .components-reconnect-rejected .ma-reconnect__reload { display: block; }
@keyframes ma-reconnect-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes ma-spin { to { transform: rotate(360deg); } }
@keyframes ma-pulse { 50% { opacity: 0.5; } }
@keyframes ma-skeleton-wave { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* A barra sem valor parada no primeiro quadro ficaria vazia: vira o trilho inteiro no tom, a 40% (spec 0091, RN-10). */
  .ma-progress--indeterminate > .ma-progress__track > .ma-progress__fill {
    width: 100%; transform: none; animation: none; background: color-mix(in oklch, var(--tone) 40%, transparent);
  }
}

/* Gráficos (specs 0075 a 0081): a moldura, os eixos, as marcas e a legenda. A cor da série vem da classe de matiz. */
.ma-chart {
  --ma-chart-h: calc(var(--ma-space-16) * 5);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--ma-space-2); margin: 0; min-width: 0;
}
.ma-chart--h-sm { --ma-chart-h: calc(var(--ma-space-16) * 3); }
.ma-chart--h-lg { --ma-chart-h: calc(var(--ma-space-16) * 7); }
.ma-chart__title { grid-column: 1; grid-row: 1; font-size: var(--ma-text-sm); font-weight: var(--ma-weight-semibold); color: var(--ma-text); }
.ma-chart__tools { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: var(--ma-space-1); justify-self: end; }
.ma-chart__ruler { position: absolute; left: 0; right: 0; top: 0; height: var(--ma-chart-h); visibility: hidden; pointer-events: none; }
.ma-chart__plot, .ma-chart__data, .ma-chart__legend, .ma-chart__notice { grid-column: 1 / -1; min-width: 0; }
.ma-chart__plot { position: relative; min-height: var(--ma-chart-h); }
.ma-chart__plot--fit { min-height: 0; }
.ma-chart__plot--fixed { height: var(--ma-chart-h); display: flex; align-items: center; justify-content: center; }
.ma-chart__plot--fixed .ma-skeleton-group.ma-skeleton-group, .ma-chart__plot--fixed .ma-skeleton.ma-skeleton { height: 100%; }
.ma-chart__svg { display: block; overflow: visible; font-size: var(--ma-text-xs); }
.ma-chart__gridline { stroke: var(--ma-divider); stroke-width: 1; shape-rendering: crispEdges; }
.ma-chart__axis { stroke: var(--ma-border); stroke-width: 1; shape-rendering: crispEdges; }
.ma-chart__tick, .ma-chart__category { fill: var(--ma-text-muted); font-size: var(--ma-text-xs); }
.ma-chart__mark { fill: var(--series); transition: opacity var(--ma-duration-fast) var(--ma-ease-standard); }
.ma-chart__value { fill: var(--ma-text-secondary); font-size: var(--ma-text-xs); font-variant-numeric: tabular-nums; }
.ma-chart__value--inside { fill: var(--ma-surface); }
.ma-chart__legend {
  display: flex; flex-wrap: wrap; gap: var(--ma-space-2) var(--ma-space-4); list-style: none; margin: 0; padding: 0;
  font-size: var(--ma-text-xs); color: var(--ma-text-secondary);
}
.ma-chart__legend-item { display: inline-flex; align-items: center; gap: var(--ma-space-2); }
.ma-chart__swatch { flex: none; width: var(--ma-space-3); height: var(--ma-space-3); border-radius: var(--ma-radius-sm); background: var(--series); }
.ma-chart__swatch--line { height: calc(var(--ma-space-1) / 2); border-radius: var(--ma-radius-full); }
.ma-chart__swatch--area { background: var(--series-subtle); border: var(--ma-border-width) solid var(--series); }
.ma-chart__series--sky { --series: var(--ma-hue-sky); --series-subtle: var(--ma-hue-sky-subtle); }
.ma-chart__series--blue { --series: var(--ma-hue-blue); --series-subtle: var(--ma-hue-blue-subtle); }
.ma-chart__series--violet { --series: var(--ma-hue-violet); --series-subtle: var(--ma-hue-violet-subtle); }
.ma-chart__series--emerald { --series: var(--ma-hue-emerald); --series-subtle: var(--ma-hue-emerald-subtle); }
.ma-chart__series--teal { --series: var(--ma-hue-teal); --series-subtle: var(--ma-hue-teal-subtle); }
.ma-chart__series--amber { --series: var(--ma-hue-amber); --series-subtle: var(--ma-hue-amber-subtle); }
.ma-chart__series--orange { --series: var(--ma-hue-orange); --series-subtle: var(--ma-hue-orange-subtle); }
.ma-chart__series--rose { --series: var(--ma-hue-rose); --series-subtle: var(--ma-hue-rose-subtle); }
.ma-chart__hit { fill: transparent; }
.ma-chart__mark--dim { opacity: 0.25; }
.ma-chart [role="listbox"] { outline: none; }
.ma-chart [role="listbox"] [data-mark], .ma-chart__category--clickable { cursor: pointer; }
.ma-chart [role="listbox"]:focus-visible [data-active] { stroke: var(--ma-focus-ring); stroke-width: var(--ma-focus-ring-width); }
.ma-chart__tips { display: none; }
.ma-chart__legend-button {
  display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-1) var(--ma-space-2); margin: calc(var(--ma-space-1) * -1) calc(var(--ma-space-2) * -1);
  border: 0; border-radius: var(--ma-radius-sm); background: none; font: inherit; color: inherit; cursor: pointer;
}
.ma-chart__legend-button:hover { background: var(--ma-surface-hover); }
.ma-chart__legend-button[aria-pressed="false"] { color: var(--ma-text-muted); text-decoration: line-through; }
.ma-chart__legend-button[aria-pressed="false"] .ma-chart__swatch { opacity: 0.35; }
.ma-chart__legend-button:disabled { cursor: default; }
.ma-chart-tip {
  position: fixed; top: 0; left: 0; z-index: var(--ma-z-tooltip); pointer-events: none;
  display: flex; flex-direction: column; gap: var(--ma-space-1); min-width: calc(var(--ma-space-16) * 2); max-width: calc(var(--ma-space-16) * 5);
  padding: var(--ma-space-2) var(--ma-space-3); border-radius: var(--ma-radius-sm);
  background: var(--ma-surface-overlay); color: var(--ma-text-inverse); font-size: var(--ma-text-xs); line-height: var(--ma-leading-tight);
  box-shadow: var(--ma-shadow-md);
}
.ma-chart-tip[hidden] { display: none; }
.ma-chart-tip__title { font-weight: var(--ma-weight-semibold); }
.ma-chart-tip__row { display: flex; align-items: center; gap: var(--ma-space-2); opacity: 0.85; }
.ma-chart-tip__row--current { opacity: 1; font-weight: var(--ma-weight-semibold); }
.ma-chart-tip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-chart-tip__value { font-variant-numeric: tabular-nums; }
.ma-chart__line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.ma-chart__area { fill: var(--series-subtle); pointer-events: none; }
.ma-chart__band { fill: var(--series-subtle); pointer-events: none; }
.ma-chart__series { transition: opacity var(--ma-duration-fast) var(--ma-ease-standard); }
.ma-chart__series--dim { opacity: 0.25; }
.ma-chart__point { fill: var(--series); stroke: var(--ma-surface); stroke-width: 1; }
.ma-chart__point--ghost { fill: transparent; stroke: none; }
.ma-chart [role="listbox"]:focus-visible .ma-chart__point--ghost[data-active] { fill: var(--series); }
.ma-chart__reference { stroke: var(--ma-text-muted); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.ma-chart__reference-label, .ma-chart__zone-label { fill: var(--ma-text-secondary); font-size: var(--ma-text-xs); }
.ma-chart__zone { pointer-events: none; }
.ma-chart__zone--success { fill: var(--ma-success-subtle); }
.ma-chart__zone--warning { fill: var(--ma-warning-subtle); }
.ma-chart__zone--danger { fill: var(--ma-danger-subtle); }
.ma-chart__zone--info { fill: var(--ma-info-subtle); }
.ma-chart__zone--neutral { fill: var(--ma-neutral-subtle); }
.ma-chart-crosshair { position: fixed; z-index: var(--ma-z-tooltip); width: 1px; background: var(--ma-border); pointer-events: none; }
.ma-chart-crosshair[hidden] { display: none; }
.ma-chart__dot { fill: var(--series); fill-opacity: 0.7; stroke: var(--series); stroke-width: 1; }
.ma-chart__category--selected { fill: var(--ma-text); font-weight: var(--ma-weight-semibold); }
.ma-heatmap__cell { fill: var(--heat); stroke: none; }
.ma-heatmap__cell--empty { fill: none; stroke: var(--ma-border); stroke-width: 1; stroke-dasharray: 3 3; }
.ma-heatmap__swatch { background: var(--heat); }
.ma-heatmap__value { fill: var(--ma-text); font-size: var(--ma-text-xs); font-variant-numeric: tabular-nums; pointer-events: none; }
.ma-heatmap__value--light { fill: var(--ma-neutral-50); }
.ma-heatmap--s1 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 12%, transparent); }
.ma-heatmap--s2 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 30%, transparent); }
.ma-heatmap--s3 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 50%, transparent); }
.ma-heatmap--s4 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 72%, transparent); }
.ma-heatmap--s5 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 92%, transparent); }
.ma-heatmap--d1 { --heat: color-mix(in srgb, var(--ma-hue-orange-solid) 92%, transparent); }
.ma-heatmap--d2 { --heat: color-mix(in srgb, var(--ma-hue-orange-solid) 60%, transparent); }
.ma-heatmap--d3 { --heat: color-mix(in srgb, var(--ma-hue-orange-solid) 30%, transparent); }
.ma-heatmap--d4 { --heat: var(--ma-surface-sunken); }
.ma-heatmap--d5 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 30%, transparent); }
.ma-heatmap--d6 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 60%, transparent); }
.ma-heatmap--d7 { --heat: color-mix(in srgb, var(--ma-hue-blue-solid) 92%, transparent); }
.ma-chart__slice { stroke: var(--ma-surface); stroke-width: 1; }
.ma-chart__total { fill: var(--ma-text); font-size: var(--ma-text-lg); font-weight: var(--ma-weight-semibold); font-variant-numeric: tabular-nums; }
.ma-chart__total-label { fill: var(--ma-text-muted); font-size: var(--ma-text-xs); }
.ma-chart__ring { fill: none; stroke: var(--ma-divider); stroke-width: 1; }
.ma-chart--legend-side { grid-template-columns: auto minmax(0, 1fr); }
.ma-chart--legend-side > .ma-chart__plot { grid-column: 1; }
.ma-chart--legend-side > .ma-chart__legend { grid-column: 2; flex-direction: column; align-self: center; }
.ma-chart__series--radar .ma-chart__area { fill-opacity: 0.5; }
/* Sparkline (spec 0081): escala com o viewBox; o traço não engrossa. */
.ma-sparkline { display: inline-block; vertical-align: middle; width: 100%; min-width: calc(var(--ma-space-16) * 1.5); }
.ma-sparkline--md { height: var(--ma-space-10); }
.ma-sparkline--sm { height: var(--ma-space-6); width: calc(var(--ma-space-16) * 1.5); }
.ma-sparkline--empty { display: inline-flex; align-items: center; color: var(--ma-text-muted); }
.ma-sparkline__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ma-sparkline__line { fill: none; stroke: var(--series); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ma-sparkline__area { fill: var(--series-subtle); stroke: none; }
.ma-sparkline__bar { fill: var(--series); }

/* Arrastar entre áreas (spec 0098): os estados vêm do ma.js em data-*; a cópia e a marca de posição ficam no body. */
.ma-drop-container[data-dragging] { user-select: none; -webkit-user-select: none; }
.ma-drop-zone {
  display: flex; flex-direction: column; gap: var(--ma-space-2); min-width: 0; padding: var(--ma-space-2);
  border: var(--ma-border-width) dashed transparent; border-radius: var(--ma-radius-md);
  transition: background-color var(--ma-duration-fast) var(--ma-ease-standard), border-color var(--ma-duration-fast) var(--ma-ease-standard), opacity var(--ma-duration-fast) var(--ma-ease-standard);
}
.ma-drop-zone:focus { outline: none; }
.ma-drop-zone:focus-visible { outline: var(--ma-focus-ring-width) solid var(--ma-focus-ring); outline-offset: var(--ma-focus-ring-offset); }
.ma-drop-zone[data-drop="can"] { border-color: var(--ma-primary); }
.ma-drop-zone[data-drop="cannot"] { opacity: 0.5; }
.ma-drop-zone[data-drop-over] { background: var(--ma-primary-subtle); }
.ma-drop-zone__items { display: flex; flex-direction: column; gap: var(--ma-space-2); min-height: var(--ma-space-12); margin: 0; padding: 0; list-style: none; }
.ma-drop-zone__empty { min-height: var(--ma-space-12); }
.ma-drop-item { border-radius: var(--ma-radius-md); touch-action: manipulation; -webkit-touch-callout: none; }
.ma-drop-container:not([data-handle]) .ma-drop-item { cursor: grab; user-select: none; -webkit-user-select: none; }
.ma-drop-container:not([data-handle]) .ma-drop-item--disabled { cursor: not-allowed; }
.ma-drop-item--disabled { opacity: 0.6; }
.ma-drop-item[data-dragging] { opacity: 0.4; }
.ma-drop-handle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--ma-space-6); height: var(--ma-space-8); padding: 0; border: 0; border-radius: var(--ma-radius-sm);
  background: transparent; color: var(--ma-text-muted); cursor: grab; touch-action: manipulation; -webkit-touch-callout: none;
}
.ma-drop-handle:hover:not([aria-disabled="true"]) { background: var(--ma-surface-hover); color: var(--ma-text); }
.ma-drop-handle[aria-disabled="true"] { color: var(--ma-text-disabled); cursor: not-allowed; }
.ma-drop-ghost {
  position: fixed; top: 0; left: 0; z-index: var(--ma-z-tooltip); pointer-events: none; margin: 0;
  box-shadow: var(--ma-shadow-lg); opacity: 0.95; cursor: grabbing;
}
.ma-drop-indicator {
  position: fixed; z-index: var(--ma-z-tooltip); pointer-events: none;
  height: var(--ma-focus-ring-width); margin-top: calc(var(--ma-space-1) * -0.5); border-radius: var(--ma-radius-full); background: var(--ma-primary);
}
.ma-drop-indicator[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ma-drop-zone { transition: none; } }