/* Configurações › Importar base migrada (migration-ui.js). Tudo sob .migration; cores, raios e
   espaços vêm de premium.css. Só o contorno do botão de arquivo usa --control-border (a mesma
   borda do botão padrão, para os dois casarem). */
html body .workspace .migration {
  display: grid;
  gap: var(--p-s4);
  max-width: 880px;
}
html body .workspace .migration .migration-step {
  display: grid;
  gap: var(--p-s3);
  padding: var(--p-s6);
}
html body .workspace .migration .migration-done {
  padding: var(--p-s3) var(--p-s6);
}
.migration .migration-done-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-s3);
  min-height: 44px;
  margin: 0;
  font-size: 1rem;
  color: var(--p-ink-2);
}
.migration .migration-step-number {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--p-ink-2);
}
.migration h2 {
  margin: 0;
}
.migration h2:focus {
  outline: none;
}
.migration h2:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 4px;
}
.migration p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
/* A nota ao pé do campo fica alinhada à borda do texto, sem recuo próprio. */
.migration .context-note {
  padding: 0;
}
.migration :is(button, input):focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
}
.migration .migration-keep {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--p-s3);
}
.migration .migration-keep h3 {
  margin: 0 0 var(--p-s1);
  font-size: 1rem;
}
.migration .migration-keep p {
  color: var(--p-ink-2);
}
.migration .check-label {
  display: flex;
  align-items: center;
  gap: var(--p-s3);
  min-height: 44px;
  font-size: 1rem;
}
.migration .check-label input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}
.migration .migration-file {
  display: grid;
  gap: var(--p-s2);
}
.migration .migration-file input[type="file"] {
  font-size: 0.875rem;
}
.migration .migration-file input[type="file"]::file-selector-button {
  min-height: 2.75rem;
  margin-right: var(--p-s3);
  padding: 0.65rem var(--p-s4);
  border: 1px solid var(--control-border);
  border-radius: var(--p-r-control);
  background: var(--p-surface);
  color: var(--p-focus);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
}
.migration .migration-file input[type="file"]::file-selector-button:hover {
  background: var(--p-surface-2);
}
/* Aviso de erro: painel inteiro, sem barra lateral. Vazio, não ocupa espaço. */
.migration .migration-alert:not(:empty) {
  padding: var(--p-s4);
  border: 1px solid var(--earth);
  border-radius: var(--p-r-card);
  background: color-mix(in srgb, var(--earth) 6%, var(--p-surface));
  color: var(--earth);
  font-size: 1rem;
  line-height: 1.5;
}
.migration .migration-alert ul {
  display: grid;
  gap: var(--p-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Tabela: premium.css põe regras de tabela com especificidade de id; #content as supera sem !important. */
#content .migration .migration-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
#content .migration .migration-table caption {
  padding-bottom: var(--p-s2);
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
}
#content .migration .migration-table :is(th, td) {
  padding: var(--p-s3);
  border-bottom: 1px solid var(--p-line-soft);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
#content .migration .migration-table tbody th {
  font-weight: 500;
}
#content .migration .migration-table thead th {
  color: var(--p-ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
#content .migration .migration-table :is(th, td):not(:first-child) {
  width: 7rem;
  text-align: right;
}
#content .migration .migration-table td.is-warn {
  color: var(--earth);
  font-weight: 600;
}
.migration input[name="confirm"] {
  box-shadow: none;
  border: 1px solid var(--control-border);
}
/* Um anel só: o contorno de foco cai por dentro da borda do campo. */
.migration input[name="confirm"]:focus,
.migration input[name="confirm"]:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--p-focus);
  outline-offset: -2px;
  border-color: var(--p-focus);
}
.migration form[data-migration-form] {
  display: grid;
  gap: var(--p-s3);
}
@media (max-width: 640px) {
  html body .workspace .migration .migration-step {
    padding: var(--p-s4);
  }
  html body .workspace .migration .migration-done {
    padding: var(--p-s2) var(--p-s4);
  }
  #content .migration .migration-table :is(th, td) {
    padding: var(--p-s2);
  }
  #content .migration .migration-table :is(th, td):not(:first-child) {
    width: 5.5rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html body .workspace .migration .migration-step {
    animation: migration-entra 0.24s ease-out both;
  }
}
@keyframes migration-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}