.po-documents {
  --po-paper: #fff;
  --po-paper-edge: #e7edf8;
  --po-paper-ink: #080e29;
  --po-paper-rule: #e8effa;
  --po-paper-placeholder: #d9e4f6;
  position: relative;
  container-type: inline-size;
  width: 100%;
  min-height: 142px;
  aspect-ratio: 2.62;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.po-documents-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgb(0 124 254 / 5%) 100%);
}

.po-documents-backdrop::before,
.po-documents-backdrop::after {
  content: '';
  position: absolute;
  bottom: -46%;
  border-radius: 50%;
  background: linear-gradient(165deg, rgb(0 124 254 / 6%), rgb(0 124 254 / 16%));
}

.po-documents-backdrop::before {
  left: -3%;
  width: 62%;
  height: 140%;
  transform: rotate(-18deg);
}

.po-documents-backdrop::after {
  right: -9%;
  width: 45%;
  height: 136%;
  transform: rotate(16deg);
}

.po-document-slot {
  position: absolute;
  width: 30%;
  transform: rotate(var(--po-rotation));
  transform-origin: 50% 85%;
}

.po-document-slot--payslip {
  --po-document-accent: #09b878;
  left: 5%;
  top: 31%;
  z-index: 1;
}

.po-document-slot--24q {
  --po-document-accent: var(--mark-blue, #007cfe);
  left: 23%;
  top: 11%;
  width: 31%;
  z-index: 2;
}

.po-document-slot--16 {
  --po-document-accent: var(--mark-violet, #6a31ee);
  left: 44%;
  top: 4%;
  z-index: 4;
}

.po-document-slot--register {
  --po-document-accent: var(--mark-orange, #ff8a00);
  left: 64%;
  top: 28%;
  width: 29%;
  z-index: 3;
}

.po-document-enter,
.po-document-float,
.po-document-parallax {
  width: 100%;
  transform-origin: 50% 80%;
}

.po-document {
  width: 100%;
  aspect-ratio: .7;
  box-sizing: border-box;
  padding: 2.35cqw;
  border: 1px solid var(--po-paper-edge);
  border-radius: clamp(7px, 1.9cqw, 16px);
  background: linear-gradient(165deg, var(--po-paper) 55%, color-mix(in srgb, var(--po-paper) 92%, var(--po-document-accent)));
  box-shadow: 0 2px 4px rgb(24 36 62 / 3%), 0 12px 32px rgb(24 36 62 / 10%);
  color: var(--po-paper-ink);
}

.po-document-header {
  display: flex;
  align-items: center;
  gap: 1.35cqw;
  margin-bottom: 1.6cqw;
}

.po-document-icon {
  display: grid;
  place-items: center;
  flex: 0 0 6cqw;
  width: 6cqw;
  height: 6cqw;
  border-radius: 1.5cqw;
  background: color-mix(in srgb, var(--po-document-accent) 16%, var(--po-paper));
  color: var(--po-document-accent);
}

.po-document-icon svg {
  display: block;
  width: 4.15cqw;
  height: 4.4cqw;
}

.po-document-title {
  font-size: clamp(9px, 2.65cqw, 21px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.po-document-slot--register .po-document-title {
  font-size: clamp(8px, 2.36cqw, 19px);
  letter-spacing: -.035em;
}

.po-document-rule {
  height: .95cqw;
  margin-bottom: 1.4cqw;
  overflow: hidden;
  border-radius: 1cqw;
  background: var(--po-paper-rule);
}

.po-document-rule span {
  display: block;
  width: 56%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--po-document-accent) 50%, white), var(--po-document-accent));
}

.po-document-lines {
  display: grid;
  gap: 1.05cqw;
  margin-bottom: 1.35cqw;
}

.po-document-lines span {
  display: block;
  width: 100%;
  height: .95cqw;
  border-radius: .4cqw;
  background: var(--po-paper-placeholder);
}

.po-document-lines span:nth-child(2) { width: 73%; }
.po-document-lines span:nth-child(3) { width: 29%; }

.po-document-table { display: grid; gap: 1.2cqw; }
.po-document-table-head,
.po-document-table-row {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr .65fr;
  gap: 1.1cqw;
}

.po-document-table-head {
  padding: .7cqw .85cqw;
  border-radius: .5cqw;
  background: var(--po-paper-rule);
}

.po-document-table-head span,
.po-document-table-row span {
  height: .85cqw;
  border-radius: .35cqw;
  background: var(--po-paper-placeholder);
}

.po-document-table-row { padding: 0 .85cqw; }
.po-document-table-row span { width: 80%; opacity: .72; }
.po-document-table-row span:last-child { width: 70%; justify-self: end; }
.po-document-table-row:nth-child(3) span:first-child { width: 56%; }
.po-document-table-row:nth-child(4) span:nth-child(2) { width: 62%; }

:root[data-theme='dark'] .po-documents {
  --po-paper: #18243b;
  --po-paper-edge: #2c3d58;
  --po-paper-ink: #eef3ff;
  --po-paper-rule: #273752;
  --po-paper-placeholder: #3c5277;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .po-documents {
    --po-paper: #18243b;
    --po-paper-edge: #2c3d58;
    --po-paper-ink: #eef3ff;
    --po-paper-rule: #273752;
    --po-paper-placeholder: #3c5277;
  }
}