.pg-migration { margin: 28px 0; padding: clamp(16px,3vw,28px); border: 1px solid var(--c-border); border-radius: 16px; color: var(--c-ink); background: var(--c-surface); container-type: inline-size; }
.pg-migration h3 { margin: 0 0 22px; font-size: 1.15rem; }
.pg-migration .pg-branches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto auto; gap: 0 12px; }
.pg-migration section { min-width: 0; padding: 12px; border: 1px solid #60717b; border-top-width: 5px; border-radius: 10px; display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.pg-migration section.pg-new { border-color: #9c650b; }
.pg-migration h4 { margin: 0 0 16px; font-size: 1rem; }
.pg-migration h4 > span { display: block; font-size: .8rem; font-weight: 400; margin-bottom: 4px; }
.pg-migration dl { display: contents; margin: 0; }
.pg-migration dl > div { border-top: 1px solid var(--c-border); padding: 12px 0; min-width: 0; }
.pg-migration dt { font-size: .85rem; color: var(--c-ink-soft); }
.pg-migration dd { margin: 5px 0 0; min-width: 0; }
.pg-migration dd > span { display: block; margin-top: 4px; font-size: .85rem; }
.pg-migration .pg-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 14px; }
.pg-migration .pg-order > strong { color: #086b66; }
.pg-migration .source { margin-bottom: 0; }
@container (max-width: 31em) { .pg-migration .pg-order { display: block; } .pg-migration .pg-order > * { display: block; } .pg-migration .pg-arrow { transform: rotate(90deg); width: 1em; margin: 6px 0; } }
@container (max-width: 13em) { .pg-migration .pg-branches { grid-template-columns: minmax(0,1fr); gap: 16px; } .pg-migration section { grid-row: auto; grid-template-rows: auto; } }
@media (prefers-color-scheme: dark) { .pg-migration .pg-order > strong { color: #83e3ce; } }