.checkpoint-wrap { display: flex; justify-content: flex-end; margin-top: var(--spacing-lg); }
.checkpoint-wrap .checkpoint__trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); min-height: 2.75rem; color: var(--primary-color); border-color: var(--primary-color); font-weight: 600; }
.checkpoint-wrap .checkpoint__trigger:hover, .checkpoint-wrap .checkpoint__trigger:focus-visible { background: var(--primary-color); color: var(--neutrals-0); }
.checkpoint__trigger svg { flex-shrink: 0; }
body:has(#checkpointPanel[open]) { overflow: hidden; }
.checkpoint.custom-modalcontent { position: fixed; inset: 0; width: min(44rem, calc(100% - var(--spacing-2xl))); max-height: calc(100dvh - var(--spacing-2xl)); padding: var(--spacing-xl); gap: var(--spacing-lg); border: var(--border-thin) solid var(--surface-border-light); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); background: var(--surface-bg); text-align: left; overflow: hidden; }
.checkpoint:not([open]) { display: none; }
.checkpoint::backdrop { background: rgba(var(--slate-600-rgb), 0.45); }
.checkpoint .checkpoint__header { flex-shrink: 0; gap: var(--spacing-lg); margin: 0; padding-bottom: var(--spacing-lg); border-color: var(--surface-border-light); }
.checkpoint .checkpoint__header h2 { margin: 0; }
.checkpoint__header > button { flex-shrink: 0; }
.checkpoint__content { min-height: 0; overflow-y: auto; padding: var(--spacing-xs); }
.checkpoint .checkpoint__content p { margin: 0 0 var(--spacing-md); }
.checkpoint .checkpoint__content p[hidden] { display: none; }
.checkpoint__section { padding-top: var(--spacing-lg); }
.checkpoint__section + .checkpoint__section { margin-top: var(--spacing-lg); border-top: var(--border-thin) solid var(--surface-border-light); }
.checkpoint .checkpoint__section h3 { margin: 0 0 var(--spacing-md); }
.checkpoint__row { display: flex; align-items: end; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.checkpoint__row[hidden] { display: none; }
.checkpoint .checkpoint__field { display: flex; flex: 1 1 16rem; flex-direction: column; gap: var(--spacing-xs); margin: 0; min-width: 0; }
.checkpoint input { width: 100%; min-width: 0; border: var(--border-thin) solid var(--surface-border-light); border-radius: var(--radius-md); padding: var(--spacing-sm); color: var(--textcolor-fullcontrast); background: var(--surface-bg); }
.checkpoint input[readonly] { background: var(--primary-tint); }
.checkpoint input:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.checkpoint .checkpoint__confirm { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1 1 100%; margin: 0; }
.checkpoint input[type="checkbox"] { width: auto; flex-shrink: 0; }
.checkpoint .btn { margin: 0; }
.checkpoint .checkpoint__note { font-size: var(--text-sm); color: var(--textcolor-80contrast); }
@media (max-width: 640px) {
  .checkpoint__trigger { width: 100%; }
  .checkpoint.custom-modalcontent { width: calc(100% - var(--spacing-lg)); max-height: calc(100dvh - var(--spacing-lg)); padding: var(--spacing-lg); }
  .checkpoint .checkpoint__header h2 { font-size: var(--text-xl); }
  .checkpoint__row > button { width: 100%; justify-content: center; }
}